feat: virtual list

package.json

@@ -75,7 +75,8 @@
     "classnames": "^2.3.1",
     "rc-select": "~14.5.0",
     "rc-tree": "~5.7.0",
-    "rc-util": "^5.6.1"
+    "rc-util": "^5.6.1",
+    "rc-virtual-list": "^3.14.8"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/Cascader.tsx

@@ -111,6 +111,10 @@ interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionTyp
   // Icon
   expandIcon?: React.ReactNode;
   loadingIcon?: React.ReactNode;
+
+  virtual?: boolean;
+  listHeight?: number;
+  listItemHeight?: number;
 }
 
 type OnSingleChange<OptionType> = (value: SingleValueType, selectOptions: OptionType[]) => void;
@@ -215,6 +219,9 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     children,
     dropdownMatchSelectWidth = false,
     showCheckedStrategy = SHOW_PARENT,
+    virtual = true,
+    listHeight = 170,
+    listItemHeight = 28,
     ...restProps
   } = props;
 
@@ -449,6 +456,9 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      virtual,
+      listHeight,
+      listItemHeight,
     }),
     [
       mergedOptions,
@@ -465,6 +475,9 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      virtual,
+      listHeight,
+      listItemHeight,
     ],
   );
 

src/OptionList/Column.tsx

@@ -5,6 +5,8 @@ import CascaderContext from '../context';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
 import { isLeaf, toPathKey } from '../utils/commonUtil';
 import Checkbox from './Checkbox';
+import List from 'rc-virtual-list';
+import type { ListRef } from 'rc-virtual-list';
 
 export const FIX_LABEL = '__cascader_fix_label__';
 
@@ -41,6 +43,7 @@ export default function Column({
   isSelectable,
   searchValue,
 }: ColumnProps) {
+  const ref = React.useRef<ListRef>(null);
   const menuPrefixCls = `${prefixCls}-menu`;
   const menuItemPrefixCls = `${prefixCls}-menu-item`;
 
@@ -51,6 +54,9 @@ export default function Column({
     expandIcon,
     loadingIcon,
     dropdownMenuColumnStyle,
+    virtual,
+    listItemHeight,
+    listHeight,
   } = React.useContext(CascaderContext);
 
   const hoverOpen = expandTrigger === 'hover';
@@ -98,115 +104,138 @@ export default function Column({
   );
 
   // ============================ Render ============================
-  return (
-    <ul className={menuPrefixCls} role="menu">
-      {optionInfoList.map(
-        ({
-          disabled,
-          label,
-          value,
-          isLeaf: isMergedLeaf,
-          isLoading,
-          checked,
-          halfChecked,
-          option,
-          fullPath,
-          fullPathKey,
-          disableCheckbox,
-        }) => {
-          // >>>>> Open
-          const triggerOpenPath = () => {
-            if (disabled || searchValue) {
-              return;
-            }
-            const nextValueCells = [...fullPath];
-            if (hoverOpen && isMergedLeaf) {
-              nextValueCells.pop();
-            }
-            onActive(nextValueCells);
-          };
-
-          // >>>>> Selection
-          const triggerSelect = () => {
-            if (isSelectable(option)) {
-              onSelect(fullPath, isMergedLeaf);
-            }
-          };
-
-          // >>>>> Title
-          let title: string;
-          if (typeof option.title === 'string') {
-            title = option.title;
-          } else if (typeof label === 'string') {
-            title = label;
+
+  // scrollIntoView effect in virtual list
+  React.useEffect(() => {
+    if (virtual && ref.current && activeValue) {
+      const startIndex = optionInfoList.findIndex(({ value }) => value === activeValue);
+      ref.current.scrollTo({ index: startIndex, align: 'auto' });
+    }
+  }, [optionInfoList, virtual, activeValue])
+
+  const renderLi = (item) => {
+    const {
+      disabled,
+      label,
+      value,
+      isLeaf: isMergedLeaf,
+      isLoading,
+      checked,
+      halfChecked,
+      option,
+      fullPath,
+      fullPathKey,
+      disableCheckbox,
+    } = item;
+
+    // >>>>> Open
+    const triggerOpenPath = () => {
+      if (disabled || searchValue) {
+        return;
+      }
+      const nextValueCells = [...fullPath];
+      if (hoverOpen && isMergedLeaf) {
+        nextValueCells.pop();
+      }
+      onActive(nextValueCells);
+    };
+
+    // >>>>> Selection
+    const triggerSelect = () => {
+      if (isSelectable(option)) {
+        onSelect(fullPath, isMergedLeaf);
+      }
+    };
+
+    // >>>>> Title
+    let title: string;
+    if (typeof option.title === 'string') {
+      title = option.title;
+    } else if (typeof label === 'string') {
+      title = label;
+    }
+
+    // >>>>> Render
+    return (
+      <li
+        key={fullPathKey}
+        className={classNames(menuItemPrefixCls, {
+          [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
+          [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
+          [`${menuItemPrefixCls}-disabled`]: disabled,
+          [`${menuItemPrefixCls}-loading`]: isLoading,
+        })}
+        style={dropdownMenuColumnStyle}
+        role="menuitemcheckbox"
+        title={title}
+        aria-checked={checked}
+        data-path-key={fullPathKey}
+        onClick={() => {
+          triggerOpenPath();
+          if (disableCheckbox) {
+            return;
+          }
+          if (!multiple || isMergedLeaf) {
+            triggerSelect();
           }
+        }}
+        onDoubleClick={() => {
+          if (changeOnSelect) {
+            onToggleOpen(false);
+          }
+        }}
+        onMouseEnter={() => {
+          if (hoverOpen) {
+            triggerOpenPath();
+          }
+        }}
+        onMouseDown={e => {
+          // Prevent selector from blurring
+          e.preventDefault();
+        }}
+      >
+        {multiple && (
+          <Checkbox
+            prefixCls={`${prefixCls}-checkbox`}
+            checked={checked}
+            halfChecked={halfChecked}
+            disabled={disabled || disableCheckbox}
+            disableCheckbox={disableCheckbox}
+            onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
+              if (disableCheckbox) {
+                return;
+              }
+              e.stopPropagation();
+              triggerSelect();
+            }}
+          />
+        )}
+        <div className={`${menuItemPrefixCls}-content`}>{label}</div>
+        {!isLoading && expandIcon && !isMergedLeaf && (
+          <div className={`${menuItemPrefixCls}-expand-icon`}>{expandIcon}</div>
+        )}
+        {isLoading && loadingIcon && (
+          <div className={`${menuItemPrefixCls}-loading-icon`}>{loadingIcon}</div>
+        )}
+      </li>
+    );
+  };
 
-          // >>>>> Render
-          return (
-            <li
-              key={fullPathKey}
-              className={classNames(menuItemPrefixCls, {
-                [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
-                [`${menuItemPrefixCls}-active`]:
-                  activeValue === value || activeValue === fullPathKey,
-                [`${menuItemPrefixCls}-disabled`]: disabled,
-                [`${menuItemPrefixCls}-loading`]: isLoading,
-              })}
-              style={dropdownMenuColumnStyle}
-              role="menuitemcheckbox"
-              title={title}
-              aria-checked={checked}
-              data-path-key={fullPathKey}
-              onClick={() => {
-                triggerOpenPath();
-                if (disableCheckbox) {
-                  return;
-                }
-                if (!multiple || isMergedLeaf) {
-                  triggerSelect();
-                }
-              }}
-              onDoubleClick={() => {
-                if (changeOnSelect) {
-                  onToggleOpen(false);
-                }
-              }}
-              onMouseEnter={() => {
-                if (hoverOpen) {
-                  triggerOpenPath();
-                }
-              }}
-              onMouseDown={e => {
-                // Prevent selector from blurring
-                e.preventDefault();
-              }}
-            >
-              {multiple && (
-                <Checkbox
-                  prefixCls={`${prefixCls}-checkbox`}
-                  checked={checked}
-                  halfChecked={halfChecked}
-                  disabled={disabled || disableCheckbox}
-                  disableCheckbox={disableCheckbox}
-                  onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
-                    if (disableCheckbox) {
-                      return;
-                    }
-                    e.stopPropagation();
-                    triggerSelect();
-                  }}
-                />
-              )}
-              <div className={`${menuItemPrefixCls}-content`}>{label}</div>
-              {!isLoading && expandIcon && !isMergedLeaf && (
-                <div className={`${menuItemPrefixCls}-expand-icon`}>{expandIcon}</div>
-              )}
-              {isLoading && loadingIcon && (
-                <div className={`${menuItemPrefixCls}-loading-icon`}>{loadingIcon}</div>
-              )}
-            </li>
-          );
-        },
+  return (
+    <ul className={menuPrefixCls} role="menu">
+      {virtual ? (
+        <List
+          ref={ref}
+          itemKey="fullPathKey"
+          height={listHeight}
+          itemHeight={listItemHeight}
+          virtual={virtual}
+          data={optionInfoList}
+        >
+          {renderLi}
+        </List>
+      ) : (
+        optionInfoList.map(renderLi)
       )}
     </ul>
   );

src/OptionList/index.tsx

@@ -37,6 +37,7 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
     dropdownPrefixCls,
     loadData,
     expandTrigger,
+    virtual,
   } = React.useContext(CascaderContext);
 
   const mergedPrefixCls = dropdownPrefixCls || prefixCls;
@@ -157,17 +158,19 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
 
   // >>>>> Active Scroll
   React.useEffect(() => {
-    for (let i = 0; i < activeValueCells.length; i += 1) {
-      const cellPath = activeValueCells.slice(0, i + 1);
-      const cellKeyPath = toPathKey(cellPath);
-      const ele = containerRef.current?.querySelector<HTMLElement>(
-        `li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]`, // matches unescaped double quotes
-      );
-      if (ele) {
-        scrollIntoParentView(ele);
+    if (!virtual) {
+      for (let i = 0; i < activeValueCells.length; i += 1) {
+        const cellPath = activeValueCells.slice(0, i + 1);
+        const cellKeyPath = toPathKey(cellPath);
+        const ele = containerRef.current?.querySelector<HTMLElement>(
+          `li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]`, // matches unescaped double quotes
+        );
+        if (ele) {
+          scrollIntoParentView(ele);
+        }
       }
     }
-  }, [activeValueCells]);
+  }, [activeValueCells, virtual]);
 
   // ========================== Render ==========================
   // >>>>> Empty

src/context.ts

@@ -21,6 +21,9 @@ export interface CascaderContextProps {
   expandIcon?: React.ReactNode;
   loadingIcon?: React.ReactNode;
   dropdownMenuColumnStyle?: React.CSSProperties;
+  virtual?: boolean;
+  listHeight?: number;
+  listItemHeight?: number;
 }
 
 const CascaderContext = React.createContext<CascaderContextProps>(null);