fix: Fix Indent to correct level (react-component#390)

* test: update snapshot

* fix lint

* fix more lint

* bump ci node version

Author: zombieJ

.eslintrc.js

@@ -1,9 +1,7 @@
-const base = require('@umijs/fabric/dist/eslint');
-
 module.exports = {
-  ...base,
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
+
   rules: {
-    ...base.rules,
     'react/sort-comp': 0,
     'default-case': 0,
     'eslint-comments/disable-enable-pair': 0,
@@ -12,5 +10,7 @@ module.exports = {
     'jsx-a11y/label-has-for': 0,
     'jsx-a11y/label-has-associated-control': 0,
     'no-loop-func': 0,
+    '@typescript-eslint/no-loop-func': 0,
+    'max-classes-per-file': 0,
   },
 };

.travis.yml

@@ -7,7 +7,7 @@ notifications:
   - [email protected]
 
 node_js:
-- 10
+- 14
 
 before_install:
 - |

assets/index.less

@@ -4,7 +4,7 @@
 .@{treePrefixCls} {
   margin: 0;
   border: 1px solid transparent;
-  
+
   &-focused:not(&-active-focused) {
     border-color: cyan;
   }
@@ -210,6 +210,7 @@
     vertical-align: top;
   }
   &-indent-unit {
+    width: 16px;
     display: inline-block;
     padding-left: 18px;
   }

examples/animation.jsx

@@ -81,9 +81,27 @@ function getTreeData() {
     {
       key: '1',
       title: 'node 1',
-      children: new Array(1000)
-        .fill(null)
-        .map((_, index) => ({ title: `auto ${index}`, key: `auto-${index}` })),
+      // children: new Array(1000)
+      //   .fill(null)
+      //   .map((_, index) => ({ title: `auto ${index}`, key: `auto-${index}` })),
+      children: [
+        {
+          key: '1-0',
+          title: 'node 1-0',
+          children: [
+            { key: '1-0-0', title: 'node 1-0-0' },
+            {
+              key: '1-0-1',
+              title: 'node 1-0-1',
+              children: [
+                { key: '1-0-1-0', title: 'node 1-0-1-0' },
+                { key: '1-0-1-1', title: 'node 1-0-1-1' },
+              ],
+            },
+            { key: '1-0-2', title: 'node 1-0-2' },
+          ],
+        },
+      ],
     },
   ];
 }
@@ -105,7 +123,8 @@ const Demo = () => {
           <h3>With Virtual</h3>
           <Tree
             ref={treeRef}
-            defaultExpandAll={false}
+            // defaultExpandAll={false}
+            defaultExpandAll
             defaultExpandedKeys={defaultExpandedKeys}
             motion={motion}
             height={200}

examples/animation.less

@@ -5,36 +5,56 @@
     .rc-tree-indent {
       position: relative;
       align-self: stretch;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: stretch;
 
       .rc-tree-indent-unit {
         position: relative;
         height: 100%;
 
         &::before {
           position: absolute;
-          top: 100%;
-          right: -26px;
-          bottom: -100%;
+          top: 0;
+          bottom: 0;
           border-right: 1px solid blue;
+          left: 50%;
           content: '';
         }
 
-        // End should ignore
         &-end {
           &::before {
             display: none;
           }
         }
+
+        // End should ignore
+        // &-end {
+        //   &::before {
+        //     display: none;
+        //   }
+        // }
+      }
+    }
+
+    .rc-tree-switcher-noop {
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: red;
+        border-radius: 100%;
       }
     }
 
     // Motion
     &-motion:not(.node-motion-appear-active) {
-      .rc-tree-indent-unit {
-        &::before {
-          display: none;
-        }
-      }
+      // .rc-tree-indent-unit {
+      //   &::before {
+      //     display: none;
+      //   }
+      // }
     }
   }
 }

examples/big-data.jsx

@@ -13,7 +13,7 @@ class Demo extends React.Component {
     selectedKeys: [],
   };
 
-  componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(nextProps, nextState) {
     // invoked immediately before rendering with new props or state, not for initial 'render'
     // see componentWillReceiveProps if you need to call setState
     // console.log(nextState.gData === this.state.gData);

examples/dropdown.jsx

@@ -52,12 +52,13 @@ class DropdownTree extends React.Component {
     };
   }
 
-  componentWillReceiveProps(props) {
+  static getDerivedStateFromProps(props) {
     if ('visible' in props) {
-      this.setState({
+      return {
         visible: props.visible,
-      });
+      };
     }
+    return null;
   }
 
   onChange = value => {

package.json

@@ -52,7 +52,7 @@
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/parser": "^4.0.1",
+    "@umijs/fabric": "^2.3.1",
     "css-animation": "^1.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",

src/Indent.tsx

@@ -20,9 +20,8 @@ const Indent: React.FC<IndentProps> = ({ prefixCls, level, isStart, isEnd }) =>
       <span
         key={i}
         className={classNames(baseClassName, {
-          [`${baseClassName}-start`]: isStart[i + 1],
-          [`${baseClassName}-end`]: isEnd[i + 1],
-          [`${baseClassName}-end-first-level`]: !i && isEnd[0],
+          [`${baseClassName}-start`]: isStart[i],
+          [`${baseClassName}-end`]: isEnd[i],
         })}
       />,
     );

src/util.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import warning from 'rc-util/lib/warning';
 import TreeNode, { TreeNodeProps } from './TreeNode';
-import { NodeElement, Key, DataNode, Entity, DataEntity, NodeInstance } from './interface';
+import { NodeElement, Key, DataNode, DataEntity, NodeInstance } from './interface';
 import { TreeProps } from './Tree';
 
 const DRAG_SIDE_RANGE = 0.25;
@@ -110,12 +110,6 @@ export function convertDataToTree(
   );
 }
 
-// TODO: ========================= NEW LOGIC =========================
-interface Wrapper {
-  posEntities: Record<string, Entity>;
-  keyEntities: Record<Key, Entity>;
-}
-
 /**
  * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
  */