react-native-system-ui 0.0.5 → 0.0.6

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

@@ -1,13 +1,13 @@
 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 { Animated, Platform, Pressable, Text, View } from 'react-native';
+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 { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import Portal from '../portal/Portal';
-import { useOverlayStack } from '../overlay';
+import { useOverlayStack } from '../../hooks';
+import { nativeDriverEnabled } from '../../platform';
 import { useNotifyTokens } from './tokens';
-export const Notify = props => {
+export const NotifyContent = props => {
   const {
     visible,
     message,
@@ -51,22 +51,18 @@ export const Notify = props => {
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
   const [barHeight, setBarHeight] = React.useState(0);
-  const handleLayout = event => {
+  const handleLayout = useCallback(event => {
     const height = event.nativeEvent.layout.height;
     if (!height) return;
     setBarHeight(prev => prev === height ? prev : height);
-  };
+  }, []);
 
   // 关键：静态调用时 Notify 初次挂载的 visible=true，需要执行进入动画
   const canAnimate = barHeight > 0;
-  const {
-    mounted,
-    animated
-  } = usePresenceAnimation(visible, {
-    duration: tokens.defaults.animationDuration,
-    appear: true,
-    canAnimate
-  });
+  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 {
     zIndex: stackZIndex
   } = useOverlayStack({
@@ -77,6 +73,49 @@ export const Notify = props => {
   const resolvedZIndex = stackZIndex ?? zIndex;
   const prevVisibleRef = React.useRef(visible);
   const closingRef = React.useRef(false);
+  React.useEffect(() => {
+    animationIdRef.current += 1;
+    const animationId = animationIdRef.current;
+    animationRef.current?.stop();
+    const durationValue = tokens.defaults.animationDuration;
+    if (visible) {
+      setMounted(true);
+      if (!canAnimate) {
+        animated.setValue(0);
+        return;
+      }
+      animationRef.current = Animated.timing(animated, {
+        toValue: 1,
+        duration: durationValue,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start();
+    } else {
+      if (!canAnimate) {
+        animated.setValue(0);
+        setMounted(false);
+        return;
+      }
+      animationRef.current = Animated.timing(animated, {
+        toValue: 0,
+        duration: durationValue,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start(({
+        finished
+      }) => {
+        if (!finished || animationId !== animationIdRef.current) return;
+        setMounted(false);
+      });
+    }
+  }, [animated, canAnimate, tokens.defaults.animationDuration, visible]);
+  React.useEffect(() => () => {
+    animationRef.current?.stop();
+  }, []);
   React.useEffect(() => {
     let openedTimer = null;
     if (visible) {
@@ -112,10 +151,10 @@ export const Notify = props => {
   }, [onClose, resolvedDuration, visible]);
   const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || isFunction(onClick);
-  const handlePress = () => {
+  const handlePress = useCallback(() => {
     onClick?.();
     if (closeOnClick) onClose?.();
-  };
+  }, [closeOnClick, onClick, onClose]);
   const accessibilityRole = interactive ? 'button' : 'alert';
   const press = useAriaPress({
     disabled: !interactive,
@@ -133,8 +172,7 @@ export const Notify = props => {
     outputRange: [-contentHeight, 0]
   }), [animated, contentHeight, position]);
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
-  if (!mounted) return null;
-  const bar = /*#__PURE__*/React.createElement(View, {
+  const bar = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.container, position === 'top' ? {
       paddingTop: webTopPadding ?? addOffset(safeTop, offset)
     } : null, webBottomPadding !== undefined ? {
@@ -176,8 +214,9 @@ export const Notify = props => {
     style: {
       height: safeBottomInset
     }
-  }) : null);
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+  }) : 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]);
+  if (!mounted) return null;
+  return /*#__PURE__*/React.createElement(View, {
     testID: "rv-notify",
     pointerEvents: interactive ? 'box-none' : 'none',
     style: [tokens.layout.portal, position === 'bottom' ? {
@@ -189,7 +228,9 @@ export const Notify = props => {
     } : null]
   }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
     disabled: !interactive
-  }), bar) : bar));
+  }), bar) : bar);
 };
+export const Notify = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
+NotifyContent.displayName = 'NotifyContent';
 Notify.displayName = 'Notify';
 export default Notify;

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useEffect, useState } from 'react';
 import Portal from '../portal/Portal';
 import { isFunction, isString, isText } from '../../utils';
-import Notify from './Notify';
+import { NotifyContent } from './Notify';
 const activeKeys = new Set();
 const notifyOptions = new Map();
 const notifyControllers = new Map();
@@ -75,7 +75,7 @@ const NotifyPortal = ({
     options.onClosed?.();
     removeNotify(id);
   };
-  return /*#__PURE__*/React.createElement(Notify, _extends({}, options, {
+  return /*#__PURE__*/React.createElement(NotifyContent, _extends({}, options, {
     visible: visible,
     onClose: handleClose,
     onClosed: handleClosed

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

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

package/dist/es/components/number-keyboard/NumberKeyboard.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, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
@@ -109,7 +109,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = (() => {
+  const keys = useMemo(() => {
     const shouldShuffle = randomKeyOrder && visible;
     const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
@@ -160,7 +160,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  })();
+  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
   const handleInput = useCallback((text, type) => {
     if (type === 'delete') {
       const currentValue = valueRef.current;
@@ -180,13 +180,13 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     onInput?.(text);
     setMergedValue(`${currentValue}${text}`);
   }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = createPlatformShadow({
+  const wrapperShadow = useMemo(() => createPlatformShadow({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  });
+  }), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
   const keyGap = spacing.keyGap;
   const renderKey = useCallback((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
@@ -293,7 +293,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   }, []);
   const hasHeader = !isCustomTheme && (title || closeButtonText);
   const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = (() => {
+  const memo = useMemo(() => {
     const headerPaddingStyle = {
       paddingHorizontal: spacing.titlePadding
     };
@@ -401,7 +401,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       bodyNode,
       safeAreaNode
     };
-  })();
+  }, [closeSelf, colors.title, doubleKeyHeight, extraKeyRender, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, sizing.titleFontSize, spacing.paddingHorizontal, spacing.titlePadding, title]);
   if (!shouldRender && !visible) {
     return null;
   }

package/dist/es/components/overlay/Overlay.js

@@ -1,82 +1,65 @@
-import React, { useCallback } from 'react';
-import { Animated, Pressable, StyleSheet, View } from 'react-native';
-import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
-import { parseNumberLike } from '../../utils/number';
-import Portal from '../portal/Portal';
-import { useOverlayStack } from './useOverlayStack';
-import { useOverlayTokens } from './tokens';
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-export const Overlay = props => {
+import React from 'react';
+import { Modal, Platform } from 'react-native';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import { useKeyboardDismissable } from '@react-native-aria/interactions';
+export const ExitAnimationContext = /*#__PURE__*/React.createContext({
+  exited: true,
+  setExited: _exited => {}
+});
+export const Overlay = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    color,
-    tokensOverride,
-    onPress,
-    onClick,
-    style,
-    zIndex,
     children,
-    visible: visibleProp,
-    duration: durationProp,
-    lockScroll: lockScrollProp,
-    closeOnBackPress: closeOnBackPressProp,
-    testID: testIDProp,
-    accessibilityLabel: accessibilityLabelProp
+    isOpen,
+    visible,
+    useRNModal = false,
+    useRNModalOnAndroid = false,
+    isKeyboardDismissable = true,
+    animationPreset = 'fade',
+    onRequestClose,
+    style
   } = props;
-  const hasAction = !!onPress || !!onClick;
-  const tokens = useOverlayTokens(tokensOverride);
-  const visible = visibleProp ?? tokens.defaults.visible;
-  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
-  const closeOnBackPress = closeOnBackPressProp ?? tokens.defaults.closeOnBackPress;
-  const testID = testIDProp ?? tokens.defaults.testID;
-  const accessibilityLabel = accessibilityLabelProp ?? tokens.defaults.accessibilityLabel;
-  const duration = durationProp ?? tokens.defaults.duration;
-  const resolvedDuration = Math.max(0, parseNumberLike(duration, tokens.defaults.duration) ?? tokens.defaults.duration);
-  const {
-    mounted,
-    animated
-  } = usePresenceAnimation(visible, {
-    duration: resolvedDuration
+  const resolvedOpen = isOpen ?? visible ?? false;
+  const [exited, setExited] = React.useState(!resolvedOpen);
+  useKeyboardDismissable({
+    enabled: Platform.OS !== 'web' && resolvedOpen && isKeyboardDismissable,
+    callback: onRequestClose ?? (() => {})
   });
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-      return;
+  let styleObj = {};
+  if (Platform.OS === 'web') {
+    styleObj.zIndex = 9999;
+  }
+  if (animationPreset === 'slide') {
+    styleObj.overflow = 'hidden';
+    styleObj.display = 'flex';
+  } else {
+    styleObj.display = exited && !resolvedOpen ? 'none' : 'flex';
+  }
+  if (!resolvedOpen && exited) {
+    return null;
+  }
+  if (useRNModal || useRNModalOnAndroid && Platform.OS === 'android') {
+    return /*#__PURE__*/React.createElement(ExitAnimationContext.Provider, {
+      value: {
+        exited,
+        setExited
+      }
+    }, /*#__PURE__*/React.createElement(Modal, {
+      statusBarTranslucent: true,
+      transparent: true,
+      visible: resolvedOpen,
+      onRequestClose: onRequestClose,
+      animationType: animationPreset,
+      ref: ref
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(OverlayContainer, {
+    style: [style, styleObj]
+  }, /*#__PURE__*/React.createElement(ExitAnimationContext.Provider, {
+    value: {
+      exited,
+      setExited
     }
-    onClick?.();
-  }, [onClick, onPress]);
-  const {
-    zIndex: stackZIndex
-  } = useOverlayStack({
-    visible: mounted,
-    onClose: hasAction ? handlePress : undefined,
-    closeOnBack: hasAction ? closeOnBackPress : false,
-    lockScroll,
-    zIndex: parseNumberLike(zIndex),
-    type: 'overlay'
-  });
-  if (!mounted) return null;
-  const resolvedZIndex = stackZIndex ?? parseNumberLike(zIndex);
-  const styleBackgroundColor = StyleSheet.flatten(style)?.backgroundColor;
-  const resolvedColor = color ?? styleBackgroundColor ?? tokens.colors.backdrop;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
-    pointerEvents: "box-none",
-    style: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
-      zIndex: resolvedZIndex
-    } : null, style]
-  }, /*#__PURE__*/React.createElement(AnimatedPressable, {
-    testID: testID,
-    style: [tokens.layout.overlay, {
-      backgroundColor: resolvedColor,
-      opacity: animated,
-      touchAction: lockScroll ? 'none' : undefined
-    }],
-    pointerEvents: mounted ? 'auto' : 'none',
-    accessible: hasAction,
-    accessibilityRole: hasAction ? 'button' : undefined,
-    accessibilityLabel: hasAction ? accessibilityLabel : undefined,
-    accessibilityHint: hasAction ? '双击即可关闭遮罩' : undefined,
-    onPress: handlePress
-  }), children));
-};
+  }, children));
+});
 Overlay.displayName = 'Overlay';
 export default Overlay;

package/dist/es/components/overlay/index.js

@@ -1,5 +1,4 @@
 import Overlay from './Overlay';
-export { Overlay };
-export default Overlay;
-export * from './OverlayStackStore';
-export * from './useOverlayStack';
+import { OverlayProvider } from '@react-native-aria/overlays';
+export { Overlay, OverlayProvider };
+export default Overlay;

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

@@ -1,31 +1,5 @@
 import { createComponentTokensHook } from '../../design-system';
-export const createOverlayTokens = _foundations => ({
-  defaults: {
-    visible: false,
-    duration: 300,
-    lockScroll: true,
-    closeOnBackPress: false,
-    testID: 'rv-overlay',
-    accessibilityLabel: '关闭遮罩'
-  },
-  layout: {
-    portal: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    },
-    overlay: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }
-  },
-  colors: {
-    backdrop: 'rgba(0, 0, 0, 0.7)'
-  }
-});
+const createOverlayTokens = _foundations => {
+  return {};
+};
 export const useOverlayTokens = createComponentTokensHook('overlay', createOverlayTokens);

package/dist/es/components/password-input/PasswordInput.js

@@ -1,10 +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, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
 import { useControllableValue } from '../../hooks';
 import { parseNumberLike } from '../../utils/number';
 import { isString, isText } from '../../utils/validate';
+import { usePasswordInputTokens } from './tokens';
 const HIDDEN_INPUT_PROPS = {
   caretHidden: true,
   autoCorrect: false,
@@ -13,45 +13,6 @@ const HIDDEN_INPUT_PROPS = {
   autoComplete: 'off'
 };
 const sanitizeNumber = value => value.replace(/[^0-9]/g, '');
-const createPasswordInputTokens = foundations => ({
-  colors: {
-    border: foundations.palette.default[100],
-    text: foundations.palette.default[900],
-    muted: foundations.palette.default[500],
-    error: foundations.palette.danger[500],
-    cursor: foundations.palette.default[800],
-    background: '#ffffff',
-    transparent: 'transparent'
-  },
-  radii: {
-    wrapper: foundations.radii.sm,
-    cellGutter: foundations.radii.none
-  },
-  sizing: {
-    cellHeight: 50,
-    cellTextSize: foundations.fontSize.xl,
-    maskSize: 10,
-    cursorWidth: StyleSheet.hairlineWidth || 1,
-    cursorHeightRatio: 0.4,
-    cursorTopRatio: 0.3
-  },
-  typography: {
-    fontFamily: foundations.typography.fontFamily,
-    cellTextWeight: foundations.typography.weight.semiBold,
-    infoSize: foundations.fontSize.sm,
-    infoLineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
-    infoWeight: foundations.typography.weight.regular
-  },
-  opacity: {
-    disabled: 0.6,
-    hidden: 0
-  },
-  spacing: {
-    infoMarginTop: foundations.spacing.sm,
-    none: foundations.spacing.none
-  }
-});
-const usePasswordInputTokens = createComponentTokensHook('passwordInput', createPasswordInputTokens);
 const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     value,

package/dist/es/components/password-input/tokens.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+const createPasswordInputTokens = foundations => ({
+  colors: {
+    border: foundations.palette.default[100],
+    text: foundations.palette.default[900],
+    muted: foundations.palette.default[500],
+    error: foundations.palette.danger[500],
+    cursor: foundations.palette.default[800],
+    background: '#ffffff',
+    transparent: 'transparent'
+  },
+  radii: {
+    wrapper: foundations.radii.sm,
+    cellGutter: foundations.radii.none
+  },
+  sizing: {
+    cellHeight: 50,
+    cellTextSize: foundations.fontSize.xl,
+    maskSize: 10,
+    cursorWidth: StyleSheet.hairlineWidth || 1,
+    cursorHeightRatio: 0.4,
+    cursorTopRatio: 0.3
+  },
+  typography: {
+    fontFamily: foundations.typography.fontFamily,
+    cellTextWeight: foundations.typography.weight.semiBold,
+    infoSize: foundations.fontSize.sm,
+    infoLineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
+    infoWeight: foundations.typography.weight.regular
+  },
+  opacity: {
+    disabled: 0.6,
+    hidden: 0
+  },
+  spacing: {
+    infoMarginTop: foundations.spacing.sm,
+    none: foundations.spacing.none
+  }
+});
+export const usePasswordInputTokens = createComponentTokensHook('passwordInput', createPasswordInputTokens);