✨ feat: 更新组件和依赖

Author: zuqiang.you

package.json

@@ -9,7 +9,7 @@
     "dist",
     "index.d.ts"
   ],
-  "version": "1.0.2",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/yozojo/react-split-pane-next"
@@ -28,7 +28,7 @@
     "es6"
   ],
   "scripts": {
-    "start": "parcel website/index.html",
+    "start": "parcel build/index.html",
     "prebuild": "yarn run clean",
     "build": "rollup -c",
     "build:watch": "rollup -c --watch",
@@ -41,17 +41,17 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
-    "inline-style-prefixer": "^4.0.0",
-    "prop-types": "^15.7.2",
-    "styled-components": "^2.4.0"
+    "inline-style-prefixer": "^6.0.1",
+    "prop-types": "^15.8.1",
+    "styled-components": "^5.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
     "@babel/plugin-transform-modules-commonjs": "^7.7.0",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
-    "@emotion/core": "^10.0.22",
-    "@emotion/styled": "^10.0.23",
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
     "@storybook/theming": "^5.3.17",
@@ -80,18 +80,11 @@
     "parcel-bundler": "^1.12.4",
     "prettier": "2.0.5",
     "pretty-quick": "^2.0.1",
-    "react": ">=15",
-    "react-dom": "^16.0.0-0",
-    "react-router-dom": "^5.1.2",
     "rimraf": "^3.0.0",
     "rollup": "^2.3.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "standard-version": "^7.0.0"
-  },
-  "peerDependencies": {
-    "react": "^16.0.0-0",
-    "react-dom": "^16.0.0-0"
   }
 }

rollup.config.js

@@ -24,10 +24,7 @@ export default {
       exports: 'named',
     },
   ],
-  external: [
-    ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.peerDependencies),
-  ],
+  external: [...Object.keys(pkg.dependencies)],
   plugins: [
     babel({
       exclude: 'node_modules/**',

src/Pane.js

@@ -2,8 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import prefixAll from 'inline-style-prefixer/static';
-
-import { getUnit, convertSizeToCssValue } from './SplitPane';
+import { getUnit, convertSizeToCssValue } from './utils';
 
 function PaneStyle({
   split,

src/SplitPane.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import Resizer from './Resizer';
 import Pane from './Pane';
+import { getUnit, convertToUnit, convert } from './utils';
 
 const DEFAULT_PANE_SIZE = '1';
 const DEFAULT_PANE_MIN_SIZE = '0';
@@ -29,69 +30,9 @@ const RowStyle = styled.div`
   user-select: text;
 `;
 
-function convert(str, size) {
-  const tokens = str.match(/([0-9]+)([px|%]*)/);
-  const value = tokens[1];
-  const unit = tokens[2];
-  return toPx(value, unit, size);
-}
-
-function toPx(value, unit = 'px', size) {
-  switch (unit) {
-    case '%': {
-      return +((size * value) / 100).toFixed(2);
-    }
-    default: {
-      return +value;
-    }
-  }
-}
-
 function removeNullChildren(children) {
   return React.Children.toArray(children).filter((c) => c);
 }
-
-export function getUnit(size) {
-  if (size.endsWith('px')) {
-    return 'px';
-  }
-
-  if (size.endsWith('%')) {
-    return '%';
-  }
-
-  return 'ratio';
-}
-
-export function convertSizeToCssValue(value, resizersSize) {
-  if (getUnit(value) !== '%') {
-    return value;
-  }
-
-  if (!resizersSize) {
-    return value;
-  }
-
-  const idx = value.search('%');
-  const percent = value.slice(0, idx) / 100;
-  if (percent === 0) {
-    return value;
-  }
-
-  return `calc(${value} - ${resizersSize}px*${percent})`;
-}
-
-function convertToUnit(size, unit, containerSize) {
-  switch (unit) {
-    case '%':
-      return `${((size / containerSize) * 100).toFixed(2)}%`;
-    case 'px':
-      return `${size.toFixed(2)}px`;
-    case 'ratio':
-      return (size * 100).toFixed(0);
-  }
-}
-
 class SplitPane extends Component {
   constructor(props) {
     super(props);
@@ -101,7 +42,7 @@ class SplitPane extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ sizes: this.getPanePropSize(nextProps) });
   }
 
@@ -132,7 +73,7 @@ class SplitPane extends Component {
   };
 
   onDown = (resizerIndex, clientX, clientY) => {
-    const { allowResize, onResizeStart, split } = this.props;
+    const { allowResize, onResizeStart } = this.props;
 
     if (!allowResize) {
       return;
@@ -361,7 +302,7 @@ class SplitPane extends Component {
   }
 
   render() {
-    const { children, className, split } = this.props;
+    const { className, split } = this.props;
     const notNullChildren = removeNullChildren(this.props.children);
     const sizes = this.getSizes();
     const resizersSize = this.getResizersSize(notNullChildren);

src/utils.js

@@ -0,0 +1,58 @@
+export function getUnit(size) {
+  if (size.endsWith('px')) {
+    return 'px';
+  }
+
+  if (size.endsWith('%')) {
+    return '%';
+  }
+
+  return 'ratio';
+}
+
+export function convertSizeToCssValue(value, resizersSize) {
+  if (getUnit(value) !== '%') {
+    return value;
+  }
+
+  if (!resizersSize) {
+    return value;
+  }
+
+  const idx = value.search('%');
+  const percent = value.slice(0, idx) / 100;
+  if (percent === 0) {
+    return value;
+  }
+
+  return `calc(${value} - ${resizersSize}px*${percent})`;
+}
+
+export function convertToUnit(size, unit, containerSize) {
+  switch (unit) {
+    case '%':
+      return `${((size / containerSize) * 100).toFixed(2)}%`;
+    case 'px':
+      return `${size.toFixed(2)}px`;
+    case 'ratio':
+      return (size * 100).toFixed(0);
+  }
+}
+
+export function toPx(value, unit = 'px', size) {
+  switch (unit) {
+    case '%': {
+      return +((size * value) / 100).toFixed(2);
+    }
+    default: {
+      return +value;
+    }
+  }
+}
+
+export function convert(str, size) {
+  const tokens = str.match(/([0-9]+)([px|%]*)/);
+  const value = tokens[1];
+  const unit = tokens[2];
+  return toPx(value, unit, size);
+}