react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/notify/Notify.js

@@ -1,13 +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, { useCallback, useMemo } from 'react';
-import { Animated, Easing, Platform, Pressable, Text, View } from 'react-native';
-import { isFunction, isText } from '../../utils';
-import { useAriaPress, useSafeAreaPadding } from '../../hooks';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Platform, Pressable, View } from 'react-native';
+import { isFunction, isText, renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
+import { useAriaPress, useSafeAreaPadding, useOverlayStack } from '../../hooks';
 import Portal from '../portal/Portal';
-import { useOverlayStack } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { useNotifyTokens } from './tokens';
-export const NotifyContent = props => {
+const NotifyContentImpl = props => {
   const {
     visible,
     message,
@@ -29,7 +30,7 @@ export const NotifyContent = props => {
     onClosed
   } = props;
   const tokens = useNotifyTokens(tokensOverride);
-  const paddingVertical = tokens.spacing.paddingVertical;
+  const reducedMotion = useReducedMotion();
   const safeAreaPadding = useSafeAreaPadding({
     top: 0,
     bottom: 0
@@ -39,30 +40,38 @@ export const NotifyContent = props => {
   const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
   const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
   const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
-  const safeTop = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
-  const safeBottom = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
+  const safeAreaTopValue = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
+  const safeAreaBottomValue = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
   const offset = typeof offsetProp === 'number' && Number.isFinite(offsetProp) ? Math.max(0, offsetProp) : 0;
   const addOffset = (value, delta) => typeof value === 'string' ? `calc(${value} + ${delta}px)` : value + delta;
-  const safeBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeBottom === 'number' ? safeBottom + offset : offset;
-  const webTopPadding = Platform.OS === 'web' && position === 'top' ? addOffset(safeTop, offset) : undefined;
-  const webBottomPadding = Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeBottom, offset) : undefined;
+  const safeAreaBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeAreaBottomValue === 'number' ? safeAreaBottomValue + offset : offset;
+  const webTopPadding = Platform.OS === 'web' && position === 'top' ? addOffset(safeAreaTopValue, offset) : undefined;
+  const webBottomPadding = Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeAreaBottomValue, offset) : undefined;
   const variant = tokens.colors.variants[type];
   const resolvedBackground = background ?? variant.background;
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
-  const [barHeight, setBarHeight] = React.useState(0);
-  const handleLayout = useCallback(event => {
-    const height = event.nativeEvent.layout.height;
+  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 onClickRef = useRef(onClick);
+  onClickRef.current = onClick;
+  const [barHeight, setBarHeight] = useState(0);
+  const handleLayout = useCallback(e => {
+    const height = e.nativeEvent.layout.height;
     if (!height) return;
     setBarHeight(prev => prev === height ? prev : height);
   }, []);
-
-  // 关键：静态调用时 Notify 初次挂载的 visible=true，需要执行进入动画
   const canAnimate = barHeight > 0;
-  const [mounted, setMounted] = React.useState(visible);
-  const animated = React.useRef(new Animated.Value(0)).current;
-  const animationRef = React.useRef(null);
-  const animationIdRef = React.useRef(0);
+  const [mounted, setMounted] = useState(visible);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+  const animationIdRef = useRef(0);
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
@@ -71,22 +80,22 @@ export const NotifyContent = props => {
     zIndex
   });
   const resolvedZIndex = stackZIndex ?? zIndex;
-  const prevVisibleRef = React.useRef(visible);
-  const closingRef = React.useRef(false);
-  React.useEffect(() => {
+  const previousVisibleRef = useRef(visible);
+  const closingRef = useRef(false);
+  useEffect(() => {
     animationIdRef.current += 1;
     const animationId = animationIdRef.current;
     animationRef.current?.stop();
-    const durationValue = tokens.defaults.animationDuration;
+    const d = reducedMotion ? 0 : tokens.defaults.animationDuration;
     if (visible) {
       setMounted(true);
       if (!canAnimate) {
-        animated.setValue(0);
+        animatedValue.setValue(0);
         return;
       }
-      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
@@ -94,13 +103,13 @@ export const NotifyContent = props => {
       animationRef.current.start();
     } else {
       if (!canAnimate) {
-        animated.setValue(0);
+        animatedValue.setValue(0);
         setMounted(false);
         return;
       }
-      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
@@ -112,51 +121,47 @@ export const NotifyContent = props => {
         setMounted(false);
       });
     }
-  }, [animated, canAnimate, tokens.defaults.animationDuration, visible]);
-  React.useEffect(() => () => {
+  }, [animatedValue, canAnimate, reducedMotion, tokens.defaults.animationDuration, visible]);
+  useEffect(() => () => {
     animationRef.current?.stop();
   }, []);
-  React.useEffect(() => {
-    let openedTimer = null;
+  const resolvedAnimDuration = reducedMotion ? 0 : tokens.defaults.animationDuration;
+  useEffect(() => {
     if (visible) {
       closingRef.current = false;
-      if (!prevVisibleRef.current) {
-        onOpen?.();
-        if (onOpened) openedTimer = setTimeout(onOpened, tokens.defaults.animationDuration);
+      if (!previousVisibleRef.current) {
+        onOpenRef.current?.();
+        if (onOpenedRef.current) {
+          const cb = onOpenedRef.current;
+          const t = setTimeout(cb, resolvedAnimDuration);
+          previousVisibleRef.current = visible;
+          return () => clearTimeout(t);
+        }
       }
-    } else if (prevVisibleRef.current) {
-      closingRef.current = true;
-    }
-    prevVisibleRef.current = visible;
-    return () => {
-      if (openedTimer) clearTimeout(openedTimer);
-    };
-  }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
-  React.useEffect(() => {
+    } else if (previousVisibleRef.current) closingRef.current = true;
+    previousVisibleRef.current = visible;
+  }, [resolvedAnimDuration, visible]);
+  useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
-      onClosed?.();
-    }
-  }, [mounted, onClosed]);
-  React.useEffect(() => {
-    let timer = null;
-    if (visible && resolvedDuration > 0) {
-      timer = setTimeout(() => {
-        onClose?.();
-      }, resolvedDuration);
+      onClosedRef.current?.();
     }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [onClose, resolvedDuration, visible]);
+  }, [mounted]);
+  useEffect(() => {
+    if (!visible || resolvedDuration <= 0) return;
+    const timeout = setTimeout(() => {
+      onCloseRef.current?.();
+    }, resolvedDuration);
+    return () => clearTimeout(timeout);
+  }, [resolvedDuration, visible]);
   const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || isFunction(onClick);
   const handlePress = useCallback(() => {
-    onClick?.();
-    if (closeOnClick) onClose?.();
-  }, [closeOnClick, onClick, onClose]);
+    onClickRef.current?.();
+    if (closeOnClick) onCloseRef.current?.();
+  }, [closeOnClick]);
   const accessibilityRole = interactive ? 'button' : 'alert';
-  const press = useAriaPress({
+  const pressProps = useAriaPress({
     disabled: !interactive,
     onPress: handlePress,
     extraProps: {
@@ -164,17 +169,17 @@ export const NotifyContent = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const translateY = useMemo(() => position === 'bottom' ? animated.interpolate({
+  const translateY = useMemo(() => position === 'bottom' ? animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight, 0]
-  }) : animated.interpolate({
+  }) : animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [-contentHeight, 0]
-  }), [animated, contentHeight, position]);
-  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
-  const bar = useMemo(() => /*#__PURE__*/React.createElement(View, {
+  }), [animatedValue, contentHeight, position]);
+  const hasMessage = isRenderable(message) && (typeof message !== 'string' || message !== '');
+  const barRender = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.container, position === 'top' ? {
-      paddingTop: webTopPadding ?? addOffset(safeTop, offset)
+      paddingTop: webTopPadding ?? addOffset(safeAreaTopValue, offset)
     } : null, webBottomPadding !== undefined ? {
       paddingBottom: webBottomPadding
     } : null]
@@ -187,9 +192,11 @@ export const NotifyContent = props => {
     testID: "rv-notify-bar",
     accessibilityRole: !interactive ? accessibilityRole : undefined,
     accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
     onLayout: handleLayout,
     style: [tokens.layout.container, {
-      opacity: animated,
+      opacity: animatedValue,
       transform: [{
         translateY
       }]
@@ -201,20 +208,18 @@ export const NotifyContent = props => {
   }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, {
       paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical,
+      paddingVertical: tokens.spacing.paddingVertical,
       minHeight: tokens.sizing.minHeight
     }]
-  }, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.text, {
-      color: resolvedTextColor,
-      fontSize: tokens.typography.fontSize,
-      lineHeight: tokens.typography.lineHeight
-    }, textStyle]
-  }, message) : message : null)))), position === 'bottom' ? /*#__PURE__*/React.createElement(View, {
+  }, hasMessage && (isText(message) ? renderTextOrNode(message, [tokens.layout.text, {
+    color: resolvedTextColor,
+    fontSize: tokens.typography.fontSize,
+    lineHeight: tokens.typography.lineHeight
+  }, textStyle]) : message))))), position === 'bottom' && /*#__PURE__*/React.createElement(View, {
     style: {
-      height: safeBottomInset
+      height: safeAreaBottomInset
     }
-  }) : null), [accessibilityRole, animated, contentHeight, handleLayout, hasMessage, interactive, message, offset, paddingVertical, position, resolvedBackground, resolvedTextColor, safeBottomInset, safeTop, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding]);
+  })), [accessibilityRole, animatedValue, contentHeight, handleLayout, hasMessage, interactive, message, offset, resolvedBackground, resolvedTextColor, safeAreaBottomInset, safeAreaTopValue, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding, position]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(View, {
     testID: "rv-notify",
@@ -223,14 +228,14 @@ export const NotifyContent = props => {
       bottom: 0
     } : {
       top: 0
-    }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+    }, resolvedZIndex != null ? {
       zIndex: resolvedZIndex
     } : null]
-  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
+  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressProps.interactionProps, {
     disabled: !interactive
-  }), bar) : bar);
+  }), barRender) : barRender);
 };
-export const Notify = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
-NotifyContent.displayName = 'NotifyContent';
-Notify.displayName = 'Notify';
+export const NotifyContent = /*#__PURE__*/React.memo(NotifyContentImpl);
+const NotifyImpl = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
+export const Notify = /*#__PURE__*/React.memo(NotifyImpl);
 export default Notify;

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

@@ -1,5 +1,5 @@
 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, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Portal from '../portal/Portal';
 import { isFunction, isString, isText } from '../../utils';
 import { NotifyContent } from './Notify';
@@ -18,26 +18,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
   };
-  merged.duration = merged.duration ?? base.duration ?? 3000;
+  merged.duration = merged.duration ?? 3000;
   return merged;
 };
 const removeNotify = key => {
@@ -47,12 +39,8 @@ const removeNotify = key => {
   notifyControllers.delete(key);
 };
 const closeNotify = key => {
-  const controller = notifyControllers.get(key);
-  if (controller) {
-    controller.close();
-  } else {
-    removeNotify(key);
-  }
+  const c = notifyControllers.get(key);
+  c ? c.close() : removeNotify(key);
 };
 const NotifyPortal = ({
   id,
@@ -67,14 +55,14 @@ const NotifyPortal = ({
       notifyControllers.delete(id);
     };
   }, [id]);
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     options.onClose?.();
     setVisible(false);
-  };
-  const handleClosed = () => {
+  }, [options]);
+  const handleClosed = useCallback(() => {
     options.onClosed?.();
     removeNotify(id);
-  };
+  }, [id, options]);
   return /*#__PURE__*/React.createElement(NotifyContent, _extends({}, options, {
     visible: visible,
     onClose: handleClose,
@@ -83,9 +71,7 @@ const NotifyPortal = ({
 };
 const showNotify = (input, fallbackType = 'primary') => {
   const opts = mergeOptions(parseOptions(input), fallbackType);
-  if (!allowMultiple) {
-    Array.from(activeKeys).forEach(key => removeNotify(key));
-  }
+  if (!allowMultiple) activeKeys.forEach(key => closeNotify(key));
   const key = Portal.add(null);
   notifyOptions.set(key, opts);
   Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
@@ -96,17 +82,14 @@ const showNotify = (input, fallbackType = 'primary') => {
   const config = next => {
     const prev = notifyOptions.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 == null) {
-      merged.duration = baseOptions.duration ?? 3000;
-    }
+    if ('duration' in parsed && parsed.duration == null) merged.duration = baseOptions.duration ?? 3000;
     notifyOptions.set(key, merged);
     Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
       id: key,
@@ -132,19 +115,13 @@ export const NotifyImperative = {
     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/notify/tokens.js

@@ -1,5 +1,4 @@
 import { createComponentTokensHook } from '../../design-system';
-import { Platform } from 'react-native';
 export const createNotifyTokens = foundations => ({
   defaults: {
     type: 'primary',
@@ -14,10 +13,7 @@ export const createNotifyTokens = foundations => ({
     portal: {
       position: 'absolute',
       left: 0,
-      right: 0,
-      ...(Platform.OS === 'web' ? {
-        position: 'fixed'
-      } : {})
+      right: 0
     },
     container: {
       width: '100%'