react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/cascader/Cascader.js

@@ -0,0 +1,460 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { FlatList, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { Checked, Cross } from "react-native-system-icon";
+import { useControllableValue } from "../../hooks";
+import { isFunction, isNumber, isRenderable, isText } from "../../utils/validate";
+import Popup from "../popup";
+import Tabs from "../tabs";
+import { useCascaderTokens } from "./tokens";
+import { useCascaderExtend } from "./useCascaderExtend";
+import { resolveSelectedRows } from "./utils";
+const getFieldKeys = fieldNames => ({
+  textKey: fieldNames?.text ?? "text",
+  valueKey: fieldNames?.value ?? "value",
+  childrenKey: fieldNames?.children ?? "children"
+});
+const isSameValueArray = (a, b) => {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+const Cascader = props => {
+  const {
+    tokensOverride,
+    options = [],
+    title: titleProp,
+    placeholder: placeholderProp,
+    activeColor: activeColorProp,
+    fieldNames,
+    optionRender,
+    showHeader: showHeaderProp,
+    closeable,
+    closeIcon,
+    onChange,
+    onClose,
+    onFinish,
+    onClickTab,
+    onTabChange,
+    swipeable: swipeableProp,
+    style,
+    testID,
+    children,
+    poppable: poppableProp,
+    visible: _visible,
+    defaultVisible: _defaultVisible,
+    onVisibleChange: _onVisibleChange,
+    closeOnClickOverlay: closeOnClickOverlayProp,
+    closeOnFinish: closeOnFinishProp,
+    popupPlacement: popupPlacementProp,
+    popupRound: popupRoundProp,
+    popupProps: popupPropsOverrides,
+    loadingText: loadingTextProp,
+    ...rest
+  } = props;
+  const tokens = useCascaderTokens(tokensOverride);
+  const title = titleProp ?? tokens.defaults.title;
+  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
+  const activeColor = activeColorProp ?? tokens.colors.tabActive;
+  const showHeader = showHeaderProp ?? tokens.defaults.showHeader;
+  const swipeable = swipeableProp ?? tokens.defaults.swipeable;
+  const poppable = poppableProp ?? tokens.defaults.poppable;
+  const closeOnClickOverlay = closeOnClickOverlayProp ?? tokens.defaults.closeOnClickOverlay;
+  const closeOnFinish = closeOnFinishProp ?? tokens.defaults.closeOnFinish;
+  const popupPlacement = popupPlacementProp ?? tokens.defaults.popupPlacement;
+  const popupRound = popupRoundProp ?? tokens.defaults.popupRound;
+  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
+  const [value, setValue] = useControllableValue(props, {
+    defaultValue: [],
+    trigger: "onChange"
+  });
+  const keys = useMemo(() => getFieldKeys(fieldNames), [fieldNames]);
+  const cascaderValue = Array.isArray(value) ? value : [];
+  const [panelValue, setPanelValue] = useState(cascaderValue);
+  const resolvedCloseable = closeable ?? tokens.defaults.closeable;
+  const [popupVisible, setPopupVisible] = useControllableValue(props, {
+    defaultValue: false,
+    valuePropName: "visible",
+    defaultValuePropName: "defaultVisible",
+    trigger: "onVisibleChange"
+  });
+  const currentValue = poppable ? panelValue : cascaderValue;
+  const {
+    tabs,
+    items,
+    depth
+  } = useCascaderExtend(options, keys, currentValue);
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const handleTabsLayout = useCallback(e => {
+    const width = e.nativeEvent.layout.width;
+    if (!width) return;
+    setMeasuredWidth(prev => prev === width ? prev : width);
+  }, []);
+  const confirmedRows = useMemo(() => resolveSelectedRows(options, keys, cascaderValue), [cascaderValue, keys, options]);
+  const [activeTab, setActiveTab] = useState(0);
+  useEffect(() => {
+    const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
+    let tabIndex = currentLength;
+    if (tabIndex >= depth) tabIndex = Math.max(depth - 1, 0);
+    setActiveTab(prev => prev === tabIndex ? prev : tabIndex);
+  }, [currentValue.length, depth]);
+  useEffect(() => {
+    if (!poppable) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+      return;
+    }
+    if (!popupVisible) {
+      setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    }
+  }, [cascaderValue, poppable, popupVisible]);
+  const openPopup = useCallback(() => {
+    if (!poppable || popupVisible) return;
+    setPanelValue(prev => isSameValueArray(prev, cascaderValue) ? prev : cascaderValue);
+    setPopupVisible(true);
+  }, [cascaderValue, poppable, popupVisible, setPopupVisible]);
+  const closePopup = useCallback(notify => {
+    if (!poppable || !popupVisible) return;
+    setPopupVisible(false);
+    if (notify) onClose?.();
+  }, [onClose, poppable, popupVisible, setPopupVisible]);
+  const togglePopup = useCallback(() => {
+    if (!poppable) return;
+    popupVisible ? closePopup(true) : openPopup();
+  }, [closePopup, openPopup, poppable, popupVisible]);
+  const isRenderProp = isFunction(children);
+  const renderProp = isRenderProp ? children : null;
+  const handleClickTab = useCallback(event => {
+    const index = isNumber(event.index) ? event.index : Number(event.name);
+    if (Number.isNaN(index)) return;
+    const titleNode = items[index]?.[keys.textKey];
+    const titleText = isText(titleNode) ? String(titleNode) : placeholder;
+    onClickTab?.(index, titleText);
+  }, [items, keys.textKey, onClickTab, placeholder]);
+  const handleTabChange = useCallback((tabValue, indexFromEvent) => {
+    const index = isNumber(indexFromEvent) ? indexFromEvent : Number(tabValue);
+    if (Number.isNaN(index)) return;
+    setActiveTab(index);
+    onTabChange?.(index);
+  }, [onTabChange]);
+  const handleSelect = useCallback((option, tabIndex) => {
+    if (option.disabled) return;
+    const optionValue = option[keys.valueKey];
+    if (optionValue === undefined || optionValue === null) return;
+    const base = (poppable ? panelValue : cascaderValue).slice(0, tabIndex);
+    const nextValue = [...base, optionValue];
+    const rows = resolveSelectedRows(options, keys, nextValue);
+    const childrenOptions = option[keys.childrenKey] ?? [];
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+    const hasChildren = childrenOptions.length > 0;
+    const asyncBranch = hasChildrenProp && !hasChildren;
+    const reachDepth = nextValue.length >= depth;
+    const isLeaf = !hasChildren && !asyncBranch;
+    if (poppable) {
+      setPanelValue(nextValue);
+      onChange?.(nextValue, rows);
+    } else {
+      setValue(nextValue, rows);
+    }
+    if (isLeaf || reachDepth) {
+      if (poppable) {
+        setValue(nextValue, rows);
+        if (closeOnFinish) closePopup(true);
+      }
+      onFinish?.(nextValue, rows);
+    }
+  }, [cascaderValue, closeOnFinish, closePopup, depth, keys, onChange, onFinish, options, panelValue, poppable, setValue]);
+  const getEmptyText = useCallback(tabIndex => {
+    if (tabIndex <= 0) return placeholder;
+    const parent = items[tabIndex - 1];
+    if (!parent) return placeholder;
+    const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
+    if (!hasChildrenProp) return placeholder;
+    const children = parent[keys.childrenKey] ?? [];
+    const asyncBranch = children.length === 0 && currentValue.length === tabIndex;
+    return asyncBranch ? loadingText : placeholder;
+  }, [currentValue.length, items, keys.childrenKey, loadingText, placeholder]);
+  const renderTabs = () => {
+    if (!tabs.length) {
+      return /*#__PURE__*/React.createElement(CascaderOptionList, {
+        optionList: [],
+        tabIndex: 0,
+        selectedValue: currentValue[0],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(0)
+      });
+    }
+    const swipeableEnabled = !!swipeable;
+    const resolvedTabsWidth = measuredWidth || windowWidth || undefined;
+    const tabBarStyle = {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
+      paddingVertical: tokens.spacing.tabNavPaddingVertical,
+      backgroundColor: tokens.colors.background
+    };
+    return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.tabsWrapper,
+      onLayout: handleTabsLayout
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      style: resolvedTabsWidth ? {
+        width: resolvedTabsWidth
+      } : undefined,
+      active: activeTab,
+      onChange: handleTabChange,
+      onClickTab: handleClickTab,
+      align: "center",
+      swipeable: swipeableEnabled,
+      swipeThreshold: 0,
+      scrollable: true,
+      animated: true,
+      duration: 300,
+      color: activeColor,
+      lineHeight: tokens.sizing.indicatorHeight,
+      titleActiveColor: tokens.colors.tabText,
+      titleInactiveColor: tokens.colors.tabInactive,
+      tabBarStyle: tabBarStyle,
+      tabStyle: [tokens.layout.tabsItem, {
+        paddingHorizontal: tokens.spacing.tabPaddingHorizontal
+      }],
+      titleStyle: [tokens.layout.tabsTitle, {
+        fontSize: tokens.typography.tabsTitleSize
+      }],
+      contentStyle: !swipeableEnabled ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optionList, index) => {
+      const selectedOption = items[index];
+      const labelValue = selectedOption?.[keys.textKey];
+      const labelText = isText(labelValue) ? String(labelValue) : "";
+      const unselected = !labelText;
+      const titleNode = _active => /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.tabTitleNode, {
+          color: unselected ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: unselected ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
+        }]
+      }, unselected ? placeholder : labelText);
+      return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+        key: index,
+        name: index,
+        title: titleNode
+      }, /*#__PURE__*/React.createElement(CascaderOptionList, {
+        optionList: optionList,
+        tabIndex: index,
+        selectedValue: currentValue[index],
+        activeColor: activeColor,
+        keys: keys,
+        optionRender: optionRender,
+        onSelect: handleSelect,
+        tokens: tokens,
+        emptyText: getEmptyText(index)
+      }));
+    })));
+  };
+  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const content = /*#__PURE__*/React.createElement(View, _extends({
+    testID: testID,
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
+  }, rest), showHeader ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.header, {
+      height: tokens.sizing.headerHeight,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.title, {
+      color: tokens.colors.headerText,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }]
+  }, title) : title, resolvedCloseable ? /*#__PURE__*/React.createElement(Pressable, {
+    hitSlop: 8,
+    onPress: () => {
+      if (poppable) {
+        closePopup(true);
+      } else {
+        onClose?.();
+      }
+    },
+    style: [tokens.layout.closeButton, {
+      marginLeft: tokens.spacing.closeButtonMarginLeft
+    }],
+    accessibilityRole: "button",
+    accessibilityLabel: "\u5173\u95ED"
+  }, closeIcon ?? (state => /*#__PURE__*/React.createElement(Cross, {
+    size: tokens.sizing.closeIconSize,
+    fill: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon,
+    color: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon
+  }))) : null) : null, renderTabs(), inlineChildren ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.inlineChildren, {
+      paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
+      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
+    }]
+  }, inlineChildren) : null);
+  if (!poppable) return content;
+  const {
+    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    overlay: popupOverlay,
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: popupOnClose,
+    onClosed: popupOnClosed,
+    ...popupRestProps
+  } = popupPropsOverrides ?? {};
+  const resolvedOverlay = popupOverlay ?? true;
+  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
+  const cascaderActions = useMemo(() => ({
+    open: openPopup,
+    close: () => closePopup(true),
+    toggle: togglePopup
+  }), [closePopup, openPopup, togglePopup]);
+  const enhanceTriggerNode = useCallback(node => {
+    if (! /*#__PURE__*/React.isValidElement(node)) return node;
+    const props = node.props;
+    const handlePress = () => {
+      props.onPress?.();
+      props.onClick?.();
+      openPopup();
+    };
+    return /*#__PURE__*/React.cloneElement(node, {
+      onPress: handlePress,
+      onClick: handlePress
+    });
+  }, [openPopup]);
+  const triggerNode = renderProp ? renderProp(cascaderValue, confirmedRows, cascaderActions) : isRenderProp ? null : children || null;
+  const resolvedTriggerNode = enhanceTriggerNode(triggerNode);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, resolvedTriggerNode, /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: popupVisible,
+    placement: popupPlacement,
+    round: popupRound,
+    closeOnOverlayPress: resolvedCloseOnOverlayPress,
+    overlay: resolvedOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop !== undefined ? popupRestProps.safeAreaInsetTop : showHeader && resolvedCloseable,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom !== undefined ? popupRestProps.safeAreaInsetBottom : popupPlacement === 'bottom',
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    onClose: () => {
+      popupOnClose?.();
+      closePopup(true);
+    },
+    onClosed: popupOnClosed
+  }, popupRestProps, {
+    style: {
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }), content));
+};
+const CascaderOptionItem = /*#__PURE__*/React.memo(({
+  option,
+  tabIndex,
+  selected,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens
+}) => {
+  const optionValue = option[keys.valueKey];
+  const label = option[keys.textKey];
+  const disabled = !!option.disabled;
+  const baseColor = option.color ?? tokens.colors.optionText;
+  const textColor = disabled ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseColor;
+  const content = optionRender ? optionRender({
+    option,
+    selected
+  }) : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.optionText, {
+      color: textColor,
+      fontSize: tokens.typography.optionTextSize
+    }, selected && {
+      fontWeight: tokens.typography.optionTextActiveWeight
+    }]
+  }, label) : isRenderable(label) ? label : null;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
+    style: ({
+      pressed
+    }) => [tokens.layout.option, {
+      minHeight: tokens.sizing.optionMinHeight,
+      paddingVertical: tokens.spacing.optionPaddingVertical,
+      paddingHorizontal: tokens.spacing.optionPaddingHorizontal
+    }, pressed && !disabled && {
+      backgroundColor: tokens.colors.optionActiveBackground
+    }],
+    onPress: () => onSelect(option, tabIndex),
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.optionContent
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.optionLabel, {
+      marginRight: tokens.spacing.optionLabelMarginRight
+    }]
+  }, content), selected ? /*#__PURE__*/React.createElement(Checked, {
+    size: tokens.sizing.selectedIconSize,
+    fill: activeColor,
+    color: activeColor
+  }) : null));
+});
+const CascaderOptionList = /*#__PURE__*/React.memo(({
+  optionList,
+  tabIndex,
+  selectedValue,
+  activeColor,
+  keys,
+  optionRender,
+  onSelect,
+  tokens,
+  emptyText
+}) => {
+  if (!optionList.length) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.optionList, {
+        height: tokens.sizing.optionListHeight
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.empty, {
+        color: tokens.colors.placeholder,
+        paddingVertical: tokens.spacing.emptyPaddingVertical,
+        fontSize: tokens.typography.emptyTextSize
+      }]
+    }, emptyText));
+  }
+  const renderItem = useCallback(({
+    item
+  }) => /*#__PURE__*/React.createElement(CascaderOptionItem, {
+    option: item,
+    tabIndex: tabIndex,
+    selected: selectedValue === item[keys.valueKey],
+    activeColor: activeColor,
+    keys: keys,
+    optionRender: optionRender,
+    onSelect: onSelect,
+    tokens: tokens
+  }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
+  const keyExtractor = useCallback(item => String(item[keys.valueKey]), [keys.valueKey]);
+  return /*#__PURE__*/React.createElement(FlatList, {
+    data: optionList,
+    style: [tokens.layout.optionList, {
+      height: tokens.sizing.optionListHeight
+    }],
+    contentContainerStyle: {
+      paddingTop: tokens.spacing.optionListPaddingTop,
+      paddingBottom: tokens.spacing.optionListPaddingBottom
+    },
+    showsVerticalScrollIndicator: false,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    removeClippedSubviews: true,
+    initialNumToRender: 20,
+    windowSize: 5
+  });
+});
+export default Cascader;

package/dist/es/cascader/index.js

@@ -0,0 +1,3 @@
+import Cascader from "./Cascader";
+export default Cascader;
+export { Cascader };

package/dist/es/cascader/tokens.js

@@ -0,0 +1,131 @@
+import { createComponentTokensHook } from "../../design-system";
+export const createCascaderTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const surfaceMuted = palette.default[100];
+  const placeholderText = "请选择";
+  return {
+    defaults: {
+      placeholder: placeholderText,
+      title: placeholderText,
+      showHeader: true,
+      closeable: true,
+      swipeable: true,
+      poppable: false,
+      closeOnClickOverlay: true,
+      closeOnFinish: true,
+      popupPlacement: "bottom",
+      popupRound: true,
+      loadingText: "加载中..."
+    },
+    layout: {
+      container: {
+        borderRadius: 0,
+        width: "100%"
+      },
+      header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: 0
+      },
+      title: {
+        lineHeight: 20,
+        includeFontPadding: false
+      },
+      closeButton: {},
+      tabsWrapper: {
+        width: "100%"
+      },
+      tabsContentStatic: {
+        width: "100%"
+      },
+      tabsItem: {
+        alignItems: "center"
+      },
+      tabsTitle: {
+        includeFontPadding: false
+      },
+      tabTitleNode: {
+        includeFontPadding: false
+      },
+      optionList: {
+        flexGrow: 0
+      },
+      option: {
+        justifyContent: "center"
+      },
+      optionContent: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      optionText: {
+        lineHeight: 20,
+        includeFontPadding: false
+      },
+      optionTextActive: {},
+      optionLabel: {
+        flex: 1
+      },
+      empty: {
+        textAlign: "center"
+      },
+      inlineChildren: {}
+    },
+    colors: {
+      background: "#ffffff",
+      headerText: palette.default[900],
+      placeholder: palette.default[500],
+      closeIcon: palette.default[300],
+      closeIconActive: palette.default[500],
+      tabText: palette.default[900],
+      tabActive: palette.primary[500],
+      tabInactive: palette.default[500],
+      optionText: palette.default[900],
+      optionDisabled: palette.default[300],
+      optionActiveBackground: surfaceMuted,
+      optionActiveText: palette.primary[500],
+      divider: palette.default[200]
+    },
+    typography: {
+      titleSize: 16,
+      titleWeight: "500",
+      tabsTitleSize: 14,
+      tabTitlePlaceholderWeight: "400",
+      tabTitleWeight: "500",
+      optionTextSize: 14,
+      optionTextActiveWeight: "500",
+      emptyTextSize: 14
+    },
+    sizing: {
+      indicatorHeight: 3,
+      optionMinHeight: 40,
+      optionListHeight: 384,
+      headerHeight: 48,
+      closeIconSize: 22,
+      selectedIconSize: 18
+    },
+    radii: {
+      option: radii.sm
+    },
+    spacing: {
+      headerPaddingHorizontal: spacing.lg,
+      tabNavPaddingHorizontal: 6,
+      tabNavPaddingVertical: 2,
+      tabPaddingHorizontal: 10,
+      optionPaddingVertical: 10,
+      optionPaddingHorizontal: spacing.lg,
+      optionListPaddingTop: 6,
+      optionListPaddingBottom: 0,
+      closeButtonMarginLeft: 8,
+      optionLabelMarginRight: 12,
+      emptyPaddingVertical: 24,
+      inlineChildrenPaddingVertical: 12
+    }
+  };
+};
+export const useCascaderTokens = createComponentTokensHook("cascader", createCascaderTokens);

package/dist/es/cascader/useCascaderExtend.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+export const useCascaderExtend = (options = [], keys, value) => {
+  const depth = useMemo(() => {
+    let maxDepth = 1;
+    const traverse = (opts, level) => {
+      if (!opts || !opts.length) return;
+      if (level > maxDepth) maxDepth = level;
+      const next = level + 1;
+      opts.forEach(option => {
+        const hasChildrenProp = Object.prototype.hasOwnProperty.call(option, keys.childrenKey);
+        if (hasChildrenProp && next > maxDepth) maxDepth = next;
+        const children = option[keys.childrenKey];
+        if (children && children.length) traverse(children, next);
+      });
+    };
+    traverse(options, 1);
+    return maxDepth;
+  }, [keys.childrenKey, options]);
+  const tabs = useMemo(() => {
+    if (!value || !value.length) return [options];
+    return value.reduce((acc, val, index) => {
+      if (val == null) return acc;
+      const current = acc[index];
+      if (!current) return acc;
+      const next = current.find(option => option[keys.valueKey] === value[index]);
+      const children = next?.[keys.childrenKey];
+      if (children) acc.push(children);
+      return acc;
+    }, [options]);
+  }, [keys.childrenKey, keys.valueKey, options, value]);
+  const items = useMemo(() => {
+    if (!value || !value.length) return [];
+    return value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
+  }, [keys.valueKey, tabs, value]);
+  return {
+    tabs,
+    items,
+    depth
+  };
+};

package/dist/es/cascader/utils.js

@@ -0,0 +1,13 @@
+export const resolveSelectedRows = (options = [], keys, value) => {
+  const selected = [];
+  let current = options;
+  value.forEach(val => {
+    if (!current || !current.length) return;
+    const match = current.find(option => option[keys.valueKey] === val);
+    if (match) {
+      selected.push(match);
+      current = match[keys.childrenKey] ?? [];
+    }
+  });
+  return selected;
+};