react-native-system-ui 0.0.6 → 1.0.0

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

@@ -3,15 +3,19 @@ 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 { useReducedMotion } from '../../hooks/animation';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { isRenderable, isText } from '../../utils/validate';
 import { Cross } from 'react-native-system-icon';
 import Portal from '../portal/Portal';
 import { useAriaOverlay, useOverlayStack } from '../../hooks';
+import { useLocale } from '../config-provider/useLocale';
+import { useDirection } from '../config-provider/useDirection';
 import { usePopupTokens } from './tokens';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-const EASING_IN_CUBIC = Easing.bezier(0.55, 0.055, 0.675, 0.19);
-const EASING_OUT_CIRC = Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_OUT = Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_IN = Easing.bezier(0.55, 0.055, 0.675, 0.19);
+const CAPTURE = () => true;
 const placementConfig = {
   top: {
     container: {
@@ -49,66 +53,37 @@ const placementConfig = {
     axis: 'y'
   }
 };
-const buildRadius = (round, placement, radius) => {
+const buildRadius = (round, p, r) => {
   if (!round) return;
-  switch (placement) {
-    case 'top':
-      return {
-        borderBottomLeftRadius: radius,
-        borderBottomRightRadius: radius
-      };
-    case 'bottom':
-      return {
-        borderTopLeftRadius: radius,
-        borderTopRightRadius: radius
-      };
-    case 'left':
-      return {
-        borderTopRightRadius: radius,
-        borderBottomRightRadius: radius
-      };
-    case 'right':
-      return {
-        borderTopLeftRadius: radius,
-        borderBottomLeftRadius: radius
-      };
-    default:
-      return {
-        borderRadius: radius
-      };
-  }
-};
-const renderHeaderNode = (node, options) => {
-  if (!isRenderable(node)) return null;
-  if (isText(node)) {
-    return /*#__PURE__*/React.createElement(Text, {
-      style: options.textStyle
-    }, node);
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    style: options.wrapperStyle
-  }, node);
-};
-const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
-  if (opts.safeArea) {
-    return /*#__PURE__*/React.createElement(SafeAreaView, null, children);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    edge: "top",
-    onLayout: onSafeAreaTopLayout,
-    pointerEvents: "none"
-  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    edge: "bottom",
-    pointerEvents: "none"
-  }));
+  if (p === 'top') return {
+    borderBottomLeftRadius: r,
+    borderBottomRightRadius: r
+  };
+  if (p === 'bottom') return {
+    borderTopLeftRadius: r,
+    borderTopRightRadius: r
+  };
+  if (p === 'left') return {
+    borderTopRightRadius: r,
+    borderBottomRightRadius: r
+  };
+  if (p === 'right') return {
+    borderTopLeftRadius: r,
+    borderBottomLeftRadius: r
+  };
+  return {
+    borderRadius: r
+  };
 };
-const hiddenContentStyle = {
+const hiddenStyle = {
   opacity: 0,
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0
 };
-export const Popup = props => {
+const PopupImpl = props => {
+  const locale = useLocale();
+  const layoutDir = useDirection();
   const {
     visible,
     placement: placementProp,
@@ -118,7 +93,7 @@ export const Popup = props => {
     tokensOverride,
     overlay = true,
     overlayStyle,
-    overlayAccessibilityLabel = '关闭弹层',
+    overlayAccessibilityLabel = locale?.vanPopup?.closeOverlay ?? 'Close overlay',
     closeOnOverlayPress,
     closeOnClickOverlay,
     overlayTestID = 'popup-overlay',
@@ -149,154 +124,166 @@ export const Popup = props => {
   } = props;
   const placement = placementProp ?? position ?? 'center';
   const shouldCloseOnOverlay = closeOnClickOverlay ?? closeOnOverlayPress ?? true;
-  const shouldTranslate = placement !== 'center';
+  const isCenter = placement === 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = usePopupTokens(tokensOverride);
-  const shadow = useMemo(() => createPlatformShadow({
-    color: tokens.shadow.color,
-    opacity: tokens.shadow.opacity,
-    radius: tokens.shadow.radius,
-    offsetY: tokens.shadow.offsetY,
-    elevation: tokens.shadow.elevation
-  }), [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,
-      ...shadow
-    },
-    title: {
-      color: tokens.colors.title,
-      fontSize: tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight,
-      marginHorizontal: tokens.spacing.descriptionHorizontal,
-      textAlign: 'center'
-    },
-    titleWrapper: {
-      marginTop: tokens.spacing.titleTop,
-      marginBottom: tokens.spacing.titleBottom,
-      marginHorizontal: tokens.spacing.descriptionHorizontal,
-      alignItems: 'center'
-    },
-    description: {
-      color: tokens.colors.description,
-      fontSize: tokens.typography.descriptionSize,
-      lineHeight: tokens.typography.descriptionLineHeight
-    },
-    descriptionWrapper: {
-      marginHorizontal: tokens.spacing.descriptionHorizontal,
-      marginBottom: tokens.spacing.descriptionBottom
-    },
-    closeIconBase: {
-      minWidth: tokens.spacing.closeIconSize,
-      minHeight: tokens.spacing.closeIconSize,
-      padding: tokens.spacing.closeIconPadding
-    },
-    closeIconDefault: {
-      width: tokens.spacing.closeIconSize,
-      height: tokens.spacing.closeIconSize
-    },
-    popupSide: {
-      width: tokens.layout.sideWidth,
-      maxWidth: tokens.layout.maxWidth
-    },
-    popupCenter: {
-      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 reducedMotion = useReducedMotion();
+  const cbRef = useRef({
+    onOpened,
+    onClosed,
+    onOpen,
+    onClose,
+    beforeClose,
+    onClickOverlay
+  });
+  cbRef.current = {
+    onOpened,
+    onClosed,
+    onOpen,
+    onClose,
+    beforeClose,
+    onClickOverlay
+  };
+  const ds = useMemo(() => {
+    const shadow = createPlatformShadow(tokens.shadow);
+    const {
+      colors: c,
+      spacing: s,
+      typography: t,
+      layout: l
+    } = tokens;
+    return {
+      popup: {
+        backgroundColor: c.background,
+        padding: s.padding,
+        ...shadow
+      },
+      title: {
+        color: c.title,
+        fontSize: t.titleSize,
+        fontWeight: t.titleWeight,
+        marginHorizontal: s.descriptionHorizontal,
+        textAlign: 'center'
+      },
+      titleWrap: {
+        marginTop: s.titleTop,
+        marginBottom: s.titleBottom,
+        marginHorizontal: s.descriptionHorizontal,
+        alignItems: 'center'
+      },
+      desc: {
+        color: c.description,
+        fontSize: t.descriptionSize,
+        lineHeight: t.descriptionLineHeight
+      },
+      descWrap: {
+        marginHorizontal: s.descriptionHorizontal,
+        marginBottom: s.descriptionBottom
+      },
+      closeBase: {
+        minWidth: s.closeIconSize,
+        minHeight: s.closeIconSize,
+        padding: s.closeIconPadding
+      },
+      closeDef: {
+        width: s.closeIconSize,
+        height: s.closeIconSize
+      },
+      side: {
+        width: l.sideWidth,
+        maxWidth: l.maxWidth
+      },
+      center: {
+        minWidth: l.minWidth,
+        maxWidth: l.centerMaxWidth
+      }
+    };
+  }, [tokens]);
   const [mounted, setMounted] = useState(visible);
-  const [interactionVisible, setInteractionVisible] = useState(visible);
-  const isOpen = visible || interactionVisible;
-  const canCloseOnOverlay = shouldCloseOnOverlay && (onClose || beforeClose);
+  const [interVis, setInterVis] = useState(visible);
+  const isOpen = visible || interVis;
+  const canCloseOvl = shouldCloseOnOverlay && (onClose || beforeClose);
   const progress = useRef(new Animated.Value(0)).current;
-  const animationRef = useRef(null);
-  const animationSeqRef = useRef(0);
-  const prevVisible = useRef(visible);
+  const animRef = useRef(null);
+  const seqRef = useRef(0);
+  const prevVis = useRef(visible);
   const closingRef = useRef(false);
-  const isVertical = placement === 'top' || placement === 'bottom';
-  const isHorizontal = placement === 'left' || placement === 'right';
-  const direction = placement === 'top' || placement === 'left' ? -1 : 1;
-  const runAnimation = useCallback(show => {
-    animationSeqRef.current += 1;
-    const currentSeq = animationSeqRef.current;
-    const easing = show ? EASING_OUT_CIRC : EASING_IN_CUBIC;
-    animationRef.current?.stop();
-    const animation = Animated.timing(progress, {
+  const isV = placement === 'top' || placement === 'bottom';
+  const isH = placement === 'left' || placement === 'right';
+  const dir = placement === 'top' || placement === 'left' ? -1 : 1;
+  const runAnim = useCallback((show, rm) => {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    animRef.current?.stop();
+    const d = rm ? 0 : duration;
+    const a = Animated.timing(progress, {
       toValue: show ? 1 : 0,
-      duration,
-      easing,
+      duration: d,
+      easing: show ? EASE_OUT : EASE_IN,
       useNativeDriver: nativeDriverEnabled,
       isInteraction: false
     });
-    animationRef.current = animation;
-    animation.start(({
+    animRef.current = a;
+    a.start(({
       finished
     }) => {
-      if (!finished || currentSeq !== animationSeqRef.current) return;
+      if (!finished || seq !== seqRef.current) return;
       if (show) {
-        onOpened?.();
+        cbRef.current.onOpened?.();
       } else {
-        setInteractionVisible(false);
-        if (destroyOnClose) {
-          setMounted(false);
-        }
-        onClosed?.();
+        setInterVis(false);
+        if (destroyOnClose) setMounted(false);
+        cbRef.current.onClosed?.();
       }
     });
-  }, [destroyOnClose, duration, onClosed, onOpened, progress]);
+  }, [destroyOnClose, duration, progress]);
   useEffect(() => {
     if (visible) {
       setMounted(true);
-      setInteractionVisible(true);
-      runAnimation(true);
+      setInterVis(true);
+      runAnim(true, reducedMotion);
     } else {
-      if (!prevVisible.current) return;
-      runAnimation(false);
+      if (prevVis.current) runAnim(false, reducedMotion);
     }
-  }, [runAnimation, visible]);
+  }, [runAnim, visible, reducedMotion]);
   useEffect(() => {
-    if (visible && !prevVisible.current) {
-      onOpen?.();
-    }
-    prevVisible.current = visible;
-  }, [onOpen, visible]);
+    if (visible && !prevVis.current) cbRef.current.onOpen?.();
+    prevVis.current = visible;
+  }, [visible]);
   useEffect(() => () => {
-    animationRef.current?.stop();
+    animRef.current?.stop();
   }, []);
   const requestClose = useCallback(async reason => {
     if (closingRef.current) return;
     closingRef.current = true;
     try {
-      if (beforeClose) {
-        const result = await beforeClose(reason);
-        if (result === false) {
-          return;
-        }
+      if (cbRef.current.beforeClose) {
+        const r = await cbRef.current.beforeClose(reason);
+        if (r === false) return;
       }
-      onClose?.();
+      ;
+      cbRef.current.onClose?.();
     } finally {
       closingRef.current = false;
     }
-  }, [beforeClose, onClose]);
+  }, []);
   useEffect(() => {
-    if (!closeOnPopstate) {
-      return;
-    }
-    const handler = () => {
-      if (!visible) return;
-      requestClose('close');
-    };
-    return addPopStateListener(handler);
+    if (!closeOnPopstate) return;
+    return addPopStateListener(() => {
+      if (visible) requestClose('close');
+    });
   }, [closeOnPopstate, requestClose, visible]);
-  const handleStackClose = useCallback(() => {
-    requestClose('close');
-  }, [requestClose]);
+  const handleOvlPress = useCallback(() => {
+    cbRef.current.onClickOverlay?.();
+    if (shouldCloseOnOverlay) requestClose('overlay');
+  }, [requestClose, shouldCloseOnOverlay]);
+  const handleClosePress = useCallback(() => requestClose('close-icon'), [requestClose]);
+  const handleEscape = useCallback(() => requestClose('close'), [requestClose]);
   const {
-    zIndex: stackZIndex
+    zIndex: stackZ
   } = useOverlayStack({
     visible: isOpen,
-    onClose: handleStackClose,
+    onClose: handleEscape,
     closeOnBack: closeOnBackPress,
     lockScroll,
     zIndex,
@@ -317,174 +304,165 @@ export const Popup = props => {
     }
   });
   const {
-    onLayout: overlayOnLayout,
-    ...overlayRestProps
+    onLayout: ovlOnLayout,
+    ...ovlRest
   } = overlayProps;
-  const contentInteractionProps = stopPropagation ? {
-    ...overlayRestProps,
-    onStartShouldSetResponder: () => true
-  } : overlayRestProps;
-  const config = placementConfig[placement];
+  const contentProps = useMemo(() => stopPropagation ? {
+    ...ovlRest,
+    onStartShouldSetResponder: CAPTURE
+  } : ovlRest, [ovlRest, stopPropagation]);
+  const cfg = placementConfig[placement];
   const radiusStyle = buildRadius(round, placement, tokens.radius.round);
   const {
-    width: windowWidth,
-    height: windowHeight
+    width: wW,
+    height: wH
   } = useWindowDimensions();
-  const translateDistance = placement === 'left' || placement === 'right' ? windowWidth : placement === 'top' || placement === 'bottom' ? windowHeight : 0;
-  const translateTransform = useMemo(() => {
-    if (!shouldTranslate) return null;
-    const outputRange = [translateDistance * direction, 0];
-    return config.axis === 'y' ? {
+  const dist = isH ? wW : isV ? wH : 0;
+  const translateT = useMemo(() => {
+    if (isCenter) return null;
+    const out = [dist * dir, 0];
+    return cfg.axis === 'y' ? {
       translateY: progress.interpolate({
         inputRange: [0, 1],
-        outputRange
+        outputRange: out
       })
     } : {
       translateX: progress.interpolate({
         inputRange: [0, 1],
-        outputRange
+        outputRange: out
       })
     };
-  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
-  const baseTransform = translateTransform ? [translateTransform] : [];
-  const animatedContentStyle = useMemo(() => {
-    const extraTransform = contentAnimationStyle?.transform;
-    const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
-    const baseStyle = {
+  }, [cfg.axis, dir, dist, isCenter, progress]);
+  const baseT = useMemo(() => translateT ? [translateT] : [], [translateT]);
+  const animStyle = useMemo(() => {
+    const et = contentAnimationStyle?.transform;
+    const t = Array.isArray(et) ? [...baseT, ...et] : baseT;
+    const s = {
       ...contentAnimationStyle,
-      transform
+      transform: t
     };
-    if (placement === 'center') {
-      return {
-        ...baseStyle,
-        opacity: progress
-      };
-    }
-    if (contentAnimationStyle?.opacity == null) {
-      return {
-        ...baseStyle,
-        opacity: 1
-      };
-    }
-    return baseStyle;
-  }, [baseTransform, contentAnimationStyle, placement, progress]);
-  const handleContentLayout = useCallback(event => {
-    overlayOnLayout?.(event);
-  }, [overlayOnLayout]);
-  const [safeAreaTopHeight, setSafeAreaTopHeight] = useState(0);
-  const handleSafeAreaTopLayout = useCallback(event => {
-    setSafeAreaTopHeight(event.nativeEvent.layout.height);
-  }, []);
+    if (isCenter) return {
+      ...s,
+      opacity: progress
+    };
+    if (contentAnimationStyle?.opacity == null) return {
+      ...s,
+      opacity: 1
+    };
+    return s;
+  }, [baseT, contentAnimationStyle, isCenter, progress]);
+  const [saTopH, setSaTopH] = useState(0);
+  const onSaTop = useCallback(e => setSaTopH(e.nativeEvent.layout.height), []);
   const shouldRender = mounted || visible;
   const hidden = !isOpen;
-  const hasCustomCloseIcon = closeIcon != null;
   const hasHeader = isRenderable(title) || isRenderable(description);
-  const headerPadding = tokens.spacing.closeIconRight + tokens.spacing.closeIconSize;
-  const headerPaddingStyle = closeable && closeIconPosition.startsWith('top-') ? closeIconPosition.endsWith('right') ? {
-    paddingRight: headerPadding
-  } : {
-    paddingLeft: headerPadding
-  } : undefined;
-  const closeIconTopValue = closeIconPosition.includes('top') ? tokens.spacing.closeIconTop + safeAreaTopHeight : undefined;
-  const closeIconBottomValue = closeIconPosition.includes('bottom') ? tokens.spacing.closeIconTop : undefined;
-  const closeIconVerticalStyle = closeIconBottomValue !== undefined ? {
-    bottom: closeIconBottomValue
-  } : {
-    top: closeIconTopValue
-  };
-  const closeIconHorizontalStyle = closeIconPosition.endsWith('left') ? {
-    left: tokens.spacing.closeIconRight
-  } : {
-    right: tokens.spacing.closeIconRight
-  };
   const headerNode = useMemo(() => {
     if (!hasHeader) return null;
+    const pad = tokens.spacing.closeIconRight + tokens.spacing.closeIconSize;
+    const ps = closeable && closeIconPosition.startsWith('top-') ? closeIconPosition.endsWith('right') ? {
+      paddingRight: pad
+    } : {
+      paddingLeft: pad
+    } : undefined;
+    const renderH = (n, ts, ws) => !isRenderable(n) ? null : isText(n) ? /*#__PURE__*/React.createElement(Text, {
+      style: ts
+    }, n) : /*#__PURE__*/React.createElement(View, {
+      style: ws
+    }, n);
     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(() => {
+      style: [S.header, ps]
+    }, renderH(title, [S.title, ds.title], ds.titleWrap), renderH(description, [S.desc, ds.desc], ds.descWrap));
+  }, [closeable, closeIconPosition, description, ds, hasHeader, title, tokens.spacing.closeIconRight, tokens.spacing.closeIconSize]);
+  const closeNode = useMemo(() => {
     if (!closeable) return null;
+    const custom = closeIcon != null;
+    const v = closeIconPosition.includes('bottom') ? {
+      bottom: tokens.spacing.closeIconTop
+    } : {
+      top: tokens.spacing.closeIconTop + saTopH
+    };
+    const isRtl = layoutDir === 'rtl';
+    const h = closeIconPosition.endsWith('left') ? isRtl ? {
+      right: tokens.spacing.closeIconRight
+    } : {
+      left: tokens.spacing.closeIconRight
+    } : isRtl ? {
+      left: tokens.spacing.closeIconRight
+    } : {
+      right: tokens.spacing.closeIconRight
+    };
     return /*#__PURE__*/React.createElement(Pressable, {
-      style: [styles.closeIconBase, dynamicStyles.closeIconBase, closeIconVerticalStyle, closeIconHorizontalStyle, !hasCustomCloseIcon ? dynamicStyles.closeIconDefault : null],
+      style: [S.closeBase, ds.closeBase, v, h, !custom && ds.closeDef],
       hitSlop: 8,
-      onPress: () => requestClose('close-icon')
-    }, hasCustomCloseIcon ? closeIcon : /*#__PURE__*/React.createElement(Cross, {
+      onPress: handleClosePress
+    }, custom ? 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)), [animatedContentStyle, closeIconNode, contentBody, contentInteractionProps, dynamicStyles.popup, dynamicStyles.popupCenter, dynamicStyles.popupSide, handleContentLayout, handleSafeAreaTopLayout, hidden, isHorizontal, isVertical, overlayRef, placement, radiusStyle, rest, safeArea, safeAreaInsetBottom, safeAreaInsetTop, style]);
+  }, [closeIcon, closeIconPosition, closeable, ds, handleClosePress, saTopH, tokens.colors.closeIcon, tokens.spacing.closeIconRight, tokens.spacing.closeIconTop]);
+  const body = hasHeader ? /*#__PURE__*/React.createElement(React.Fragment, null, headerNode, children) : children;
   if (!shouldRender) return null;
-  const resolvedZIndex = stackZIndex ?? zIndex;
+  const rz = stackZ ?? zIndex;
+  const safeContent = safeArea ? /*#__PURE__*/React.createElement(SafeAreaView, null, body) : /*#__PURE__*/React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/React.createElement(SafeAreaView, {
+    edge: "top",
+    onLayout: onSaTop,
+    pointerEvents: "none"
+  }), body, safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+    edge: "bottom",
+    pointerEvents: "none"
+  }));
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles.portalRoot, webFixedRootStyle, resolvedZIndex ? {
-      zIndex: resolvedZIndex
+    style: [S.root, rz ? {
+      zIndex: rz
     } : undefined],
     pointerEvents: "box-none"
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.container, config.container],
+    style: [S.ctr, cfg.container],
     pointerEvents: isOpen ? 'auto' : 'none',
     accessibilityViewIsModal: isOpen,
     accessibilityLiveRegion: "polite",
-    onAccessibilityEscape: () => requestClose('close')
+    onAccessibilityEscape: handleEscape
   }, overlay && isOpen ? /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
     testID: overlayTestID,
-    style: [styles.overlay, {
+    style: [S.ovl, {
       backgroundColor: tokens.colors.overlay,
       opacity: progress
     }, overlayStyle],
     renderToHardwareTextureAndroid: Platform.OS === 'android',
     shouldRasterizeIOS: Platform.OS === 'ios',
     pointerEvents: isOpen ? 'auto' : 'none'
-  }, canCloseOnOverlay ? {
+  }, canCloseOvl ? {
     accessibilityRole: 'button',
     accessibilityLabel: overlayAccessibilityLabel,
-    accessibilityHint: '双击即可关闭弹层'
+    accessibilityHint: locale?.vanPopup?.closeHint ?? 'Double-tap to close'
   } : {
     accessible: false
   }, {
-    onPress: () => {
-      onClickOverlay?.();
-      if (shouldCloseOnOverlay) {
-        requestClose('overlay');
-      }
-    }
+    onPress: handleOvlPress
   })) : null, !overlay && lockScroll && isOpen ? /*#__PURE__*/React.createElement(View, {
-    style: styles.lockLayer,
+    style: S.lock,
     pointerEvents: "auto",
-    onStartShouldSetResponder: () => true,
-    onMoveShouldSetResponder: () => true
-  }) : null, content)));
+    onStartShouldSetResponder: CAPTURE,
+    onMoveShouldSetResponder: CAPTURE
+  }) : null, /*#__PURE__*/React.createElement(Animated.View, _extends({
+    ref: overlayRef
+  }, contentProps, {
+    onLayout: ovlOnLayout,
+    renderToHardwareTextureAndroid: Platform.OS === 'android',
+    shouldRasterizeIOS: Platform.OS === 'ios',
+    style: [ds.popup, isCenter && ds.center, isV && S.popV, isH && ds.side, radiusStyle, animStyle, style, hidden && hiddenStyle]
+  }, rest), closeNode, safeContent))));
 };
-const styles = StyleSheet.create({
-  portalRoot: {
+const S = StyleSheet.create({
+  root: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center'
   },
-  container: {
+  ctr: {
     flex: 1
   },
-  overlay: {
+  ovl: {
     ...StyleSheet.absoluteFillObject,
     opacity: 0
   },
@@ -494,28 +472,21 @@ const styles = StyleSheet.create({
   title: {
     includeFontPadding: false
   },
-  description: {
+  desc: {
     includeFontPadding: false
   },
-  popupVertical: {
+  popV: {
     alignSelf: 'stretch'
   },
-  closeIconBase: {
+  closeBase: {
     position: 'absolute',
     zIndex: 999,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  lockLayer: {
+  lock: {
     ...StyleSheet.absoluteFillObject
   }
 });
-const webFixedRootStyle = Platform.OS === 'web' ? {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0
-} : undefined;
-Popup.displayName = 'Popup';
+export const Popup = /*#__PURE__*/React.memo(PopupImpl);
 export default Popup;