@seakoi/native-ui 1.0.0

package/dist/module/components/base/input/input-search.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { SearchOutlined } from '@seakoi/svg-icons';
+import React, { isValidElement, useRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useMergeRefs } from "../../../shared/hooks/index.js";
+import { Input } from "./input.js";
+import { useSearchStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InputSearch = ({
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useSearchStyles();
+  const inputRef = useRef(null);
+  const mergeRefs = useMergeRefs([props.ref, inputRef]);
+  return /*#__PURE__*/_jsxs(Flex, {
+    align: "center",
+    gap: theme.spacing.lg,
+    children: [/*#__PURE__*/_jsx(Input, {
+      allowClear: true,
+      variant: "filled",
+      inputMode: "search",
+      placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",
+      ...props,
+      ref: mergeRefs,
+      prefix: /*#__PURE__*/_jsx(SearchOutlined, {
+        color: theme.palette.fontGray3
+      }),
+      inputStyle: [styles.input, props.inputStyle],
+      style: [styles.inputContainer, props.style]
+    }), !!props.cancelText && /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: 0.8,
+      onPress: () => {
+        props.onCancel?.();
+        inputRef.current?.clear();
+      },
+      children: /*#__PURE__*/isValidElement(props.cancelText) ? props.cancelText : /*#__PURE__*/_jsx(Text, {
+        size: 16,
+        color: theme.palette.brand7,
+        children: props.cancelText
+      })
+    })]
+  });
+};

package/dist/module/components/base/input/input-textarea.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import { useBoolean, useControllableValue } from 'ahooks';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Keyboard } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { BaseInput } from "./base-input.js";
+import { useTextAreaStyles, useVariantStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InputTextArea = ({
+  variant = 'outlined',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useTextAreaStyles();
+  const {
+    variant: variantStyle
+  } = useVariantStyles({
+    variant
+  });
+  const showCountFormatter = useRef(null);
+  const [textScrollEnabled, textScrollEnabledActions] = useBoolean(true);
+  const [inputValue, setInputValue] = useControllableValue(props, {
+    trigger: 'onChangeText',
+    defaultValue: props.defaultValue ?? ''
+  });
+  if (typeof props.showCount === 'object') {
+    showCountFormatter.current = props.showCount.formatter;
+  }
+  const textCount = useMemo(() => {
+    if (showCountFormatter.current) {
+      return showCountFormatter.current({
+        inputValue,
+        count: inputValue.length,
+        maxLength: props.maxLength
+      });
+    }
+    if (!props.maxLength || typeof props.maxLength !== 'number') {
+      /** 忽略非数字 */
+      return inputValue.length;
+    }
+    return [inputValue.length, props.maxLength].join(' / ');
+  }, [inputValue, props.maxLength]);
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidHide', textScrollEnabledActions.setTrue);
+    const hideSubscription = Keyboard.addListener('keyboardWillShow', textScrollEnabledActions.setFalse);
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    align: "flex-end",
+    gap: theme.spacing.sm,
+    style: [variantStyle, props.style],
+    children: [/*#__PURE__*/_jsx(BaseInput, {
+      ...props,
+      multiline: true,
+      inputMode: "text",
+      value: inputValue,
+      textAlignVertical: "top",
+      onChangeText: setInputValue,
+      scrollEnabled: textScrollEnabled,
+      style: [styles.inputContainer, props.inputContainer]
+    }), !!props.showCount && /*#__PURE__*/_jsx(Text, {
+      size: 12,
+      color: theme.palette.fontGray3,
+      children: textCount
+    })]
+  });
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+import React from 'react';
+import { BaseInput } from "./base-input.js";
+import { useVariantStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Input = ({
+  variant = 'borderless',
+  ...props
+}) => {
+  const styles = useVariantStyles({
+    variant
+  });
+  return /*#__PURE__*/_jsx(BaseInput, {
+    ...props,
+    inputStyle: props.inputStyle,
+    style: [styles.variant, props.style]
+  });
+};

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

@@ -0,0 +1,53 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useBaseInputStyles = createThemedStyles(theme => {
+  return {
+    input: StyleSheet.flatten([{
+      flex: 1,
+      outlineWidth: 0,
+      outlineColor: 'transparent',
+      color: theme.palette.fontGray1
+    }, theme.fonts.regular.size16])
+  };
+});
+export const useVariantStyles = createThemedStyles(
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+(theme, props) => ({
+  variant: StyleSheet.flatten([{
+    width: '100%',
+    paddingBlock: 4,
+    paddingInline: 8,
+    borderRadius: theme.roundness.lg
+  }, props.variant === 'filled' && {
+    backgroundColor: theme.palette.gray1
+  }, props.variant === 'borderless' && {
+    borderRadius: theme.roundness.none
+  }, props.variant === 'outlined' && {
+    borderWidth: 1,
+    borderColor: theme.palette.brand7
+  }])
+}));
+export const useTextAreaStyles = createThemedStyles(() => ({
+  inputContainer: {
+    flex: 1,
+    width: '100%'
+  }
+}));
+export const useSearchStyles = createThemedStyles(theme => ({
+  inputContainer: {
+    paddingBlock: 8,
+    paddingInline: 12,
+    gap: theme.spacing.sm
+  },
+  input: {
+    marginLeft: -8
+  }
+}));
+export const useCaptchaStyles = createThemedStyles(theme => ({
+  container: {
+    paddingBlock: 12,
+    gap: theme.spacing.sm
+  }
+}));

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+
+import React, { useContext } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Text } from "./../index.js";
+import { ConfigContext, useTheme } from "../../../native-provider/index.js";
+import { useLinkStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Link = props => {
+  const theme = useTheme();
+  const styles = useLinkStyles();
+  const context = useContext(ConfigContext);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    activeOpacity: 0.8,
+    hitSlop: props.hitSlop,
+    disabled: props.disabled,
+    onPress: event => {
+      props.onPress?.(event);
+      if (props.to && context?.navigators) {
+        if (typeof props.to !== 'object') {
+          return context.navigators.navigate(props.to);
+        }
+        const navigate = context.navigators[props.to.action ?? 'navigate'];
+        if (navigate) {
+          navigate(props.to.routerName, props.to.params);
+        }
+      }
+    },
+    onLongPress: props.onLongPress,
+    style: [styles.container, props.disabled && styles.disabledContainer, props.containerStyle],
+    children: [props.prefixIcon, /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      size: props.size,
+      color: props.color ?? theme.palette.fontGray1,
+      style: [props.underline && styles.underline, props.textStyle],
+      children: props.children
+    }), props.suffixIcon]
+  });
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useLinkStyles = createThemedStyles(theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing.xxs
+  },
+  disabledContainer: {
+    opacity: 0.5
+  },
+  underline: {
+    textDecorationLine: 'underline'
+  }
+}));

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import LottieView from 'lottie-react-native';
+import React, { useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { SIZE_MAP, useLoadingStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Loading 加载组件
+ * 用于显示加载状态的动画和文字提示
+ */
+export const Loading = ({
+  size = 'medium',
+  style
+}) => {
+  /** 计算实际尺寸 */
+  const actualSize = useMemo(() => {
+    if (typeof size === 'number') return size;
+    return SIZE_MAP[size];
+  }, [size]);
+  const styles = useLoadingStyles({
+    size: actualSize
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    children: /*#__PURE__*/_jsx(LottieView, {
+      loop: true,
+      autoPlay: true,
+      style: styles.lottie,
+      source: Platform.select({
+        native: require("../../../assets/lottie/loading-spinner.json"),
+        default: {
+          uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/lotties/loading-spinner.json'
+        }
+      })
+    })
+  });
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/** 尺寸映射配置 */
+export const SIZE_MAP = {
+  small: 24,
+  medium: 40,
+  large: 56
+};
+export const useLoadingStyles = createThemedStyles((_, options) => ({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...Platform.select({
+      web: {
+        height: options.size
+      }
+    })
+  },
+  lottie: {
+    width: options.size,
+    height: options.size
+  }
+}));

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+import { Modal as _Modal } from "./modal.js";
+import { modalActionSheet, modalConfirm, modalCustom, modalHide } from "./modal-instance.js";
+export * from "./modal-action-sheet.js";
+export * from "./modal-confirm.js";
+export * from "./modal-custom.js";
+export * from "./modal-header.js";
+export const Modal = Object.assign(_Modal, {
+  confirm: modalConfirm,
+  actionSheet: modalActionSheet,
+  custom: modalCustom,
+  hide: modalHide
+});

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

@@ -0,0 +1,98 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import React, { isValidElement, useEffect, useState } from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { Modal } from "./modal.js";
+import { useModalActionSheetStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ModalActionSheet = ({
+  options,
+  onOpen,
+  onClose,
+  pressOverlayClose = true,
+  onPressOverlay,
+  onSelect,
+  showCancel = true,
+  cancelTextStyle,
+  onCancel,
+  ...restProps
+}) => {
+  const [visible, setVisible] = useState(false);
+  const styles = useModalActionSheetStyles();
+  const theme = useTheme();
+  const _onPressOverlay = useMemoizedFn(() => {
+    if (pressOverlayClose) {
+      setVisible(false);
+    }
+    onPressOverlay?.();
+  });
+  const renderActionContent = useMemoizedFn(option => {
+    if (typeof option === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: styles.actionText,
+        size: 16,
+        children: option
+      });
+    } else if (/*#__PURE__*/isValidElement(option.content)) {
+      return option.content;
+    } else {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionText],
+        size: 16,
+        color: option.type === 'warning' ? theme.palette.error7 : theme.palette.fontGray1,
+        children: option.content
+      });
+    }
+  });
+  const handleClick = useMemoizedFn(async (option, index) => {
+    await onSelect?.(option, index);
+    setVisible(false);
+  });
+  const _onPressCancel = useMemoizedFn(async () => {
+    await onCancel?.();
+    setVisible(false);
+  });
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setVisible(true);
+  }, []);
+  return /*#__PURE__*/_jsx(Modal, {
+    ...restProps,
+    visible: visible,
+    position: "bottom",
+    onPressOverlay: _onPressOverlay,
+    safeAreaInsetBottom: true,
+    safeAreaStyle: {
+      backgroundColor: 'transparent'
+    },
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      style: [{
+        maxHeight: 450
+      }],
+      contentContainerStyle: styles.scrollViewContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.actionView,
+        children: options?.map((option, index) => {
+          return /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.actionItem,
+            onPress: () => handleClick(option, index),
+            children: renderActionContent(option)
+          }, index);
+        })
+      }), showCancel && /*#__PURE__*/_jsx(View, {
+        style: styles.cancelActionView,
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.actionItem,
+          onPress: _onPressCancel,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.cancelTextStyle, cancelTextStyle],
+            children: "\u53D6\u6D88"
+          })
+        })
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,143 @@
+"use strict";
+
+import { useLatest, useMemoizedFn } from 'ahooks';
+import { noop } from 'lodash-es';
+import React, { isValidElement, useEffect, useRef, useState } from 'react';
+import { Animated, Easing, TouchableOpacity, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { Modal } from "./modal.js";
+import { useModalConfirmStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export 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] = useState(false);
+  const styles = useModalConfirmStyles({
+    title,
+    contentColor
+  });
+  const theme = useTheme();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const fadeInstance = useRef(null);
+  const onOpenRefFn = useLatest(onOpen || noop);
+  const onCloseRefFn = useLatest(onClose || noop);
+  const onCancelRefFn = useLatest(onCancel || noop);
+  const onConfirmRefFn = useLatest(onConfirm || noop);
+  useEffect(() => {
+    setVisible(true);
+  }, []);
+  const showDialog = useMemoizedFn(show => {
+    if (fadeInstance.current) {
+      fadeInstance.current.stop();
+      fadeInstance.current = null;
+    }
+    fadeInstance.current = Animated.timing(fadeAnim,
+    // 动画中的变量值
+    {
+      toValue: show ? 1 : 0,
+      duration: duration,
+      useNativeDriver: true,
+      easing: show ? Easing.bezier(0.075, 0.82, 0.165, 1.0) : Easing.bezier(0.55, 0.055, 0.675, 0.19)
+    });
+    fadeInstance.current.start();
+  });
+  const onOpenMemoizedFn = useMemoizedFn(() => {
+    showDialog(true);
+    onOpenRefFn.current?.();
+  });
+  const onCloseMemoizedFn = useMemoizedFn(() => {
+    showDialog(false);
+    onCloseRefFn.current?.();
+  });
+  const _onPressOverlay = useMemoizedFn(() => {
+    if (pressOverlayClose) {
+      setVisible(false);
+    }
+    onPressOverlay?.();
+  });
+  const _onCancel = useMemoizedFn(async () => {
+    await onCancelRefFn.current?.();
+    setVisible(false);
+  });
+  const _onConfirm = useMemoizedFn(async () => {
+    await onConfirmRefFn.current?.();
+    setVisible(false);
+  });
+  return /*#__PURE__*/_jsx(Modal, {
+    ...restProps,
+    visible: visible,
+    duration: duration,
+    onOpen: onOpenMemoizedFn,
+    onClose: onCloseMemoizedFn,
+    onPressOverlay: _onPressOverlay,
+    children: /*#__PURE__*/_jsxs(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__*/_jsx(View, {
+        style: styles.titleView,
+        children: /*#__PURE__*/isValidElement(title) ? title : /*#__PURE__*/_jsx(Text, {
+          style: styles.titleText,
+          font: "semiBold",
+          color: titleColor,
+          size: 16,
+          children: title
+        })
+      }), content && /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/isValidElement(content) ? content : /*#__PURE__*/_jsx(Text, {
+          style: styles.contentText,
+          children: content
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.handleButtonView,
+        children: [showCancelButton && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.btnView,
+          onPress: _onCancel,
+          children: /*#__PURE__*/isValidElement(cancelText) ? cancelText : /*#__PURE__*/_jsx(Text, {
+            style: {
+              textAlign: 'center'
+            },
+            size: 16,
+            font: "semiBold",
+            children: cancelText
+          })
+        }), showConfirmButton && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.btnView,
+          onPress: _onConfirm,
+          children: /*#__PURE__*/isValidElement(confirmText) ? confirmText : /*#__PURE__*/_jsx(Text, {
+            style: {
+              textAlign: 'center'
+            },
+            size: 16,
+            font: "semiBold",
+            color: theme.palette.brand6,
+            children: confirmText
+          })
+        })]
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+
+import { useLatest, useMemoizedFn } from 'ahooks';
+import React, { useEffect, useState } from 'react';
+import { Modal } from "./modal.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCustom = ({
+  content,
+  onRegisterClose,
+  onClosed,
+  pressOverlayClose = true,
+  onPressOverlay,
+  ...restProps
+}) => {
+  const [visible, setVisible] = useState(false);
+  const onRegisterCloseRef = useLatest(onRegisterClose);
+
+  // 关闭弹窗（带动画）
+  const close = useMemoizedFn(() => {
+    setVisible(false);
+  });
+
+  // 注册 close 函数到外部
+  useEffect(() => {
+    onRegisterCloseRef.current?.(close);
+  }, [close, onRegisterCloseRef]);
+
+  // 处理遮罩点击
+  const handlePressOverlay = useMemoizedFn(() => {
+    if (pressOverlayClose) {
+      close();
+    }
+    onPressOverlay?.();
+  });
+
+  // 挂载时显示
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setVisible(true);
+  }, []);
+  return /*#__PURE__*/_jsx(Modal, {
+    ...restProps,
+    visible: visible,
+    onPressOverlay: handlePressOverlay,
+    children: content
+  });
+};