@uiw/react-split - npm Package Compare versions

Comparing version 5.9.0 to 5.9.1

cjs/index.d.ts

@@ -19,2 +19,6 @@ import React from 'react';
     /** Set the dragged toolbar, whether it is visible or not */
+    visible?: boolean | number[];
+    /**
+     * @deprecated Use `visible` instead
+     */
     visiable?: boolean | number[];
@@ -21,0 +25,0 @@ /**

cjs/index.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -18,32 +18,32 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "renderBar", "lineBar", "disable", "onDragEnd", "onDragging"];
-var Split = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Split, _React$Component);
-  var _super = (0, _createSuper2.default)(Split);
+var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "visible", "renderBar", "lineBar", "disable", "onDragEnd", "onDragging"];
+var Split = exports["default"] = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Split, _React$Component);
+  var _super = (0, _createSuper2["default"])(Split);
   function Split(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, Split);
+    (0, _classCallCheck2["default"])(this, Split);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
       dragging: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "warpper", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "paneNumber", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startX", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startY", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "move", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "target", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "boxWidth", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "boxHeight", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preWidth", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextWidth", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preHeight", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextHeight", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preSize", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nextSize", void 0);
-    _this.onDragEnd = _this.onDragEnd.bind((0, _assertThisInitialized2.default)(_this));
-    _this.onDragging = _this.onDragging.bind((0, _assertThisInitialized2.default)(_this));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "warpper", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "paneNumber", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startX", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startY", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "move", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "target", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "boxWidth", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "boxHeight", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preWidth", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "nextWidth", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preHeight", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "nextHeight", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preSize", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "nextSize", void 0);
+    _this.onDragEnd = _this.onDragEnd.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.onDragging = _this.onDragging.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
   }
-  (0, _createClass2.default)(Split, [{
+  (0, _createClass2["default"])(Split, [{
     key: "componentWillUnmount",
@@ -150,3 +150,4 @@ value: function componentWillUnmount() {
     value: function render() {
-      var _this2 = this;
+      var _this$props$visible,
+        _this2 = this;
       var _this$props2 = this.props,
@@ -158,2 +159,4 @@ prefixCls = _this$props2.prefixCls,
         visiable = _this$props2.visiable,
+        _this$props2$visible = _this$props2.visible,
+        visible = _this$props2$visible === void 0 ? (_this$props$visible = this.props.visible) !== null && _this$props$visible !== void 0 ? _this$props$visible : this.props.visiable : _this$props2$visible,
         renderBar = _this$props2.renderBar,
@@ -164,7 +167,7 @@ lineBar = _this$props2.lineBar,
         onDragging = _this$props2.onDragging,
-        other = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+        other = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
       var dragging = this.state.dragging;
       var cls = [prefixCls, className, "".concat(prefixCls, "-").concat(mode), dragging ? 'dragging' : null].filter(Boolean).join(' ').trim();
-      var child = _react.default.Children.toArray(children);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      var child = _react["default"].Children.toArray(children);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
         className: cls
@@ -175,8 +178,8 @@ }, other), {}, {
         },
-        children: _react.default.Children.map(child, function (element, idx) {
+        children: _react["default"].Children.map(child, function (element, idx) {
           var props = Object.assign({}, element.props, {
             className: ["".concat(prefixCls, "-pane"), element.props.className].filter(Boolean).join(' ').trim(),
-            style: (0, _objectSpread2.default)({}, element.props.style)
+            style: (0, _objectSpread2["default"])({}, element.props.style)
           });
-          var visiableBar = visiable === true || visiable && visiable.includes(idx + 1) || false;
+          var visibleBar = visible === true || visible && visible.includes(idx + 1) || false;
           var barProps = {
@@ -189,13 +192,13 @@ className: ["".concat(prefixCls, "-bar"), lineBar ? "".concat(prefixCls, "-line-bar") : null, !lineBar ? "".concat(prefixCls, "-large-bar") : null].filter(Boolean).join(' ').trim()
           var BarCom = null;
-          if (idx !== 0 && visiableBar && renderBar) {
-            BarCom = renderBar((0, _objectSpread2.default)((0, _objectSpread2.default)({}, barProps), {}, {
+          if (idx !== 0 && visibleBar && renderBar) {
+            BarCom = renderBar((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, barProps), {}, {
               onMouseDown: _this2.onMouseDown.bind(_this2, idx + 1)
             }));
-          } else if (idx !== 0 && visiableBar) {
-            BarCom = /*#__PURE__*/_react.default.createElement('div', (0, _objectSpread2.default)({}, barProps), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          } else if (idx !== 0 && visibleBar) {
+            BarCom = /*#__PURE__*/_react["default"].createElement('div', (0, _objectSpread2["default"])({}, barProps), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               onMouseDown: _this2.onMouseDown.bind(_this2, idx + 1)
             }));
           }
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
-            children: [BarCom, /*#__PURE__*/_react.default.cloneElement(element, (0, _objectSpread2.default)({}, props))]
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+            children: [BarCom, /*#__PURE__*/_react["default"].cloneElement(element, (0, _objectSpread2["default"])({}, props))]
           }, idx);
@@ -207,5 +210,4 @@ })
   return Split;
-}(_react.default.Component);
-exports.default = Split;
-(0, _defineProperty2.default)(Split, "defaultProps", {
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Split, "defaultProps", {
   prefixCls: 'w-split',
@@ -212,0 +214,0 @@ visiable: true,

esm/index.d.ts

@@ -19,2 +19,6 @@ import React from 'react';
     /** Set the dragged toolbar, whether it is visible or not */
+    visible?: boolean | number[];
+    /**
+     * @deprecated Use `visible` instead
+     */
     visiable?: boolean | number[];
@@ -21,0 +25,0 @@ /**

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "renderBar", "lineBar", "disable", "onDragEnd", "onDragging"];
+var _excluded = ["prefixCls", "className", "children", "mode", "visiable", "visible", "renderBar", "lineBar", "disable", "onDragEnd", "onDragging"];
 import React from 'react';
@@ -124,2 +124,3 @@ import "./style/index.css";
   render() {
+    var _this$props$visible;
     var _this$props = this.props,
@@ -131,3 +132,3 @@ {
         mode,
-        visiable,
+        visible = (_this$props$visible = this.props.visible) != null ? _this$props$visible : this.props.visiable,
         renderBar,
@@ -152,3 +153,3 @@ lineBar,
         });
-        var visiableBar = visiable === true || visiable && visiable.includes(idx + 1) || false;
+        var visibleBar = visible === true || visible && visible.includes(idx + 1) || false;
         var barProps = {
@@ -161,7 +162,7 @@ className: [prefixCls + "-bar", lineBar ? prefixCls + "-line-bar" : null, !lineBar ? prefixCls + "-large-bar" : null].filter(Boolean).join(' ').trim()
         var BarCom = null;
-        if (idx !== 0 && visiableBar && renderBar) {
+        if (idx !== 0 && visibleBar && renderBar) {
           BarCom = renderBar(_extends({}, barProps, {
             onMouseDown: this.onMouseDown.bind(this, idx + 1)
           }));
-        } else if (idx !== 0 && visiableBar) {
+        } else if (idx !== 0 && visibleBar) {
           BarCom = /*#__PURE__*/React.createElement('div', _extends({}, barProps), /*#__PURE__*/_jsx("div", {
@@ -168,0 +169,0 @@ onMouseDown: this.onMouseDown.bind(this, idx + 1)

package.json

 {
   "name": "@uiw/react-split",
-  "version": "5.9.0",
+  "version": "5.9.1",
   "description": "A piece of content can be divided into areas that can be dragged to adjust the width or height.",
@@ -8,18 +8,2 @@ "main": "cjs/index.js",
   "homepage": "https://uiwjs.github.io/react-split",
-  "scripts": {
-    "prepare": "npm run build",
-    "released": "npm run build && npm run bundle && npm run bundle:min && npm run doc",
-    "doc": "kkt build --app-src ./website",
-    "start": "kkt start --app-src ./website",
-    "css:watch": "compile-less -d src -o esm --watch",
-    "css:build": "compile-less -d src -o esm",
-    "css:build:dist": "compile-less -d src --combine dist.css --rm-global",
-    "bundle": "ncc build src/index.tsx --target web --filename split",
-    "bundle:min": "ncc build src/index.tsx --target web --filename split --minify",
-    "watch": "tsbb watch src/*.tsx --use-babel & npm run css:watch",
-    "build": "tsbb build src/*.tsx --use-babel && npm run css:build && npm run css:build:dist",
-    "test": "tsbb test",
-    "coverage": "tsbb test --coverage --bail",
-    "type-check": "tsc --noEmit"
-  },
   "repository": {
@@ -35,3 +19,2 @@ "type": "git",
     "dist",
-    "README-zh.md",
     "esm",
@@ -45,46 +28,5 @@ "cjs"
   "devDependencies": {
-    "@kkt/less-modules": "^7.4.9",
-    "@kkt/ncc": "~1.0.8",
-    "@kkt/raw-modules": "^7.4.9",
-    "@kkt/scope-plugin-options": "^7.4.9",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@uiw/react-codepen": "^1.0.2",
-    "@uiw/react-codesandbox": "^1.1.5",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~4.1.0",
-    "@uiw/reset.css": "~1.0.6",
-    "@wcj/dark-mode": "^1.0.14",
-    "compile-less-cli": "~1.8.11",
-    "goober": "^2.1.13",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.6.0",
-    "jest-environment-node": "^29.5.0",
-    "jest-watch-typeahead": "^2.2.2",
-    "kkt": "^7.4.9",
-    "markdown-react-code-preview-loader": "^2.1.2",
     "react": "^18.2.0",
-    "react-code-preview-layout": "^3.0.0",
-    "react-dom": "^18.2.0",
-    "tsbb": "^4.1.5",
-    "uiw": "^4.21.14"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react-dom": "^18.2.0"
   }
 }

README.md

@@ -1,3 +0,2 @@
-Split
-===
+# Split
 
@@ -47,19 +46,11 @@ [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-split.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-split)
       </div>
-      <div style={{ width: '80%', minWidth: 100 }}>
-        Right Pane
-      </div>
+      <div style={{ width: '80%', minWidth: 100 }}>Right Pane</div>
     </Split>
-    <Split
-      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}
-    >
-      <div style={{ minWidth: 60 }}>
-        test
-      </div>
-      <div  style={{ minWidth: 80, flex: 1 }}>
-        Right Pane
-      </div>
+    <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
+      <div style={{ minWidth: 60 }}>test</div>
+      <div style={{ minWidth: 80, flex: 1 }}>Right Pane</div>
     </Split>
   </div>
 );
-export default Demo
+export default Demo;
 ```
@@ -69,3 +60,3 @@
 
-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.
 
@@ -78,33 +69,17 @@ ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
   <div>
-    <Split mode="vertical" visiable={false}>
-      <div style={{ minHeight: 45, background: '#dcdcdc' }}>
-        Header
-      </div>
-      <Split visiable={false}>
-        <div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>
-          Sider
-        </div>
-        <div style={{ width: '100%', background: '#ececec' }}>
-          Content
-        </div>
+    <Split mode="vertical" visible={false}>
+      <div style={{ minHeight: 45, background: '#dcdcdc' }}>Header</div>
+      <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>
+      <div style={{ minHeight: 45, background: '#dcdcdc' }}>Footer</div>
     </Split>
     <div style={{ height: 20 }}></div>
-    <Split visiable={false}>
-      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>
-        Sider
-      </div>
-      <Split mode="vertical" visiable={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>
+    <Split visible={false}>
+      <div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>Sider</div>
+      <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>
       </Split>
@@ -114,4 +89,3 @@ </Split>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -127,18 +101,9 @@
   <Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
-    <div>
-      Left Pane
-    </div>
-    <div>
-      Center Pane
-    </div>
-    <div>
-      Center Pane
-    </div>
-    <div style={{ flex: 1 }}>
-      Right Pane
-    </div>
+    <div>Left Pane</div>
+    <div>Center Pane</div>
+    <div>Center Pane</div>
+    <div style={{ flex: 1 }}>Right Pane</div>
   </Split>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -155,30 +120,15 @@
     <Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
-      <div>
-        Left Pane
-      </div>
-      <div>
-        Center Pane
-      </div>
-      <div>
-        Center Pane
-      </div>
-      <div style={{ flex: 1 }}>
-        Right Pane
-      </div>
+      <div>Left Pane</div>
+      <div>Center Pane</div>
+      <div>Center Pane</div>
+      <div style={{ flex: 1 }}>Right Pane</div>
     </Split>
     <Split mode="vertical" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
-      <div style={{ height: '33.3%' }}>
-        Left Pane
-      </div>
-      <div style={{ height: '33.3%' }}>
-        Center Pane
-      </div>
-      <div style={{ flex: 1 }}>
-        Right Pane
-      </div>
+      <div style={{ height: '33.3%' }}>Left Pane</div>
+      <div style={{ height: '33.3%' }}>Center Pane</div>
+      <div style={{ flex: 1 }}>Right Pane</div>
     </Split>
   </div>
 );
-export default Demo
-;
+export default Demo;
 ```
@@ -194,12 +144,7 @@
   <Split mode="vertical" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}>
-    <div style={{ height: '50%' }}>
-      Top Pane
-    </div>
-    <div style={{ height: '50%' }}>
-      Bottom Pane
-    </div>
+    <div style={{ height: '50%' }}>Top Pane</div>
+    <div style={{ height: '50%' }}>Bottom Pane</div>
   </Split>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -216,21 +161,12 @@
     <Split mode="vertical">
-      <div style={{ height: '50%' }}>
-        Top Pane
-      </div>
+      <div style={{ height: '50%' }}>Top Pane</div>
       <Split style={{ height: '50%' }}>
-        <div>
-          Left Pane
-        </div>
-        <div style={{ flex: 1 }}>
-          Right Pane
-        </div>
+        <div>Left Pane</div>
+        <div style={{ flex: 1 }}>Right Pane</div>
       </Split>
     </Split>
-    <div style={{ flex: 1 }}>
-      Right Pane
-    </div>
+    <div style={{ flex: 1 }}>Right Pane</div>
   </Split>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -249,30 +185,15 @@
     <Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
-      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
-        Left Pane
-      </div>
-      <div style={{ flex: 1 }}>
-        Right Pane
-      </div>
+      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>Left Pane</div>
+      <div style={{ flex: 1 }}>Right Pane</div>
     </Split>
     <Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
-      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
-        Pane 1
-      </div>
-      <div style={{ maxWidth: 60 }}>
-        Pane 2
-      </div>
-      <div>
-        Pane 3
-      </div>
-      <div>
-        Pane 4
-      </div>
-      <div style={{ flex: 1 }}>
-        Pane 5
-      </div>
+      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>Pane 1</div>
+      <div style={{ maxWidth: 60 }}>Pane 2</div>
+      <div>Pane 3</div>
+      <div>Pane 4</div>
+      <div style={{ flex: 1 }}>Pane 5</div>
     </Split>
   </div>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -291,38 +212,19 @@
     <Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
-      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
-        Left Pane
-      </div>
+      <div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>Left Pane</div>
       <Split disable mode="vertical">
-        <div>
-          Top Pane
-        </div>
-        <div>
-          Bottom Pane
-        </div>
+        <div>Top Pane</div>
+        <div>Bottom Pane</div>
       </Split>
-      <div style={{ flex: 1 }}>
-        Right Pane
-      </div>
+      <div style={{ flex: 1 }}>Right Pane</div>
     </Split>
     <Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}>
-      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
-        Pane 1
-      </div>
-      <div style={{ maxWidth: 60 }}>
-        Pane 2
-      </div>
-      <div>
-        Pane 3
-      </div>
-      <div>
-        Pane 4
-      </div>
-      <div style={{ flex: 1 }}>
-        Pane 5
-      </div>
+      <div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>Pane 1</div>
+      <div style={{ maxWidth: 60 }}>Pane 2</div>
+      <div>Pane 3</div>
+      <div>Pane 4</div>
+      <div style={{ flex: 1 }}>Pane 5</div>
     </Split>
   </div>
 );
-export default Demo
-
+export default Demo;
 ```
@@ -361,3 +263,5 @@
         <div style={{ marginBottom: 10 }}>
-          <Button type="primary" onClick={this.onClick.bind(this)}>{this.state.width === 0 ? '隐藏菜单' : '展示菜单'}</Button>
+          <Button type="primary" onClick={this.onClick.bind(this)}>
+            {this.state.width === 0 ? '隐藏菜单' : '展示菜单'}
+          </Button>
         </div>
@@ -375,12 +279,9 @@ <Split lineBar visiable={this.state.width !== 0} style={{ border: '1px solid #d5d5d5', borderRadius: 3 }}>
           </div>
-          <div style={{ flex: 1, minWidth: 30 }}>
-            Right Pane
-          </div>
+          <div style={{ flex: 1, minWidth: 30 }}>Right Pane</div>
         </Split>
       </>
-    )
+    );
   }
 }
-export default Demo
-
+export default Demo;
 ```
@@ -406,12 +307,8 @@
     >
-      <div style={{ minWidth: 60 }}>
-        test
-      </div>
-      <div style={{ minWidth: 80, flex: 1 }}>
-        Right Pane
-      </div>
+      <div style={{ minWidth: 60 }}>test</div>
+      <div style={{ minWidth: 80, flex: 1 }}>Right Pane</div>
     </Split>
   </div>
 );
-export default Demo
+export default Demo;
 ```
@@ -422,3 +319,3 @@
 ```ts
-export interface SplitProps extends  Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {
+export interface SplitProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {
   style?: React.CSSProperties;
@@ -439,2 +336,6 @@ className?: string;
   /** Set the dragged toolbar, whether it is visible or not */
+  visible?: boolean | number[];
+  /**
+   * @deprecated Use `visible` instead
+   */
   visiable?: boolean | number[];
@@ -454,3 +355,3 @@ /**
 
-Runs the project in development mode.  
+Runs the project in development mode.
 
@@ -457,0 +358,0 @@ ```bash

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

2

-92%

Lines of code

1628

2.07%

Worsened metrics

Total package byte prevSize

101710

-11.88%

Number of package files

17

-5.56%

Number of lines in readme file

374

-20.93%

No dependency changes