@seakoi/native-ui 1.0.0

package/src/components/base/modal/modal-instance.tsx

@@ -0,0 +1,79 @@
+import { Portal } from '../portal';
+import { ModalActionSheet } from './modal-action-sheet';
+import { ModalConfirm } from './modal-confirm';
+import { ModalCustom } from './modal-custom';
+import type {
+  ModalActionSheetProps,
+  ModalConfirmProps,
+  ModalCustomProps,
+} from './types';
+
+/** 存储 key -> close 函数的映射，用于带动画关闭弹窗 */
+const modalCloseMap = new Map<number, () => void>();
+
+// 确认弹窗
+export const modalConfirm = (props: ModalConfirmProps) => {
+  const key = Portal.add(
+    <ModalConfirm
+      {...props}
+      onClosed={() => {
+        Portal.remove(key);
+        props.onClosed?.();
+      }}
+    />,
+  );
+
+  // 注册 close 函数（ModalConfirm 内部自己管理 visible）
+  // 暂时不支持外部关闭，如需支持需要重构 ModalConfirm
+
+  return key;
+};
+
+// 动作面板
+export const modalActionSheet = (props: ModalActionSheetProps) => {
+  const key = Portal.add(
+    <ModalActionSheet
+      {...props}
+      onClosed={() => {
+        Portal.remove(key);
+        props.onClosed?.();
+      }}
+    />,
+  );
+
+  return key;
+};
+
+// 自定义弹窗
+export const modalCustom = (props: ModalCustomProps) => {
+  const key = Portal.add(
+    <ModalCustom
+      {...props}
+      onRegisterClose={close => {
+        modalCloseMap.set(key, close);
+      }}
+      onClosed={() => {
+        modalCloseMap.delete(key);
+        Portal.remove(key);
+        props.onClosed?.();
+      }}
+    />,
+  );
+
+  return key;
+};
+
+/**
+ * 隐藏弹窗（带动画）
+ * @param key 弹窗的 key
+ */
+export const modalHide = (key: number) => {
+  const close = modalCloseMap.get(key);
+  if (close) {
+    // 调用 close 触发关闭动画，动画结束后会自动从 Portal 移除
+    close();
+  } else {
+    // 如果没找到 close 函数，直接移除（兜底）
+    Portal.remove(key);
+  }
+};

package/src/components/base/modal/modal-overlay.tsx

@@ -0,0 +1,72 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { useOverlayStyles } from './style';
+import type { OverlayProps } from './types';
+
+export const ModalOverlay: React.FC<OverlayProps> = memo(
+  ({ visible, zIndex, duration, onPress, backgroundColor }) => {
+    const mountedRef = useRef(false);
+
+    const styles = useOverlayStyles();
+
+    const overlayAnim = useRef(new Animated.Value(0)).current;
+    const overlayInstance = useRef<Animated.CompositeAnimation>(null);
+
+    const [localVisible, setLocalVisible] = useState(visible);
+
+    const theme = useTheme();
+
+    useEffect(() => {
+      if (visible) {
+        setLocalVisible(true);
+      }
+      overlayInstance.current = Animated.timing(overlayAnim, {
+        toValue: visible ? 1 : 0,
+        duration: duration,
+        useNativeDriver: true,
+      });
+
+      overlayInstance.current.start(({ finished }) => {
+        if (finished) {
+          overlayInstance.current = null;
+
+          if (!visible) {
+            setLocalVisible(false);
+          }
+        }
+      });
+
+      return () => {
+        overlayInstance.current?.stop();
+        overlayInstance.current = null;
+      };
+    }, [visible, duration, overlayAnim]);
+
+    useEffect(() => {
+      mountedRef.current = true;
+    }, []);
+
+    if (!localVisible) {
+      return <></>;
+    }
+
+    return (
+      <Animated.View
+        style={[
+          styles.overlay,
+          localVisible ? { position: 'absolute' } : null,
+          {
+            opacity: overlayAnim,
+            zIndex,
+            backgroundColor: backgroundColor ?? theme.palette.fontGray2,
+          },
+        ]}
+      >
+        <TouchableOpacity style={{ flex: 1 }} onPress={onPress}></TouchableOpacity>
+      </Animated.View>
+    );
+  },
+);

package/src/components/base/modal/modal.tsx

@@ -0,0 +1,270 @@
+import { useLatest, useMemoizedFn, useSetState } from 'ahooks';
+import { noop } from 'lodash-es';
+import {
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  Dimensions,
+  Easing,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { type Edge, SafeAreaView } from 'react-native-safe-area-context';
+
+import { useTheme } from '#native-provider';
+
+import { ModalOverlay } from './modal-overlay';
+import { useModalStyles } from './style';
+import type { ModalProps, State } from './types';
+import {
+  getBorderRadius,
+  getNextZIndex,
+  getPosition,
+  getTransformStyle,
+  modalPositionMap,
+} from './utils';
+
+/**
+ * 模态框
+ */
+export const Modal: React.FC<ModalProps> = memo(
+  ({
+    ref,
+    children,
+    visible,
+    position = 'center',
+    duration = 300,
+    overlay = true,
+    pressOverlayClose = false,
+    lazyRender = true,
+    destroyOnClosed = false,
+    safeAreaInsetBottom = false,
+    safeAreaInsetTop = false,
+    safeAreaStyle,
+    contentHeight,
+    radius,
+    onPressOverlay,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+    onRequestClose,
+    overlayBackgroundColor,
+  }) => {
+    const styles = useModalStyles();
+    const theme = useTheme();
+
+    // 内部控制的 visible 状态（用于 ref 方法）
+    const [internalVisible, setInternalVisible] = useState<boolean | undefined>(
+      undefined,
+    );
+
+    // 合并 props.visible 和内部状态，优先使用内部状态
+    const mergedVisible = internalVisible !== undefined ? internalVisible : visible;
+
+    // 状态
+    const [state, setState] = useSetState<State>({
+      visible: mergedVisible,
+      overlayVisible: mergedVisible,
+      zIndex: getNextZIndex(),
+      lazyRender,
+    });
+
+    // 动画
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    const fadeInstance = useRef<Animated.CompositeAnimation>(null);
+
+    // 挂载完成
+    const mountedRef = useRef(false);
+
+    // 避免重复创建
+    const onOpenRefFn = useLatest(onOpen || noop);
+    const onOpenedRefFn = useLatest(onOpened || noop);
+    const onCloseRefFn = useLatest(onClose || noop);
+    const onClosedRefFn = useLatest(onClosed || noop);
+
+    // 弹窗内容高度
+
+    const contentHeightNum = useMemo(() => {
+      if (!contentHeight) return 0;
+      const screenHeight =
+        Platform.OS === 'web' ? 667 : Dimensions.get('screen').height;
+
+      return typeof contentHeight === 'number'
+        ? contentHeight
+        : screenHeight *
+            (contentHeight === '50%' ? 0.5 : contentHeight === '86%' ? 0.86 : 1);
+    }, [contentHeight]);
+
+    const _onPressOverlay = useMemoizedFn(() => {
+      if (ref && pressOverlayClose && visible === undefined) {
+        setInternalVisible(false);
+      }
+      onPressOverlay?.();
+    });
+
+    // 当 props.visible 变化时，重置内部状态
+    useEffect(() => {
+      setInternalVisible(undefined);
+    }, [visible]);
+
+    useEffect(() => {
+      if (mergedVisible) {
+        setState({
+          visible: mergedVisible,
+          zIndex: getNextZIndex(),
+          lazyRender: false,
+        });
+      }
+      setState({
+        overlayVisible: mergedVisible,
+      });
+
+      if (mountedRef.current) {
+        fadeAnim.setValue(getPosition(!mergedVisible, position));
+
+        // 打开关闭前的回调
+        if (mergedVisible) {
+          onOpenRefFn.current();
+        } else {
+          onCloseRefFn.current();
+        }
+
+        // 配置动画
+        fadeInstance.current = Animated.timing(fadeAnim, {
+          toValue: getPosition(mergedVisible, position),
+          duration: duration,
+          useNativeDriver: true,
+          easing: mergedVisible
+            ? Easing.bezier(0.075, 0.82, 0.165, 1.0)
+            : Easing.bezier(0.55, 0.055, 0.675, 0.19),
+        });
+
+        // 开启动画
+        fadeInstance.current.start(({ finished }) => {
+          if (finished) {
+            fadeInstance.current = null;
+            if (!mergedVisible) {
+              setState({ visible: mergedVisible, lazyRender: destroyOnClosed });
+              onClosedRefFn.current();
+            } else {
+              onOpenedRefFn.current();
+            }
+          }
+        });
+      }
+
+      return () => {
+        fadeInstance.current?.stop();
+        fadeInstance.current = null;
+      };
+    }, [
+      mergedVisible,
+      setState,
+      fadeAnim,
+      position,
+      duration,
+      destroyOnClosed,
+      onOpenRefFn,
+      onCloseRefFn,
+      onClosedRefFn,
+      onOpenedRefFn,
+    ]);
+
+    useEffect(() => {
+      // 挂载完成
+      mountedRef.current = true;
+    }, []);
+
+    // Android 返回按钮
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (typeof onRequestClose === 'function' && mergedVisible) {
+          return onRequestClose();
+        }
+
+        return false;
+      });
+
+      return () => backHandler.remove();
+    }, [onRequestClose, mergedVisible]);
+
+    const modalStyles: StyleProp<ViewStyle> = [
+      styles.container,
+      getBorderRadius(position, radius ?? theme.roundness.lg),
+      {
+        zIndex: state.zIndex,
+      },
+      state.visible
+        ? [
+            styles.modal_active,
+            getTransformStyle(position, fadeAnim),
+            modalPositionMap[position],
+          ]
+        : styles.modal_hide,
+    ];
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          setInternalVisible(true);
+        },
+        hide: () => {
+          setInternalVisible(false);
+        },
+      }),
+      [],
+    );
+
+    if (state.lazyRender) {
+      return null;
+    }
+
+    const edges: Edge[] = [];
+
+    if (safeAreaInsetBottom) {
+      edges.push('bottom');
+    }
+    if (safeAreaInsetTop) {
+      edges.push('top');
+    }
+
+    return (
+      <>
+        {overlay && (
+          <ModalOverlay
+            visible={state.overlayVisible}
+            zIndex={state.zIndex}
+            duration={duration}
+            backgroundColor={overlayBackgroundColor}
+            onPress={_onPressOverlay}
+          />
+        )}
+        <Animated.View
+          style={modalStyles}
+          pointerEvents={position !== 'center' ? undefined : 'box-none'}
+        >
+          <SafeAreaView
+            edges={edges}
+            style={[
+              contentHeightNum ? { height: contentHeightNum } : undefined,
+              edges.length > 0 ? styles.safeArea : undefined,
+              safeAreaStyle,
+            ]}
+          >
+            {children}
+          </SafeAreaView>
+        </Animated.View>
+      </>
+    );
+  },
+);

package/src/components/base/modal/style/index.ts

@@ -0,0 +1,114 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useModalStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      overflow: 'hidden',
+    },
+
+    modal_active: {
+      position: 'absolute',
+      height: 'auto',
+    },
+
+    modal_hide: {
+      position: 'relative',
+      height: 0,
+    },
+
+    safeArea: {
+      backgroundColor: theme.palette.white,
+    },
+  };
+});
+
+export const useOverlayStyles = createThemedStyles(() => {
+  return {
+    overlay: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
+  };
+});
+
+export const useModalConfirmStyles = createThemedStyles(
+  (theme, { title, contentColor }) => {
+    return {
+      container: {
+        width: 312,
+        backgroundColor: theme.palette.white,
+        borderRadius: theme.roundness.lg,
+        overflow: 'hidden',
+      },
+
+      titleView: {
+        marginTop: 24,
+      },
+      titleText: {
+        textAlign: 'center',
+      },
+
+      contentText: {
+        color:
+          contentColor ??
+          (title ? theme.palette.fontGray1 : theme.palette.fontGray2),
+        marginTop: title ? 10 : 24,
+        textAlign: 'center',
+        fontSize: title ? 14 : 16,
+      },
+
+      handleButtonView: {
+        marginTop: 24,
+        flexDirection: 'row',
+        borderTopWidth: 1,
+        borderTopColor: theme.palette.blueGray5,
+        height: 44,
+      },
+
+      btnView: {
+        flex: 1,
+        justifyContent: 'center',
+        borderRightWidth: 1,
+        borderRightColor: theme.palette.blueGray5,
+      },
+    };
+  },
+);
+
+export const useModalActionSheetStyles = createThemedStyles(theme => {
+  return {
+    scrollViewContainer: {
+      paddingHorizontal: 12,
+    },
+    actionView: {
+      borderRadius: 8,
+      overflow: 'hidden',
+      backgroundColor: theme.palette.blueGray2,
+    },
+    actionItem: {
+      padding: 12,
+      backgroundColor: theme.palette.white,
+      borderWidth: 1,
+      borderColor: theme.palette.blueGray5,
+    },
+
+    actionText: {
+      textAlign: 'center',
+    },
+
+    cancelTextStyle: {
+      textAlign: 'center',
+      color: theme.palette.error7,
+    },
+
+    cancelActionView: {
+      backgroundColor: theme.palette.white,
+      borderRadius: 8,
+      overflow: 'hidden',
+      marginVertical: 12,
+    },
+  };
+});