feat: add hide node property

README.md

@@ -110,6 +110,7 @@ see examples
 | isLeaf | whether it's leaf node | bool | false |
 | icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props) | - |
 | switcherIcon | specific the switcher icon. | ReactNode / (props: TreeNodeAttribute) => ReactNode | - |
+| hidden | whether hide the treeNode(about this property, parent and children nodes are not associated). | bool | false |
 
 ## Note
 

assets/index.less

@@ -52,6 +52,9 @@
         border-left: none;
       }
     }
+    &.hide-node {
+      display: none;
+    }
     &.filter-node {
       > .@{treePrefixCls}-node-content-wrapper {
         color: #a60000 !important;

src/NodeList.tsx

@@ -167,6 +167,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
   } = props;
 
   // =============================== Ref ================================
+  const showingData = data.filter(item => !item.hidden);
   const listRef = React.useRef<ListRef>(null);
   const indentMeasurerRef = React.useRef<HTMLDivElement>(null);
   React.useImperativeHandle(ref, () => ({
@@ -179,7 +180,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
   // ============================== Motion ==============================
   const [prevExpandedKeys, setPrevExpandedKeys] = React.useState(expandedKeys);
   const [prevData, setPrevData] = React.useState(data);
-  const [transitionData, setTransitionData] = React.useState(data);
+  const [transitionData, setTransitionData] = React.useState(showingData);
   const [transitionRange, setTransitionRange] = React.useState([]);
   const [motionType, setMotionType] = React.useState<'show' | 'hide' | null>(null);
 
@@ -191,7 +192,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
     const latestData = dataRef.current;
 
     setPrevData(latestData);
-    setTransitionData(latestData);
+    setTransitionData(showingData);
     setTransitionRange([]);
     setMotionType(null);
 
@@ -215,7 +216,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
           itemHeight,
         );
 
-        const newTransitionData: FlattenNode[] = prevData.slice();
+        const newTransitionData: FlattenNode[] = prevData.slice().filter(item => !item.hidden);
         newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
 
         setTransitionData(newTransitionData);
@@ -231,7 +232,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
           itemHeight,
         );
 
-        const newTransitionData: FlattenNode[] = data.slice();
+        const newTransitionData: FlattenNode[] = data.slice().filter(item => !item.hidden);
         newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
 
         setTransitionData(newTransitionData);

src/TreeNode.tsx

@@ -48,6 +48,7 @@ export interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
   icon?: IconType;
   switcherIcon?: IconType;
   children?: React.ReactNode;
+  hidden?:boolean;
 }
 
 export interface InternalTreeNodeProps extends TreeNodeProps {
@@ -536,6 +537,7 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
       selected,
       checked,
       halfChecked,
+      hidden,
       loading,
       domRef,
       active,
@@ -586,6 +588,7 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
           'drag-over-gap-top': !disabled && dragOverGapTop,
           'drag-over-gap-bottom': !disabled && dragOverGapBottom,
           'filter-node': filterTreeNode && filterTreeNode(convertNodePropsToEventData(this.props)),
+          'hide-node' : hidden
         })}
         style={style}
         // Draggable config

src/interface.tsx

@@ -12,10 +12,12 @@ export interface BasicDataNode {
   isLeaf?: boolean;
   selectable?: boolean;
   switcherIcon?: IconType;
+  hidden: boolean;
 
   /** Set style of TreeNode. This is not recommend if you don't have any force requirement */
   className?: string;
   style?: React.CSSProperties;
+
 }
 
 /** Provide a wrap type define for developer to wrap with customize fieldNames data type */

src/utils/treeUtil.ts

@@ -118,15 +118,26 @@ export function flattenTreeData<TreeDataType extends BasicDataNode = DataNode>(
 
   const expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
   const flattenList: FlattenNode<TreeDataType>[] = [];
-
   function dig(
     list: TreeDataType[],
     parent: FlattenNode<TreeDataType> = null,
   ): FlattenNode<TreeDataType>[] {
+     // Removed the hidden node
+    const shouldShowList = list.filter(item => !item.hidden).map((treeNode, index) => {
+      const shouldShowNode = {
+        ...treeNode,
+        shouldShowIndex: index
+      }
+      return shouldShowNode;
+    });
     return list.map((treeNode, index) => {
       const pos: string = getPosition(parent ? parent.pos : '0', index);
       const mergedKey = getKey(treeNode[fieldKey], pos);
 
+      const mapNode = shouldShowList.filter(item => item.key === treeNode.key);
+      // Get index in the list that remove the hidden nodes
+      const shouldShowIndex = mapNode.length > 0 ? mapNode[0].shouldShowIndex: null;
+
       // Pick matched title in field title list
       let mergedTitle: React.ReactNode;
       for (let i = 0; i < fieldTitles.length; i += 1) {
@@ -136,7 +147,6 @@ export function flattenTreeData<TreeDataType extends BasicDataNode = DataNode>(
           break;
         }
       }
-
       // Add FlattenDataNode into list
       const flattenNode: FlattenNode<TreeDataType> = {
         ...omit(treeNode, [...fieldTitles, fieldKey, fieldChildren] as any),
@@ -146,8 +156,11 @@ export function flattenTreeData<TreeDataType extends BasicDataNode = DataNode>(
         pos,
         children: null,
         data: treeNode,
-        isStart: [...(parent ? parent.isStart : []), index === 0],
-        isEnd: [...(parent ? parent.isEnd : []), index === list.length - 1],
+        // isStart: [...(parent ? parent.isStart : []), index === 0],
+        // isEnd: [...(parent ? parent.isEnd : []), index === list.length - 1],
+        // Modify judging condition of two variables(isStart and isEnd)
+        isStart: [...(parent ? parent.isStart : []), shouldShowIndex === 0],
+        isEnd: [...(parent ? parent.isEnd : []), shouldShowIndex === shouldShowList.length - 1],
       };
 
       flattenList.push(flattenNode);