react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/grid/GridItem.js

@@ -4,14 +4,14 @@ import { Platform, Pressable, Text, View } from 'react-native';
 import Badge from '../badge';
 import { createHairlineView, isFunction, isRenderable, isText } from '../../utils';
 import { GridContext } from './GridContext';
-export const GridItem = props => {
-  const context = useContext(GridContext);
-  if (!context) throw new Error('GridItem must be used within Grid');
+const GridItemImpl = p => {
+  const ctx = useContext(GridContext);
+  if (!ctx) throw new Error('GridItem must be used within Grid');
   const {
     gridItemIndex = 0,
     text,
     icon,
-    iconColor: iconColorProp,
+    iconColor: icp,
     badge,
     dot,
     contentStyle,
@@ -20,112 +20,112 @@ export const GridItem = props => {
     style,
     onPress,
     ...rest
-  } = props;
+  } = p;
   const {
-    tokens,
-    columnNum,
-    gutter,
-    border,
-    center,
-    square,
-    direction,
-    reverse,
-    clickable,
-    iconSize,
-    iconColor,
+    tokens: t,
+    columnNum: cn,
+    gutter: g,
+    border: b,
+    center: c,
+    square: sq,
+    direction: d,
+    reverse: r,
+    clickable: cl,
+    iconSize: is,
+    iconColor: ic,
     count
-  } = context;
-  const widthPercent = useMemo(() => `${100 / columnNum}%`, [columnNum]);
-  const isLastColumn = useMemo(() => (gridItemIndex + 1) % columnNum === 0, [columnNum, gridItemIndex]);
-  const rowIndex = useMemo(() => Math.floor(gridItemIndex / columnNum), [columnNum, gridItemIndex]);
-  const lastRowIndex = useMemo(() => Math.floor((count - 1) / columnNum), [columnNum, count]);
-  const contentWrapperStyle = useMemo(() => [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
-    paddingHorizontal: tokens.spacing.paddingHorizontal,
-    paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: tokens.colors.background
-  }, contentStyle], [center, contentStyle, direction, reverse, square, tokens.colors.background, tokens.layout.itemContentBase, tokens.layout.itemContentSquare, tokens.layout.itemHorizontal, tokens.layout.itemReverseColumn, tokens.layout.itemReverseRow, tokens.layout.itemVertical, tokens.layout.itemCenter, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
-  const hasText = isRenderable(text);
-  const resolvedIconColor = useMemo(() => iconColorProp ?? iconColor ?? tokens.colors.text, [iconColor, iconColorProp, tokens.colors.text]);
-  const innerContent = useMemo(() => {
+  } = ctx;
+  const wp = `${100 / cn}%`;
+  const ilc = (gridItemIndex + 1) % cn === 0;
+  const ri = Math.floor(gridItemIndex / cn);
+  const lri = Math.floor((count - 1) / cn);
+  const cws = [t.layout.itemContentBase, d === 'horizontal' ? t.layout.itemHorizontal : t.layout.itemVertical, c && t.layout.itemCenter, r ? d === 'horizontal' ? t.layout.itemReverseRow : t.layout.itemReverseColumn : null, sq ? t.layout.itemContentSquare : null, {
+    paddingHorizontal: t.spacing.paddingHorizontal,
+    paddingVertical: t.spacing.paddingVertical,
+    backgroundColor: t.colors.background
+  }, contentStyle];
+  const ht = isRenderable(text);
+  const ric = icp ?? ic ?? t.colors.text;
+  const icn = useMemo(() => {
     if (children) return children;
-    let iconElement = null;
+    let ie = null;
     if (icon || badge || dot) {
       const {
-        style: badgeWrapperStyle,
-        ...badgeRest
+        style: bws,
+        ...br
       } = badge ?? {};
-      const marginKey = direction === 'vertical' ? reverse ? 'marginTop' : 'marginBottom' : reverse ? 'marginLeft' : 'marginRight';
-      const iconWrapperStyle = [tokens.layout.iconWrapper, hasText && {
-        [marginKey]: tokens.spacing.iconGap
+      const mk = d === 'vertical' ? r ? 'marginTop' : 'marginBottom' : r ? 'marginLeft' : 'marginRight';
+      const iws = [t.layout.iconWrapper, ht && {
+        [mk]: t.spacing.iconGap
       }];
-      const iconNode = isFunction(icon) ? icon(iconSize, resolvedIconColor) : icon;
-      const content = /*#__PURE__*/React.createElement(View, {
-        style: iconWrapperStyle
-      }, iconNode);
-      iconElement = badge || dot ? /*#__PURE__*/React.createElement(Badge, _extends({
+      const ino = isFunction(icon) ? icon(is, ric) : icon;
+      const cnt = /*#__PURE__*/React.createElement(View, {
+        style: iws
+      }, ino);
+      ie = badge || dot ? /*#__PURE__*/React.createElement(Badge, _extends({
         dot: dot
-      }, badgeRest, {
-        style: center ? [badgeWrapperStyle, {
+      }, br, {
+        style: c ? [bws, {
           alignSelf: 'center'
-        }] : badgeWrapperStyle
-      }), content) : content;
+        }] : bws
+      }), cnt) : cnt;
     }
-    const textElement = hasText && (isText(text) ? /*#__PURE__*/React.createElement(Text, {
-      style: [tokens.layout.text, {
-        color: tokens.colors.text,
-        fontSize: tokens.typography.fontSize,
-        lineHeight: tokens.typography.lineHeight,
-        fontFamily: tokens.typography.fontFamily,
-        fontWeight: tokens.typography.fontWeight
+    const te = ht && (isText(text) ? /*#__PURE__*/React.createElement(Text, {
+      style: [t.layout.text, {
+        color: t.colors.text,
+        fontSize: t.typography.fontSize,
+        lineHeight: t.typography.lineHeight,
+        fontFamily: t.typography.fontFamily,
+        fontWeight: t.typography.fontWeight
       }, textStyle],
-      numberOfLines: tokens.defaults.textNumberOfLines
+      numberOfLines: t.defaults.textNumberOfLines
     }, text) : text);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, textElement);
-  }, [badge, center, children, direction, dot, hasText, icon, iconSize, resolvedIconColor, reverse, text, textStyle, tokens.colors.text, tokens.defaults.textNumberOfLines, tokens.layout.iconWrapper, tokens.layout.text, tokens.spacing.iconGap, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight]);
-  const rightBorder = useMemo(() => border && !gutter && !isLastColumn ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.itemBorderRight, createHairlineView({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, ie, te);
+  }, [badge, c, children, d, dot, ht, icon, is, ric, r, text, textStyle, t.colors.text, t.defaults.textNumberOfLines, t.layout.iconWrapper, t.layout.text, t.spacing.iconGap, t.typography.fontFamily, t.typography.fontSize, t.typography.fontWeight, t.typography.lineHeight]);
+  const rb = b && !g && !ilc ? /*#__PURE__*/React.createElement(View, {
+    style: [t.layout.itemBorderRight, createHairlineView({
       position: 'right',
-      color: tokens.colors.border,
+      color: t.colors.border,
       top: 0,
       bottom: 0,
       right: 0
     })]
-  }) : null, [border, gutter, isLastColumn, tokens.colors.border, tokens.layout.itemBorderRight]);
-  const bottomBorder = useMemo(() => border && !gutter && rowIndex < lastRowIndex ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.itemBorderBottom, createHairlineView({
+  }) : null;
+  const bb = b && !g && ri < lri ? /*#__PURE__*/React.createElement(View, {
+    style: [t.layout.itemBorderBottom, createHairlineView({
       position: 'bottom',
-      color: tokens.colors.border,
+      color: t.colors.border,
       left: 0,
       right: 0,
       bottom: 0
     })]
-  }) : null, [border, gutter, lastRowIndex, rowIndex, tokens.colors.border, tokens.layout.itemBorderBottom]);
-  const content = useMemo(() => /*#__PURE__*/React.createElement(View, {
-    style: contentWrapperStyle
-  }, innerContent, rightBorder, bottomBorder), [bottomBorder, contentWrapperStyle, innerContent, rightBorder]);
-  const baseItemStyle = useMemo(() => ({
-    width: Platform.OS === 'web' ? undefined : widthPercent,
+  }) : null;
+  const cnt = /*#__PURE__*/React.createElement(View, {
+    style: cws
+  }, icn, rb, bb);
+  const bis = {
+    width: Platform.OS === 'web' ? undefined : wp,
     flexGrow: 0,
     flexShrink: 0,
-    paddingRight: Platform.OS === 'web' ? undefined : gutter ? gutter : undefined,
-    marginTop: Platform.OS === 'web' ? undefined : gutter && rowIndex > 0 ? gutter : undefined
-  }), [gutter, rowIndex, widthPercent]);
-  const isInteractive = clickable || isFunction(onPress);
-  if (isInteractive) {
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      style: pressableState => [baseItemStyle, typeof style === 'function' ? style(pressableState) : style, {
-        opacity: pressableState.pressed ? tokens.defaults.pressedOpacity : 1
-      }],
-      android_ripple: {
-        color: tokens.colors.active
-      },
-      onPress: onPress
-    }, rest), content);
-  }
+    paddingRight: Platform.OS === 'web' ? undefined : g ? g : undefined,
+    marginTop: Platform.OS === 'web' ? undefined : g && ri > 0 ? g : undefined
+  };
+  const ii = cl || isFunction(onPress);
+  if (ii) return /*#__PURE__*/React.createElement(Pressable, _extends({
+    accessibilityRole: "button",
+    style: ps => [bis, typeof style === 'function' ? style(ps) : style, {
+      opacity: ps.pressed ? t.defaults.pressedOpacity : 1
+    }],
+    android_ripple: {
+      color: t.colors.active
+    },
+    onPress: onPress
+  }, rest), cnt);
   return /*#__PURE__*/React.createElement(View, _extends({
-    style: [baseItemStyle, typeof style === 'function' ? style({
+    style: [bis, typeof style === 'function' ? style({
       pressed: false
     }) : style]
-  }, rest), content);
+  }, rest), cnt);
 };
+export const GridItem = /*#__PURE__*/React.memo(GridItemImpl);
 GridItem.displayName = 'GridItem';

package/dist/es/components/image/Image.js

@@ -1,8 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
-import { isNumber, isString, isText } from '../../utils';
+import { isNumber, isString, renderTextOrNode } from '../../utils';
+import { isRenderable, isText } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
 import { useImageTokens } from './tokens';
 const resolveFitMode = fit => {
   switch (fit) {
@@ -30,11 +32,7 @@ const splitImageStyle = style => {
   for (const key of Object.keys(flattenedRecord)) {
     const value = flattenedRecord[key];
     if (value === undefined) continue;
-    if (isLayoutStyleKey(key)) {
-      container[key] = value;
-    } else {
-      image[key] = value;
-    }
+    if (isLayoutStyleKey(key)) container[key] = value;else image[key] = value;
   }
   return {
     container: Object.keys(container).length ? container : undefined,
@@ -50,23 +48,23 @@ const PRESERVE_ASPECT_RATIO_MAP = {
   center: 'xMidYMid meet'
 };
 const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
+const WEB_IMAGE_STYLE = Platform.OS === 'web' ? {
+  height: 'revert-layer',
+  width: 'revert-layer'
+} : undefined;
 const resolveSourceUri = source => {
   if (!source) return undefined;
   if (typeof source === 'number') return undefined;
   if (Array.isArray(source)) {
     for (const item of source) {
-      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
-        return item.uri;
-      }
+      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') return item.uri;
     }
     return undefined;
   }
-  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') {
-    return source.uri;
-  }
+  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') return source.uri;
   return undefined;
 };
-const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+const ImageImpl = (props, ref) => {
   const {
     src,
     source,
@@ -96,15 +94,16 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     onError,
     ...rest
   } = props;
+  const locale = useLocale();
   const tokens = useImageTokens(tokensOverride);
   const fit = fitProp ?? tokens.defaults.fit;
   const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
   const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp !== undefined ? loadingTextProp : tokens.defaults.loadingText;
-  const errorText = errorTextProp !== undefined ? errorTextProp : tokens.defaults.errorText;
+  const loadingText = loadingTextProp !== undefined ? loadingTextProp : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
+  const errorText = errorTextProp !== undefined ? errorTextProp : locale?.vanImage?.error ?? tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
-    image: imageStyleWithoutLayout
+    image: imageStyleWithLayout
   } = useMemo(() => splitImageStyle(style), [style]);
   const actualSource = useMemo(() => source ? source : src ? {
     uri: src
@@ -120,57 +119,57 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     return 'none';
   }, [source, src]);
   const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
-  const [status, setStatus] = useState(() => actualSource ? 'loading' : 'idle');
+  const [state, setState] = useState(() => actualSource ? 'loading' : 'idle');
   useEffect(() => {
-    setStatus(actualSource ? 'loading' : 'idle');
+    setState(actualSource ? 'loading' : 'idle');
   }, [sourceKey]);
+  const onLoadRef = useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
   const handleLoad = useCallback(event => {
-    setStatus('loaded');
-    onLoad?.(event);
-  }, [onLoad]);
+    setState('loaded');
+    onLoadRef.current?.(event);
+  }, []);
   const handleError = useCallback(event => {
-    setStatus('error');
-    onError?.(event);
-  }, [onError]);
+    setState('error');
+    onErrorRef.current?.(event);
+  }, []);
   const handleSvgLoad = useCallback(() => {
     handleLoad({
       nativeEvent: {}
     });
   }, [handleLoad]);
-  const handleSvgError = useCallback(error => {
+  const handleSvgError = useCallback(err => {
     handleError({
       nativeEvent: {
-        error
+        error: err
       }
     });
   }, [handleError]);
   const uri = useMemo(() => resolveSourceUri(actualSource), [actualSource]);
-  const normalizedUri = useMemo(() => isString(uri) ? uri.toLowerCase() : undefined, [uri]);
-  const isSvg = useMemo(() => !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?')), [normalizedUri]);
-  const resolvedLoadingSize = useMemo(() => isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize, [loadingSize, tokens.defaults.loadingIndicatorBaseSize]);
-  const resolvedErrorIconSize = useMemo(() => iconSizeProp ?? tokens.defaults.iconSize, [iconSizeProp, tokens.defaults.iconSize]);
-  const containerRole = onPress ? 'button' : undefined;
+  const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
+  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
+  const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
+  const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
+  const clickableRole = onPress ? 'button' : undefined;
   const pressableProps = onPress ? {
     onPress
   } : null;
   const renderLabel = (node, color, marginTop) => {
-    if (node == null || node === false) return null;
-    if (isText(node)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: [tokens.layout.label, {
-          color
-        }, marginTop ? {
-          marginTop
-        } : undefined]
-      }, node);
-    }
-    return marginTop ? /*#__PURE__*/React.createElement(View, {
+    if (!isRenderable(node)) return null;
+    const textNode = renderTextOrNode(node, [tokens.layout.label, {
+      color: color
+    }, marginTop ? {
+      marginTop: marginTop
+    } : undefined].filter(Boolean));
+    return marginTop && !isText(node) ? /*#__PURE__*/React.createElement(View, {
       style: {
-        marginTop
+        marginTop: marginTop
       }
-    }, node) : node;
+    }, textNode) : textNode;
   };
-  const containerStyles = useMemo(() => [tokens.layout.container, {
+  const computedContainerStyle = useMemo(() => [tokens.layout.container, {
     width: width,
     height: height,
     backgroundColor: tokens.colors.background
@@ -180,10 +179,6 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     borderRadius: radius
   } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
   const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : undefined;
-  const webImageStyle = Platform.OS === 'web' ? {
-    height: 'revert-layer',
-    width: 'revert-layer'
-  } : undefined;
   const imageNode = actualSource ? isSvg && Platform.OS !== 'web' && uri ? /*#__PURE__*/React.createElement(SvgUri, _extends({
     width: "100%",
     height: "100%",
@@ -192,7 +187,7 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     accessible: !onPress,
     accessibilityLabel: imageAccessibilityLabel
   }, rest, {
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
+    style: [tokens.layout.absoluteFill, imageStyleWithLayout],
     onLoad: handleSvgLoad,
     onError: handleSvgError
   })) : /*#__PURE__*/React.createElement(RNImage, _extends({
@@ -201,12 +196,12 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     accessibilityLabel: imageAccessibilityLabel
   }, rest, {
     source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout, webImageStyle],
+    style: [tokens.layout.absoluteFill, imageStyleWithLayout, WEB_IMAGE_STYLE],
     resizeMode: resolveFitMode(fit),
     onLoad: handleLoad,
     onError: handleError
   })) : null;
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, status === 'loading' && showLoading ? /*#__PURE__*/React.createElement(View, {
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, state === 'loading' && showLoading && /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.overlay,
     pointerEvents: "none",
     testID: "rv-image-loading"
@@ -218,24 +213,25 @@ const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
         scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
       }]
     }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, imageNode, status === 'error' && showError ? /*#__PURE__*/React.createElement(View, {
+  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)), imageNode, state === 'error' && showError && /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.overlay,
     pointerEvents: "none",
     testID: "rv-image-error"
-  }, errorIcon ? /*#__PURE__*/React.createElement(View, {
+  }, errorIcon && /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconContainer, {
       width: resolvedErrorIconSize,
       height: resolvedErrorIconSize
     }]
-  }, errorIcon) : null, fallback !== undefined && fallback !== null && fallback !== false ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)) : null, children);
+  }, errorIcon), isRenderable(fallback) ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)), children);
   return pressableProps ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressableProps, {
-    accessibilityRole: containerRole,
+    accessibilityRole: clickableRole,
     accessibilityLabel: resolvedAccessibilityLabel,
-    style: containerStyles
+    style: computedContainerStyle
   }), content) : /*#__PURE__*/React.createElement(View, {
     accessibilityLabel: resolvedAccessibilityLabel,
-    style: containerStyles
+    style: computedContainerStyle
   }, content);
-});
-Image.displayName = 'Image';
+};
+const ImageForwardRef = /*#__PURE__*/React.forwardRef(ImageImpl);
+const Image = /*#__PURE__*/React.memo(ImageForwardRef);
 export default Image;

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

@@ -11,8 +11,8 @@ const createTokens = foundations => {
       fit: 'cover',
       showLoading: true,
       showError: true,
-      loadingText: '加载中…',
-      errorText: '加载失败',
+      loadingText: 'Loading...',
+      errorText: 'Failed to load',
       iconSize: 20,
       loadingIndicatorBaseSize: 20,
       loadingLabelMarginTop: spacing.xs,