@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+var _ahooks = require("ahooks");
+var _lodashEs = require("lodash-es");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../../native-provider/index.js");
+var _modalOverlay = require("./modal-overlay.js");
+var _index2 = require("./style/index.js");
+var _utils = require("./utils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 模态框
+ */
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.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 = (0, _index2.useModalStyles)();
+  const theme = (0, _index.useTheme)();
+
+  // 内部控制的 visible 状态（用于 ref 方法）
+  const [internalVisible, setInternalVisible] = (0, _react.useState)(undefined);
+
+  // 合并 props.visible 和内部状态，优先使用内部状态
+  const mergedVisible = internalVisible !== undefined ? internalVisible : visible;
+
+  // 状态
+  const [state, setState] = (0, _ahooks.useSetState)({
+    visible: mergedVisible,
+    overlayVisible: mergedVisible,
+    zIndex: (0, _utils.getNextZIndex)(),
+    lazyRender
+  });
+
+  // 动画
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const fadeInstance = (0, _react.useRef)(null);
+
+  // 挂载完成
+  const mountedRef = (0, _react.useRef)(false);
+
+  // 避免重复创建
+  const onOpenRefFn = (0, _ahooks.useLatest)(onOpen || _lodashEs.noop);
+  const onOpenedRefFn = (0, _ahooks.useLatest)(onOpened || _lodashEs.noop);
+  const onCloseRefFn = (0, _ahooks.useLatest)(onClose || _lodashEs.noop);
+  const onClosedRefFn = (0, _ahooks.useLatest)(onClosed || _lodashEs.noop);
+
+  // 弹窗内容高度
+
+  const contentHeightNum = (0, _react.useMemo)(() => {
+    if (!contentHeight) return 0;
+    const screenHeight = _reactNative.Platform.OS === 'web' ? 667 : _reactNative.Dimensions.get('screen').height;
+    return typeof contentHeight === 'number' ? contentHeight : screenHeight * (contentHeight === '50%' ? 0.5 : contentHeight === '86%' ? 0.86 : 1);
+  }, [contentHeight]);
+  const _onPressOverlay = (0, _ahooks.useMemoizedFn)(() => {
+    if (ref && pressOverlayClose && visible === undefined) {
+      setInternalVisible(false);
+    }
+    onPressOverlay?.();
+  });
+
+  // 当 props.visible 变化时，重置内部状态
+  (0, _react.useEffect)(() => {
+    setInternalVisible(undefined);
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    if (mergedVisible) {
+      setState({
+        visible: mergedVisible,
+        zIndex: (0, _utils.getNextZIndex)(),
+        lazyRender: false
+      });
+    }
+    setState({
+      overlayVisible: mergedVisible
+    });
+    if (mountedRef.current) {
+      fadeAnim.setValue((0, _utils.getPosition)(!mergedVisible, position));
+
+      // 打开关闭前的回调
+      if (mergedVisible) {
+        onOpenRefFn.current();
+      } else {
+        onCloseRefFn.current();
+      }
+
+      // 配置动画
+      fadeInstance.current = _reactNative.Animated.timing(fadeAnim, {
+        toValue: (0, _utils.getPosition)(mergedVisible, position),
+        duration: duration,
+        useNativeDriver: true,
+        easing: mergedVisible ? _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(({
+        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]);
+  (0, _react.useEffect)(() => {
+    // 挂载完成
+    mountedRef.current = true;
+  }, []);
+
+  // Android 返回按钮
+  (0, _react.useEffect)(() => {
+    const backHandler = _reactNative.BackHandler.addEventListener('hardwareBackPress', () => {
+      if (typeof onRequestClose === 'function' && mergedVisible) {
+        return onRequestClose();
+      }
+      return false;
+    });
+    return () => backHandler.remove();
+  }, [onRequestClose, mergedVisible]);
+  const modalStyles = [styles.container, (0, _utils.getBorderRadius)(position, radius ?? theme.roundness.lg), {
+    zIndex: state.zIndex
+  }, state.visible ? [styles.modal_active, (0, _utils.getTransformStyle)(position, fadeAnim), _utils.modalPositionMap[position]] : styles.modal_hide];
+  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [overlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalOverlay.ModalOverlay, {
+      visible: state.overlayVisible,
+      zIndex: state.zIndex,
+      duration: duration,
+      backgroundColor: overlayBackgroundColor,
+      onPress: _onPressOverlay
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: modalStyles,
+      pointerEvents: position !== 'center' ? undefined : 'box-none',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSafeAreaContext.SafeAreaView, {
+        edges: edges,
+        style: [contentHeightNum ? {
+          height: contentHeightNum
+        } : undefined, edges.length > 0 ? styles.safeArea : undefined, safeAreaStyle],
+        children: children
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlayStyles = exports.useModalStyles = exports.useModalConfirmStyles = exports.useModalActionSheetStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useModalStyles = exports.useModalStyles = (0, _index.createThemedStyles)(theme => {
+  return {
+    container: {
+      overflow: 'hidden'
+    },
+    modal_active: {
+      position: 'absolute',
+      height: 'auto'
+    },
+    modal_hide: {
+      position: 'relative',
+      height: 0
+    },
+    safeArea: {
+      backgroundColor: theme.palette.white
+    }
+  };
+});
+const useOverlayStyles = exports.useOverlayStyles = (0, _index.createThemedStyles)(() => {
+  return {
+    overlay: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  };
+});
+const useModalConfirmStyles = exports.useModalConfirmStyles = (0, _index.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
+    }
+  };
+});
+const useModalActionSheetStyles = exports.useModalActionSheetStyles = (0, _index.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/commonjs/components/base/modal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalPositionMap = exports.getTransformStyle = exports.getPosition = exports.getNextZIndex = exports.getBorderRadius = void 0;
+var _lodashEs = require("lodash-es");
+var _reactNative = require("react-native");
+let zIndex = 2000;
+
+/**
+ * 获取下一个 z-index
+ */
+const getNextZIndex = () => ++zIndex;
+exports.getNextZIndex = getNextZIndex;
+const absolute = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+const modalPositionMap = exports.modalPositionMap = {
+  center: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  top: (0, _lodashEs.omit)(absolute, ['bottom']),
+  bottom: (0, _lodashEs.omit)(absolute, ['top']),
+  right: (0, _lodashEs.omit)(absolute, ['left']),
+  left: (0, _lodashEs.omit)(absolute, ['right'])
+};
+const isTopOrBottom = position => position === 'top' || position === 'bottom';
+const getPosition = (visible, position) => {
+  if (position === 'center') {
+    return visible ? 1 : 0;
+  }
+  if (visible) {
+    return 0;
+  }
+  const screen = _reactNative.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;
+  }
+};
+exports.getPosition = getPosition;
+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
+    }]
+  };
+};
+exports.getTransformStyle = getTransformStyle;
+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
+  };
+};
+exports.getBorderRadius = getBorderRadius;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _navBar = require("./nav-bar.js");
+Object.keys(_navBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _navBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _navBar[key];
+    }
+  });
+});

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavBar = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = 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 NavBar = ({
+  leftExtra,
+  rightExtra,
+  title,
+  titleStyle,
+  showBackArrow = true,
+  onBackPress
+}) => {
+  const styles = (0, _index2.useStyles)();
+  const handleBackPress = () => {
+    onBackPress?.();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container],
+    children: [showBackArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.navLeft],
+      children: leftExtra ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        hitSlop: 20,
+        onPress: handleBackPress,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.ArrowLeftOutlined, {
+          size: 20
+        })
+      })
+    }), rightExtra && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.navRight],
+      children: rightExtra
+    }), /*#__PURE__*/(0, _react.isValidElement)(title) ? title : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      size: 16,
+      font: "semiBold",
+      style: [styles.navTitle, titleStyle],
+      numberOfLines: 1,
+      children: title
+    })]
+  });
+};
+exports.NavBar = NavBar;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useStyles = exports.useStyles = (0, _index.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/commonjs/components/base/picker/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _picker = require("./picker.js");
+Object.keys(_picker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _picker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _picker[key];
+    }
+  });
+});
+var _pickerTrigger = require("./picker-trigger.js");
+Object.keys(_pickerTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pickerTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pickerTrigger[key];
+    }
+  });
+});

package/dist/commonjs/components/base/picker/picker-trigger.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerTrigger = void 0;
+var _react = _interopRequireWildcard(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 _index4 = 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); }
+/** Picker 基础触发器 Props */
+
+const PickerTrigger = ({
+  displayText,
+  placeholder = '请选择',
+  disabled = false,
+  style,
+  children,
+  onPress
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _index4.usePickerFieldStyles)();
+
+  /** 渲染触发器 */
+  const renderTrigger = () => {
+    if (children && /*#__PURE__*/(0, _react.isValidElement)(children)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(children, {
+        onPress: onPress,
+        disabled
+      });
+    }
+
+    // 使用默认触发器
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.container,
+      activeOpacity: disabled ? 1 : 0.7,
+      onPress: onPress,
+      disabled: disabled,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Flex, {
+        align: "center",
+        gap: theme.spacing.sm,
+        style: [styles.content, disabled && styles.disabled, style],
+        children: /*#__PURE__*/_react.default.isValidElement(displayText) ? displayText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+          size: 14,
+          color: displayText ? theme.palette.fontGray1 : theme.palette.fontGray3,
+          children: displayText || placeholder
+        })
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: renderTrigger()
+  });
+};
+exports.PickerTrigger = PickerTrigger;