react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/tag/Tag.js

@@ -1,10 +1,12 @@
 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 from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { Close } from 'react-native-system-icon';
-import { isFunction, isText } from '../../utils';
+import { createHairlineView, isFunction, renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
+import { useDirection } from '../config-provider/useDirection';
 import { useTagTokens } from './tokens';
-export const Tag = props => {
+const TagImpl = props => {
   const {
     tokensOverride,
     children,
@@ -25,45 +27,46 @@ export const Tag = props => {
     ...rest
   } = props;
   const tokens = useTagTokens(tokensOverride);
+  const dir = useDirection();
   const type = typeProp ?? tokens.defaults.type;
   const size = sizeProp ?? tokens.defaults.size;
   const plain = plainProp ?? tokens.defaults.plain;
   const round = roundProp ?? tokens.defaults.round;
   const mark = markProp ?? tokens.defaults.mark;
   const show = showProp ?? tokens.defaults.show;
-  if (!show) {
-    return null;
-  }
+  if (!show) return null;
   const tone = tokens.colors.toneMap[type] ?? tokens.colors.toneMap.default;
   const sizeTokens = tokens.sizing.sizes[size];
   const backgroundColor = plain ? tokens.colors.plainBackground : color ?? tone.background;
   const resolvedTextColor = textColor ?? (plain ? color ?? tone.background : tone.text);
   const borderColor = plain ? color ?? tone.background : 'transparent';
-  const borderWidth = plain ? tokens.borders.width : 0;
   const borderRadius = round ? tokens.radii.round : sizeTokens.borderRadius;
-  const containerStyle = [tokens.layout.container, {
-    backgroundColor,
-    paddingHorizontal: sizeTokens.paddingHorizontal,
-    paddingVertical: sizeTokens.paddingVertical,
-    borderRadius,
-    borderWidth,
-    borderColor
-  }, mark ? {
+  const markRadii = mark ? dir === 'rtl' ? {
+    borderTopRightRadius: tokens.radii.markLeading,
+    borderBottomRightRadius: tokens.radii.markLeading,
+    borderTopLeftRadius: tokens.radii.round,
+    borderBottomLeftRadius: tokens.radii.round
+  } : {
     borderTopLeftRadius: tokens.radii.markLeading,
     borderBottomLeftRadius: tokens.radii.markLeading,
     borderTopRightRadius: tokens.radii.round,
     borderBottomRightRadius: tokens.radii.round
-  } : null, style];
-  const label = children == null || children === false ? null : isText(children) ? /*#__PURE__*/React.createElement(Text, {
-    style: [{
-      color: resolvedTextColor,
-      fontSize: sizeTokens.fontSize,
-      lineHeight: sizeTokens.lineHeight,
-      fontFamily: tokens.typography.fontFamily,
-      fontWeight: tokens.typography.fontWeight
-    }, textStyle]
-  }, children) : children;
-  const close = !closeable ? null : /*#__PURE__*/React.createElement(Pressable, {
+  } : null;
+  const resolvedRadius = mark ? tokens.radii.round : borderRadius;
+  const containerStyle = [tokens.layout.container, {
+    backgroundColor,
+    paddingHorizontal: sizeTokens.paddingHorizontal,
+    paddingVertical: sizeTokens.paddingVertical,
+    borderRadius
+  }, markRadii, style];
+  const label = !isRenderable(children) ? null : renderTextOrNode(children, [{
+    color: resolvedTextColor,
+    fontSize: sizeTokens.fontSize,
+    lineHeight: sizeTokens.lineHeight,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.fontWeight
+  }, textStyle].filter(Boolean));
+  const close = closeable && /*#__PURE__*/React.createElement(Pressable, {
     accessibilityRole: "button",
     hitSlop: tokens.spacing.closeHitSlop,
     style: [tokens.layout.close, {
@@ -77,19 +80,26 @@ export const Tag = props => {
     color: resolvedTextColor,
     size: tokens.sizing.closeIconSize
   }));
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, label, close);
-  if (onPress) {
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      accessibilityRole: "button",
-      onPress: onPress,
-      style: ({
-        pressed
-      }) => [containerStyle, pressed && {
-        opacity: tokens.defaults.pressedOpacity
-      }]
-    }, rest), content);
-  }
+  const hairlineOverlay = plain ? /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'all',
+      color: borderColor,
+      borderRadius: resolvedRadius
+    })
+  }) : null;
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, label, close, hairlineOverlay);
+  if (onPress) return /*#__PURE__*/React.createElement(Pressable, _extends({
+    accessibilityRole: "button",
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [containerStyle, pressed && {
+      opacity: tokens.defaults.pressedOpacity
+    }]
+  }, rest), content);
   return /*#__PURE__*/React.createElement(View, _extends({
     style: containerStyle
   }, rest), content);
-};
+};
+export const Tag = /*#__PURE__*/React.memo(TagImpl);
+Tag.displayName = 'Tag';

package/dist/es/components/toast/Toast.js

@@ -1,15 +1,19 @@
 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, useRef, useState } from 'react';
-import { AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, Text, View, useWindowDimensions, Platform } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import Portal from '../portal/Portal';
 import { SafeAreaView } from '../safe-area-view';
 import { useAriaPress, useOverlayStack } from '../../hooks';
 import Loading from '../loading';
 import { Checked, Close } from 'react-native-system-icon';
-import { isFiniteNumber, isText } from '../../utils/validate';
+import { isFiniteNumber, isText, isRenderable } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
+import { useLocale } from '../config-provider/useLocale';
 import { useToastTokens } from './tokens';
-export const ToastContent = props => {
+const RT = () => true;
+const ToastContentImpl = props => {
   const {
     visible,
     message,
@@ -34,25 +38,35 @@ export const ToastContent = props => {
     onOpened,
     onClosed
   } = props;
+  const locale = useLocale();
   const tokens = useToastTokens(tokensOverride);
+  const reducedMotion = useReducedMotion();
   const {
     colors
   } = tokens;
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const durationMs = isFiniteNumber(duration) ? Math.max(0, duration) : 0;
+  const resolvedDuration = isFiniteNumber(duration) ? Math.max(0, duration) : 0;
   const [mounted, setMounted] = useState(visible);
-  const animated = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
   const animationRef = useRef(null);
   const animationIdRef = useRef(0);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  const onOpenedRef = useRef(onOpened);
+  onOpenedRef.current = onOpened;
+  const onClosedRef = useRef(onClosed);
+  onClosedRef.current = onClosed;
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
     visible: mounted,
     type: 'toast'
   });
-  const prevVisibleRef = useRef(visible);
+  const previousVisibleRef = useRef(visible);
   const closingRef = useRef(false);
   const positionOffset = windowHeight > 0 ? Math.round(windowHeight * tokens.positionOffsetRatio) : tokens.positionOffsetMin;
   const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
@@ -70,21 +84,21 @@ export const ToastContent = props => {
     animationIdRef.current += 1;
     const animationId = animationIdRef.current;
     animationRef.current?.stop();
-    const durationValue = tokens.animationDuration;
+    const d = reducedMotion ? 0 : tokens.animationDuration;
     if (visible) {
       setMounted(true);
-      animationRef.current = Animated.timing(animated, {
+      animationRef.current = Animated.timing(animatedValue, {
         toValue: 1,
-        duration: durationValue,
+        duration: d,
         easing: Easing.out(Easing.cubic),
         useNativeDriver: nativeDriverEnabled,
         isInteraction: false
       });
       animationRef.current.start();
     } else {
-      animationRef.current = Animated.timing(animated, {
+      animationRef.current = Animated.timing(animatedValue, {
         toValue: 0,
-        duration: durationValue,
+        duration: d,
         easing: Easing.out(Easing.cubic),
         useNativeDriver: nativeDriverEnabled,
         isInteraction: false
@@ -96,63 +110,55 @@ export const ToastContent = props => {
         setMounted(false);
       });
     }
-  }, [animated, tokens.animationDuration, visible]);
+  }, [animatedValue, reducedMotion, tokens.animationDuration, visible]);
   useEffect(() => () => {
     animationRef.current?.stop();
   }, []);
   useEffect(() => {
-    let timer = null;
-    if (visible) {
-      if (durationMs > 0) {
-        timer = setTimeout(() => {
-          onClose?.();
-        }, durationMs);
-      }
-    }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [durationMs, onClose, visible]);
+    if (!visible || resolvedDuration <= 0) return;
+    const timeout = setTimeout(() => {
+      onCloseRef.current?.();
+    }, resolvedDuration);
+    return () => clearTimeout(timeout);
+  }, [resolvedDuration, visible]);
   useEffect(() => {
-    if (!visible) return;
-    if (!isText(message)) return;
+    if (!visible || !isText(message)) return;
     const text = String(message);
-    if (!text) return;
-    AccessibilityInfo.announceForAccessibility?.(text);
+    if (text) AccessibilityInfo.announceForAccessibility?.(text);
   }, [message, visible]);
+  const resolvedAnimDuration = reducedMotion ? 0 : tokens.animationDuration;
   useEffect(() => {
-    let openedTimer = null;
+    let openedTimeout = null;
     if (visible) {
       closingRef.current = false;
-      if (!prevVisibleRef.current) {
-        onOpen?.();
-        if (onOpened) {
-          openedTimer = setTimeout(onOpened, tokens.animationDuration);
+      if (!previousVisibleRef.current) {
+        onOpenRef.current?.();
+        if (onOpenedRef.current) {
+          const callback = onOpenedRef.current;
+          openedTimeout = setTimeout(callback, resolvedAnimDuration);
         }
       }
-    } else if (prevVisibleRef.current) {
+    } else if (previousVisibleRef.current) {
       closingRef.current = true;
     }
-    prevVisibleRef.current = visible;
+    previousVisibleRef.current = visible;
     return () => {
-      if (openedTimer) clearTimeout(openedTimer);
+      if (openedTimeout) clearTimeout(openedTimeout);
     };
-  }, [onOpen, onOpened, tokens.animationDuration, visible]);
+  }, [resolvedAnimDuration, visible]);
   useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
-      onClosed?.();
+      onClosedRef.current?.();
     }
-  }, [mounted, onClosed]);
-  const handleClose = useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-  const toastPress = useAriaPress({
+  }, [mounted]);
+  const handleClose = useRef(() => onCloseRef.current?.()).current;
+  const pressProps = useAriaPress({
     disabled: !closeOnClick,
     onPress: handleClose,
     extraProps: {
       accessibilityRole: closeOnClick ? 'button' : 'alert',
-      accessibilityHint: closeOnClick ? '双击关闭提示' : undefined,
+      accessibilityHint: closeOnClick ? locale?.vanToast?.closeHint ?? 'Double-tap to dismiss' : undefined,
       accessibilityLiveRegion: 'assertive'
     }
   });
@@ -181,8 +187,16 @@ export const ToastContent = props => {
         return null;
     }
   }, [colors.text, icon, iconSize, loadingIndicator, tokens.iconSize, type]);
-  const isTextToast = type === 'info' && !iconNode;
-  const boxStyle = useMemo(() => isTextToast ? {
+  const iconWrapperStyle = useMemo(() => ({
+    marginBottom: tokens.gap
+  }), [tokens.gap]);
+  const messageStyle = useMemo(() => ({
+    color: colors.text,
+    fontSize: tokens.fontSize,
+    lineHeight: tokens.lineHeight
+  }), [colors.text, tokens.fontSize, tokens.lineHeight]);
+  const isTextOnly = type === 'info' && !iconNode;
+  const baseStyle = useMemo(() => isTextOnly ? {
     minWidth: tokens.textMinWidth,
     minHeight: 0,
     paddingVertical: tokens.textPaddingVertical,
@@ -191,84 +205,72 @@ export const ToastContent = props => {
     minWidth: tokens.defaultWidth,
     minHeight: tokens.defaultMinHeight,
     padding: tokens.defaultPadding
-  }, [isTextToast, tokens.defaultMinHeight, tokens.defaultPadding, tokens.defaultWidth, tokens.textMinWidth, tokens.textPaddingHorizontal, tokens.textPaddingVertical]);
+  }, [isTextOnly, tokens.defaultMinHeight, tokens.defaultPadding, tokens.defaultWidth, tokens.textMinWidth, tokens.textPaddingHorizontal, tokens.textPaddingVertical]);
   const toastStyle = useMemo(() => ({
     borderRadius: tokens.radius,
-    opacity: closeOnClick && toastPress.states.pressed ? tokens.pressedOpacity : animated,
+    opacity: closeOnClick && pressProps.states.pressed ? tokens.pressedOpacity : animatedValue,
     backgroundColor: tokens.colors.variants[type],
     maxWidth: tokens.maxWidth,
-    ...boxStyle
-  }), [animated, boxStyle, closeOnClick, toastPress.states.pressed, tokens.colors.variants, tokens.maxWidth, tokens.pressedOpacity, tokens.radius, type]);
+    ...baseStyle
+  }), [animatedValue, baseStyle, closeOnClick, pressProps.states.pressed, tokens.colors.variants, tokens.maxWidth, tokens.pressedOpacity, tokens.radius, type]);
   if (!mounted) return null;
-  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
+  const hasMessage = isRenderable(message) && (typeof message !== 'string' || message !== '');
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles.backdrop, {
+    style: [S.b, {
       backgroundColor: tokens.colors.transparent
     }, positionStyle, stackZIndex ? {
       zIndex: stackZIndex
     } : undefined],
     pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
-  }, overlay || forbidClick ? /*#__PURE__*/React.createElement(Pressable, {
+  }, (overlay || forbidClick) && /*#__PURE__*/React.createElement(Pressable, {
     testID: "rv-toast-overlay",
-    style: [styles.overlay, {
+    style: [S.o, {
       backgroundColor: tokens.colors.transparent
     }, overlay && {
       backgroundColor: colors.backdrop
     }, overlayStyle],
     pointerEvents: "auto",
     onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
-    onStartShouldSetResponder: () => true,
-    onMoveShouldSetResponder: () => true
-  }) : null, needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
+    onStartShouldSetResponder: RT,
+    onMoveShouldSetResponder: RT
+  }), needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
     edge: "top",
     pointerEvents: "none"
   }), /*#__PURE__*/React.createElement(Pressable, _extends({
     disabled: !closeOnClick
-  }, toastPress.interactionProps), /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.toast, toastStyle, style]
-  }, iconNode ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginBottom: tokens.gap
-    }
-  }, iconNode) : null, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.message, {
-      color: colors.text,
-      fontSize: tokens.fontSize,
-      lineHeight: tokens.lineHeight
-    }, textStyle]
-  }, message) : /*#__PURE__*/React.createElement(View, {
-    style: {
-      alignItems: 'center'
-    }
-  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+  }, pressProps.interactionProps), /*#__PURE__*/React.createElement(Animated.View, {
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
+    style: [S.t, toastStyle, style]
+  }, iconNode && /*#__PURE__*/React.createElement(View, {
+    style: iconWrapperStyle
+  }, iconNode), hasMessage && (isText(message) ? renderTextOrNode(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/React.createElement(View, {
+    style: S.mw
+  }, message)))), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
     edge: "bottom",
     pointerEvents: "none"
   }));
 };
-export const Toast = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ToastContent, props));
-const styles = StyleSheet.create({
-  backdrop: {
+export const ToastContent = /*#__PURE__*/React.memo(ToastContentImpl);
+const ToastImpl = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ToastContent, props));
+export const Toast = /*#__PURE__*/React.memo(ToastImpl);
+const S = StyleSheet.create({
+  b: {
     flex: 1,
-    alignItems: 'center',
-    ...(Platform.OS === 'web' ? {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    } : {})
+    alignItems: 'center'
   },
-  overlay: {
+  o: {
     ...StyleSheet.absoluteFillObject
   },
-  toast: {
+  t: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  message: {
+  m: {
     textAlign: 'center'
+  },
+  mw: {
+    alignItems: 'center'
   }
 });
-ToastContent.displayName = 'ToastContent';
-Toast.displayName = 'Toast';
 export default Toast;

package/dist/es/components/toast/imperative.js

@@ -17,28 +17,18 @@ let currentOptions = {
   ...baseOptions
 };
 const typeDefaults = new Map();
-const parseOptions = input => {
-  if (/*#__PURE__*/React.isValidElement(input) || isText(input)) {
-    return {
-      message: input
-    };
-  }
-  return input ?? {};
-};
+const parseOptions = input => /*#__PURE__*/React.isValidElement(input) || isText(input) ? {
+  message: input
+} : input ?? {};
 const mergeOptions = (input, fallbackType) => {
   const type = input.type ?? fallbackType;
-  const base = {
-    ...currentOptions,
-    ...typeDefaults.get(type)
-  };
   const merged = {
-    ...base,
+    ...currentOptions,
+    ...typeDefaults.get(type),
     ...input,
     type
   };
-  if (merged.duration === undefined || merged.duration === null) {
-    merged.duration = base.duration ?? 2000;
-  }
+  if (merged.duration == null) merged.duration = currentOptions.duration ?? 2000;
   return merged;
 };
 const removeToast = key => {
@@ -48,12 +38,8 @@ const removeToast = key => {
   toastControllers.delete(key);
 };
 const closeToast = key => {
-  const controller = toastControllers.get(key);
-  if (controller) {
-    controller.close();
-  } else {
-    removeToast(key);
-  }
+  const c = toastControllers.get(key);
+  c ? c.close() : removeToast(key);
 };
 const ToastPortal = ({
   id,
@@ -84,9 +70,7 @@ const ToastPortal = ({
 };
 const showToast = (input, fallbackType = 'info') => {
   const opts = mergeOptions(parseOptions(input), fallbackType);
-  if (!allowMultiple) {
-    activeKeys.forEach(key => closeToast(key));
-  }
+  if (!allowMultiple) activeKeys.forEach(key => closeToast(key));
   const key = Portal.add(null);
   toastOptions.set(key, opts);
   Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
@@ -97,17 +81,14 @@ const showToast = (input, fallbackType = 'info') => {
   const config = next => {
     const prev = toastOptions.get(key);
     if (!prev) return;
-    const nextInput = isFunction(next) ? next(prev) : next;
-    const parsed = parseOptions(nextInput);
+    const parsed = parseOptions(isFunction(next) ? next(prev) : next);
     const nextType = parsed.type ?? prev.type ?? fallbackType;
     const merged = {
       ...prev,
       ...parsed,
       type: nextType
     };
-    if ('duration' in parsed && (parsed.duration === undefined || parsed.duration === null)) {
-      merged.duration = typeDefaults.get(nextType)?.duration ?? currentOptions.duration ?? baseOptions.duration ?? 2000;
-    }
+    if ('duration' in parsed && parsed.duration == null) merged.duration = typeDefaults.get(nextType)?.duration ?? currentOptions.duration ?? 2000;
     toastOptions.set(key, merged);
     Portal.update(key, /*#__PURE__*/React.createElement(ToastPortal, {
       id: key,
@@ -133,19 +114,13 @@ export const ToastImperative = {
     allowMultiple = value;
   },
   setDefaultOptions: (typeOrOptions, options) => {
-    if (isString(typeOrOptions)) {
-      typeDefaults.set(typeOrOptions, options ?? {});
-    } else {
-      currentOptions = {
-        ...currentOptions,
-        ...typeOrOptions
-      };
-    }
+    if (isString(typeOrOptions)) typeDefaults.set(typeOrOptions, options ?? {});else currentOptions = {
+      ...currentOptions,
+      ...typeOrOptions
+    };
   },
   resetDefaultOptions: type => {
-    if (type) {
-      typeDefaults.delete(type);
-    } else {
+    if (type) typeDefaults.delete(type);else {
       currentOptions = {
         ...baseOptions
       };

package/dist/es/components/typography/Typography.js

@@ -93,11 +93,9 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
     ellipsizeMode: "tail",
     onTextLayout: hasActionText && ellipsisRows && !expanded && !isWeb ? handleTextLayout : undefined
   }, textProps), children);
-  if (!shouldShowAction) {
-    return center ? /*#__PURE__*/React.createElement(View, {
-      style: tokens.layout.centerWrapper
-    }, textNode) : textNode;
-  }
+  if (!shouldShowAction) return center ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.centerWrapper
+  }, textNode) : textNode;
   const actionNode = /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.actionRow
   }, textNode, /*#__PURE__*/React.createElement(Text, {