react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/share-sheet/ShareSheet.js

@@ -1,72 +1,71 @@
 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, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { createHairlineView } from '../../utils/hairline';
 import { isFiniteNumber, isText, isValidNode } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import Popup from '../popup';
+import { useLocale } from '../config-provider/useLocale';
 import { useShareSheetTokens } from './tokens';
-const normalizeOptions = options => {
-  if (!options || options.length === 0) return [];
-  if (Array.isArray(options[0])) {
-    return options;
-  }
-  return [options];
+const no = o => {
+  if (!o || o.length === 0) return [];
+  if (Array.isArray(o[0])) return o;
+  return [o];
 };
 const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
-  option,
-  index,
-  columns,
-  tokens,
-  onSelect
+  option: o,
+  index: i,
+  columns: cols,
+  tokens: t,
+  onSelect: os
 }) => {
-  const optionWidthStyle = useMemo(() => ({
-    width: `${100 / columns}%`
-  }), [columns]);
-  const iconStyle = useMemo(() => ({
-    width: tokens.sizing.icon,
-    height: tokens.sizing.icon
-  }), [tokens.sizing.icon]);
-  const press = useAriaPress({
-    onPress: () => onSelect(option, index),
+  const ows = {
+    width: `${100 / cols}%`
+  };
+  const is = {
+    width: t.sizing.icon,
+    height: t.sizing.icon
+  };
+  const p = useAriaPress({
+    onPress: () => os(o, i),
     extraProps: {
-      accessibilityRole: 'button',
-      testID: `rv-share-sheet-item-${index}`
+      accessibilityRole: 'menuitem',
+      accessibilityLabel: isText(o.name) ? String(o.name) : undefined,
+      testID: `rv-share-sheet-item-${i}`
     }
   });
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.option, optionWidthStyle]
-  }, press.interactionProps), /*#__PURE__*/React.createElement(View, {
-    style: [styles.icon, iconStyle, {
-      marginHorizontal: tokens.spacing.iconMarginHorizontal
-    }]
-  }, option.icon), isValidNode(option.name) ? isText(option.name) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.optionText, {
-      color: tokens.colors.option,
-      fontSize: tokens.typography.option,
-      paddingHorizontal: tokens.spacing.optionTextPaddingHorizontal
-    }]
-  }, option.name) : option.name : null, isValidNode(option.description) ? isText(option.description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.optionDesc, {
-      color: tokens.colors.optionDesc,
-      marginTop: tokens.spacing.gap,
-      fontSize: tokens.typography.optionDesc,
-      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
+    style: [S.o, ows]
+  }, p.interactionProps), /*#__PURE__*/React.createElement(View, {
+    style: [S.ic, is, {
+      marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, option.description) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.optionDescNode, {
-      marginTop: tokens.spacing.gap,
-      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
+  }, o.icon), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
+    color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
+    fontSize: t.typography.option,
+    paddingHorizontal: t.spacing.optionTextPaddingHorizontal
+  }]), isValidNode(o.description) && (isText(o.description) ? renderTextOrNode(o.description, [S.od, {
+    color: t.colors.optionDesc,
+    fontFamily: t.typography.fontFamily,
+    marginTop: t.spacing.gap,
+    fontSize: t.typography.optionDesc,
+    paddingHorizontal: t.spacing.optionDescPaddingHorizontal
+  }]) : /*#__PURE__*/React.createElement(View, {
+    style: [S.odn, {
+      marginTop: t.spacing.gap,
+      paddingHorizontal: t.spacing.optionDescPaddingHorizontal
     }]
-  }, option.description) : null);
+  }, o.description)));
 });
 const ShareSheetCancel = /*#__PURE__*/React.memo(({
-  cancelText,
-  tokens,
-  onPress
+  cancelText: ct,
+  tokens: t,
+  onPress: op
 }) => {
-  const cancelPress = useAriaPress({
-    onPress,
+  const cp = useAriaPress({
+    onPress: op,
     extraProps: {
       testID: 'rv-share-sheet-cancel',
       accessibilityRole: 'button'
@@ -74,27 +73,27 @@ const ShareSheetCancel = /*#__PURE__*/React.memo(({
   });
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      backgroundColor: tokens.colors.divider
+      backgroundColor: t.colors.divider
     }
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.cancel, {
-      backgroundColor: tokens.colors.background,
-      paddingVertical: tokens.spacing.cancelPaddingVertical,
-      marginTop: tokens.spacing.cancelMarginTop
+    style: [S.c, {
+      backgroundColor: t.colors.background,
+      paddingVertical: t.spacing.cancelPaddingVertical,
+      marginTop: t.spacing.cancelMarginTop
     }]
-  }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.cancelText, {
-      color: tokens.colors.option,
-      fontSize: tokens.typography.cancel
-    }]
-  }, cancelText) : cancelText));
+  }, cp.interactionProps), renderTextOrNode(ct, [S.ct, {
+    color: t.colors.option,
+    fontFamily: t.typography.fontFamily,
+    fontSize: t.typography.cancel
+  }])));
 });
-const ShareSheet = props => {
+const ShareSheetImpl = p => {
+  const locale = useLocale();
   const {
     visible,
     title,
     description,
-    cancelText = '取消',
+    cancelText = locale?.vanShareSheet?.cancel ?? locale?.cancel ?? 'Cancel',
     options,
     columns = 4,
     closeOnSelect = true,
@@ -107,156 +106,161 @@ const ShareSheet = props => {
     lockScroll = true,
     overlay = true,
     round = true,
-    style: popupStyle,
-    placement: _placement,
-    position: _position,
-    ...popupProps
-  } = props;
-  const tokens = useShareSheetTokens(tokensOverride);
-  const groups = useMemo(() => normalizeOptions(options), [options]);
-  const resolvedColumns = useMemo(() => isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
-  const hasTitle = isValidNode(title);
-  const hasDescription = isValidNode(description);
-  const hasCancelText = isValidNode(cancelText);
-  const close = useCallback(isCancel => {
-    if (isCancel) onCancel?.();
-    onClose?.();
-  }, [onCancel, onClose]);
-  const handleSelect = useCallback((option, index) => {
-    onSelect?.(option, index);
-    option.onPress?.(option);
-    if (closeOnSelect) close();
-  }, [close, closeOnSelect, onSelect]);
-  const onPopupClose = useCallback(() => close(true), [close]);
-  const wrapperStyle = useMemo(() => [styles.wrapper, {
-    backgroundColor: tokens.colors.background
-  }], [tokens.colors.background]);
-  const groupRowStyle = useMemo(() => [styles.optionsRow, {
-    paddingLeft: tokens.spacing.gap,
+    style: ps,
+    placement: _p,
+    position: _pos,
+    ...pp
+  } = p;
+  const t = useShareSheetTokens(tokensOverride);
+  const gs = no(options);
+  const rc = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
+  const ht = isValidNode(title);
+  const hd = isValidNode(description);
+  const hc = isValidNode(cancelText);
+  const ocr = useRef(onCancel),
+    ocrr = useRef(onClose),
+    osr = useRef(onSelect);
+  ocr.current = onCancel;
+  ocrr.current = onClose;
+  osr.current = onSelect;
+  const cl = useCallback(ic => {
+    if (ic) ocr.current?.();
+    ocrr.current?.();
+  }, []);
+  const hs = useCallback((o, i) => {
+    osr.current?.(o, i);
+    o.onPress?.(o);
+    if (closeOnSelect) cl();
+  }, [cl, closeOnSelect]);
+  const opc = useCallback(() => cl(true), [cl]);
+  const ws = [S.w, {
+    backgroundColor: t.colors.background
+  }];
+  const grs = [S.or, {
+    paddingLeft: t.spacing.gap,
     paddingVertical: 12
-  }], [tokens.spacing.gap]);
-  const groupNodes = useMemo(() => {
-    if (!groups.length) return null;
-    let globalIndex = 0;
-    return groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(View, {
-      key: groupIndex
-    }, groupIndex ? /*#__PURE__*/React.createElement(View, {
+  }];
+  const gn = useMemo(() => {
+    if (!gs.length) return null;
+    let gi = 0;
+    return gs.map((g, gidx) => /*#__PURE__*/React.createElement(View, {
+      key: gidx
+    }, gidx > 0 && /*#__PURE__*/React.createElement(View, {
       style: createHairlineView({
         position: 'top',
-        color: tokens.colors.border,
-        left: tokens.spacing.horizontal,
-        right: tokens.spacing.horizontal
+        color: t.colors.border,
+        left: t.spacing.horizontal,
+        right: t.spacing.horizontal
       })
-    }) : null, /*#__PURE__*/React.createElement(View, {
-      style: groupRowStyle
-    }, group.map(option => {
-      const currentIndex = globalIndex++;
+    }), /*#__PURE__*/React.createElement(View, {
+      style: grs
+    }, g.map(o => {
+      const ci = gi++;
       return /*#__PURE__*/React.createElement(ShareSheetOptionItem, {
-        key: option.key ?? currentIndex,
-        option: option,
-        index: currentIndex,
-        columns: resolvedColumns,
-        tokens: tokens,
-        onSelect: handleSelect
+        key: o.key ?? ci,
+        option: o,
+        index: ci,
+        columns: rc,
+        tokens: t,
+        onSelect: hs
       });
     }))));
-  }, [groups, groupRowStyle, handleSelect, resolvedColumns, tokens]);
-  const headerNode = useMemo(() => {
-    if (!hasTitle && !hasDescription) return null;
+  }, [gs, grs, hs, rc, t]);
+  const hn = useMemo(() => {
+    if (!ht && !hd) return null;
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.header, {
-        paddingTop: tokens.spacing.headerPaddingTop,
-        paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
-        paddingBottom: tokens.spacing.headerPaddingBottom
-      }]
-    }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.title, {
-        color: tokens.colors.title,
-        fontSize: tokens.typography.title,
-        marginTop: tokens.spacing.titleMarginTop
-      }]
-    }, title) : /*#__PURE__*/React.createElement(View, {
-      style: [styles.node, {
-        marginTop: tokens.spacing.nodeMarginTop
+      style: [S.h, {
+        paddingTop: t.spacing.headerPaddingTop,
+        paddingHorizontal: t.spacing.headerPaddingHorizontal,
+        paddingBottom: t.spacing.headerPaddingBottom
       }]
-    }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.description, {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.description,
-        marginTop: tokens.spacing.descriptionMarginTop
+    }, ht && (isText(title) ? renderTextOrNode(title, [S.t, {
+      color: t.colors.title,
+      fontFamily: t.typography.fontFamily,
+      fontSize: t.typography.title,
+      marginTop: t.spacing.titleMarginTop
+    }]) : /*#__PURE__*/React.createElement(View, {
+      style: [S.n, {
+        marginTop: t.spacing.nodeMarginTop
       }]
-    }, description) : /*#__PURE__*/React.createElement(View, {
-      style: [styles.node, {
-        marginTop: tokens.spacing.nodeMarginTop
+    }, title)), hd && (isText(description) ? renderTextOrNode(description, [S.d, {
+      color: t.colors.description,
+      fontFamily: t.typography.fontFamily,
+      fontSize: t.typography.description,
+      marginTop: t.spacing.descriptionMarginTop
+    }]) : /*#__PURE__*/React.createElement(View, {
+      style: [S.n, {
+        marginTop: t.spacing.nodeMarginTop
       }]
-    }, description) : null);
-  }, [description, hasDescription, hasTitle, title, tokens.colors.description, tokens.colors.title, tokens.spacing.descriptionMarginTop, tokens.spacing.headerPaddingBottom, tokens.spacing.headerPaddingHorizontal, tokens.spacing.headerPaddingTop, tokens.spacing.nodeMarginTop, tokens.spacing.titleMarginTop, tokens.typography.description, tokens.typography.title]);
-  const popupStyleMemo = useMemo(() => [styles.popupOverride, {
-    padding: tokens.spacing.popupPadding
-  }, popupStyle], [popupStyle, tokens.spacing.popupPadding]);
-  return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
+    }, description)));
+  }, [description, hd, ht, title, t.colors.description, t.colors.title, t.spacing.descriptionMarginTop, t.spacing.headerPaddingBottom, t.spacing.headerPaddingHorizontal, t.spacing.headerPaddingTop, t.spacing.nodeMarginTop, t.spacing.titleMarginTop, t.typography.description, t.typography.fontFamily, t.typography.title]);
+  const psm = [{
+    padding: t.spacing.popupPadding
+  }, ps];
+  return /*#__PURE__*/React.createElement(Popup, _extends({}, pp, {
     visible: visible,
     placement: "bottom",
     round: round,
     safeAreaInsetBottom: safeAreaInsetBottom,
     overlay: overlay,
     lockScroll: lockScroll,
-    onClose: onPopupClose,
-    style: popupStyleMemo
+    onClose: opc,
+    style: psm
   }), /*#__PURE__*/React.createElement(View, {
-    style: wrapperStyle
-  }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/React.createElement(ShareSheetCancel, {
+    accessibilityRole: "menu",
+    style: ws
+  }, hn, gn, children, hc && /*#__PURE__*/React.createElement(ShareSheetCancel, {
     cancelText: cancelText,
-    tokens: tokens,
-    onPress: onPopupClose
-  }) : null));
+    tokens: t,
+    onPress: opc
+  })));
 };
-const styles = StyleSheet.create({
-  popupOverride: {},
-  wrapper: {
+const S = StyleSheet.create({
+  w: {
     width: '100%'
   },
-  header: {
+  h: {
     alignItems: 'center'
   },
-  title: {
+  t: {
     fontWeight: 'normal',
     textAlign: 'center'
   },
-  description: {
+  d: {
     textAlign: 'center'
   },
-  node: {
+  n: {
     alignItems: 'center'
   },
-  optionsRow: {
+  or: {
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  option: {
+  o: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  icon: {
+  ic: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  optionText: {
+  ot: {
     fontWeight: '500',
     textAlign: 'center'
   },
-  optionDesc: {
+  od: {
     textAlign: 'center'
   },
-  optionDescNode: {
+  odn: {
     alignItems: 'center'
   },
-  cancel: {
+  c: {
     alignItems: 'center'
   },
-  cancelText: {
+  ct: {
     fontWeight: '500'
   }
 });
+const ShareSheet = /*#__PURE__*/React.memo(ShareSheetImpl);
 ShareSheet.displayName = 'ShareSheet';
 export default ShareSheet;

package/dist/es/components/share-sheet/tokens.js

@@ -3,7 +3,8 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    fontSize
+    fontSize,
+    typography
   } = foundations;
   return {
     colors: {
@@ -36,6 +37,7 @@ const createTokens = foundations => {
       icon: 48
     },
     typography: {
+      fontFamily: typography.fontFamily,
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,

package/dist/es/components/sidebar/Sidebar.js

@@ -1,12 +1,14 @@
 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, { useMemo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
+import { useDirection } from '../config-provider/useDirection';
 import { SidebarContext } from './SidebarContext';
 import { useSidebarTokens } from './tokens';
-import { isText } from '../../utils';
-const SidebarBase = props => {
+import { createHairlineView, renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
+const SidebarBaseImpl = props => {
   const {
     children,
     sideStyle,
@@ -15,70 +17,68 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const items = useMemo(() => {
-    const out = [];
-    const list = React.Children.toArray(children);
-    for (let i = 0; i < list.length; i++) {
-      const child = list[i];
-      if (! /*#__PURE__*/React.isValidElement(child)) continue;
-      out.push({
+  const dir = useDirection();
+  const sidebarItems = useMemo(() => {
+    const items = [];
+    React.Children.toArray(children).forEach((child, i) => {
+      if (/*#__PURE__*/React.isValidElement(child)) items.push({
         element: child,
         index: i
       });
-    }
-    return out;
+    });
+    return items;
   }, [children]);
-  const firstIndex = items[0]?.index ?? 0;
+  const firstIdx = sidebarItems[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
-    defaultValue: firstIndex,
+    defaultValue: firstIdx,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const currentIndex = useMemo(() => {
-    let next = firstIndex;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].index === activeIndex) {
-        next = activeIndex;
-        break;
-      }
+  const curIdx = useMemo(() => {
+    for (const item of sidebarItems) {
+      if (item.index === activeIndex) return activeIndex;
     }
-    return next;
-  }, [activeIndex, firstIndex, items]);
-  const contextValue = useMemo(() => ({
-    activeIndex: currentIndex,
+    ;
+    return firstIdx;
+  }, [activeIndex, firstIdx, sidebarItems]);
+  const ctxVal = useMemo(() => ({
+    activeIndex: curIdx,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = useMemo(() => items.map(item => {
-    const key = item.element.key ?? item.index;
-    const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
-    return /*#__PURE__*/React.cloneElement(item.element, {
-      key,
-      index: item.index,
-      tokensOverride: merged
-    });
-  }), [items, tokensOverride]);
-  const activeItem = items.find(item => item.index === currentIndex)?.element;
-  const activeContentStyle = activeItem?.props?.contentStyle;
-  const activeContent = activeItem?.props?.children;
-  const activeContentNode = useMemo(() => activeContent == null || activeContent === false ? null : isText(activeContent) ? /*#__PURE__*/React.createElement(Text, null, activeContent) : activeContent, [activeContent]);
-  const containerStyle = useMemo(() => [tokens.layout.container, {
-    backgroundColor: tokens.colors.background
-  }, style], [style, tokens.colors.background, tokens.layout.container]);
-  const sideContainerStyle = useMemo(() => [tokens.layout.side, {
-    width: tokens.sizing.width,
-    borderRightColor: tokens.colors.border
-  }, sideStyle], [sideStyle, tokens.colors.border, tokens.layout.side, tokens.sizing.width]);
+  }), [curIdx, setActiveIndex]);
+  const cloned = useMemo(() => sidebarItems.map(item => /*#__PURE__*/React.cloneElement(item.element, {
+    key: item.element.key ?? item.index,
+    index: item.index,
+    tokensOverride: mergeTokensOverride(tokensOverride, item.element.props.tokensOverride)
+  })), [sidebarItems, tokensOverride]);
+  const activeItem = sidebarItems.find(item => item.index === curIdx)?.element;
+  const contentTxtStyle = useMemo(() => ({
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.contentFontSize,
+    fontWeight: tokens.typography.fontWeight
+  }), [tokens.typography.fontFamily, tokens.typography.contentFontSize, tokens.typography.fontWeight]);
+  const activeContent = !isRenderable(activeItem?.props?.children) ? null : renderTextOrNode(activeItem.props.children, contentTxtStyle);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: containerStyle
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
   }), /*#__PURE__*/React.createElement(View, {
-    style: sideContainerStyle,
+    style: [tokens.layout.side, {
+      width: tokens.sizing.width
+    }, sideStyle],
     accessibilityRole: "tablist"
   }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: contextValue
-  }, clonedItems)), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.content, activeContentStyle]
-  }, activeContentNode));
+    value: ctxVal
+  }, cloned), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: dir === 'rtl' ? 'left' : 'right',
+      color: tokens.colors.border,
+      top: 0,
+      bottom: 0
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.content, activeItem?.props?.contentStyle]
+  }, activeContent));
 };
-SidebarBase.displayName = 'Sidebar';
+const SidebarBase = /*#__PURE__*/React.memo(SidebarBaseImpl);
 export default SidebarBase;

package/dist/es/components/sidebar/SidebarContext.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 export const SidebarContext = /*#__PURE__*/React.createContext(null);
 export const useSidebarContext = () => useContext(SidebarContext);