@seakoi/native-ui 1.0.0

package/dist/commonjs/components/base/modal/modal-action-sheet.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalActionSheet = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _modal = require("./modal.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const ModalActionSheet = ({
+  options,
+  onOpen,
+  onClose,
+  pressOverlayClose = true,
+  onPressOverlay,
+  onSelect,
+  showCancel = true,
+  cancelTextStyle,
+  onCancel,
+  ...restProps
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const styles = (0, _index3.useModalActionSheetStyles)();
+  const theme = (0, _index2.useTheme)();
+  const _onPressOverlay = (0, _ahooks.useMemoizedFn)(() => {
+    if (pressOverlayClose) {
+      setVisible(false);
+    }
+    onPressOverlay?.();
+  });
+  const renderActionContent = (0, _ahooks.useMemoizedFn)(option => {
+    if (typeof option === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        style: styles.actionText,
+        size: 16,
+        children: option
+      });
+    } else if (/*#__PURE__*/(0, _react.isValidElement)(option.content)) {
+      return option.content;
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        style: [styles.actionText],
+        size: 16,
+        color: option.type === 'warning' ? theme.palette.error7 : theme.palette.fontGray1,
+        children: option.content
+      });
+    }
+  });
+  const handleClick = (0, _ahooks.useMemoizedFn)(async (option, index) => {
+    await onSelect?.(option, index);
+    setVisible(false);
+  });
+  const _onPressCancel = (0, _ahooks.useMemoizedFn)(async () => {
+    await onCancel?.();
+    setVisible(false);
+  });
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setVisible(true);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.Modal, {
+    ...restProps,
+    visible: visible,
+    position: "bottom",
+    onPressOverlay: _onPressOverlay,
+    safeAreaInsetBottom: true,
+    safeAreaStyle: {
+      backgroundColor: 'transparent'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: [{
+        maxHeight: 450
+      }],
+      contentContainerStyle: styles.scrollViewContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.actionView,
+        children: options?.map((option, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: styles.actionItem,
+            onPress: () => handleClick(option, index),
+            children: renderActionContent(option)
+          }, index);
+        })
+      }), showCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.cancelActionView,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.actionItem,
+          onPress: _onPressCancel,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            style: [styles.cancelTextStyle, cancelTextStyle],
+            children: "\u53D6\u6D88"
+          })
+        })
+      })]
+    })
+  });
+};
+exports.ModalActionSheet = ModalActionSheet;

package/dist/commonjs/components/base/modal/modal-confirm.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalConfirm = void 0;
+var _ahooks = require("ahooks");
+var _lodashEs = require("lodash-es");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _modal = require("./modal.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const ModalConfirm = ({
+  title,
+  titleColor,
+  content,
+  contentColor,
+  showCancelButton = true,
+  showConfirmButton = true,
+  confirmText = '确认',
+  cancelText = '取消',
+  confirmTextColor,
+  cancelTextColor,
+  onCancel,
+  onConfirm,
+  onOpen,
+  onClose,
+  duration = 300,
+  pressOverlayClose = true,
+  onPressOverlay,
+  ...restProps
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const styles = (0, _index3.useModalConfirmStyles)({
+    title,
+    contentColor
+  });
+  const theme = (0, _index2.useTheme)();
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const fadeInstance = (0, _react.useRef)(null);
+  const onOpenRefFn = (0, _ahooks.useLatest)(onOpen || _lodashEs.noop);
+  const onCloseRefFn = (0, _ahooks.useLatest)(onClose || _lodashEs.noop);
+  const onCancelRefFn = (0, _ahooks.useLatest)(onCancel || _lodashEs.noop);
+  const onConfirmRefFn = (0, _ahooks.useLatest)(onConfirm || _lodashEs.noop);
+  (0, _react.useEffect)(() => {
+    setVisible(true);
+  }, []);
+  const showDialog = (0, _ahooks.useMemoizedFn)(show => {
+    if (fadeInstance.current) {
+      fadeInstance.current.stop();
+      fadeInstance.current = null;
+    }
+    fadeInstance.current = _reactNative.Animated.timing(fadeAnim,
+    // 动画中的变量值
+    {
+      toValue: show ? 1 : 0,
+      duration: duration,
+      useNativeDriver: true,
+      easing: show ? _reactNative.Easing.bezier(0.075, 0.82, 0.165, 1.0) : _reactNative.Easing.bezier(0.55, 0.055, 0.675, 0.19)
+    });
+    fadeInstance.current.start();
+  });
+  const onOpenMemoizedFn = (0, _ahooks.useMemoizedFn)(() => {
+    showDialog(true);
+    onOpenRefFn.current?.();
+  });
+  const onCloseMemoizedFn = (0, _ahooks.useMemoizedFn)(() => {
+    showDialog(false);
+    onCloseRefFn.current?.();
+  });
+  const _onPressOverlay = (0, _ahooks.useMemoizedFn)(() => {
+    if (pressOverlayClose) {
+      setVisible(false);
+    }
+    onPressOverlay?.();
+  });
+  const _onCancel = (0, _ahooks.useMemoizedFn)(async () => {
+    await onCancelRefFn.current?.();
+    setVisible(false);
+  });
+  const _onConfirm = (0, _ahooks.useMemoizedFn)(async () => {
+    await onConfirmRefFn.current?.();
+    setVisible(false);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.Modal, {
+    ...restProps,
+    visible: visible,
+    duration: duration,
+    onOpen: onOpenMemoizedFn,
+    onClose: onCloseMemoizedFn,
+    onPressOverlay: _onPressOverlay,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [styles.container, {
+        transform: [{
+          scale: fadeAnim.interpolate({
+            inputRange: [0, 0.01, 0.98, 1],
+            outputRange: [0, 0.9, 1.02, 1]
+          })
+        }]
+      }],
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.titleView,
+        children: /*#__PURE__*/(0, _react.isValidElement)(title) ? title : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          style: styles.titleText,
+          font: "semiBold",
+          color: titleColor,
+          size: 16,
+          children: title
+        })
+      }), content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: /*#__PURE__*/(0, _react.isValidElement)(content) ? content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          style: styles.contentText,
+          children: content
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.handleButtonView,
+        children: [showCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.btnView,
+          onPress: _onCancel,
+          children: /*#__PURE__*/(0, _react.isValidElement)(cancelText) ? cancelText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            style: {
+              textAlign: 'center'
+            },
+            size: 16,
+            font: "semiBold",
+            children: cancelText
+          })
+        }), showConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.btnView,
+          onPress: _onConfirm,
+          children: /*#__PURE__*/(0, _react.isValidElement)(confirmText) ? confirmText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            style: {
+              textAlign: 'center'
+            },
+            size: 16,
+            font: "semiBold",
+            color: theme.palette.brand6,
+            children: confirmText
+          })
+        })]
+      })]
+    })
+  });
+};
+exports.ModalConfirm = ModalConfirm;

package/dist/commonjs/components/base/modal/modal-custom.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalCustom = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _modal = require("./modal.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const ModalCustom = ({
+  content,
+  onRegisterClose,
+  onClosed,
+  pressOverlayClose = true,
+  onPressOverlay,
+  ...restProps
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const onRegisterCloseRef = (0, _ahooks.useLatest)(onRegisterClose);
+
+  // 关闭弹窗（带动画）
+  const close = (0, _ahooks.useMemoizedFn)(() => {
+    setVisible(false);
+  });
+
+  // 注册 close 函数到外部
+  (0, _react.useEffect)(() => {
+    onRegisterCloseRef.current?.(close);
+  }, [close, onRegisterCloseRef]);
+
+  // 处理遮罩点击
+  const handlePressOverlay = (0, _ahooks.useMemoizedFn)(() => {
+    if (pressOverlayClose) {
+      close();
+    }
+    onPressOverlay?.();
+  });
+
+  // 挂载时显示
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setVisible(true);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.Modal, {
+    ...restProps,
+    visible: visible,
+    onPressOverlay: handlePressOverlay,
+    children: content
+  });
+};
+exports.ModalCustom = ModalCustom;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalHeader = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _index2 = require("../flex/index.js");
+var _index3 = require("../text/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ModalHeader 基础属性
+ * @description 供使用 ModalHeader 的组件继承，避免重复定义 title 和 onClose
+ */
+
+const ModalHeader = ({
+  title,
+  onClose,
+  showClose = true,
+  style,
+  extra
+}) => {
+  const theme = (0, _index.useTheme)();
+  const renderTitle = () => {
+    if (/*#__PURE__*/_react.default.isValidElement(title)) {
+      return title;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+      size: 16,
+      color: theme.palette.fontGray1,
+      children: title
+    });
+  };
+  const renderRight = () => {
+    if (extra) {
+      return extra;
+    }
+    if (showClose && onClose) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onClose,
+        hitSlop: 16,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.CloseOutlined, {
+          color: theme.palette.fontGray3
+        })
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.Flex, {
+    justify: "space-between",
+    align: "center",
+    style: style,
+    children: [renderTitle(), renderRight()]
+  });
+};
+exports.ModalHeader = ModalHeader;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalHide = exports.modalCustom = exports.modalConfirm = exports.modalActionSheet = void 0;
+var _index = require("../portal/index.js");
+var _modalActionSheet = require("./modal-action-sheet.js");
+var _modalConfirm = require("./modal-confirm.js");
+var _modalCustom = require("./modal-custom.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** 存储 key -> close 函数的映射，用于带动画关闭弹窗 */
+const modalCloseMap = new Map();
+
+// 确认弹窗
+const modalConfirm = props => {
+  const key = _index.Portal.add(/*#__PURE__*/(0, _jsxRuntime.jsx)(_modalConfirm.ModalConfirm, {
+    ...props,
+    onClosed: () => {
+      _index.Portal.remove(key);
+      props.onClosed?.();
+    }
+  }));
+
+  // 注册 close 函数（ModalConfirm 内部自己管理 visible）
+  // 暂时不支持外部关闭，如需支持需要重构 ModalConfirm
+
+  return key;
+};
+
+// 动作面板
+exports.modalConfirm = modalConfirm;
+const modalActionSheet = props => {
+  const key = _index.Portal.add(/*#__PURE__*/(0, _jsxRuntime.jsx)(_modalActionSheet.ModalActionSheet, {
+    ...props,
+    onClosed: () => {
+      _index.Portal.remove(key);
+      props.onClosed?.();
+    }
+  }));
+  return key;
+};
+
+// 自定义弹窗
+exports.modalActionSheet = modalActionSheet;
+const modalCustom = props => {
+  const key = _index.Portal.add(/*#__PURE__*/(0, _jsxRuntime.jsx)(_modalCustom.ModalCustom, {
+    ...props,
+    onRegisterClose: close => {
+      modalCloseMap.set(key, close);
+    },
+    onClosed: () => {
+      modalCloseMap.delete(key);
+      _index.Portal.remove(key);
+      props.onClosed?.();
+    }
+  }));
+  return key;
+};
+
+/**
+ * 隐藏弹窗（带动画）
+ * @param key 弹窗的 key
+ */
+exports.modalCustom = modalCustom;
+const modalHide = key => {
+  const close = modalCloseMap.get(key);
+  if (close) {
+    // 调用 close 触发关闭动画，动画结束后会自动从 Portal 移除
+    close();
+  } else {
+    // 如果没找到 close 函数，直接移除（兜底）
+    _index.Portal.remove(key);
+  }
+};
+exports.modalHide = modalHide;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalOverlay = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const ModalOverlay = exports.ModalOverlay = /*#__PURE__*/(0, _react.memo)(({
+  visible,
+  zIndex,
+  duration,
+  onPress,
+  backgroundColor
+}) => {
+  const mountedRef = (0, _react.useRef)(false);
+  const styles = (0, _index2.useOverlayStyles)();
+  const overlayAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const overlayInstance = (0, _react.useRef)(null);
+  const [localVisible, setLocalVisible] = (0, _react.useState)(visible);
+  const theme = (0, _index.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      setLocalVisible(true);
+    }
+    overlayInstance.current = _reactNative.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]);
+  (0, _react.useEffect)(() => {
+    mountedRef.current = true;
+  }, []);
+  if (!localVisible) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [styles.overlay, localVisible ? {
+      position: 'absolute'
+    } : null, {
+      opacity: overlayAnim,
+      zIndex,
+      backgroundColor: backgroundColor ?? theme.palette.fontGray2
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: {
+        flex: 1
+      },
+      onPress: onPress
+    })
+  });
+});