@seakoi/native-ui 1.0.0

package/dist/module/components/base/modal/modal-header.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { CloseOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { Flex } from "../flex/index.js";
+import { Text } from "../text/index.js";
+
+/**
+ * ModalHeader 基础属性
+ * @description 供使用 ModalHeader 的组件继承，避免重复定义 title 和 onClose
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ModalHeader = ({
+  title,
+  onClose,
+  showClose = true,
+  style,
+  extra
+}) => {
+  const theme = useTheme();
+  const renderTitle = () => {
+    if (/*#__PURE__*/React.isValidElement(title)) {
+      return title;
+    }
+    return /*#__PURE__*/_jsx(Text, {
+      size: 16,
+      color: theme.palette.fontGray1,
+      children: title
+    });
+  };
+  const renderRight = () => {
+    if (extra) {
+      return extra;
+    }
+    if (showClose && onClose) {
+      return /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClose,
+        hitSlop: 16,
+        children: /*#__PURE__*/_jsx(CloseOutlined, {
+          color: theme.palette.fontGray3
+        })
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsxs(Flex, {
+    justify: "space-between",
+    align: "center",
+    style: style,
+    children: [renderTitle(), renderRight()]
+  });
+};

package/dist/module/components/base/modal/modal-instance.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { Portal } from "../portal/index.js";
+import { ModalActionSheet } from "./modal-action-sheet.js";
+import { ModalConfirm } from "./modal-confirm.js";
+import { ModalCustom } from "./modal-custom.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 存储 key -> close 函数的映射，用于带动画关闭弹窗 */
+const modalCloseMap = new Map();
+
+// 确认弹窗
+export const modalConfirm = props => {
+  const key = Portal.add(/*#__PURE__*/_jsx(ModalConfirm, {
+    ...props,
+    onClosed: () => {
+      Portal.remove(key);
+      props.onClosed?.();
+    }
+  }));
+
+  // 注册 close 函数（ModalConfirm 内部自己管理 visible）
+  // 暂时不支持外部关闭，如需支持需要重构 ModalConfirm
+
+  return key;
+};
+
+// 动作面板
+export const modalActionSheet = props => {
+  const key = Portal.add(/*#__PURE__*/_jsx(ModalActionSheet, {
+    ...props,
+    onClosed: () => {
+      Portal.remove(key);
+      props.onClosed?.();
+    }
+  }));
+  return key;
+};
+
+// 自定义弹窗
+export const modalCustom = props => {
+  const key = Portal.add(/*#__PURE__*/_jsx(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 => {
+  const close = modalCloseMap.get(key);
+  if (close) {
+    // 调用 close 触发关闭动画，动画结束后会自动从 Portal 移除
+    close();
+  } else {
+    // 如果没找到 close 函数，直接移除（兜底）
+    Portal.remove(key);
+  }
+};

package/dist/module/components/base/modal/modal-overlay.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { memo, useEffect, useRef, useState } from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { useOverlayStyles } from "./style/index.js";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const ModalOverlay = /*#__PURE__*/memo(({
+  visible,
+  zIndex,
+  duration,
+  onPress,
+  backgroundColor
+}) => {
+  const mountedRef = useRef(false);
+  const styles = useOverlayStyles();
+  const overlayAnim = useRef(new Animated.Value(0)).current;
+  const overlayInstance = useRef(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 /*#__PURE__*/_jsx(_Fragment, {});
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.overlay, localVisible ? {
+      position: 'absolute'
+    } : null, {
+      opacity: overlayAnim,
+      zIndex,
+      backgroundColor: backgroundColor ?? theme.palette.fontGray2
+    }],
+    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: {
+        flex: 1
+      },
+      onPress: onPress
+    })
+  });
+});

package/dist/module/components/base/modal/modal.js

@@ -0,0 +1,195 @@
+"use strict";
+
+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 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from "../../../native-provider/index.js";
+import { ModalOverlay } from "./modal-overlay.js";
+import { useModalStyles } from "./style/index.js";
+import { getBorderRadius, getNextZIndex, getPosition, getTransformStyle, modalPositionMap } from "./utils.js";
+
+/**
+ * 模态框
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const Modal = /*#__PURE__*/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(undefined);
+
+  // 合并 props.visible 和内部状态，优先使用内部状态
+  const mergedVisible = internalVisible !== undefined ? internalVisible : visible;
+
+  // 状态
+  const [state, setState] = useSetState({
+    visible: mergedVisible,
+    overlayVisible: mergedVisible,
+    zIndex: getNextZIndex(),
+    lazyRender
+  });
+
+  // 动画
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeInstance = useRef(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 = [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 = [];
+  if (safeAreaInsetBottom) {
+    edges.push('bottom');
+  }
+  if (safeAreaInsetTop) {
+    edges.push('top');
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [overlay && /*#__PURE__*/_jsx(ModalOverlay, {
+      visible: state.overlayVisible,
+      zIndex: state.zIndex,
+      duration: duration,
+      backgroundColor: overlayBackgroundColor,
+      onPress: _onPressOverlay
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: modalStyles,
+      pointerEvents: position !== 'center' ? undefined : 'box-none',
+      children: /*#__PURE__*/_jsx(SafeAreaView, {
+        edges: edges,
+        style: [contentHeightNum ? {
+          height: contentHeightNum
+        } : undefined, edges.length > 0 ? styles.safeArea : undefined, safeAreaStyle],
+        children: children
+      })
+    })]
+  });
+});

package/dist/module/components/base/modal/style/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+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
+    }
+  };
+});

package/dist/module/components/base/modal/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/base/modal/utils.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { omit } from 'lodash-es';
+import { Dimensions } from 'react-native';
+let zIndex = 2000;
+
+/**
+ * 获取下一个 z-index
+ */
+export const getNextZIndex = () => ++zIndex;
+const absolute = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+export const modalPositionMap = {
+  center: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  top: omit(absolute, ['bottom']),
+  bottom: omit(absolute, ['top']),
+  right: omit(absolute, ['left']),
+  left: omit(absolute, ['right'])
+};
+const isTopOrBottom = position => position === 'top' || position === 'bottom';
+export const getPosition = (visible, position) => {
+  if (position === 'center') {
+    return visible ? 1 : 0;
+  }
+  if (visible) {
+    return 0;
+  }
+  const screen = Dimensions.get('window');
+  const x = screen.width * (visible ? 0 : 1);
+  const y = screen.height * (visible ? 0 : 1);
+  switch (position) {
+    case 'top':
+      return -y;
+    case 'bottom':
+      return y;
+    case 'left':
+      return -x;
+    case 'right':
+      return x;
+    default:
+      return 0;
+  }
+};
+export const getTransformStyle = (position, value) => {
+  if (position === 'center') {
+    return {
+      opacity: value,
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0
+    };
+  }
+  const isY = isTopOrBottom(position);
+  return {
+    transform: [isY ? {
+      translateY: value
+    } : {
+      translateX: value
+    }]
+  };
+};
+export const getBorderRadius = (position, radius) => {
+  return {
+    borderTopLeftRadius: position === 'bottom' || position === 'right' ? radius : 0,
+    borderTopRightRadius: position === 'bottom' || position === 'left' ? radius : 0,
+    borderBottomLeftRadius: position === 'top' || position === 'right' ? radius : 0,
+    borderBottomRightRadius: position === 'top' || position === 'left' ? radius : 0
+  };
+};

package/dist/module/components/base/nav-bar/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./nav-bar.js";

package/dist/module/components/base/nav-bar/nav-bar.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { ArrowLeftOutlined } from '@seakoi/svg-icons';
+import React, { isValidElement } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NavBar = ({
+  leftExtra,
+  rightExtra,
+  title,
+  titleStyle,
+  showBackArrow = true,
+  onBackPress
+}) => {
+  const styles = useStyles();
+  const handleBackPress = () => {
+    onBackPress?.();
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container],
+    children: [showBackArrow && /*#__PURE__*/_jsx(View, {
+      style: [styles.navLeft],
+      children: leftExtra ?? /*#__PURE__*/_jsx(TouchableOpacity, {
+        hitSlop: 20,
+        onPress: handleBackPress,
+        children: /*#__PURE__*/_jsx(ArrowLeftOutlined, {
+          size: 20
+        })
+      })
+    }), rightExtra && /*#__PURE__*/_jsx(View, {
+      style: [styles.navRight],
+      children: rightExtra
+    }), /*#__PURE__*/isValidElement(title) ? title : /*#__PURE__*/_jsx(Text, {
+      size: 16,
+      font: "semiBold",
+      style: [styles.navTitle, titleStyle],
+      numberOfLines: 1,
+      children: title
+    })]
+  });
+};

package/dist/module/components/base/nav-bar/style/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      position: 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: theme.palette.white,
+      height: 44
+    },
+    navLeft: {
+      position: 'absolute',
+      left: 8,
+      top: 0,
+      bottom: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      zIndex: 3
+    },
+    navTitle: {
+      flex: 1,
+      textAlign: 'center',
+      backgroundColor: theme.palette.white
+    },
+    navRight: {
+      position: 'absolute',
+      right: 8,
+      top: 0,
+      bottom: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      zIndex: 3
+    }
+  };
+});

package/dist/module/components/base/picker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./picker.js";
+export * from "./picker-trigger.js";