feat: add visible props, visiable mark is deprecated. (#148)

Author: jaywcjlove

core/README.md

@@ -56,26 +56,26 @@ export default Demo;
 
 ### Available for layout
 
-Setting `visiable={false}` disables the drag bar, which can be used for layout.
+Setting `visible={false}` disables the drag bar, which can be used for layout.
 
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import Split from '@uiw/react-split';
 
 const Demo = () => (
   <div>
-    <Split mode="vertical" visiable={false}>
+    <Split mode="vertical" visible={false}>
       <div style={{ minHeight: 45, background: '#dcdcdc' }}>Header</div>
-      <Split visiable={false}>
+      <Split visible={false}>
         <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>Sider</div>
         <div style={{ width: '100%', background: '#ececec' }}>Content</div>
       </Split>
       <div style={{ minHeight: 45, background: '#dcdcdc' }}>Footer</div>
     </Split>
     <div style={{ height: 20 }}></div>
-    <Split visiable={false}>
+    <Split visible={false}>
       <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>Sider</div>
-      <Split mode="vertical" visiable={false} style={{ width: '100%' }}>
+      <Split mode="vertical" visible={false} style={{ width: '100%' }}>
         <div style={{ minHeight: 45, background: '#dcdcdc' }}>Header</div>
         <div style={{ minHeight: 85, background: '#b5b5b5' }}>Content</div>
         <div style={{ minHeight: 45, background: '#dcdcdc' }}>Footer</div>
@@ -319,6 +319,10 @@ export interface SplitProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   /** Set the drag and drop toolbar as a line style. */
   lineBar?: boolean;
   /** Set the dragged toolbar, whether it is visible or not */
+  visible?: boolean | number[];
+  /**
+   * @deprecated Use `visible` instead
+   */
   visiable?: boolean | number[];
   /**
    * Set the drag and drop toolbar, disable

core/src/index.tsx

@@ -17,6 +17,10 @@ export interface SplitProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   /** Set the drag and drop toolbar as a line style. */
   lineBar?: boolean;
   /** Set the dragged toolbar, whether it is visible or not */
+  visible?: boolean | number[];
+  /**
+   * @deprecated Use `visible` instead
+   */
   visiable?: boolean | number[];
   /**
    * Set the drag and drop toolbar, disable
@@ -149,6 +153,7 @@ export default class Split extends React.Component<SplitProps, SplitState> {
       children,
       mode,
       visiable,
+      visible = this.props.visible ?? this.props.visiable,
       renderBar,
       lineBar,
       disable,
@@ -169,7 +174,7 @@ export default class Split extends React.Component<SplitProps, SplitState> {
             className: [`${prefixCls}-pane`, element.props.className].filter(Boolean).join(' ').trim(),
             style: { ...element.props.style },
           });
-          const visiableBar = visiable === true || (visiable && visiable.includes((idx + 1) as never)) || false;
+          const visibleBar = visible === true || (visible && visible.includes((idx + 1) as never)) || false;
           const barProps = {
             className: [
               `${prefixCls}-bar`,
@@ -184,9 +189,9 @@ export default class Split extends React.Component<SplitProps, SplitState> {
             barProps.className = [barProps.className, disable ? 'disable' : null].filter(Boolean).join(' ').trim();
           }
           let BarCom = null;
-          if (idx !== 0 && visiableBar && renderBar) {
+          if (idx !== 0 && visibleBar && renderBar) {
             BarCom = renderBar({ ...barProps, onMouseDown: this.onMouseDown.bind(this, idx + 1) });
-          } else if (idx !== 0 && visiableBar) {
+          } else if (idx !== 0 && visibleBar) {
             BarCom = React.createElement(
               'div',
               { ...barProps },