react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/popup/Popup.js

@@ -0,0 +1,535 @@
+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, useMemo, useRef, useState } from 'react';
+import { Animated, Dimensions, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+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 { 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 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 (!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, {
+      style: styles.safeAreaView
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: [styles.safeInsetTop, {
+      pointerEvents: 'none'
+    }],
+    onLayout: onSafeAreaTopLayout
+  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: [styles.safeInsetBottom, {
+      pointerEvents: 'none'
+    }]
+  }));
+};
+const hiddenContentStyle = {
+  opacity: 0,
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0
+};
+export 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 = usePopupTokens(tokensOverride);
+  const dynamicStyles = useMemo(() => {
+    const shadow = 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] = useState(visible);
+  const [interactionVisible, setInteractionVisible] = useState(visible);
+  const isOpen = visible || interactionVisible;
+  const canCloseOnOverlay = shouldCloseOnOverlay && (onClose || beforeClose);
+  const progress = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+  const animationSeqRef = useRef(0);
+  const prevVisible = 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, {
+      toValue: show ? 1 : 0,
+      duration,
+      easing,
+      useNativeDriver: 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]);
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      setInteractionVisible(true);
+      runAnimation(true);
+    } else {
+      if (!prevVisible.current) return;
+      runAnimation(false);
+    }
+  }, [runAnimation, visible]);
+  useEffect(() => {
+    if (visible && !prevVisible.current) {
+      onOpen?.();
+    }
+    prevVisible.current = visible;
+  }, [onOpen, visible]);
+  useEffect(() => () => {
+    animationRef.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;
+        }
+      }
+      onClose?.();
+    } finally {
+      closingRef.current = false;
+    }
+  }, [beforeClose, onClose]);
+  useEffect(() => {
+    if (!closeOnPopstate) {
+      return;
+    }
+    const handler = () => {
+      if (!visible) return;
+      requestClose('close');
+    };
+    return addPopStateListener(handler);
+  }, [closeOnPopstate, requestClose, visible]);
+  const handleStackClose = useCallback(() => {
+    requestClose('close');
+  }, [requestClose]);
+  const {
+    zIndex: stackZIndex
+  } = useOverlayStack({
+    visible,
+    onClose: handleStackClose,
+    closeOnBack: closeOnBackPress,
+    lockScroll,
+    zIndex,
+    type: 'popup'
+  });
+  const {
+    overlayRef,
+    overlayProps
+  } = useAriaOverlay({
+    isOpen: visible,
+    onClose: () => requestClose('overlay'),
+    isDismissable: shouldCloseOnOverlay,
+    overlayProps: {
+      accessibilityRole: 'dialog',
+      accessibilityLiveRegion: 'polite'
+    }
+  });
+  const {
+    onLayout: overlayOnLayout,
+    ...overlayRestProps
+  } = overlayProps;
+  const stopPropagationResponder = useCallback(() => true, []);
+  const contentInteractionProps = stopPropagation ? {
+    ...overlayRestProps,
+    onStartShouldSetResponder: stopPropagationResponder
+  } : overlayRestProps;
+  const config = placementConfig[placement];
+  const radiusStyle = useMemo(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const {
+    animated: overlayOpacity
+  } = usePresenceAnimation(visible, {
+    duration
+  });
+  const translateDistance = useMemo(() => {
+    if (placement === 'left' || placement === 'right') {
+      return Dimensions.get('window').width;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      return Dimensions.get('window').height;
+    }
+    return 0;
+  }, [placement]);
+  const translateTransform = 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 = useMemo(() => translateTransform ? [translateTransform] : [], [translateTransform]);
+  const animatedContentStyle = 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 = useCallback(event => {
+    overlayOnLayout?.(event);
+  }, [overlayOnLayout]);
+  const [safeAreaTopHeight, setSafeAreaTopHeight] = useState(0);
+  const handleSafeAreaTopLayout = useCallback(event => {
+    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);
+  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.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({
+    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.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    style: [styles.portalRoot, resolvedZIndex ? {
+      zIndex: resolvedZIndex
+    } : undefined],
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, config.container],
+    pointerEvents: isOpen ? 'auto' : 'none',
+    accessibilityViewIsModal: visible,
+    accessibilityLiveRegion: "polite",
+    onAccessibilityEscape: () => requestClose('close')
+  }, overlay && isOpen ? /*#__PURE__*/React.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.createElement(View, {
+    style: styles.lockLayer,
+    pointerEvents: "auto",
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true
+  }) : null, content)));
+};
+const styles = StyleSheet.create({
+  portalRoot: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
+  container: {
+    flex: 1
+  },
+  overlay: {
+    ...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: {
+    ...StyleSheet.absoluteFillObject
+  },
+  safeAreaView: {
+    width: '100%'
+  },
+  safeInsetTop: {
+    width: '100%'
+  },
+  safeInsetBottom: {
+    width: '100%'
+  }
+});
+Popup.displayName = 'Popup';
+export default Popup;

package/dist/es/popup/index.js

@@ -0,0 +1,3 @@
+import Popup from './Popup';
+export default Popup;
+export { Popup };

package/dist/es/popup/tokens.js

@@ -0,0 +1,53 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createPopupTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii,
+    fontSize,
+    typography
+  } = foundations;
+  return {
+    colors: {
+      overlay: 'rgba(0,0,0,0.5)',
+      background: '#ffffff',
+      title: palette.default[900],
+      description: palette.default[500],
+      closeIcon: palette.default[300]
+    },
+    radius: {
+      round: radii.lg,
+      shadow: 18
+    },
+    spacing: {
+      padding: spacing.lg,
+      titleTop: spacing.xl,
+      titleBottom: spacing.md,
+      descriptionHorizontal: spacing.xl,
+      descriptionBottom: spacing.md,
+      closeIconTop: spacing.md,
+      closeIconRight: spacing.md,
+      closeIconSize: 36
+    },
+    typography: {
+      titleSize: fontSize.md,
+      titleWeight: typography.weight.medium,
+      descriptionSize: fontSize.sm,
+      descriptionLineHeight: 20
+    },
+    shadow: {
+      color: 'rgba(0,0,0,0.25)',
+      opacity: 0.35,
+      radius: 18,
+      offsetY: 8,
+      elevation: 24
+    },
+    layout: {
+      maxWidth: 420,
+      minWidth: 260,
+      centerMaxWidth: 360,
+      sideWidth: '80%'
+    }
+  };
+};
+export const usePopupTokens = createComponentTokensHook('popup', createPopupTokens);

package/dist/es/portal/Portal.js

@@ -0,0 +1,43 @@
+import { useContext, useLayoutEffect, useRef } from 'react';
+import { PortalContext } from './PortalContext';
+import { PortalHost, ensureGlobalPortalHost, portalManager as globalManager, portalStore } from './PortalHost';
+const usePortalManager = () => useContext(PortalContext) ?? globalManager;
+const PortalComponent = ({
+  children
+}) => {
+  const manager = usePortalManager();
+  const keyRef = useRef(null);
+  useLayoutEffect(() => {
+    if (manager === globalManager) {
+      void ensureGlobalPortalHost();
+    }
+    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 remove = key => globalManager.unmount(key);
+const update = (key, children) => globalManager.update(key, children);
+const clear = () => portalStore.clear();
+export const Portal = Object.assign(PortalComponent, {
+  Host: PortalHost,
+  add,
+  remove,
+  update,
+  clear
+});
+export default Portal;

package/dist/es/portal/PortalContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const PortalContext = /*#__PURE__*/React.createContext(null);