react-component · chenshuai2144 · Feb 19, 2019 · Feb 19, 2019 · Feb 19, 2019 · Feb 19, 2019
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,7 @@ lib
 coverage
 yarn.lock
 es/
+.prettierrc
+.eslintrc.js
+tslint.json
+tsconfig.json
diff --git a/examples/basic.js b/examples/basic.js
@@ -2,7 +2,6 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import 'rc-dialog/assets/index.css';
 import Dialog from 'rc-dialog';
 import TreeSelect, { TreeNode, SHOW_PARENT } from 'rc-tree-select';
@@ -401,4 +400,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/big-data.js b/examples/big-data.js
@@ -2,7 +2,6 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import TreeSelect, { SHOW_PARENT } from 'rc-tree-select';
 import Gen from './big-data-generator';
 import './demo.less';
@@ -83,4 +82,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/controlled.js b/examples/controlled.js
@@ -2,7 +2,6 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import 'rc-dialog/assets/index.css';
 import TreeSelect, { TreeNode } from 'rc-tree-select';
 import './demo.less';
@@ -70,4 +69,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/custom-icons.js b/examples/custom-icons.js
@@ -2,13 +2,13 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import 'rc-dialog/assets/index.css';
 import TreeSelect from 'rc-tree-select';
 import { gData } from './util';
 import './demo.less';
 
-const bubblePath = 'M632 888H392c-4.4 0-8 3.6-8 8v32c0 ' +
+const bubblePath =
+  'M632 888H392c-4.4 0-8 3.6-8 8v32c0 ' +
   '17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-3' +
   '2c0-4.4-3.6-8-8-8zM512 64c-181.1 0-328 146.9-3' +
   '28 328 0 121.4 66 227.4 164 284.1V792c0 17.7 1' +
@@ -19,13 +19,15 @@ const bubblePath = 'M632 888H392c-4.4 0-8 3.6-8 8v32c0 ' +
   ' 114.6-256 256-256s256 114.6 256 256c0 92.5-49' +
   '.4 176.3-128.1 221.8z';
 
-const clearPath = 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
+const clearPath =
+  'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
   '-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c' +
   '5.2 4.1 12.9 0.4 12.9-6.3v-74h415v470H175c-4.4' +
   ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
   '28.7 64-64V306c0-35.3-28.7-64-64-64z';
 
-const arrowPath = 'M765.7 486.8L314.9 134.7c-5.3-4.1' +
+const arrowPath =
+  'M765.7 486.8L314.9 134.7c-5.3-4.1' +
   '-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l36' +
   '0 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6' +
   '.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-3' +
@@ -45,18 +47,21 @@ const getSvg = (path, iStyle = {}, style = {}) => {
       </svg>
     </i>
   );
-}
-
+};
 
-const switcherIcon = (obj) => {
+const switcherIcon = obj => {
   if (obj.isLeaf) {
-    return getSvg(arrowPath,
+    return getSvg(
+      arrowPath,
       { cursor: 'pointer', backgroundColor: 'white' },
-      { transform: 'rotate(270deg)' });
+      { transform: 'rotate(270deg)' },
+    );
   }
-  return getSvg(arrowPath,
+  return getSvg(
+    arrowPath,
     { cursor: 'pointer', backgroundColor: 'white' },
-    { transform: `rotate(${obj.expanded ? 90 : 0}deg)` });
+    { transform: `rotate(${obj.expanded ? 90 : 0}deg)` },
+  );
 };
 
 const inputIcon = getSvg(bubblePath);
@@ -87,7 +92,8 @@ function Demo() {
         transitionName="rc-tree-select-dropdown-slide-up"
         style={{ width: 300 }}
         dropdownStyle={{ maxHeight: 200, overflow: 'auto', zIndex: 1500 }}
-        showSearch allowClear
+        showSearch
+        allowClear
         {...iconProps}
       />
       <br />
@@ -99,11 +105,12 @@ function Demo() {
         transitionName="rc-tree-select-dropdown-slide-up"
         style={{ width: 300 }}
         dropdownStyle={{ maxHeight: 200, overflow: 'auto', zIndex: 1500 }}
-        showSearch allowClear
+        showSearch
+        allowClear
         {...iconPropsFunction}
       />
     </div>
   );
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/disable.js b/examples/disable.js
@@ -2,7 +2,6 @@
 import 'rc-tree-select/assets/index.less';
 import TreeSelect from 'rc-tree-select';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
@@ -83,4 +82,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/dynamic.js b/examples/dynamic.js
@@ -2,7 +2,6 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import TreeSelect from 'rc-tree-select';
 import { getNewTreeData, generateTreeNodes } from './util';
 
@@ -57,4 +56,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/filter.js b/examples/filter.js
@@ -2,7 +2,6 @@
 
 import 'rc-tree-select/assets/index.less';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import TreeSelect, { SHOW_PARENT } from 'rc-tree-select';
 import { gData } from './util';
 
@@ -103,4 +102,4 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default () => <Demo />;
diff --git a/examples/form.js b/examples/form.js
@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import TreeSelect from 'rc-tree-select';
 import Select from 'rc-select';
 import { createForm } from 'rc-form';
@@ -126,4 +125,4 @@ class Form extends Component {
 
 // ReactDOM.render(<Form />, document.getElementById('__react-content'));
 const NewForm = createForm()(Form);
-ReactDOM.render(<NewForm />, document.getElementById('__react-content'));
+export default () => <NewForm />;
diff --git a/examples/util.js b/examples/util.js
@@ -35,7 +35,7 @@ export function generateData(x = 3, y = 2, z = 1, gData = []) {
 }
 export function calcTotal(x = 3, y = 2, z = 1) {
   /* eslint no-param-reassign:0 */
-  const rec = (n) => n >= 0 ? x * (y ** (n--)) + rec(n) : 0;
+  const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
   return rec(z + 1);
 }
 console.log('总节点数（单个tree）：', calcTotal());
@@ -53,9 +53,12 @@ export function generateTreeNodes(treeNode) {
 function setLeaf(treeData, curKey, level) {
   const loopLeaf = (data, lev) => {
     const l = lev - 1;
-    data.forEach((item) => {
-      if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
-        curKey.indexOf(item.key) !== 0) {
+    data.forEach(item => {
+      if (
+        item.key.length > curKey.length
+          ? item.key.indexOf(curKey) !== 0
+          : curKey.indexOf(item.key) !== 0
+      ) {
         return;
       }
       if (item.children) {
@@ -69,9 +72,9 @@ function setLeaf(treeData, curKey, level) {
 }
 
 export function getNewTreeData(treeData, curKey, child, level) {
-  const loop = (data) => {
+  const loop = data => {
     if (level < 1 || curKey.length - 3 > level * 2) return;
-    data.forEach((item) => {
+    data.forEach(item => {
       if (curKey.indexOf(item.key) === 0) {
         if (item.children) {
           loop(item.children);
@@ -85,7 +88,6 @@ export function getNewTreeData(treeData, curKey, child, level) {
   setLeaf(treeData, curKey, level);
 }
 
-
 function loopData(data, callback) {
   const loop = (d, level = 0) => {
     d.forEach((item, index) => {
@@ -104,7 +106,7 @@ function isPositionPrefix(smallPos, bigPos) {
     return false;
   }
   // attention: "0-0-1" "0-0-10"
-  if ((bigPos.length > smallPos.length) && (bigPos.charAt(smallPos.length) !== '-')) {
+  if (bigPos.length > smallPos.length && bigPos.charAt(smallPos.length) !== '-') {
     return false;
   }
   return bigPos.substr(0, smallPos.length) === smallPos;
@@ -123,8 +125,8 @@ export function getFilterValue(val, sVal, delVal) {
     }
   });
   const newPos = [];
-  delPos.forEach((item) => {
-    allPos.forEach((i) => {
+  delPos.forEach(item => {
+    allPos.forEach(i => {
       if (isPositionPrefix(item, i) || isPositionPrefix(i, item)) {
         // 过滤掉 父级节点 和 所有子节点。
         // 因为 node节点 不选时，其 父级节点 和 所有子节点 都不选。

diff --git a/package.json b/package.json
@@ -38,16 +38,18 @@
     }
   },
   "scripts": {
-    "build": "rc-tools run build",
+    "build": "rc-tools run storybook-build",
     "compile": "rc-tools run compile --babel-runtime",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
+    "gh-pages": "npm run build && rc-tools run storybook-gh-pages",
+    "start": "rc-tools run storybook",
     "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
+    "init-lint": "rc-tools run gen-lint-config",
     "test": "rc-tools run test",
     "coverage": "rc-tools run test --coverage",
     "pre-commit": "rc-tools run pre-commit",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "genStorybook": "rc-tools run genStorybook"
   },
   "dependencies": {
     "classnames": "^2.2.1",
@@ -67,7 +69,7 @@
     "rc-dialog": "^7.0.0",
     "rc-form": "^2.4.2",
     "rc-select": "^8.8.3",
-    "rc-tools": "^9.3.5",
+    "rc-tools": "^9.3.11",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },