react-native-system-ui 0.0.1 → 0.0.2

package/dist/cjs/popup/Popup.js

@@ -0,0 +1,562 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Popup = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../../platform");
+var _createPlatformShadow = require("../../utils/createPlatformShadow");
+var _validate = require("../../utils/validate");
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _overlay = require("../overlay");
+var _hooks = require("../../hooks");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
+const EASING_IN_CUBIC = _reactNative().Easing.bezier(0.55, 0.055, 0.675, 0.19);
+const EASING_OUT_CIRC = _reactNative().Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const placementConfig = {
+  top: {
+    container: {
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    axis: 'y'
+  },
+  bottom: {
+    container: {
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    },
+    axis: 'y'
+  },
+  left: {
+    container: {
+      justifyContent: 'center',
+      alignItems: 'flex-start'
+    },
+    axis: 'x'
+  },
+  right: {
+    container: {
+      justifyContent: 'center',
+      alignItems: 'flex-end'
+    },
+    axis: 'x'
+  },
+  center: {
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    axis: 'y'
+  }
+};
+const buildRadius = (round, placement, radius) => {
+  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 (!(0, _validate.isRenderable)(node)) return null;
+  if ((0, _validate.isText)(node)) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: options.textStyle
+    }, node);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: options.wrapperStyle
+  }, node);
+};
+const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
+  if (opts.safeArea) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+      style: styles.safeAreaView
+    }, children);
+  }
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: [styles.safeInsetTop, {
+      pointerEvents: 'none'
+    }],
+    onLayout: onSafeAreaTopLayout
+  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: [styles.safeInsetBottom, {
+      pointerEvents: 'none'
+    }]
+  }));
+};
+const hiddenContentStyle = {
+  opacity: 0,
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0
+};
+const Popup = props => {
+  const {
+    visible,
+    placement: placementProp,
+    position,
+    title,
+    description,
+    tokensOverride,
+    overlay = true,
+    overlayStyle,
+    overlayAccessibilityLabel = '关闭弹层',
+    closeOnOverlayPress,
+    closeOnClickOverlay,
+    overlayTestID = 'popup-overlay',
+    closeable = false,
+    closeIcon,
+    closeIconPosition = 'top-right',
+    round,
+    safeArea = false,
+    safeAreaInsetTop = false,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    lockScroll = true,
+    destroyOnClose = false,
+    duration = 300,
+    zIndex,
+    closeOnBackPress = false,
+    closeOnPopstate = false,
+    children,
+    beforeClose,
+    onClickOverlay,
+    onClose,
+    onOpen,
+    onOpened,
+    onClosed,
+    stopPropagation = true,
+    style,
+    contentAnimationStyle,
+    ...rest
+  } = props;
+  const placement = placementProp ?? position ?? 'center';
+  const shouldCloseOnOverlay = closeOnClickOverlay ?? closeOnOverlayPress ?? true;
+  const shouldTranslate = placement !== 'center';
+  const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
+  const tokens = (0, _tokens.usePopupTokens)(tokensOverride);
+  const dynamicStyles = (0, _react().useMemo)(() => {
+    const shadow = (0, _createPlatformShadow.createPlatformShadow)({
+      color: tokens.shadow.color,
+      opacity: tokens.shadow.opacity,
+      radius: tokens.shadow.radius,
+      offsetY: tokens.shadow.offsetY,
+      elevation: tokens.shadow.elevation
+    });
+    const popup = {
+      backgroundColor: tokens.colors.background,
+      padding: tokens.spacing.padding,
+      ...shadow
+    };
+    const title = {
+      color: tokens.colors.title,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight,
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      textAlign: 'center'
+    };
+    const titleWrapper = {
+      marginTop: tokens.spacing.titleTop,
+      marginBottom: tokens.spacing.titleBottom,
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      alignItems: 'center'
+    };
+    const description = {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.descriptionSize,
+      lineHeight: tokens.typography.descriptionLineHeight
+    };
+    const descriptionWrapper = {
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      marginBottom: tokens.spacing.descriptionBottom
+    };
+    const closeIconBase = {
+      minWidth: tokens.spacing.closeIconSize,
+      minHeight: tokens.spacing.closeIconSize,
+      padding: 6
+    };
+    const closeIconDefault = {
+      width: tokens.spacing.closeIconSize,
+      height: tokens.spacing.closeIconSize
+    };
+    const popupSide = {
+      width: tokens.layout.sideWidth,
+      maxWidth: tokens.layout.maxWidth
+    };
+    const popupCenter = {
+      minWidth: tokens.layout.minWidth,
+      maxWidth: tokens.layout.centerMaxWidth
+    };
+    return {
+      popup,
+      title,
+      titleWrapper,
+      description,
+      descriptionWrapper,
+      closeIconBase,
+      closeIconDefault,
+      popupSide,
+      popupCenter
+    };
+  }, [tokens]);
+  const [mounted, setMounted] = (0, _react().useState)(visible);
+  const [interactionVisible, setInteractionVisible] = (0, _react().useState)(visible);
+  const isOpen = visible || interactionVisible;
+  const canCloseOnOverlay = shouldCloseOnOverlay && (onClose || beforeClose);
+  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const animationRef = (0, _react().useRef)(null);
+  const animationSeqRef = (0, _react().useRef)(0);
+  const prevVisible = (0, _react().useRef)(visible);
+  const closingRef = (0, _react().useRef)(false);
+  const isVertical = placement === 'top' || placement === 'bottom';
+  const isHorizontal = placement === 'left' || placement === 'right';
+  const direction = placement === 'top' || placement === 'left' ? -1 : 1;
+  const runAnimation = (0, _react().useCallback)(show => {
+    animationSeqRef.current += 1;
+    const currentSeq = animationSeqRef.current;
+    const easing = show ? EASING_OUT_CIRC : EASING_IN_CUBIC;
+    animationRef.current?.stop();
+    const animation = _reactNative().Animated.timing(progress, {
+      toValue: show ? 1 : 0,
+      duration,
+      easing,
+      useNativeDriver: _platform.nativeDriverEnabled
+    });
+    animationRef.current = animation;
+    animation.start(({
+      finished
+    }) => {
+      if (!finished || currentSeq !== animationSeqRef.current) return;
+      if (show) {
+        onOpened?.();
+      } else {
+        setInteractionVisible(false);
+        if (destroyOnClose) {
+          setMounted(false);
+        }
+        onClosed?.();
+      }
+    });
+  }, [destroyOnClose, duration, onClosed, onOpened, progress]);
+  (0, _react().useEffect)(() => {
+    if (visible) {
+      setMounted(true);
+      setInteractionVisible(true);
+      runAnimation(true);
+    } else {
+      if (!prevVisible.current) return;
+      runAnimation(false);
+    }
+  }, [runAnimation, visible]);
+  (0, _react().useEffect)(() => {
+    if (visible && !prevVisible.current) {
+      onOpen?.();
+    }
+    prevVisible.current = visible;
+  }, [onOpen, visible]);
+  (0, _react().useEffect)(() => () => {
+    animationRef.current?.stop();
+  }, []);
+  const requestClose = (0, _react().useCallback)(async reason => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    try {
+      if (beforeClose) {
+        const result = await beforeClose(reason);
+        if (result === false) {
+          return;
+        }
+      }
+      onClose?.();
+    } finally {
+      closingRef.current = false;
+    }
+  }, [beforeClose, onClose]);
+  (0, _react().useEffect)(() => {
+    if (!closeOnPopstate) {
+      return;
+    }
+    const handler = () => {
+      if (!visible) return;
+      requestClose('close');
+    };
+    return (0, _platform.addPopStateListener)(handler);
+  }, [closeOnPopstate, requestClose, visible]);
+  const handleStackClose = (0, _react().useCallback)(() => {
+    requestClose('close');
+  }, [requestClose]);
+  const {
+    zIndex: stackZIndex
+  } = (0, _overlay.useOverlayStack)({
+    visible,
+    onClose: handleStackClose,
+    closeOnBack: closeOnBackPress,
+    lockScroll,
+    zIndex,
+    type: 'popup'
+  });
+  const {
+    overlayRef,
+    overlayProps
+  } = (0, _hooks.useAriaOverlay)({
+    isOpen: visible,
+    onClose: () => requestClose('overlay'),
+    isDismissable: shouldCloseOnOverlay,
+    overlayProps: {
+      accessibilityRole: 'dialog',
+      accessibilityLiveRegion: 'polite'
+    }
+  });
+  const {
+    onLayout: overlayOnLayout,
+    ...overlayRestProps
+  } = overlayProps;
+  const stopPropagationResponder = (0, _react().useCallback)(() => true, []);
+  const contentInteractionProps = stopPropagation ? {
+    ...overlayRestProps,
+    onStartShouldSetResponder: stopPropagationResponder
+  } : overlayRestProps;
+  const config = placementConfig[placement];
+  const radiusStyle = (0, _react().useMemo)(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const {
+    animated: overlayOpacity
+  } = (0, _hooks.usePresenceAnimation)(visible, {
+    duration
+  });
+  const translateDistance = (0, _react().useMemo)(() => {
+    if (placement === 'left' || placement === 'right') {
+      return _reactNative().Dimensions.get('window').width;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      return _reactNative().Dimensions.get('window').height;
+    }
+    return 0;
+  }, [placement]);
+  const translateTransform = (0, _react().useMemo)(() => {
+    if (!shouldTranslate) return null;
+    const outputRange = [translateDistance * direction, 0];
+    return config.axis === 'y' ? {
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange
+      })
+    } : {
+      translateX: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange
+      })
+    };
+  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
+  const baseTransform = (0, _react().useMemo)(() => translateTransform ? [translateTransform] : [], [translateTransform]);
+  const animatedContentStyle = (0, _react().useMemo)(() => {
+    const extraTransform = contentAnimationStyle?.transform;
+    const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
+    const baseStyle = {
+      ...contentAnimationStyle,
+      transform
+    };
+    if (placement === 'center') {
+      return {
+        ...baseStyle,
+        opacity: progress
+      };
+    }
+    if (contentAnimationStyle?.opacity == null) {
+      return {
+        ...baseStyle,
+        opacity: 1
+      };
+    }
+    return baseStyle;
+  }, [baseTransform, contentAnimationStyle, placement, progress]);
+  const handleContentLayout = (0, _react().useCallback)(event => {
+    overlayOnLayout?.(event);
+  }, [overlayOnLayout]);
+  const [safeAreaTopHeight, setSafeAreaTopHeight] = (0, _react().useState)(0);
+  const handleSafeAreaTopLayout = (0, _react().useCallback)(event => {
+    setSafeAreaTopHeight(event.nativeEvent.layout.height);
+  }, []);
+  const shouldRender = mounted || visible;
+  if (!shouldRender) return null;
+  const hidden = !isOpen;
+  const hasCustomCloseIcon = closeIcon != null;
+  const hasHeader = (0, _validate.isRenderable)(title) || (0, _validate.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 = hasHeader ? /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_react().default.Fragment, null, headerNode, children) : children;
+  const closeIconNode = closeable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    style: [styles.closeIconBase, dynamicStyles.closeIconBase, closeIconVerticalStyle, closeIconHorizontalStyle, !hasCustomCloseIcon ? dynamicStyles.closeIconDefault : null],
+    hitSlop: 8,
+    onPress: () => requestClose('close-icon')
+  }, hasCustomCloseIcon ? closeIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Cross, {
+    size: 22,
+    fill: tokens.colors.closeIcon,
+    color: tokens.colors.closeIcon
+  })) : null;
+  const content = /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({
+    ref: overlayRef
+  }, contentInteractionProps, {
+    onLayout: handleContentLayout,
+    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));
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.portalRoot, resolvedZIndex ? {
+      zIndex: resolvedZIndex
+    } : undefined],
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.container, config.container],
+    pointerEvents: isOpen ? 'auto' : 'none',
+    accessibilityViewIsModal: visible,
+    accessibilityLiveRegion: "polite",
+    onAccessibilityEscape: () => requestClose('close')
+  }, overlay && isOpen ? /*#__PURE__*/_react().default.createElement(AnimatedPressable, _extends({
+    testID: overlayTestID,
+    style: [styles.overlay, {
+      backgroundColor: tokens.colors.overlay,
+      opacity: overlayOpacity
+    }, overlayStyle],
+    pointerEvents: isOpen ? 'auto' : 'none'
+  }, canCloseOnOverlay ? {
+    accessibilityRole: 'button',
+    accessibilityLabel: overlayAccessibilityLabel,
+    accessibilityHint: '双击即可关闭弹层'
+  } : {
+    accessible: false
+  }, {
+    onPress: () => {
+      onClickOverlay?.();
+      if (shouldCloseOnOverlay) {
+        requestClose('overlay');
+      }
+    }
+  })) : null, !overlay && lockScroll && isOpen ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.lockLayer,
+    pointerEvents: "auto",
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true
+  }) : null, content)));
+};
+exports.Popup = Popup;
+const styles = _reactNative().StyleSheet.create({
+  portalRoot: {
+    ..._reactNative().StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
+  container: {
+    flex: 1
+  },
+  overlay: {
+    ..._reactNative().StyleSheet.absoluteFillObject,
+    opacity: 0
+  },
+  header: {
+    width: '100%'
+  },
+  title: {
+    includeFontPadding: false
+  },
+  description: {
+    includeFontPadding: false
+  },
+  popupVertical: {
+    alignSelf: 'stretch'
+  },
+  closeIconBase: {
+    position: 'absolute',
+    zIndex: 999,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  lockLayer: {
+    ..._reactNative().StyleSheet.absoluteFillObject
+  },
+  safeAreaView: {
+    width: '100%'
+  },
+  safeInsetTop: {
+    width: '100%'
+  },
+  safeInsetBottom: {
+    width: '100%'
+  }
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;

package/dist/cjs/portal/Portal.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Portal = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _PortalContext = require("./PortalContext");
+var _PortalHost = require("./PortalHost");
+const usePortalManager = () => (0, _react().useContext)(_PortalContext.PortalContext) ?? _PortalHost.portalManager;
+const PortalComponent = ({
+  children
+}) => {
+  const manager = usePortalManager();
+  const keyRef = (0, _react().useRef)(null);
+  (0, _react().useLayoutEffect)(() => {
+    if (manager === _PortalHost.portalManager) {
+      void (0, _PortalHost.ensureGlobalPortalHost)();
+    }
+    const key = manager.mount(children ?? null);
+    keyRef.current = key;
+    return () => {
+      if (keyRef.current !== null) {
+        manager.unmount(keyRef.current);
+        keyRef.current = null;
+      }
+    };
+  }, [manager]);
+  (0, _react().useLayoutEffect)(() => {
+    if (keyRef.current === null) return;
+    manager.update(keyRef.current, children ?? null);
+  }, [children, manager]);
+  return null;
+};
+const add = (children, key) => {
+  (0, _PortalHost.ensureGlobalPortalHost)();
+  return _PortalHost.portalManager.mount(children, key);
+};
+const remove = key => _PortalHost.portalManager.unmount(key);
+const update = (key, children) => _PortalHost.portalManager.update(key, children);
+const clear = () => _PortalHost.portalStore.clear();
+const Portal = exports.Portal = Object.assign(PortalComponent, {
+  Host: _PortalHost.PortalHost,
+  add,
+  remove,
+  update,
+  clear
+});
+var _default = exports.default = Portal;