feat: Support virtual prop

ref react-component/select#460

Author: zombieJ

README.md

@@ -85,6 +85,7 @@ see examples
 | onRightClick | select current treeNode and show customized contextmenu | function({event,node}) | - |
 | onSelect | click the treeNode to fire | function(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent}) | - |
 | switcherIcon | specific the switcher icon. | ReactNode / (props: TreeNodeAttribute) => ReactNode | - |
+| virtual | Disable virtual scroll when `false` | boolean | - |
 
 ### TreeNode props
 

package.json

@@ -67,7 +67,7 @@
     "prop-types": "^15.5.8",
     "rc-animate": "^2.9.2",
     "rc-util": "^4.11.0",
-    "rc-virtual-list": "^1.0.0",
+    "rc-virtual-list": "^1.1.0",
     "react-lifecycles-compat": "^3.0.4"
   }
 }

src/NodeList.tsx

@@ -78,6 +78,7 @@ interface NodeListProps {
   // Virtual list
   height: number;
   itemHeight: number;
+  virtual?: boolean;
 
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   onFocus?: React.FocusEventHandler<HTMLDivElement>;
@@ -120,7 +121,10 @@ function getAccessibilityPath(item: FlattenNode): string {
   return path;
 }
 
-const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (props, ref) => {
+const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (
+  props,
+  ref,
+) => {
   const {
     prefixCls,
     data,
@@ -142,6 +146,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
 
     height,
     itemHeight,
+    virtual,
 
     focusable,
     activeItem,
@@ -170,7 +175,9 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
   const [prevData, setPrevData] = React.useState(data);
   const [transitionData, setTransitionData] = React.useState(data);
   const [transitionRange, setTransitionRange] = React.useState([]);
-  const [motionType, setMotionType] = React.useState<'show' | 'hide' | null>(null);
+  const [motionType, setMotionType] = React.useState<'show' | 'hide' | null>(
+    null,
+  );
 
   function onMotionEnd() {
     setPrevData(data);
@@ -188,7 +195,9 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
 
     if (diffExpanded.key !== null) {
       if (diffExpanded.add) {
-        const keyIndex = prevData.findIndex(({ data: { key } }) => key === diffExpanded.key);
+        const keyIndex = prevData.findIndex(
+          ({ data: { key } }) => key === diffExpanded.key,
+        );
 
         if (motion) setDisableVirtual(true);
         const rangeNodes = getMinimumRangeTransitionRange(
@@ -204,7 +213,9 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
         setTransitionRange(rangeNodes);
         setMotionType('show');
       } else {
-        const keyIndex = data.findIndex(({ data: { key } }) => key === diffExpanded.key);
+        const keyIndex = data.findIndex(
+          ({ data: { key } }) => key === diffExpanded.key,
+        );
 
         if (motion) setDisableVirtual(true);
         const rangeNodes = getMinimumRangeTransitionRange(
@@ -276,6 +287,7 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
         itemKey={itemKey}
         height={height}
         fullHeight={false}
+        virtual={virtual}
         itemHeight={itemHeight}
         onSkipRender={onMotionEnd}
         prefixCls={`${prefixCls}-list`}
@@ -291,7 +303,10 @@ const RefNodeList: React.RefForwardingComponent<NodeListRef, NodeListProps> = (p
           const mergedKey = getKey(key, pos);
           delete restProps.children;
 
-          const treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);
+          const treeNodeProps = getTreeNodeProps(
+            mergedKey,
+            treeNodeRequiredProps,
+          );
 
           return (
             <MotionTreeNode

src/Tree.tsx

@@ -161,6 +161,7 @@ export interface TreeProps {
   // Virtual List
   height?: number;
   itemHeight?: number;
+  virtual?: boolean;
 }
 
 interface TreeState {
@@ -1140,6 +1141,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
       filterTreeNode,
       height,
       itemHeight,
+      virtual,
     } = this.props;
     const domProps: React.HTMLAttributes<HTMLDivElement> = getDataAndAria(
       this.props,
@@ -1198,6 +1200,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
             dragging={dragging}
             height={height}
             itemHeight={itemHeight}
+            virtual={virtual}
             focusable={focusable}
             focused={focused}
             tabIndex={tabIndex}

tests/Tree.spec.js

@@ -1429,4 +1429,20 @@ describe('Tree Basic', () => {
       .simulate('click');
     expect(wrapper.find('List').props().data).toHaveLength(2);
   });
+
+  it('support virtual', () => {
+    const data = [];
+    for (let i = 0; i < 99; i += 1) {
+      data.push({
+        key: i,
+        title: i,
+      });
+    }
+
+    const wrapper = mount(
+      <Tree itemHeight={10} height={100} treeData={data} virtual={false} />,
+    );
+
+    expect(wrapper.find('List').props().virtual).toBe(false);
+  });
 });