react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/cascader/Cascader.js

@@ -1,12 +1,13 @@
 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, useState } from "react";
+import React, { useCallback, useEffect, useRef, 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 { shallowEqualArray } from "../../utils";
-import { isFunction, isNumber, isRenderable, isText } from "../../utils/validate";
+import { shallowEqualArray, renderTextOrNode } from "../../utils";
+import { isFunction, isNumber, isText } from "../../utils/validate";
 import Popup from "../popup";
 import Tabs from "../tabs";
+import { useLocale } from "../config-provider/useLocale";
 import { useCascaderTokens } from "./tokens";
 import { useCascaderExtend } from "./useCascaderExtend";
 const getFieldKeys = fieldNames => ({
@@ -14,29 +15,29 @@ const getFieldKeys = fieldNames => ({
   valueKey: fieldNames?.value ?? "value",
   childrenKey: fieldNames?.children ?? "children"
 });
-const resolveSelectedRows = (options = [], keys, value) => {
+const resolveRows = (options = [], keys, values) => {
   const selected = [];
   let current = options;
-  value.forEach(val => {
+  values.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] ?? [];
+    const matched = current.find(o => o[keys.valueKey] === val);
+    if (matched) {
+      selected.push(matched);
+      current = matched[keys.childrenKey] ?? [];
     }
   });
   return selected;
 };
-const Cascader = props => {
+const CascaderImpl = props => {
   const {
     tokensOverride,
     options = [],
-    title: titleProp,
-    placeholder: placeholderProp,
-    activeColor: activeColorProp,
+    title,
+    placeholder,
+    activeColor,
     fieldNames,
     optionRender,
-    showHeader: showHeaderProp,
+    showHeader,
     closeable,
     closeIcon,
     onChange,
@@ -44,54 +45,55 @@ const Cascader = props => {
     onFinish,
     onClickTab,
     onTabChange,
-    swipeable: swipeableProp,
+    swipeable,
     style,
     testID,
     children,
-    poppable: poppableProp,
+    poppable,
     visible: _visible,
     defaultVisible: _defaultVisible,
     onVisibleChange: _onVisibleChange,
-    closeOnClickOverlay: closeOnClickOverlayProp,
-    closeOnFinish: closeOnFinishProp,
-    popupPlacement: popupPlacementProp,
-    popupRound: popupRoundProp,
-    popupProps: popupPropsOverrides,
-    loadingText: loadingTextProp,
+    closeOnClickOverlay,
+    closeOnFinish,
+    popupPlacement,
+    popupRound,
+    popupProps,
+    loadingText,
     ...rest
   } = props;
+  const locale = useLocale();
   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 resolvedTitle = title ?? locale?.vanCascader?.placeholder ?? tokens.defaults.title;
+  const resolvedPlaceholder = placeholder ?? locale?.vanCascader?.placeholder ?? tokens.defaults.placeholder;
+  const resolvedActiveColor = activeColor ?? tokens.colors.tabActive;
+  const resolvedShowHeader = showHeader ?? tokens.defaults.showHeader;
+  const resolvedSwipeable = swipeable ?? tokens.defaults.swipeable;
+  const resolvedPoppable = poppable ?? tokens.defaults.poppable;
+  const resolvedCloseOnClickOverlay = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
+  const resolvedCloseOnFinish = closeOnFinish ?? tokens.defaults.closeOnFinish;
+  const resolvedPopupPlacement = popupPlacement ?? tokens.defaults.popupPlacement;
+  const resolvedPopupRound = popupRound ?? tokens.defaults.popupRound;
+  const resolvedLoadingText = loadingText ?? tokens.defaults.loadingText;
   const [value, setValue] = useControllableValue(props, {
     defaultValue: [],
     trigger: "onChange"
   });
   const keys = getFieldKeys(fieldNames);
-  const cascaderValue = Array.isArray(value) ? value : [];
-  const [panelValue, setPanelValue] = useState(cascaderValue);
-  const resolvedCloseable = closeable ?? tokens.defaults.closeable;
+  const currentValue = Array.isArray(value) ? value : [];
+  const [pendingValue, setPendingValue] = useState(currentValue);
+  const showClose = closeable ?? tokens.defaults.closeable;
   const [popupVisible, setPopupVisible] = useControllableValue(props, {
     defaultValue: false,
     valuePropName: "visible",
     defaultValuePropName: "defaultVisible",
     trigger: "onVisibleChange"
   });
-  const currentValue = poppable ? panelValue : cascaderValue;
+  const current = resolvedPoppable ? pendingValue : currentValue;
   const {
     tabs,
     items,
     depth
-  } = useCascaderExtend(options, keys, currentValue);
+  } = useCascaderExtend(options, keys, current);
   const {
     width: windowWidth
   } = useWindowDimensions();
@@ -101,105 +103,105 @@ const Cascader = props => {
     if (!width) return;
     setMeasuredWidth(prev => prev === width ? prev : width);
   }, []);
-  const confirmedRows = resolveSelectedRows(options, keys, cascaderValue);
+  const currentRows = resolveRows(options, keys, currentValue);
   const [activeTab, setActiveTab] = useState(0);
   useEffect(() => {
-    const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
+    const currentLength = Array.isArray(current) ? current.length : 0;
     let tabIndex = currentLength;
     if (tabIndex >= depth) tabIndex = Math.max(depth - 1, 0);
     setActiveTab(prev => prev === tabIndex ? prev : tabIndex);
-  }, [currentValue.length, depth]);
+  }, [current.length, depth]);
   useEffect(() => {
-    if (!poppable) {
-      setPanelValue(prev => shallowEqualArray(prev, cascaderValue) ? prev : cascaderValue);
-      return;
-    }
-    if (!popupVisible) {
-      setPanelValue(prev => shallowEqualArray(prev, cascaderValue) ? prev : cascaderValue);
-    }
-  }, [cascaderValue, poppable, popupVisible]);
+    if (!resolvedPoppable || !popupVisible) setPendingValue(prev => shallowEqualArray(prev, currentValue) ? prev : currentValue);
+  }, [currentValue, resolvedPoppable, popupVisible]);
   const openPopup = useCallback(() => {
-    if (!poppable || popupVisible) return;
-    setPanelValue(prev => shallowEqualArray(prev, cascaderValue) ? prev : cascaderValue);
+    if (!resolvedPoppable || popupVisible) return;
+    setPendingValue(prev => shallowEqualArray(prev, currentValue) ? prev : currentValue);
     setPopupVisible(true);
-  }, [cascaderValue, poppable, popupVisible, setPopupVisible]);
+  }, [currentValue, resolvedPoppable, popupVisible, setPopupVisible]);
+  const onCloseRef = useRef(onClose),
+    onChangeRef = useRef(onChange),
+    onFinishRef = useRef(onFinish),
+    onClickTabRef = useRef(onClickTab),
+    onTabChangeRef = useRef(onTabChange);
+  onCloseRef.current = onClose;
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
+  onClickTabRef.current = onClickTab;
+  onTabChangeRef.current = onTabChange;
   const closePopup = useCallback(notify => {
-    if (!poppable || !popupVisible) return;
+    if (!resolvedPoppable || !popupVisible) return;
     setPopupVisible(false);
-    if (notify) onClose?.();
-  }, [onClose, poppable, popupVisible, setPopupVisible]);
+    if (notify) onCloseRef.current?.();
+  }, [resolvedPoppable, popupVisible, setPopupVisible]);
   const togglePopup = useCallback(() => {
-    if (!poppable) return;
+    if (!resolvedPoppable) 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);
+  }, [closePopup, openPopup, resolvedPoppable, popupVisible]);
+  const isRenderProps = isFunction(children);
+  const renderProps = isRenderProps ? children : null;
+  const handleClickTab = useCallback(e => {
+    const index = isNumber(e.index) ? e.index : Number(e.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);
+    const tabName = items[index]?.[keys.textKey];
+    const tabText = isText(tabName) ? String(tabName) : resolvedPlaceholder;
+    onClickTabRef.current?.(index, tabText);
+  }, [items, keys.textKey, resolvedPlaceholder]);
+  const handleTabChange = useCallback((tabValue, indexExplicit) => {
+    const index = isNumber(indexExplicit) ? indexExplicit : Number(tabValue);
     if (Number.isNaN(index)) return;
     setActiveTab(index);
-    onTabChange?.(index);
-  }, [onTabChange]);
+    onTabChangeRef.current?.(index);
+  }, []);
   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);
+    if (optionValue == null) return;
+    const base = (resolvedPoppable ? pendingValue : currentValue).slice(0, tabIndex);
     const nextValue = [...base, optionValue];
-    const rows = resolveSelectedRows(options, keys, nextValue);
-    const childrenOptions = option[keys.childrenKey] ?? [];
+    const rows = resolveRows(options, keys, nextValue);
+    const children = 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) {
+    const hasChildren = children.length > 0;
+    const isAsync = hasChildrenProp && !hasChildren;
+    const reachedDepth = nextValue.length >= depth;
+    const isLeaf = !hasChildren && !isAsync;
+    if (resolvedPoppable) {
+      setPendingValue(nextValue);
+      onChangeRef.current?.(nextValue, rows);
+    } else setValue(nextValue, rows);
+    if (isLeaf || reachedDepth) {
+      if (resolvedPoppable) {
         setValue(nextValue, rows);
-        if (closeOnFinish) closePopup(true);
+        if (resolvedCloseOnFinish) closePopup(true);
       }
-      onFinish?.(nextValue, rows);
+      onFinishRef.current?.(nextValue, rows);
     }
-  }, [cascaderValue, closeOnFinish, closePopup, depth, keys, onChange, onFinish, options, panelValue, poppable, setValue]);
+  }, [currentValue, resolvedCloseOnFinish, closePopup, depth, keys, options, pendingValue, resolvedPoppable, setValue]);
   const getEmptyText = useCallback(tabIndex => {
-    if (tabIndex <= 0) return placeholder;
+    if (tabIndex <= 0) return resolvedPlaceholder;
     const parent = items[tabIndex - 1];
-    if (!parent) return placeholder;
+    if (!parent) return resolvedPlaceholder;
     const hasChildrenProp = Object.prototype.hasOwnProperty.call(parent, keys.childrenKey);
-    if (!hasChildrenProp) return placeholder;
+    if (!hasChildrenProp) return resolvedPlaceholder;
     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 isAsync = children.length === 0 && current.length === tabIndex;
+    return isAsync ? resolvedLoadingText : resolvedPlaceholder;
+  }, [current.length, items, keys.childrenKey, resolvedLoadingText, resolvedPlaceholder]);
   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;
+    if (!tabs.length) return /*#__PURE__*/React.createElement(CascaderOptionList, {
+      optionList: [],
+      tabIndex: 0,
+      selectedValue: current[0],
+      activeColor: resolvedActiveColor,
+      keys: keys,
+      optionRender: optionRender,
+      onSelect: handleSelect,
+      tokens: tokens,
+      emptyText: getEmptyText(0)
+    });
+    const swipeEnabled = !!resolvedSwipeable;
+    const renderTabsWidth = measuredWidth || windowWidth || undefined;
     const tabBarStyle = {
       height: tokens.sizing.headerHeight,
       paddingHorizontal: tokens.spacing.tabNavPaddingHorizontal,
@@ -210,19 +212,19 @@ const Cascader = props => {
       style: tokens.layout.tabsWrapper,
       onLayout: handleTabsLayout
     }, /*#__PURE__*/React.createElement(Tabs, {
-      style: resolvedTabsWidth ? {
-        width: resolvedTabsWidth
+      style: renderTabsWidth ? {
+        width: renderTabsWidth
       } : undefined,
       active: activeTab,
       onChange: handleTabChange,
       onClickTab: handleClickTab,
       align: "center",
-      swipeable: swipeableEnabled,
+      swipeable: swipeEnabled,
       swipeThreshold: 0,
       scrollable: true,
       animated: true,
       duration: 300,
-      color: activeColor,
+      color: resolvedActiveColor,
       lineHeight: tokens.sizing.indicatorHeight,
       titleActiveColor: tokens.colors.tabText,
       titleInactiveColor: tokens.colors.tabInactive,
@@ -233,66 +235,60 @@ const Cascader = props => {
       titleStyle: [tokens.layout.tabsTitle, {
         fontSize: tokens.typography.tabsTitleSize
       }],
-      contentStyle: !swipeableEnabled ? tokens.layout.tabsContentStatic : undefined
-    }, tabs.map((optionList, index) => {
-      const selectedOption = items[index];
+      contentStyle: !swipeEnabled ? tokens.layout.tabsContentStatic : undefined
+    }, tabs.map((optionList, i) => {
+      const selectedOption = items[i];
       const labelValue = selectedOption?.[keys.textKey];
-      const labelText = isText(labelValue) ? String(labelValue) : "";
-      const unselected = !labelText;
-      const titleNode = _active => /*#__PURE__*/React.createElement(Text, {
+      const label = isText(labelValue) ? String(labelValue) : "";
+      const usePlaceholder = !label;
+      const titleNode = _ => /*#__PURE__*/React.createElement(Text, {
         style: [tokens.layout.tabTitleNode, {
-          color: unselected ? tokens.colors.tabInactive : tokens.colors.tabText,
-          fontWeight: unselected ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
+          color: usePlaceholder ? tokens.colors.tabInactive : tokens.colors.tabText,
+          fontWeight: usePlaceholder ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
         }]
-      }, unselected ? placeholder : labelText);
+      }, usePlaceholder ? resolvedPlaceholder : label);
       return /*#__PURE__*/React.createElement(Tabs.TabPane, {
-        key: index,
-        name: index,
+        key: i,
+        name: i,
         title: titleNode
       }, /*#__PURE__*/React.createElement(CascaderOptionList, {
         optionList: optionList,
-        tabIndex: index,
-        selectedValue: currentValue[index],
-        activeColor: activeColor,
+        tabIndex: i,
+        selectedValue: current[i],
+        activeColor: resolvedActiveColor,
         keys: keys,
         optionRender: optionRender,
         onSelect: handleSelect,
         tokens: tokens,
-        emptyText: getEmptyText(index)
+        emptyText: getEmptyText(i)
       }));
     })));
   };
-  const inlineChildren = !poppable && !isRenderProp ? children : null;
+  const inlineChildren = !resolvedPoppable && !isRenderProps ? 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, {
+  }, rest), resolvedShowHeader ? /*#__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, {
+  }, renderTextOrNode(resolvedTitle, [tokens.layout.title, {
+    color: tokens.colors.headerText,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }]), showClose ? /*#__PURE__*/React.createElement(Pressable, {
     hitSlop: 8,
     onPress: () => {
-      if (poppable) {
-        closePopup(true);
-      } else {
-        onClose?.();
-      }
+      if (resolvedPoppable) closePopup(true);else onCloseRef.current?.();
     },
     style: [tokens.layout.closeButton, {
       marginLeft: tokens.spacing.closeButtonMarginLeft
     }],
     accessibilityRole: "button",
-    accessibilityLabel: "\u5173\u95ED"
+    accessibilityLabel: locale?.vanCascader?.close ?? 'Close'
   }, closeIcon ?? (state => /*#__PURE__*/React.createElement(Cross, {
     size: tokens.sizing.closeIconSize,
     fill: state.pressed ? tokens.colors.closeIconActive : tokens.colors.closeIcon,
@@ -303,19 +299,25 @@ const Cascader = props => {
       paddingHorizontal: tokens.spacing.headerPaddingHorizontal
     }]
   }, inlineChildren) : null);
-  if (!poppable) return content;
+  if (!resolvedPoppable) return content;
   const {
-    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    closeOnOverlayPress: overlayCloseOnPress,
     overlay: popupOverlay,
     onOpen: popupOnOpen,
     onOpened: popupOnOpened,
     onClose: popupOnClose,
     onClosed: popupOnClosed,
     ...popupRestProps
-  } = popupPropsOverrides ?? {};
-  const resolvedOverlay = popupOverlay ?? true;
-  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
-  const cascaderActions = {
+  } = popupProps ?? {};
+  const renderOverlay = popupOverlay ?? true;
+  const renderCloseOnPress = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
+  const popupOnCloseRef = useRef(popupOnClose);
+  popupOnCloseRef.current = popupOnClose;
+  const handlePopupClose = useCallback(() => {
+    popupOnCloseRef.current?.();
+    closePopup(true);
+  }, [closePopup]);
+  const controlActions = {
     open: openPopup,
     close: () => closePopup(true),
     toggle: togglePopup
@@ -333,22 +335,19 @@ const Cascader = props => {
       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({
+  const triggerNode = renderProps ? renderProps(currentValue, currentRows, controlActions) : isRenderProps ? null : children || null;
+  const renderTriggerNode = enhanceTriggerNode(triggerNode);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTriggerNode, /*#__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',
+    placement: resolvedPopupPlacement,
+    round: resolvedPopupRound,
+    closeOnOverlayPress: renderCloseOnPress,
+    overlay: renderOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop != null ? popupRestProps.safeAreaInsetTop : resolvedShowHeader && showClose,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom != null ? popupRestProps.safeAreaInsetBottom : resolvedPopupPlacement === 'bottom',
     onOpen: popupOnOpen,
     onOpened: popupOnOpened,
-    onClose: () => {
-      popupOnClose?.();
-      closePopup(true);
-    },
+    onClose: handlePopupClose,
     onClosed: popupOnClosed
   }, popupRestProps, {
     style: {
@@ -372,17 +371,16 @@ const CascaderOptionItem = /*#__PURE__*/React.memo(({
   const disabled = !!option.disabled;
   const baseColor = option.color ?? tokens.colors.optionText;
   const textColor = disabled ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseColor;
+  const optionTextStyle = [tokens.layout.optionText, {
+    color: textColor,
+    fontSize: tokens.typography.optionTextSize
+  }, selected ? {
+    fontWeight: tokens.typography.optionTextActiveWeight
+  } : null];
   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;
+  }) : renderTextOrNode(label, optionTextStyle);
   return /*#__PURE__*/React.createElement(Pressable, {
     testID: `cascader-option-${tabIndex}-${String(optionValue)}`,
     style: ({
@@ -419,19 +417,6 @@ const CascaderOptionList = /*#__PURE__*/React.memo(({
   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, {
@@ -445,6 +430,17 @@ const CascaderOptionList = /*#__PURE__*/React.memo(({
     tokens: tokens
   }), [activeColor, keys, onSelect, optionRender, selectedValue, tabIndex, tokens]);
   const keyExtractor = useCallback(item => String(item[keys.valueKey]), [keys.valueKey]);
+  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));
   return /*#__PURE__*/React.createElement(FlatList, {
     data: optionList,
     style: [tokens.layout.optionList, {
@@ -462,4 +458,5 @@ const CascaderOptionList = /*#__PURE__*/React.memo(({
     windowSize: 5
   });
 });
+const Cascader = /*#__PURE__*/React.memo(CascaderImpl);
 export default Cascader;

package/dist/es/components/cascader/tokens.js

@@ -6,7 +6,7 @@ export const createCascaderTokens = foundations => {
     radii
   } = foundations;
   const surfaceMuted = palette.default[100];
-  const placeholderText = "请选择";
+  const placeholderText = "Select";
   return {
     defaults: {
       placeholder: placeholderText,
@@ -19,7 +19,7 @@ export const createCascaderTokens = foundations => {
       closeOnFinish: true,
       popupPlacement: "bottom",
       popupRound: true,
-      loadingText: "加载中..."
+      loadingText: "Loading..."
     },
     layout: {
       container: {

package/dist/es/components/cascader/useCascaderExtend.js

@@ -1,33 +1,29 @@
+const getDepth = (options, childrenKey) => {
+  let max = 1;
+  const traverse = (opts, level) => {
+    if (!opts?.length) return;
+    if (level > max) max = level;
+    opts.forEach(o => {
+      const has = Object.prototype.hasOwnProperty.call(o, childrenKey);
+      if (has && level + 1 > max) max = level + 1;
+      const ch = o[childrenKey];
+      if (ch?.length) traverse(ch, level + 1);
+    });
+  };
+  traverse(options, 1);
+  return max;
+};
 export const useCascaderExtend = (options = [], keys, value) => {
-  const depth = (() => {
-    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;
-  })();
-  const tabs = (() => {
-    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]);
-  })();
-  const items = !value || !value.length ? [] : value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
+  const depth = getDepth(options, keys.childrenKey);
+  const tabs = !value?.length ? [options] : value.reduce((acc, val, i) => {
+    if (val == null) return acc;
+    const cur = acc[i];
+    if (!cur) return acc;
+    const ch = cur.find(o => o[keys.valueKey] === value[i])?.[keys.childrenKey];
+    if (ch) acc.push(ch);
+    return acc;
+  }, [options]);
+  const items = !value?.length ? [] : value.map((val, i) => tabs[i]?.find(o => o[keys.valueKey] === val));
   return {
     tabs,
     items,