react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/popup/Popup.js

@@ -1,14 +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, { useCallback, useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Platform, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { SafeAreaView } from '../safe-area-view';
 import { addPopStateListener, nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { isRenderable, isText } from '../../utils/validate';
 import { Cross } from 'react-native-system-icon';
 import Portal from '../portal/Portal';
-import { useOverlayStack } from '../overlay';
-import { useAriaOverlay, usePresenceAnimation } from '../../hooks';
+import { useAriaOverlay, useOverlayStack } from '../../hooks';
 import { usePopupTokens } from './tokens';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const EASING_IN_CUBIC = Easing.bezier(0.55, 0.055, 0.675, 0.19);
@@ -131,7 +130,7 @@ export const Popup = props => {
     safeAreaInsetTop = false,
     safeAreaInsetBottom: safeAreaInsetBottomProp,
     lockScroll = true,
-    destroyOnClose = false,
+    destroyOnClose = true,
     duration = 300,
     zIndex,
     closeOnBackPress = false,
@@ -153,14 +152,14 @@ export const Popup = props => {
   const shouldTranslate = placement !== 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = usePopupTokens(tokensOverride);
-  const shadow = createPlatformShadow({
+  const shadow = useMemo(() => createPlatformShadow({
     color: tokens.shadow.color,
     opacity: tokens.shadow.opacity,
     radius: tokens.shadow.radius,
     offsetY: tokens.shadow.offsetY,
     elevation: tokens.shadow.elevation
-  });
-  const dynamicStyles = {
+  }), [tokens.shadow.color, tokens.shadow.elevation, tokens.shadow.offsetY, tokens.shadow.opacity, tokens.shadow.radius]);
+  const dynamicStyles = useMemo(() => ({
     popup: {
       backgroundColor: tokens.colors.background,
       padding: tokens.spacing.padding,
@@ -205,7 +204,7 @@ export const Popup = props => {
       minWidth: tokens.layout.minWidth,
       maxWidth: tokens.layout.centerMaxWidth
     }
-  };
+  }), [shadow, tokens.colors.background, tokens.colors.description, tokens.colors.title, tokens.layout.centerMaxWidth, tokens.layout.maxWidth, tokens.layout.minWidth, tokens.layout.sideWidth, tokens.spacing.closeIconPadding, tokens.spacing.closeIconSize, tokens.spacing.descriptionBottom, tokens.spacing.descriptionHorizontal, tokens.spacing.padding, tokens.spacing.titleBottom, tokens.spacing.titleTop, tokens.typography.descriptionLineHeight, tokens.typography.descriptionSize, tokens.typography.titleSize, tokens.typography.titleWeight]);
   const [mounted, setMounted] = useState(visible);
   const [interactionVisible, setInteractionVisible] = useState(visible);
   const isOpen = visible || interactionVisible;
@@ -227,7 +226,8 @@ export const Popup = props => {
       toValue: show ? 1 : 0,
       duration,
       easing,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     });
     animationRef.current = animation;
     animation.start(({
@@ -295,7 +295,7 @@ export const Popup = props => {
   const {
     zIndex: stackZIndex
   } = useOverlayStack({
-    visible,
+    visible: isOpen,
     onClose: handleStackClose,
     closeOnBack: closeOnBackPress,
     lockScroll,
@@ -306,11 +306,13 @@ export const Popup = props => {
     overlayRef,
     overlayProps
   } = useAriaOverlay({
-    isOpen: visible,
+    isOpen,
     onClose: () => requestClose('overlay'),
     isDismissable: shouldCloseOnOverlay,
     overlayProps: {
-      accessibilityRole: 'dialog',
+      ...(Platform.OS === 'android' ? {} : {
+        accessibilityRole: 'dialog'
+      }),
       accessibilityLiveRegion: 'polite'
     }
   });
@@ -318,24 +320,18 @@ export const Popup = props => {
     onLayout: overlayOnLayout,
     ...overlayRestProps
   } = overlayProps;
-  const stopPropagationResponder = useCallback(() => true, []);
   const contentInteractionProps = stopPropagation ? {
     ...overlayRestProps,
-    onStartShouldSetResponder: stopPropagationResponder
+    onStartShouldSetResponder: () => true
   } : overlayRestProps;
   const config = placementConfig[placement];
   const radiusStyle = buildRadius(round, placement, tokens.radius.round);
-  const {
-    animated: overlayOpacity
-  } = usePresenceAnimation(visible, {
-    duration
-  });
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowDimensions();
   const translateDistance = placement === 'left' || placement === 'right' ? windowWidth : placement === 'top' || placement === 'bottom' ? windowHeight : 0;
-  const translateTransform = (() => {
+  const translateTransform = useMemo(() => {
     if (!shouldTranslate) return null;
     const outputRange = [translateDistance * direction, 0];
     return config.axis === 'y' ? {
@@ -349,9 +345,9 @@ export const Popup = props => {
         outputRange
       })
     };
-  })();
+  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
   const baseTransform = translateTransform ? [translateTransform] : [];
-  const animatedContentStyle = (() => {
+  const animatedContentStyle = useMemo(() => {
     const extraTransform = contentAnimationStyle?.transform;
     const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
     const baseStyle = {
@@ -371,7 +367,7 @@ export const Popup = props => {
       };
     }
     return baseStyle;
-  })();
+  }, [baseTransform, contentAnimationStyle, placement, progress]);
   const handleContentLayout = useCallback(event => {
     overlayOnLayout?.(event);
   }, [overlayOnLayout]);
@@ -380,7 +376,6 @@ export const Popup = props => {
     setSafeAreaTopHeight(event.nativeEvent.layout.height);
   }, []);
   const shouldRender = mounted || visible;
-  if (!shouldRender) return null;
   const hidden = !isOpen;
   const hasCustomCloseIcon = closeIcon != null;
   const hasHeader = isRenderable(title) || isRenderable(description);
@@ -402,53 +397,64 @@ export const Popup = props => {
   } : {
     right: tokens.spacing.closeIconRight
   };
-  const headerNode = hasHeader ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.header, headerPaddingStyle]
-  }, renderHeaderNode(title, {
-    textStyle: [styles.title, dynamicStyles.title],
-    wrapperStyle: dynamicStyles.titleWrapper
-  }), renderHeaderNode(description, {
-    textStyle: [styles.description, dynamicStyles.description],
-    wrapperStyle: dynamicStyles.descriptionWrapper
-  })) : null;
-  const contentBody = hasHeader ? /*#__PURE__*/React.createElement(React.Fragment, null, headerNode, children) : children;
-  const closeIconNode = closeable ? /*#__PURE__*/React.createElement(Pressable, {
-    style: [styles.closeIconBase, dynamicStyles.closeIconBase, closeIconVerticalStyle, closeIconHorizontalStyle, !hasCustomCloseIcon ? dynamicStyles.closeIconDefault : null],
-    hitSlop: 8,
-    onPress: () => requestClose('close-icon')
-  }, hasCustomCloseIcon ? closeIcon : /*#__PURE__*/React.createElement(Cross, {
-    size: 22,
-    fill: tokens.colors.closeIcon,
-    color: tokens.colors.closeIcon
-  })) : null;
-  const content = /*#__PURE__*/React.createElement(Animated.View, _extends({
+  const headerNode = useMemo(() => {
+    if (!hasHeader) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.header, headerPaddingStyle]
+    }, renderHeaderNode(title, {
+      textStyle: [styles.title, dynamicStyles.title],
+      wrapperStyle: dynamicStyles.titleWrapper
+    }), renderHeaderNode(description, {
+      textStyle: [styles.description, dynamicStyles.description],
+      wrapperStyle: dynamicStyles.descriptionWrapper
+    }));
+  }, [description, dynamicStyles.description, dynamicStyles.descriptionWrapper, dynamicStyles.title, dynamicStyles.titleWrapper, hasHeader, headerPaddingStyle, title]);
+  const contentBody = useMemo(() => hasHeader ? /*#__PURE__*/React.createElement(React.Fragment, null, headerNode, children) : children, [children, hasHeader, headerNode]);
+  const closeIconNode = useMemo(() => {
+    if (!closeable) return null;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      style: [styles.closeIconBase, dynamicStyles.closeIconBase, closeIconVerticalStyle, closeIconHorizontalStyle, !hasCustomCloseIcon ? dynamicStyles.closeIconDefault : null],
+      hitSlop: 8,
+      onPress: () => requestClose('close-icon')
+    }, hasCustomCloseIcon ? closeIcon : /*#__PURE__*/React.createElement(Cross, {
+      size: 22,
+      fill: tokens.colors.closeIcon,
+      color: tokens.colors.closeIcon
+    }));
+  }, [closeIcon, closeIconHorizontalStyle, closeIconVerticalStyle, closeable, dynamicStyles.closeIconBase, dynamicStyles.closeIconDefault, hasCustomCloseIcon, requestClose, tokens.colors.closeIcon]);
+  const content = useMemo(() => /*#__PURE__*/React.createElement(Animated.View, _extends({
     ref: overlayRef
   }, contentInteractionProps, {
     onLayout: handleContentLayout,
+    renderToHardwareTextureAndroid: Platform.OS === 'android',
+    shouldRasterizeIOS: Platform.OS === 'ios',
     style: [dynamicStyles.popup, placement === 'center' ? dynamicStyles.popupCenter : null, isVertical ? styles.popupVertical : null, isHorizontal ? dynamicStyles.popupSide : null, radiusStyle, animatedContentStyle, style, hidden ? hiddenContentStyle : null]
   }, rest), closeIconNode, renderWithSafeArea(contentBody, {
     safeArea,
     safeAreaInsetTop,
     safeAreaInsetBottom
-  }, safeAreaInsetTop ? handleSafeAreaTopLayout : undefined));
+  }, safeAreaInsetTop ? handleSafeAreaTopLayout : undefined)), [animatedContentStyle, closeIconNode, contentBody, contentInteractionProps, dynamicStyles.popup, dynamicStyles.popupCenter, dynamicStyles.popupSide, handleContentLayout, handleSafeAreaTopLayout, hidden, isHorizontal, isVertical, overlayRef, placement, radiusStyle, rest, safeArea, safeAreaInsetBottom, safeAreaInsetTop, style]);
+  if (!shouldRender) return null;
   const resolvedZIndex = stackZIndex ?? zIndex;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles.portalRoot, resolvedZIndex ? {
+    style: [styles.portalRoot, webFixedRootStyle, resolvedZIndex ? {
       zIndex: resolvedZIndex
     } : undefined],
     pointerEvents: "box-none"
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, config.container],
     pointerEvents: isOpen ? 'auto' : 'none',
-    accessibilityViewIsModal: visible,
+    accessibilityViewIsModal: isOpen,
     accessibilityLiveRegion: "polite",
     onAccessibilityEscape: () => requestClose('close')
   }, overlay && isOpen ? /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
     testID: overlayTestID,
     style: [styles.overlay, {
       backgroundColor: tokens.colors.overlay,
-      opacity: overlayOpacity
+      opacity: progress
     }, overlayStyle],
+    renderToHardwareTextureAndroid: Platform.OS === 'android',
+    shouldRasterizeIOS: Platform.OS === 'ios',
     pointerEvents: isOpen ? 'auto' : 'none'
   }, canCloseOnOverlay ? {
     accessibilityRole: 'button',
@@ -504,5 +510,12 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject
   }
 });
+const webFixedRootStyle = Platform.OS === 'web' ? {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+} : undefined;
 Popup.displayName = 'Popup';
 export default Popup;

package/dist/es/components/portal/Portal.js

@@ -1,40 +1,46 @@
-import { useContext, useLayoutEffect, useRef } from 'react';
+import React, { useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import Overlay from '../overlay';
+import { PortalHost, portalManager as globalManager, portalStore } from './PortalHost';
 import { PortalContext } from './PortalContext';
-import { PortalHost, ensureGlobalPortalHost, portalManager as globalManager, portalStore } from './PortalHost';
-const usePortalManager = () => useContext(PortalContext) ?? globalManager;
-let hasWarnedNoHost = false;
-const PortalComponent = ({
-  children
-}) => {
-  const manager = usePortalManager();
+const PortalComponent = /*#__PURE__*/React.forwardRef(({
+  children,
+  isOpen,
+  visible,
+  useRNModal,
+  useRNModalOnAndroid,
+  isKeyboardDismissable,
+  animationPreset,
+  onRequestClose,
+  style
+}, _ref) => {
+  const manager = useContext(PortalContext) ?? globalManager;
   const keyRef = useRef(null);
+  const resolvedOpen = isOpen ?? visible ?? true;
+  const overlayNode = useMemo(() => /*#__PURE__*/React.createElement(Overlay, {
+    isOpen: resolvedOpen,
+    useRNModal: useRNModal,
+    useRNModalOnAndroid: useRNModalOnAndroid,
+    isKeyboardDismissable: isKeyboardDismissable,
+    animationPreset: animationPreset,
+    onRequestClose: onRequestClose,
+    style: style
+  }, children), [animationPreset, children, isKeyboardDismissable, onRequestClose, resolvedOpen, style, useRNModal, useRNModalOnAndroid]);
   useLayoutEffect(() => {
-    if (manager === globalManager) {
-      if (typeof document === 'undefined' && !portalStore.hasHosts() && !hasWarnedNoHost && typeof __DEV__ !== 'undefined' && __DEV__) {
-        hasWarnedNoHost = true;
-        console.warn('[Portal] 请在根节点挂载 <PortalHost> 以保证遮罩层正常工作');
-      }
-      void ensureGlobalPortalHost();
+    if (keyRef.current === null) {
+      keyRef.current = manager.mount(overlayNode);
+    } else {
+      manager.update(keyRef.current, overlayNode);
+    }
+  }, [manager, overlayNode]);
+  useLayoutEffect(() => () => {
+    if (keyRef.current !== null) {
+      manager.unmount(keyRef.current);
+      keyRef.current = null;
     }
-    const key = manager.mount(children ?? null);
-    keyRef.current = key;
-    return () => {
-      if (keyRef.current !== null) {
-        manager.unmount(keyRef.current);
-        keyRef.current = null;
-      }
-    };
   }, [manager]);
-  useLayoutEffect(() => {
-    if (keyRef.current === null) return;
-    manager.update(keyRef.current, children ?? null);
-  }, [children, manager]);
   return null;
-};
-const add = (children, key) => {
-  ensureGlobalPortalHost();
-  return globalManager.mount(children, key);
-};
+});
+const add = (children, key) => globalManager.mount(children, key);
 const remove = key => globalManager.unmount(key);
 const update = (key, children) => globalManager.update(key, children);
 const clear = () => portalStore.clear();