feat: Add noScroll props.

Author: jaywcjlove

README.md

@@ -53,7 +53,7 @@ class Demo extends React.Component {
 ### Props
 
 ```ts
-export interface ICodePreviewProps {
+ICodePreviewProps extends ISplitProps {
   prefixCls?: string;
   style?: React.CSSProperties;
   /**
@@ -80,6 +80,10 @@ export interface ICodePreviewProps {
    * Whether to display the preview interface.
    */
   noPreview?: boolean;
+  /**
+   * Preview area does not display scroll bars
+   */
+  noScroll?: boolean;
   /**
    * Dependent component
    */

src/index.less

@@ -10,6 +10,10 @@
   margin-bottom: 16px;
   background-color: #fff;
   max-height: 420px;
+  min-height: 12px;
+  &-noScroll {
+    max-height: initial;
+  }
   &-bordered {
     box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
   }

src/index.tsx

@@ -37,6 +37,10 @@ export interface ICodePreviewProps extends ISplitProps {
    * Whether to display the preview interface.
    */
   noPreview?: boolean;
+  /**
+   * Preview area does not display scroll bars
+   */
+  noScroll?: boolean;
   /**
    * Dependent component
    */
@@ -143,13 +147,14 @@ export default class CodePreview extends React.PureComponent<ICodePreviewProps,
     });
   }
   public render() {
-    const { style, prefixCls, className, code, dependencies, bordered, noCode, noPreview, bgWhite, ...otherProps } = this.props;
+    const { style, prefixCls, className, code, dependencies, bordered, noCode, noPreview, noScroll, bgWhite, ...otherProps } = this.props;
     const isOneItem = (!noCode && !noPreview) ? false : (!noCode || !noPreview);
     let visiable = this.state.width === 1 ? false : [isOneItem ? 1 : 2];
     return (
       <Split
         visiable={visiable}
         className={classnames(className, prefixCls, {
+          [`${prefixCls}-noScroll`]: noScroll,
           [`${prefixCls}-OneItem`]: isOneItem,
           [`${prefixCls}-bordered`]: bordered,
           [`${prefixCls}-fullScreen`]: this.state.fullScreen,

website/App.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { Switch, Divider, Button } from 'uiw';
 import Markdown from './Markdown';
 import GithubCorner from './GithubCorner';
-import CodePreview from '../src';
 import DocumentStr from '../README.md'; // @ts-ignore
+import CodePreview from '../src';
 import styles from './App.module.less';
 
 const code = `import { Button, Divider, Icon } from 'uiw';
 
 ReactDOM.render(
   <div>
     <Button type="primary">主要按钮</Button>
+    <Button type="dark">暗按钮</Button><br /><br /><br /><br /><br /><br />
     <Button type="dark">暗按钮</Button>
   </div>,
   _mount_
@@ -20,14 +21,18 @@ ReactDOM.render(
 interface IAppState {
   bgWhite: boolean;
   noCode: boolean;
+  noScroll: boolean;
   noPreview: boolean;
+  bordered: boolean;
 }
 
 export default class App extends React.PureComponent<{}, IAppState> {
   public state = {
     bgWhite: false,
     noCode: false,
+    noScroll: false,
     noPreview: false,
+    bordered: true,
   }
   private handleChange(keyName: string,e: React.ChangeEvent<HTMLInputElement>) {
     const state = { ...this.state,[`${keyName}`]: e.target.checked }
@@ -42,8 +47,9 @@ export default class App extends React.PureComponent<{}, IAppState> {
         <h1 className={styles.title}>React Code Preview</h1>
         <CodePreview
           code={code}
-          // style={{ maxHeight: 230 }}
           dependencies={{ Button }}
+          bordered={this.state.bordered}
+          noScroll={this.state.noScroll}
           bgWhite={this.state.bgWhite}
           noCode={this.state.noCode}
           noPreview={this.state.noPreview}
@@ -57,25 +63,43 @@ export default class App extends React.PureComponent<{}, IAppState> {
             checked={this.state.bgWhite}
             onChange={this.handleChange.bind(this, 'bgWhite')}
           >
-            背景 `bgWhite`
+            背景 `bgWhite={this.state.bgWhite.toString()}`
           </Switch>
-          <Divider type="vertical" />
+          <br />
           <Switch
             data-checked="显示"
             data-unchecked="隐藏"
             checked={this.state.noCode}
             onChange={this.handleChange.bind(this, 'noCode')}
           >
-            是否显示代码 `noCode`
+            是否显示代码 `noCode={this.state.noCode.toString()}`
           </Switch>
-          <Divider type="vertical" />
+          <br />
           <Switch
             data-checked="显示"
             data-unchecked="隐藏"
             checked={this.state.noPreview}
             onChange={this.handleChange.bind(this, 'noPreview')}
           >
-            是否显示实例预览 `noPreview`
+            是否显示实例预览 `noPreview={this.state.noPreview.toString()}`
+          </Switch>
+          <br />
+          <Switch
+            data-checked="显示"
+            data-unchecked="隐藏"
+            checked={this.state.noScroll}
+            onChange={this.handleChange.bind(this, 'noScroll')}
+          >
+            是否显示滚动条 `noScroll={this.state.noScroll.toString()}`
+          </Switch>
+          <br />
+          <Switch
+            data-checked="显示"
+            data-unchecked="隐藏"
+            checked={this.state.bordered}
+            onChange={this.handleChange.bind(this, 'bordered')}
+          >
+            是否显示边框 `bordered={this.state.bordered.toString()}`
           </Switch>
         </div>
         <Markdown source={DocumentStrSource} />