react-native-system-ui 0.0.7 → 1.0.1

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,

package/dist/es/components/cell/Cell.js

@@ -3,26 +3,11 @@ import React, { useContext, useMemo } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { Arrow } from 'react-native-system-icon';
 import { useAriaPress, useHairline } from '../../hooks';
-import { isRenderable, isText } from '../../utils';
+import { isRenderable, isText, renderTextOrNode } from '../../utils';
+import { useDirection } from '../config-provider/useDirection';
 import { CellGroupContext } from './CellContext';
 import { useCellTokens } from './tokens';
-const TextOrView = ({
-  children,
-  textStyle,
-  viewStyle,
-  numberOfLines
-}) => {
-  if (isText(children)) {
-    return /*#__PURE__*/React.createElement(Text, {
-      style: textStyle,
-      numberOfLines: numberOfLines
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    style: viewStyle
-  }, children);
-};
-export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const CellImpl = (props, ref) => {
   const {
     title,
     value,
@@ -30,13 +15,13 @@ export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
     extra,
     icon,
     rightIcon,
-    border: borderProp,
+    border: borderP,
     clickable,
     isLink,
     required,
     center,
-    size: sizeProp,
-    arrowDirection: arrowDirectionProp,
+    size: sizeP,
+    arrowDirection: arrP,
     tokensOverride,
     children,
     style,
@@ -50,34 +35,57 @@ export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const tokens = useCellTokens(tokensOverride);
-  const group = useContext(CellGroupContext);
-  const border = borderProp ?? tokens.defaults.border;
-  const size = sizeProp ?? tokens.defaults.size;
-  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
-  const lineHeight = tokens.typography.lineHeight;
-  const hasTitle = isRenderable(title);
-  const hasValue = isRenderable(value);
-  const hasLabel = isRenderable(label);
-  const hasExtra = isRenderable(extra);
-  const hasChildren = isRenderable(children);
-  const hasIcon = isRenderable(icon);
-  const hasRightIcon = isRenderable(rightIcon);
-  const onlyValue = !hasTitle && !hasChildren;
-  const showBorder = border && group.border && !group.isLast;
-  const showArrow = !!isLink || !!clickable;
-  const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
-  const containerStyles = useMemo(() => [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [center, size, style, tokens.layout.center, tokens.layout.container, tokens.layout.containerLarge]);
-  const hairline = useHairline({
-    show: showBorder,
-    containerStyle: containerStyles,
+  const dir = useDirection();
+  const grp = useContext(CellGroupContext);
+  const border = borderP ?? tokens.defaults.border;
+  const size = sizeP ?? tokens.defaults.size;
+  const arrRaw = arrP ?? tokens.defaults.arrowDirection;
+  const arr = dir === 'rtl' ? arrRaw === 'left' ? 'right' : arrRaw === 'right' ? 'left' : arrRaw : arrRaw;
+  const lh = tokens.typography.lineHeight;
+  const hasT = isRenderable(title);
+  const hasV = isRenderable(value);
+  const hasL = isRenderable(label);
+  const hasE = isRenderable(extra);
+  const hasCh = isRenderable(children);
+  const hasI = isRenderable(icon);
+  const hasRI = isRenderable(rightIcon);
+  const onlyV = !hasT && !hasCh;
+  const showB = border && grp.border && !grp.isLast;
+  const showArr = !!isLink || !!clickable;
+  const inter = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
+  const large = size === 'large';
+  const ctrStyle = useMemo(() => [large ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [size, center, tokens.layout, style]);
+  const hair = useHairline({
+    show: showB,
+    containerStyle: ctrStyle,
     color: tokens.colors.border,
     width: tokens.borders.width,
     defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
   });
-  const customContentStyle = useMemo(() => [tokens.layout.customContent, {
+  const cntStyle = useMemo(() => [tokens.layout.customContent, {
     justifyContent: center ? 'center' : 'flex-start'
-  }, contentStyle], [center, contentStyle, tokens.layout.customContent]);
-  const bodyContent = /*#__PURE__*/React.createElement(React.Fragment, null, hasIcon && /*#__PURE__*/React.createElement(View, {
+  }, contentStyle], [center, tokens.layout.customContent, contentStyle]);
+  const {
+    interactionProps,
+    states
+  } = useAriaPress({
+    disabled: !inter,
+    onPress: onPress ?? undefined
+  });
+  const Comp = inter ? Pressable : View;
+  const compProps = inter ? {
+    android_ripple: android_ripple ?? {
+      color: tokens.colors.ripple
+    },
+    accessibilityRole: 'button',
+    ...interactionProps
+  } : {};
+  return /*#__PURE__*/React.createElement(Comp, _extends({
+    ref: ref,
+    style: [ctrStyle, inter && states.pressed && {
+      opacity: tokens.defaults.activeOpacity
+    }]
+  }, compProps, rest), hasI && /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconWrapper, {
       marginRight: tokens.spacing.iconGap,
       minHeight: tokens.sizing.iconSize,
@@ -85,82 +93,64 @@ export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }]
   }, icon), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.body
-  }, (hasTitle || required) && /*#__PURE__*/React.createElement(View, {
+  }, (hasT || required) && /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.titleRow, {
-      minHeight: lineHeight
+      minHeight: lh
     }]
   }, required && /*#__PURE__*/React.createElement(Text, {
     style: {
       color: tokens.colors.required,
       marginRight: tokens.spacing.iconGap / 2
     }
-  }, "*"), hasTitle && /*#__PURE__*/React.createElement(TextOrView, {
-    textStyle: [{
-      color: tokens.colors.title,
-      fontSize: size === 'large' ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight
-    }, titleStyle],
-    viewStyle: titleStyle,
+  }, "*"), hasT && /*#__PURE__*/React.createElement(View, {
+    style: titleStyle
+  }, renderTextOrNode(title, [{
+    color: tokens.colors.title,
+    fontSize: large ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle], {
     numberOfLines: 1
-  }, title)), hasLabel && /*#__PURE__*/React.createElement(TextOrView, {
-    textStyle: [{
-      marginTop: tokens.spacing.labelMarginTop,
-      color: tokens.colors.label,
-      fontSize: size === 'large' ? tokens.typography.largeLabelSize : tokens.typography.labelSize
-    }, labelStyle],
-    viewStyle: [{
+  }))), hasL && /*#__PURE__*/React.createElement(View, {
+    style: [{
       marginTop: tokens.spacing.labelMarginTop
-    }, labelStyle],
+    }, labelStyle]
+  }, renderTextOrNode(label, [{
+    color: tokens.colors.label,
+    fontSize: large ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+  }, labelStyle], {
     numberOfLines: 2
-  }, label)), /*#__PURE__*/React.createElement(View, {
+  }))), /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.valueContainer, {
-      minHeight: lineHeight,
+      minHeight: lh,
       marginLeft: tokens.spacing.valueGap
-    }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
-  }, hasValue ? /*#__PURE__*/React.createElement(TextOrView, {
-    textStyle: [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
-      color: tokens.colors.value,
-      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
-    }, valueStyle],
-    viewStyle: customContentStyle,
+    }, !center && onlyV && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
+  }, hasV ? /*#__PURE__*/React.createElement(View, {
+    style: cntStyle
+  }, renderTextOrNode(value, [tokens.layout.value, onlyV && tokens.layout.valueOnly, {
+    color: tokens.colors.value,
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  }, valueStyle], {
     numberOfLines: 1
-  }, value) : hasChildren ? /*#__PURE__*/React.createElement(View, {
-    style: customContentStyle
-  }, children) : null), hasExtra && /*#__PURE__*/React.createElement(TextOrView, {
-    textStyle: {
-      marginLeft: tokens.spacing.extraGap,
-      color: tokens.colors.value,
-      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
-    },
-    viewStyle: {
+  })) : hasCh && /*#__PURE__*/React.createElement(View, {
+    style: cntStyle
+  }, isText(children) ? renderTextOrNode(children, [tokens.layout.value, {
+    color: tokens.colors.value,
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  }, valueStyle]) : children)), hasE && /*#__PURE__*/React.createElement(View, {
+    style: {
       marginLeft: tokens.spacing.extraGap
     }
-  }, extra), hasRightIcon ? rightIcon : showArrow ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
+  }, renderTextOrNode(extra, {
+    marginLeft: tokens.spacing.extraGap,
+    color: tokens.colors.value,
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  })), hasRI ? rightIcon : showArr && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arr]]
   }, /*#__PURE__*/React.createElement(Arrow, {
     size: tokens.sizing.arrowSize,
     fill: tokens.colors.arrow
-  })) : null);
-  const {
-    interactionProps,
-    states
-  } = useAriaPress({
-    disabled: !isInteractive,
-    onPress: onPress ?? undefined
-  });
-  const Component = isInteractive ? Pressable : View;
-  const componentProps = isInteractive ? {
-    android_ripple: android_ripple ?? {
-      color: tokens.colors.ripple
-    },
-    accessibilityRole: 'button',
-    ...interactionProps
-  } : {};
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    style: [containerStyles, isInteractive && states.pressed && {
-      opacity: tokens.defaults.activeOpacity
-    }]
-  }, componentProps, rest), bodyContent, hairline);
-});
-Cell.displayName = 'Cell';
+  })), hair);
+};
+const CellForwardRef = /*#__PURE__*/React.forwardRef(CellImpl);
+CellForwardRef.displayName = 'Cell';
+export const Cell = /*#__PURE__*/React.memo(CellForwardRef);

package/dist/es/components/cell/CellGroup.js

@@ -4,7 +4,12 @@ import { createHairlineView } from '../../utils';
 import { Cell as CellBase } from './Cell';
 import { CellGroupContext } from './CellContext';
 import { useCellTokens } from './tokens';
-export const CellGroup = ({
+const isCellElement = child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) return false;
+  if (child.type === CellBase) return true;
+  return child.type.displayName === 'Cell';
+};
+export const CellGroup = /*#__PURE__*/React.memo(({
   children,
   title,
   border,
@@ -15,38 +20,31 @@ export const CellGroup = ({
   tokensOverride
 }) => {
   const tokens = useCellTokens(tokensOverride);
-  const resolvedBorder = border ?? tokens.defaults.groupBorder;
-  const resolvedInset = inset ?? tokens.defaults.groupInset;
-  const resolvedCard = card ?? tokens.defaults.groupCard;
-  const showInset = resolvedInset || resolvedCard;
-  const showOuterBorder = resolvedBorder && !showInset;
-  const childArray = useMemo(() => React.Children.toArray(children), [children]);
-  const isCellElement = child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) return false;
-    if (child.type === CellBase) return true;
-    const type = child.type;
-    return type.displayName === 'Cell';
-  };
-  const lastCellIndex = useMemo(() => {
-    for (let i = childArray.length - 1; i >= 0; i--) {
-      const child = childArray[i];
-      if (isCellElement(child)) return i;
+  const rBorder = border ?? tokens.defaults.groupBorder;
+  const showInset = (inset ?? tokens.defaults.groupInset) || (card ?? tokens.defaults.groupCard);
+  const rCard = card ?? tokens.defaults.groupCard;
+  const showOuter = rBorder && !showInset;
+  const chArr = useMemo(() => React.Children.toArray(children), [children]);
+  const lastIdx = useMemo(() => {
+    for (let i = chArr.length - 1; i >= 0; i--) {
+      if (isCellElement(chArr[i])) return i;
     }
+    ;
     return -1;
-  }, [childArray]);
-  const containerStyle = useMemo(() => [{
-    marginBottom: resolvedCard ? 0 : tokens.sizing.groupMarginBottom
-  }, style], [resolvedCard, style, tokens.sizing.groupMarginBottom]);
-  const insetStyle = useMemo(() => ({
+  }, [chArr]);
+  const ctrStyle = useMemo(() => [{
+    marginBottom: rCard ? 0 : tokens.sizing.groupMarginBottom
+  }, style], [rCard, style, tokens.sizing.groupMarginBottom]);
+  const insStyle = useMemo(() => ({
     overflow: 'hidden',
     borderRadius: tokens.radii.groupInset,
     marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
     backgroundColor: tokens.colors.background
   }), [tokens.colors.background, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal]);
-  const bodyContainerStyle = useMemo(() => [{
+  const bodyStyleArr = [{
     backgroundColor: tokens.colors.groupBodyBackground
-  }, showInset ? insetStyle : null, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle], [bodyStyle, resolvedCard, showInset, tokens.colors.background, tokens.colors.groupBodyBackground, tokens.layout.groupCardShadow, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal, insetStyle]);
-  const renderedTitle = useMemo(() => title ? /*#__PURE__*/React.createElement(Text, {
+  }, showInset ? insStyle : null, rCard ? tokens.layout.groupCardShadow : null, bodyStyle];
+  const rTitle = useMemo(() => title ? /*#__PURE__*/React.createElement(Text, {
     style: {
       color: tokens.colors.groupTitle,
       fontSize: tokens.typography.groupTitleSize,
@@ -54,39 +52,30 @@ export const CellGroup = ({
       paddingVertical: tokens.sizing.groupTitlePaddingVertical
     }
   }, title) : null, [title, tokens.colors.groupTitle, tokens.sizing.groupTitlePaddingHorizontal, tokens.sizing.groupTitlePaddingVertical, tokens.typography.groupTitleSize]);
-  const renderedChildren = useMemo(() => childArray.map((child, index) => {
-    const key = /*#__PURE__*/React.isValidElement(child) && child.key != null ? child.key : index;
-    const isCell = isCellElement(child);
+  const rCh = useMemo(() => chArr.map((ch, i) => {
+    const key = /*#__PURE__*/React.isValidElement(ch) && ch.key != null ? ch.key : i;
     return /*#__PURE__*/React.createElement(CellGroupContext.Provider, {
       key: key,
       value: {
-        border: resolvedBorder,
+        border: rBorder,
         inset: showInset,
-        isLast: isCell ? index === lastCellIndex : false
+        isLast: isCellElement(ch) ? i === lastIdx : false
       }
-    }, child);
-  }), [childArray, lastCellIndex, resolvedBorder, showInset]);
+    }, ch);
+  }), [chArr, lastIdx, rBorder, showInset]);
   return /*#__PURE__*/React.createElement(View, {
-    style: containerStyle
-  }, renderedTitle, /*#__PURE__*/React.createElement(View, {
-    style: bodyContainerStyle
-  }, renderedChildren, showOuterBorder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: ctrStyle
+  }, rTitle, /*#__PURE__*/React.createElement(View, {
+    style: bodyStyleArr
+  }, rCh, showOuter ? /*#__PURE__*/React.createElement(React.Fragment, null, ['top', 'bottom'].map(pos => /*#__PURE__*/React.createElement(View, {
+    key: pos,
     style: createHairlineView({
-      position: 'top',
+      position: pos,
       color: tokens.colors.border,
       left: 0,
       right: 0,
       enabled: tokens.borders.width > 0,
       width: tokens.borders.width
     })
-  }), /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0,
-      enabled: tokens.borders.width > 0,
-      width: tokens.borders.width
-    })
-  })) : null));
-};
+  }))) : null));
+});