@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+import { createThemedStyles } from '#native-provider';
+
+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: import('../input').InputProps) => ({
+    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/src/components/base/link/index.ts

@@ -0,0 +1 @@
+export * from './link';

package/src/components/base/link/link.tsx

@@ -0,0 +1,95 @@
+import React, {
+  type PropsWithChildren,
+  type ReactElement,
+  useContext,
+} from 'react';
+import {
+  type GestureResponderEvent,
+  type Insets,
+  type StyleProp,
+  type TextStyle,
+  TouchableOpacity,
+  type ViewStyle,
+} from 'react-native';
+
+import { Text, type TextProps } from '#components/base';
+import { ConfigContext, type NavigateType, useTheme } from '#native-provider';
+import type { AnyObject } from '#shared/utils';
+
+import { useLinkStyles } from './style';
+
+type TargetHref =
+  | string
+  | {
+      params?: AnyObject;
+      routerName: string;
+      action?: NavigateType;
+    };
+export interface LinkProps extends Pick<TextProps, 'size'> {
+  /** 跳转链接 */
+  to?: TargetHref;
+  /** 链接文本颜色 */
+  color?: string;
+  /** 是否显示下划线 */
+  underline?: boolean;
+  /** 是否禁用点击 */
+  disabled?: boolean;
+  /** 文本前缀图标 */
+  prefixIcon?: ReactElement;
+  /** 文本后缀图标 */
+  suffixIcon?: ReactElement;
+  /** 点击事件触发范围 */
+  hitSlop?: null | Insets | number;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 点击事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** 长按事件 */
+  onLongPress?: (event: GestureResponderEvent) => void;
+}
+
+export const Link: React.FC<PropsWithChildren<LinkProps>> = props => {
+  const theme = useTheme();
+  const styles = useLinkStyles();
+  const context = useContext(ConfigContext);
+
+  return (
+    <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,
+      ]}
+    >
+      {props.prefixIcon}
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        size={props.size}
+        color={props.color ?? theme.palette.fontGray1}
+        style={[props.underline && styles.underline, props.textStyle]}
+      >
+        {props.children}
+      </Text>
+      {props.suffixIcon}
+    </TouchableOpacity>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { createThemedStyles } from '#native-provider';
+
+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/src/components/base/loading/index.ts

@@ -0,0 +1,2 @@
+export * from './loading';
+export type * from './types';

package/src/components/base/loading/loading.tsx

@@ -0,0 +1,36 @@
+import LottieView from 'lottie-react-native';
+import React, { useMemo } from 'react';
+import { Platform, View } from 'react-native';
+
+import { SIZE_MAP, useLoadingStyles } from './style';
+import type { LoadingProps } from './types';
+
+/**
+ * Loading 加载组件
+ * 用于显示加载状态的动画和文字提示
+ */
+export const Loading: React.FC<LoadingProps> = ({ size = 'medium', style }) => {
+  /** 计算实际尺寸 */
+  const actualSize = useMemo(() => {
+    if (typeof size === 'number') return size;
+    return SIZE_MAP[size];
+  }, [size]);
+
+  const styles = useLoadingStyles({ size: actualSize });
+
+  return (
+    <View style={[styles.container, style]}>
+      <LottieView
+        loop
+        autoPlay
+        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',
+          },
+        })}
+      />
+    </View>
+  );
+};

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

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

package/src/components/base/loading/types.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface LoadingProps {
+  /** 尺寸 */
+  size?: 'small' | 'medium' | 'large' | number;
+  /** 自定义样式 */
+  style?: StyleProp<ViewStyle>;
+}

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

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

package/src/components/base/modal/modal-action-sheet.tsx

@@ -0,0 +1,117 @@
+import { useMemoizedFn } from 'ahooks';
+import React, { isValidElement, useEffect, useState } from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { Modal } from './modal';
+import { useModalActionSheetStyles } from './style';
+import type { ActionSheetPropsOptionType, ModalActionSheetProps } from './types';
+
+export const ModalActionSheet: React.FC<ModalActionSheetProps> = ({
+  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: ActionSheetPropsOptionType): React.ReactNode => {
+      if (typeof option === 'string') {
+        return (
+          <Text style={styles.actionText} size={16}>
+            {option}
+          </Text>
+        );
+      } else if (isValidElement(option.content)) {
+        return option.content;
+      } else {
+        return (
+          <Text
+            style={[styles.actionText]}
+            size={16}
+            color={
+              option.type === 'warning'
+                ? theme.palette.error7
+                : theme.palette.fontGray1
+            }
+          >
+            {option.content}
+          </Text>
+        );
+      }
+    },
+  );
+
+  const handleClick = useMemoizedFn(
+    async (option: ActionSheetPropsOptionType, index: number) => {
+      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 (
+    <Modal
+      {...restProps}
+      visible={visible}
+      position="bottom"
+      onPressOverlay={_onPressOverlay}
+      safeAreaInsetBottom
+      safeAreaStyle={{ backgroundColor: 'transparent' }}
+    >
+      <ScrollView
+        style={[{ maxHeight: 450 }]}
+        contentContainerStyle={styles.scrollViewContainer}
+      >
+        <View style={styles.actionView}>
+          {options?.map((option, index) => {
+            return (
+              <TouchableOpacity
+                key={index}
+                style={styles.actionItem}
+                onPress={() => handleClick(option, index)}
+              >
+                {renderActionContent(option)}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+        {showCancel && (
+          <View style={styles.cancelActionView}>
+            <TouchableOpacity style={styles.actionItem} onPress={_onPressCancel}>
+              <Text style={[styles.cancelTextStyle, cancelTextStyle]}>取消</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </ScrollView>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,185 @@
+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 '#components/base';
+import { useTheme } from '#native-provider';
+
+import { Modal } from './modal';
+import { useModalConfirmStyles } from './style';
+import type { ModalConfirmProps } from './types';
+
+export const ModalConfirm: React.FC<ModalConfirmProps> = ({
+  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<Animated.CompositeAnimation | null>(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: boolean) => {
+    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 (
+    <Modal
+      {...restProps}
+      visible={visible}
+      duration={duration}
+      onOpen={onOpenMemoizedFn}
+      onClose={onCloseMemoizedFn}
+      onPressOverlay={_onPressOverlay}
+    >
+      <Animated.View
+        style={[
+          styles.container,
+          {
+            transform: [
+              {
+                scale: fadeAnim.interpolate({
+                  inputRange: [0, 0.01, 0.98, 1],
+                  outputRange: [0, 0.9, 1.02, 1],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        {title && (
+          <View style={styles.titleView}>
+            {isValidElement(title) ? (
+              title
+            ) : (
+              <Text
+                style={styles.titleText}
+                font="semiBold"
+                color={titleColor}
+                size={16}
+              >
+                {title}
+              </Text>
+            )}
+          </View>
+        )}
+
+        {content && (
+          <View>
+            {isValidElement(content) ? (
+              content
+            ) : (
+              <Text style={styles.contentText}>{content}</Text>
+            )}
+          </View>
+        )}
+
+        <View style={styles.handleButtonView}>
+          {showCancelButton && (
+            <TouchableOpacity style={styles.btnView} onPress={_onCancel}>
+              {isValidElement(cancelText) ? (
+                cancelText
+              ) : (
+                <Text style={{ textAlign: 'center' }} size={16} font="semiBold">
+                  {cancelText}
+                </Text>
+              )}
+            </TouchableOpacity>
+          )}
+
+          {showConfirmButton && (
+            <TouchableOpacity style={styles.btnView} onPress={_onConfirm}>
+              {isValidElement(confirmText) ? (
+                confirmText
+              ) : (
+                <Text
+                  style={{ textAlign: 'center' }}
+                  size={16}
+                  font="semiBold"
+                  color={theme.palette.brand6}
+                >
+                  {confirmText}
+                </Text>
+              )}
+            </TouchableOpacity>
+          )}
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,48 @@
+import { useLatest, useMemoizedFn } from 'ahooks';
+import React, { useEffect, useState } from 'react';
+
+import { Modal } from './modal';
+import type { ModalCustomProps } from './types';
+
+export const ModalCustom: React.FC<ModalCustomProps> = ({
+  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 (
+    <Modal {...restProps} visible={visible} onPressOverlay={handlePressOverlay}>
+      {content}
+    </Modal>
+  );
+};

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

@@ -0,0 +1,70 @@
+import { CloseOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import { type StyleProp, TouchableOpacity, type ViewStyle } from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { Flex } from '../flex';
+import { Text } from '../text';
+
+/**
+ * ModalHeader 基础属性
+ * @description 供使用 ModalHeader 的组件继承，避免重复定义 title 和 onClose
+ */
+export interface ModalHeaderBaseProps {
+  /** 标题 */
+  title?: React.ReactNode;
+  /** 点击关闭按钮的回调 */
+  onClose?: () => void;
+}
+
+export interface ModalHeaderProps extends ModalHeaderBaseProps {
+  /** 是否显示关闭按钮 */
+  showClose?: boolean;
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 右侧自定义内容（替换关闭按钮） */
+  extra?: React.ReactNode;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
+  title,
+  onClose,
+  showClose = true,
+  style,
+  extra,
+}) => {
+  const theme = useTheme();
+
+  const renderTitle = () => {
+    if (React.isValidElement(title)) {
+      return title;
+    }
+    return (
+      <Text size={16} color={theme.palette.fontGray1}>
+        {title}
+      </Text>
+    );
+  };
+
+  const renderRight = () => {
+    if (extra) {
+      return extra;
+    }
+    if (showClose && onClose) {
+      return (
+        <TouchableOpacity onPress={onClose} hitSlop={16}>
+          <CloseOutlined color={theme.palette.fontGray3} />
+        </TouchableOpacity>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Flex justify="space-between" align="center" style={style}>
+      {renderTitle()}
+      {renderRight()}
+    </Flex>
+  );
+};