react-native-system-ui 1.0.1 → 1.0.3

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

@@ -1,122 +1 @@
-import { createComponentTokensHook } from "../../design-system";
-export const createCalendarTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize,
-    typography
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? "#ffffff";
-  return {
-    defaults: {
-      type: "single",
-      title: "Select Date",
-      showSubtitle: true,
-      showHeader: true,
-      showConfirm: {
-        single: false,
-        range: true,
-        multiple: true
-      },
-      confirmText: "Confirm",
-      weekStartsOn: 0,
-      weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-      allowSameDay: false,
-      poppable: false,
-      closeOnClickOverlay: true,
-      closeOnConfirm: true,
-      popupPlacement: "bottom",
-      popupRound: true
-    },
-    layout: {
-      header: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between"
-      },
-      headerCenter: {
-        alignItems: "center",
-        flex: 1
-      },
-      navText: {
-        textAlign: "center"
-      },
-      headerTitle: {
-        textAlign: "center"
-      },
-      headerSubtitle: {
-        textAlign: "center"
-      },
-      weekRow: {
-        flexDirection: "row",
-        justifyContent: "space-between"
-      },
-      weekLabelItem: {
-        width: `${100 / 7}%`,
-        alignItems: "center"
-      },
-      weekLabel: {
-        textAlign: "center"
-      },
-      days: {
-        flexDirection: "row",
-        flexWrap: "wrap"
-      },
-      dayButton: {
-        width: `${100 / 7}%`,
-        alignItems: "center"
-      },
-      dayText: {
-        textAlign: "center"
-      },
-      dayPlaceholder: {
-        width: `${100 / 7}%`
-      },
-      confirmButton: {
-        alignItems: "center"
-      },
-      confirmText: {
-        textAlign: "center"
-      }
-    },
-    colors: {
-      text: palette.default[800],
-      weekend: palette.danger[500],
-      disabled: palette.default[300],
-      background: "#ffffff",
-      selectedBackground: palette.primary[500],
-      selectedText: onPrimary,
-      rangeBackground: palette.primary[100],
-      headerSubtitle: palette.default[600],
-      confirmText: onPrimary
-    },
-    typography: {
-      headerTitleSize: fontSize.md,
-      headerTitleWeight: typography.weight.semiBold,
-      headerSubtitleSize: fontSize.sm,
-      confirmTextWeight: typography.weight.semiBold
-    },
-    sizing: {
-      dayMinWidth: 32,
-      navButtonSize: fontSize.md
-    },
-    radii: {
-      day: radii.sm,
-      container: radii.lg,
-      confirmButton: 20
-    },
-    spacing: {
-      row: spacing.xs,
-      column: spacing.xs,
-      containerPadding: spacing.lg,
-      headerMarginBottom: spacing.md,
-      weekRowMarginBottom: spacing.sm,
-      navPaddingHorizontal: spacing.sm,
-      dayPaddingVertical: 6,
-      confirmMarginTop: spacing.lg,
-      confirmPaddingVertical: 10
-    }
-  };
-};
-export const useCalendarTokens = createComponentTokensHook("calendar", createCalendarTokens);
+import{createComponentTokensHook}from"../../design-system";export const createCalendarTokens=e=>{const{palette:t,spacing:n,radii:a,fontSize:r,typography:i}=e,o=t.primary.foreground??"#ffffff";return{defaults:{type:"single",title:"Select Date",showSubtitle:!0,showHeader:!0,showConfirm:{single:!1,range:!0,multiple:!0},confirmText:"Confirm",weekStartsOn:0,weekdays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],allowSameDay:!1,poppable:!1,closeOnClickOverlay:!0,closeOnConfirm:!0,popupPlacement:"bottom",popupRound:!0},layout:{header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},headerCenter:{alignItems:"center",flex:1},navText:{textAlign:"center"},headerTitle:{textAlign:"center"},headerSubtitle:{textAlign:"center"},weekRow:{flexDirection:"row",justifyContent:"space-between"},weekLabelItem:{width:100/7+"%",alignItems:"center"},weekLabel:{textAlign:"center"},days:{flexDirection:"row",flexWrap:"wrap"},dayButton:{width:100/7+"%",alignItems:"center"},dayText:{textAlign:"center"},dayPlaceholder:{width:100/7+"%"},confirmButton:{alignItems:"center"},confirmText:{textAlign:"center"}},colors:{text:t.default[800],weekend:t.danger[500],disabled:t.default[300],background:"#ffffff",selectedBackground:t.primary[500],selectedText:o,rangeBackground:t.primary[100],headerSubtitle:t.default[600],confirmText:o},typography:{headerTitleSize:r.md,headerTitleWeight:i.weight.semiBold,headerSubtitleSize:r.sm,confirmTextWeight:i.weight.semiBold},sizing:{dayMinWidth:32,navButtonSize:r.md},radii:{day:a.sm,container:a.lg,confirmButton:20},spacing:{row:n.xs,column:n.xs,containerPadding:n.lg,headerMarginBottom:n.md,weekRowMarginBottom:n.sm,navPaddingHorizontal:n.sm,dayPaddingVertical:6,confirmMarginTop:n.lg,confirmPaddingVertical:10}}};export const useCalendarTokens=createComponentTokensHook("calendar",createCalendarTokens);

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

@@ -1,455 +1 @@
-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, 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, 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 = fn => ({
-  textKey: fn?.text ?? "text",
-  valueKey: fn?.value ?? "value",
-  childrenKey: fn?.children ?? "children"
-});
-const resolveRows = (opts = [], k, vals) => {
-  const sel = [];
-  let cur = opts;
-  vals.forEach(val => {
-    if (!cur?.length) return;
-    const m = cur.find(o => o[k.valueKey] === val);
-    if (m) {
-      sel.push(m);
-      cur = m[k.childrenKey] ?? [];
-    }
-  });
-  return sel;
-};
-const CascaderImpl = props => {
-  const {
-    tokensOverride,
-    options = [],
-    title,
-    placeholder,
-    activeColor,
-    fieldNames,
-    optionRender,
-    showHeader,
-    closeable,
-    closeIcon,
-    onChange,
-    onClose,
-    onFinish,
-    onClickTab,
-    onTabChange,
-    swipeable,
-    style,
-    testID,
-    children,
-    poppable,
-    visible: _v,
-    defaultVisible: _dv,
-    onVisibleChange: _ov,
-    closeOnClickOverlay,
-    closeOnFinish,
-    popupPlacement,
-    popupRound,
-    popupProps,
-    loadingText,
-    ...rest
-  } = props;
-  const locale = useLocale();
-  const tokens = useCascaderTokens(tokensOverride);
-  const rT = title ?? locale?.vanCascader?.placeholder ?? tokens.defaults.title;
-  const rP = placeholder ?? locale?.vanCascader?.placeholder ?? tokens.defaults.placeholder;
-  const rAc = activeColor ?? tokens.colors.tabActive;
-  const rSH = showHeader ?? tokens.defaults.showHeader;
-  const rSw = swipeable ?? tokens.defaults.swipeable;
-  const rPop = poppable ?? tokens.defaults.poppable;
-  const rCO = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
-  const rCF = closeOnFinish ?? tokens.defaults.closeOnFinish;
-  const rPP = popupPlacement ?? tokens.defaults.popupPlacement;
-  const rPR = popupRound ?? tokens.defaults.popupRound;
-  const rLT = loadingText ?? tokens.defaults.loadingText;
-  const [value, setValue] = useControllableValue(props, {
-    defaultValue: [],
-    trigger: "onChange"
-  });
-  const keys = getFieldKeys(fieldNames);
-  const curVal = Array.isArray(value) ? value : [];
-  const [pending, setPending] = useState(curVal);
-  const showCl = closeable ?? tokens.defaults.closeable;
-  const [popVis, setPopVis] = useControllableValue(props, {
-    defaultValue: false,
-    valuePropName: "visible",
-    defaultValuePropName: "defaultVisible",
-    trigger: "onVisibleChange"
-  });
-  const cur = rPop ? pending : curVal;
-  const {
-    tabs,
-    items,
-    depth
-  } = useCascaderExtend(options, keys, cur);
-  const {
-    width: winW
-  } = useWindowDimensions();
-  const [measW, setMeasW] = useState(0);
-  const onTabsLayout = useCallback(e => {
-    const w = e.nativeEvent.layout.width;
-    if (w) setMeasW(prev => prev === w ? prev : w);
-  }, []);
-  const curRows = resolveRows(options, keys, curVal);
-  const [actTab, setActTab] = useState(0);
-  useEffect(() => {
-    const len = Array.isArray(cur) ? cur.length : 0;
-    let ti = len;
-    if (ti >= depth) ti = Math.max(depth - 1, 0);
-    setActTab(prev => prev === ti ? prev : ti);
-  }, [cur.length, depth]);
-  useEffect(() => {
-    if (!rPop || !popVis) setPending(prev => shallowEqualArray(prev, curVal) ? prev : curVal);
-  }, [curVal, rPop, popVis]);
-  const openPop = useCallback(() => {
-    if (!rPop || popVis) return;
-    setPending(prev => shallowEqualArray(prev, curVal) ? prev : curVal);
-    setPopVis(true);
-  }, [curVal, rPop, popVis, setPopVis]);
-  const onCloseRef = useRef(onClose);
-  const onChangeRef = useRef(onChange);
-  const onFinRef = useRef(onFinish);
-  const onClickTabRef = useRef(onClickTab);
-  const onTabChgRef = useRef(onTabChange);
-  onCloseRef.current = onClose;
-  onChangeRef.current = onChange;
-  onFinRef.current = onFinish;
-  onClickTabRef.current = onClickTab;
-  onTabChgRef.current = onTabChange;
-  const closePop = useCallback(notify => {
-    if (!rPop || !popVis) return;
-    setPopVis(false);
-    if (notify) onCloseRef.current?.();
-  }, [rPop, popVis, setPopVis]);
-  const togglePop = useCallback(() => {
-    if (!rPop) return;
-    popVis ? closePop(true) : openPop();
-  }, [closePop, openPop, rPop, popVis]);
-  const isRP = isFunction(children);
-  const rp = isRP ? children : null;
-  const onClkTab = useCallback(e => {
-    const i = isNumber(e.index) ? e.index : Number(e.name);
-    if (Number.isNaN(i)) return;
-    const tabName = items[i]?.[keys.textKey];
-    onClickTabRef.current?.(i, isText(tabName) ? String(tabName) : rP);
-  }, [items, keys.textKey, rP]);
-  const onTabChg = useCallback((tv, iEx) => {
-    const i = isNumber(iEx) ? iEx : Number(tv);
-    if (Number.isNaN(i)) return;
-    setActTab(i);
-    onTabChgRef.current?.(i);
-  }, []);
-  const onSelect = useCallback((opt, ti) => {
-    if (opt.disabled) return;
-    const ov = opt[keys.valueKey];
-    if (ov == null) return;
-    const base = (rPop ? pending : curVal).slice(0, ti);
-    const next = [...base, ov];
-    const rows = resolveRows(options, keys, next);
-    const ch = opt[keys.childrenKey] ?? [];
-    const hasCh = Object.prototype.hasOwnProperty.call(opt, keys.childrenKey);
-    const isAsync = hasCh && !ch.length;
-    const atDepth = next.length >= depth;
-    const isLeaf = !ch.length && !isAsync;
-    if (rPop) {
-      setPending(next);
-      onChangeRef.current?.(next, rows);
-    } else setValue(next, rows);
-    if (isLeaf || atDepth) {
-      if (rPop) {
-        setValue(next, rows);
-        if (rCF) closePop(true);
-      }
-      onFinRef.current?.(next, rows);
-    }
-  }, [curVal, rCF, closePop, depth, keys, options, pending, rPop, setValue]);
-  const getEmpty = useCallback(ti => {
-    if (ti <= 0) return rP;
-    const p = items[ti - 1];
-    if (!p) return rP;
-    const hasCh = Object.prototype.hasOwnProperty.call(p, keys.childrenKey);
-    if (!hasCh) return rP;
-    const ch = p[keys.childrenKey] ?? [];
-    return ch.length === 0 && cur.length === ti ? rLT : rP;
-  }, [cur.length, items, keys.childrenKey, rLT, rP]);
-  const renderTabs = () => {
-    if (!tabs.length) return /*#__PURE__*/React.createElement(CascaderOptionList, {
-      optionList: [],
-      tabIndex: 0,
-      selectedValue: cur[0],
-      activeColor: rAc,
-      keys: keys,
-      optionRender: optionRender,
-      onSelect: onSelect,
-      tokens: tokens,
-      emptyText: getEmpty(0)
-    });
-    const swEn = !!rSw;
-    const tabsW = measW || winW || undefined;
-    const tbStyle = {
-      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: onTabsLayout
-    }, /*#__PURE__*/React.createElement(Tabs, {
-      style: tabsW ? {
-        width: tabsW
-      } : undefined,
-      active: actTab,
-      onChange: onTabChg,
-      onClickTab: onClkTab,
-      align: "center",
-      swipeable: swEn,
-      swipeThreshold: 0,
-      scrollable: true,
-      animated: true,
-      duration: 300,
-      color: rAc,
-      lineHeight: tokens.sizing.indicatorHeight,
-      titleActiveColor: tokens.colors.tabText,
-      titleInactiveColor: tokens.colors.tabInactive,
-      tabBarStyle: tbStyle,
-      tabStyle: [tokens.layout.tabsItem, {
-        paddingHorizontal: tokens.spacing.tabPaddingHorizontal
-      }],
-      titleStyle: [tokens.layout.tabsTitle, {
-        fontSize: tokens.typography.tabsTitleSize
-      }],
-      contentStyle: !swEn ? tokens.layout.tabsContentStatic : undefined
-    }, tabs.map((optList, i) => {
-      const sel = items[i];
-      const lbl = isText(sel?.[keys.textKey]) ? String(sel?.[keys.textKey]) : "";
-      const usePh = !lbl;
-      const titleNode = _ => /*#__PURE__*/React.createElement(Text, {
-        style: [tokens.layout.tabTitleNode, {
-          color: usePh ? tokens.colors.tabInactive : tokens.colors.tabText,
-          fontWeight: usePh ? tokens.typography.tabTitlePlaceholderWeight : tokens.typography.tabTitleWeight
-        }]
-      }, usePh ? rP : lbl);
-      return /*#__PURE__*/React.createElement(Tabs.TabPane, {
-        key: i,
-        name: i,
-        title: titleNode
-      }, /*#__PURE__*/React.createElement(CascaderOptionList, {
-        optionList: optList,
-        tabIndex: i,
-        selectedValue: cur[i],
-        activeColor: rAc,
-        keys: keys,
-        optionRender: optionRender,
-        onSelect: onSelect,
-        tokens: tokens,
-        emptyText: getEmpty(i)
-      }));
-    })));
-  };
-  const inlineCh = !rPop && !isRP ? children : null;
-  const content = /*#__PURE__*/React.createElement(View, _extends({
-    testID: testID,
-    style: [tokens.layout.container, {
-      backgroundColor: tokens.colors.background
-    }, style]
-  }, rest), rSH ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.header, {
-      height: tokens.sizing.headerHeight,
-      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
-    }]
-  }, renderTextOrNode(rT, [tokens.layout.title, {
-    color: tokens.colors.headerText,
-    fontSize: tokens.typography.titleSize,
-    fontWeight: tokens.typography.titleWeight
-  }]), showCl ? /*#__PURE__*/React.createElement(Pressable, {
-    hitSlop: 8,
-    onPress: () => {
-      rPop ? closePop(true) : onCloseRef.current?.();
-    },
-    style: [tokens.layout.closeButton, {
-      marginLeft: tokens.spacing.closeButtonMarginLeft
-    }],
-    accessibilityRole: "button",
-    accessibilityLabel: locale?.vanCascader?.close ?? 'Close'
-  }, 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(), inlineCh ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.inlineChildren, {
-      paddingVertical: tokens.spacing.inlineChildrenPaddingVertical,
-      paddingHorizontal: tokens.spacing.headerPaddingHorizontal
-    }]
-  }, inlineCh) : null);
-  if (!rPop) return content;
-  const {
-    closeOnOverlayPress: ovClose,
-    overlay: popOv,
-    onOpen: popOnOpen,
-    onOpened: popOnOpened,
-    onClose: popOnClose,
-    onClosed: popOnClosed,
-    ...popRest
-  } = popupProps ?? {};
-  const popOnCloseRef = useRef(popOnClose);
-  popOnCloseRef.current = popOnClose;
-  const onPopupClose = useCallback(() => {
-    popOnCloseRef.current?.();
-    closePop(true);
-  }, [closePop]);
-  const actions = {
-    open: openPop,
-    close: () => closePop(true),
-    toggle: togglePop
-  };
-  const enhanceTrigger = useCallback(node => {
-    if (! /*#__PURE__*/React.isValidElement(node)) return node;
-    const p = node.props;
-    const onP = () => {
-      p.onPress?.();
-      p.onClick?.();
-      openPop();
-    };
-    return /*#__PURE__*/React.cloneElement(node, {
-      onPress: onP,
-      onClick: onP
-    });
-  }, [openPop]);
-  const triggerNode = rp ? rp(curVal, curRows, actions) : isRP ? null : children || null;
-  const renderTrigger = enhanceTrigger(triggerNode);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTrigger, /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: popVis,
-    placement: rPP,
-    round: rPR,
-    closeOnOverlayPress: ovClose ?? rCO,
-    overlay: popOv ?? true,
-    safeAreaInsetTop: popRest?.safeAreaInsetTop != null ? popRest.safeAreaInsetTop : rSH && showCl,
-    safeAreaInsetBottom: popRest?.safeAreaInsetBottom != null ? popRest.safeAreaInsetBottom : rPP === 'bottom',
-    onOpen: popOnOpen,
-    onOpened: popOnOpened,
-    onClose: onPopupClose,
-    onClosed: popOnClosed
-  }, popRest, {
-    style: {
-      paddingLeft: 0,
-      paddingRight: 0
-    }
-  }), content));
-};
-const CascaderOptionItem = /*#__PURE__*/React.memo(({
-  option,
-  tabIndex,
-  selected,
-  activeColor,
-  keys,
-  optionRender,
-  onSelect,
-  tokens
-}) => {
-  const ov = option[keys.valueKey];
-  const lbl = option[keys.textKey];
-  const dis = !!option.disabled;
-  const baseCl = option.color ?? tokens.colors.optionText;
-  const txtCl = dis ? tokens.colors.optionDisabled : selected ? option.color ?? activeColor : baseCl;
-  const txtStyle = [tokens.layout.optionText, {
-    color: txtCl,
-    fontSize: tokens.typography.optionTextSize
-  }, selected ? {
-    fontWeight: tokens.typography.optionTextActiveWeight
-  } : null];
-  const cnt = optionRender ? optionRender({
-    option,
-    selected
-  }) : renderTextOrNode(lbl, txtStyle);
-  return /*#__PURE__*/React.createElement(Pressable, {
-    testID: `cascader-option-${tabIndex}-${String(ov)}`,
-    style: ({
-      pressed
-    }) => [tokens.layout.option, {
-      minHeight: tokens.sizing.optionMinHeight,
-      paddingVertical: tokens.spacing.optionPaddingVertical,
-      paddingHorizontal: tokens.spacing.optionPaddingHorizontal
-    }, pressed && !dis && {
-      backgroundColor: tokens.colors.optionActiveBackground
-    }],
-    onPress: () => onSelect(option, tabIndex),
-    disabled: dis
-  }, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.optionContent
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.optionLabel, {
-      marginRight: tokens.spacing.optionLabelMarginRight
-    }]
-  }, cnt), 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
-}) => {
-  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 keyExt = 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, {
-      height: tokens.sizing.optionListHeight
-    }],
-    contentContainerStyle: {
-      paddingTop: tokens.spacing.optionListPaddingTop,
-      paddingBottom: tokens.spacing.optionListPaddingBottom
-    },
-    showsVerticalScrollIndicator: false,
-    renderItem: renderItem,
-    keyExtractor: keyExt,
-    removeClippedSubviews: true,
-    initialNumToRender: 20,
-    windowSize: 5
-  });
-});
-const Cascader = /*#__PURE__*/React.memo(CascaderImpl);
-export default Cascader;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}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,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=e=>({textKey:e?.text??"text",valueKey:e?.value??"value",childrenKey:e?.children??"children"}),resolveRows=(e=[],t,o)=>{const a=[];let n=e;return o.forEach(e=>{if(!n?.length)return;const o=n.find(o=>o[t.valueKey]===e);o&&(a.push(o),n=o[t.childrenKey]??[])}),a},CascaderImpl=e=>{const{tokensOverride:t,options:o=[],title:a,placeholder:n,activeColor:l,fieldNames:i,optionRender:r,showHeader:s,closeable:c,closeIcon:d,onChange:u,onClose:p,onFinish:g,onClickTab:y,onTabChange:h,swipeable:m,style:b,testID:f,children:C,poppable:v,visible:R,defaultVisible:x,onVisibleChange:T,closeOnClickOverlay:k,closeOnFinish:E,popupPlacement:S,popupRound:w,popupProps:P,loadingText:z,...I}=e,O=useLocale(),V=useCascaderTokens(t),L=a??O?.vanCascader?.placeholder??V.defaults.title,K=n??O?.vanCascader?.placeholder??V.defaults.placeholder,N=l??V.colors.tabActive,H=s??V.defaults.showHeader,A=m??V.defaults.swipeable,F=v??V.defaults.poppable,W=k??V.defaults.closeOnClickOverlay,B=E??V.defaults.closeOnFinish,D=S??V.defaults.popupPlacement,_=w??V.defaults.popupRound,j=z??V.defaults.loadingText,[M,q]=useControllableValue(e,{defaultValue:[],trigger:"onChange"}),$=getFieldKeys(i),G=Array.isArray(M)?M:[],[J,Q]=useState(G),U=c??V.defaults.closeable,[X,Y]=useControllableValue(e,{defaultValue:!1,valuePropName:"visible",defaultValuePropName:"defaultVisible",trigger:"onVisibleChange"}),Z=F?J:G,{tabs:ee,items:te,depth:oe}=useCascaderExtend(o,$,Z),{width:ae}=useWindowDimensions(),[ne,le]=useState(0),ie=useCallback(e=>{const t=e.nativeEvent.layout.width;t&&le(e=>e===t?e:t)},[]),re=resolveRows(o,$,G),[se,ce]=useState(0);useEffect(()=>{let e=Array.isArray(Z)?Z.length:0;e>=oe&&(e=Math.max(oe-1,0)),ce(t=>t===e?t:e)},[Z.length,oe]),useEffect(()=>{F&&X||Q(e=>shallowEqualArray(e,G)?e:G)},[G,F,X]);const de=useCallback(()=>{F&&!X&&(Q(e=>shallowEqualArray(e,G)?e:G),Y(!0))},[G,F,X,Y]),ue=useRef(p),pe=useRef(u),ge=useRef(g),ye=useRef(y),he=useRef(h);ue.current=p,pe.current=u,ge.current=g,ye.current=y,he.current=h;const me=useCallback(e=>{F&&X&&(Y(!1),e&&ue.current?.())},[F,X,Y]),be=useCallback(()=>{F&&(X?me(!0):de())},[me,de,F,X]),fe=isFunction(C),Ce=fe?C:null,ve=useCallback(e=>{const t=isNumber(e.index)?e.index:Number(e.name);if(Number.isNaN(t))return;const o=te[t]?.[$.textKey];ye.current?.(t,isText(o)?String(o):K)},[te,$.textKey,K]),Re=useCallback((e,t)=>{const o=isNumber(t)?t:Number(e);Number.isNaN(o)||(ce(o),he.current?.(o))},[]),xe=useCallback((e,t)=>{if(e.disabled)return;const a=e[$.valueKey];if(null==a)return;const n=[...(F?J:G).slice(0,t),a],l=resolveRows(o,$,n),i=e[$.childrenKey]??[],r=Object.prototype.hasOwnProperty.call(e,$.childrenKey)&&!i.length,s=n.length>=oe,c=!i.length&&!r;F?(Q(n),pe.current?.(n,l)):q(n,l),(c||s)&&(F&&(q(n,l),B&&me(!0)),ge.current?.(n,l))},[G,B,me,oe,$,o,J,F,q]),Te=useCallback(e=>{if(e<=0)return K;const t=te[e-1];if(!t)return K;if(!Object.prototype.hasOwnProperty.call(t,$.childrenKey))return K;return 0===(t[$.childrenKey]??[]).length&&Z.length===e?j:K},[Z.length,te,$.childrenKey,j,K]),ke=F||fe?null:C,Ee=React.createElement(View,_extends({testID:f,style:[V.layout.container,{backgroundColor:V.colors.background},b]},I),H?React.createElement(View,{style:[V.layout.header,{height:V.sizing.headerHeight,paddingHorizontal:V.spacing.headerPaddingHorizontal}]},renderTextOrNode(L,[V.layout.title,{color:V.colors.headerText,fontSize:V.typography.titleSize,fontWeight:V.typography.titleWeight}]),U?React.createElement(Pressable,{hitSlop:8,onPress:()=>{F?me(!0):ue.current?.()},style:[V.layout.closeButton,{marginLeft:V.spacing.closeButtonMarginLeft}],accessibilityRole:"button",accessibilityLabel:O?.vanCascader?.close??"Close"},d??(e=>React.createElement(Cross,{size:V.sizing.closeIconSize,fill:e.pressed?V.colors.closeIconActive:V.colors.closeIcon,color:e.pressed?V.colors.closeIconActive:V.colors.closeIcon}))):null):null,(()=>{if(!ee.length)return React.createElement(CascaderOptionList,{optionList:[],tabIndex:0,selectedValue:Z[0],activeColor:N,keys:$,optionRender:r,onSelect:xe,tokens:V,emptyText:Te(0)});const e=!!A,t=ne||ae||void 0,o={height:V.sizing.headerHeight,paddingHorizontal:V.spacing.tabNavPaddingHorizontal,paddingVertical:V.spacing.tabNavPaddingVertical,backgroundColor:V.colors.background};return React.createElement(View,{style:V.layout.tabsWrapper,onLayout:ie},React.createElement(Tabs,{style:t?{width:t}:void 0,active:se,onChange:Re,onClickTab:ve,align:"center",swipeable:e,swipeThreshold:0,scrollable:!0,animated:!0,duration:300,color:N,lineHeight:V.sizing.indicatorHeight,titleActiveColor:V.colors.tabText,titleInactiveColor:V.colors.tabInactive,tabBarStyle:o,tabStyle:[V.layout.tabsItem,{paddingHorizontal:V.spacing.tabPaddingHorizontal}],titleStyle:[V.layout.tabsTitle,{fontSize:V.typography.tabsTitleSize}],contentStyle:e?void 0:V.layout.tabsContentStatic},ee.map((e,t)=>{const o=te[t],a=isText(o?.[$.textKey])?String(o?.[$.textKey]):"",n=!a;return React.createElement(Tabs.TabPane,{key:t,name:t,title:e=>React.createElement(Text,{style:[V.layout.tabTitleNode,{color:n?V.colors.tabInactive:V.colors.tabText,fontWeight:n?V.typography.tabTitlePlaceholderWeight:V.typography.tabTitleWeight}]},n?K:a)},React.createElement(CascaderOptionList,{optionList:e,tabIndex:t,selectedValue:Z[t],activeColor:N,keys:$,optionRender:r,onSelect:xe,tokens:V,emptyText:Te(t)}))})))})(),ke?React.createElement(View,{style:[V.layout.inlineChildren,{paddingVertical:V.spacing.inlineChildrenPaddingVertical,paddingHorizontal:V.spacing.headerPaddingHorizontal}]},ke):null);if(!F)return Ee;const{closeOnOverlayPress:Se,overlay:we,onOpen:Pe,onOpened:ze,onClose:Ie,onClosed:Oe,...Ve}=P??{},Le=useRef(Ie);Le.current=Ie;const Ke=useCallback(()=>{Le.current?.(),me(!0)},[me]),Ne={open:de,close:()=>me(!0),toggle:be},He=useCallback(e=>{if(!React.isValidElement(e))return e;const t=e.props,o=()=>{t.onPress?.(),t.onClick?.(),de()};return React.cloneElement(e,{onPress:o,onClick:o})},[de])(Ce?Ce(G,re,Ne):fe?null:C||null);return React.createElement(React.Fragment,null,He,React.createElement(Popup,_extends({visible:X,placement:D,round:_,closeOnOverlayPress:Se??W,overlay:we??!0,safeAreaInsetTop:null!=Ve?.safeAreaInsetTop?Ve.safeAreaInsetTop:H&&U,safeAreaInsetBottom:null!=Ve?.safeAreaInsetBottom?Ve.safeAreaInsetBottom:"bottom"===D,onOpen:Pe,onOpened:ze,onClose:Ke,onClosed:Oe},Ve,{style:{paddingLeft:0,paddingRight:0}}),Ee))},CascaderOptionItem=React.memo(({option:e,tabIndex:t,selected:o,activeColor:a,keys:n,optionRender:l,onSelect:i,tokens:r})=>{const s=e[n.valueKey],c=e[n.textKey],d=!!e.disabled,u=e.color??r.colors.optionText,p=d?r.colors.optionDisabled:o?e.color??a:u,g=[r.layout.optionText,{color:p,fontSize:r.typography.optionTextSize},o?{fontWeight:r.typography.optionTextActiveWeight}:null],y=l?l({option:e,selected:o}):renderTextOrNode(c,g),h=isText(y)?renderTextOrNode(y,g):y;return React.createElement(Pressable,{testID:`cascader-option-${t}-${String(s)}`,style:({pressed:e})=>[r.layout.option,{minHeight:r.sizing.optionMinHeight,paddingVertical:r.spacing.optionPaddingVertical,paddingHorizontal:r.spacing.optionPaddingHorizontal},e&&!d&&{backgroundColor:r.colors.optionActiveBackground}],onPress:()=>i(e,t),disabled:d},React.createElement(View,{style:r.layout.optionContent},React.createElement(View,{style:[r.layout.optionLabel,{marginRight:r.spacing.optionLabelMarginRight}]},h),o?React.createElement(Checked,{size:r.sizing.selectedIconSize,fill:a,color:a}):null))}),CascaderOptionList=React.memo(({optionList:e,tabIndex:t,selectedValue:o,activeColor:a,keys:n,optionRender:l,onSelect:i,tokens:r,emptyText:s})=>{const c=useCallback(({item:e})=>React.createElement(CascaderOptionItem,{option:e,tabIndex:t,selected:o===e[n.valueKey],activeColor:a,keys:n,optionRender:l,onSelect:i,tokens:r}),[a,n,i,l,o,t,r]),d=useCallback(e=>String(e[n.valueKey]),[n.valueKey]);return e.length?React.createElement(FlatList,{data:e,style:[r.layout.optionList,{height:r.sizing.optionListHeight}],contentContainerStyle:{paddingTop:r.spacing.optionListPaddingTop,paddingBottom:r.spacing.optionListPaddingBottom},showsVerticalScrollIndicator:!1,renderItem:c,keyExtractor:d,removeClippedSubviews:!0,initialNumToRender:20,windowSize:5}):React.createElement(View,{style:[r.layout.optionList,{height:r.sizing.optionListHeight}]},React.createElement(Text,{style:[r.layout.empty,{color:r.colors.placeholder,paddingVertical:r.spacing.emptyPaddingVertical,fontSize:r.typography.emptyTextSize}]},s))}),Cascader=React.memo(CascaderImpl);export default Cascader;

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

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