@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,227 @@
+import type { PropsWithChildren, RefAttributes } from 'react';
+import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+type ModalPropsCommonCallback = () => void;
+
+export interface State {
+  visible: boolean;
+  overlayVisible: boolean;
+  zIndex: number;
+  lazyRender: boolean;
+}
+
+export type ModalPosition = 'top' | 'bottom' | 'right' | 'left' | 'center';
+
+export interface OverlayProps {
+  /**
+   * 是否展示遮罩层
+   * @default false
+   */
+  visible: boolean;
+
+  /**
+   * z-index 层级
+   * @default 1
+   */
+  zIndex?: number;
+
+  /**
+   * 动画时长，单位毫秒，默认值 300
+   * @default animation_duration_base
+   */
+  duration?: number;
+
+  /**
+   * 点击弹层
+   */
+  onPress?: () => void;
+
+  /**
+   * 自定义遮罩层颜色
+   */
+  backgroundColor?: ColorValue;
+}
+
+/** 弹窗的类型 */
+export interface ModalProps extends PropsWithChildren, RefAttributes<ModalRef> {
+  /**
+   * 是否显示
+   * @default false
+   */
+  visible: boolean;
+
+  /**
+   * 动画时长，单位毫秒
+   * @default animation_duration_base
+   */
+  duration?: number;
+
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  overlay?: boolean;
+
+  /**
+   * 点击背景是否关闭弹窗 ， 仅支持通过ref来控制modal的显示
+   */
+  pressOverlayClose?: boolean;
+
+  /**
+   * 弹出层位置
+   * @default center
+   */
+  position?: ModalPosition;
+
+  /**
+   * 自定义遮罩层颜色
+   * @default overlay_background_color
+   */
+  overlayBackgroundColor?: ColorValue;
+
+  /**
+   * 是否在显示弹层时才渲染节点
+   * @default true
+   */
+  lazyRender?: boolean;
+
+  /**
+   * 关闭时销毁 Modal，回退到 lazyRender 的状态
+   * @default false
+   */
+  destroyOnClosed?: boolean;
+
+  /**
+   * 是否开启底部安全区适配
+   */
+  safeAreaInsetBottom?: boolean;
+
+  /**
+   * 是否开启顶部安全区适配
+   */
+  safeAreaInsetTop?: boolean;
+
+  /**
+   * 安全区域自定义样式
+   * 默认带有白色背景，可通过此属性覆盖
+   */
+  safeAreaStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * 弹窗内容高度 50%, 86%, 自定义
+   */
+  contentHeight?: number | '50%' | '86%';
+
+  /**
+   * 圆角
+   * @default theme.roundness.lg
+   */
+  radius?: number;
+
+  /**
+   * 点击遮罩层时触发
+   */
+  onPressOverlay?: ModalPropsCommonCallback;
+
+  /**
+   * 打开弹出层时触发
+   */
+  onOpen?: ModalPropsCommonCallback;
+
+  /**
+   * 打开弹出层且动画结束后触发
+   */
+  onOpened?: ModalPropsCommonCallback;
+
+  /**
+   * 关闭弹出层时触发
+   */
+  onClose?: ModalPropsCommonCallback;
+
+  /**
+   * 关闭弹出层且动画结束后触发
+   */
+  onClosed?: ModalPropsCommonCallback;
+
+  /**
+   * 当点击返回按钮时触发
+   * @support Android
+   */
+  onRequestClose?: () => boolean;
+}
+
+/** 弹窗的ref */
+export interface ModalRef {
+  show: () => void;
+  hide: () => void;
+}
+
+/** 确认弹窗的类型 */
+export interface ModalConfirmProps extends Omit<ModalProps, 'visible'> {
+  /** 标题 */
+  title?: string;
+  /** 标题颜色 */
+  titleColor?: string;
+
+  /** 弹窗内容 */
+  content?: React.ReactNode;
+
+  /** 弹窗内容文本颜色 */
+  contentColor?: string;
+
+  /** 是否展示取消按钮 */
+  showCancelButton?: boolean;
+
+  /** 是否展示确认按钮 */
+  showConfirmButton?: boolean;
+
+  /** 确认按钮文本 */
+  confirmText?: React.ReactNode;
+
+  /** 确认按钮文本颜色 */
+  confirmTextColor?: string;
+
+  /** 确认按钮点击事件 若返回 promise 时 resolve 为弹窗正常关闭, reject 为弹窗正常关闭 */
+  onConfirm?: () => unknown;
+
+  /** 取消按钮文本 */
+  cancelText?: React.ReactNode;
+
+  /** 取消按钮文本颜色 */
+  cancelTextColor?: string;
+
+  /** 取消按钮点击事件 若返回 promise 时 resolve 为弹窗正常关闭, reject 为弹窗正常关闭， */
+  onCancel?: () => unknown;
+}
+
+/** 选择动作类型弹窗 */
+export interface ModalActionSheetProps extends Omit<ModalProps, 'visible'> {
+  /** 面板选项列表 */
+  options: ActionSheetPropsOptionType[];
+
+  /** 点击选项时触发 ， 若返回 promise 时 resolve 为弹窗正常关闭, reject 为弹窗正常关闭 */
+  onSelect?: (item: ActionSheetPropsOptionType, index: number) => unknown;
+  /** 显示取消按钮 */
+  showCancel?: boolean;
+  /*** 取消按钮的回调， 若返回 promise 时 resolve 为弹窗正常关闭, reject 为弹窗正常关闭 */
+  onCancel?: () => unknown;
+  /*** 取消按钮颜色 */
+  cancelTextStyle?: StyleProp<TextStyle>;
+}
+
+export type ActionSheetPropsOptionType =
+  | string
+  | {
+      content: React.ReactNode;
+      type?: 'warning';
+    };
+
+/** 自定义弹窗的类型 */
+export interface ModalCustomProps extends Omit<ModalProps, 'visible' | 'children'> {
+  /** 弹窗内容 */
+  content: React.ReactNode;
+  /** 注册 close 函数到外部 */
+  onRegisterClose: (close: () => void) => void;
+  /** Portal 移除回调 */
+  onPortalRemove: () => void;
+}

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

@@ -0,0 +1,104 @@
+import { omit } from 'lodash-es';
+import {
+  type Animated,
+  Dimensions,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import type { ModalPosition } from './types';
+
+let zIndex = 2000;
+
+/**
+ * 获取下一个 z-index
+ */
+export const getNextZIndex = () => ++zIndex;
+
+const absolute = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+export const modalPositionMap: Record<ModalPosition, ViewStyle> = {
+  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: ModalPosition) =>
+  position === 'top' || position === 'bottom';
+
+export const getPosition = (visible: boolean, position: ModalPosition) => {
+  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: ModalPosition,
+  value: Animated.Value,
+): StyleProp<ViewStyle> => {
+  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: ModalPosition,
+  radius: number,
+): ViewStyle => {
+  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/src/components/base/nav-bar/index.ts

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

package/src/components/base/nav-bar/nav-bar.tsx

@@ -0,0 +1,68 @@
+import { ArrowLeftOutlined } from '@seakoi/svg-icons';
+import React, { isValidElement } from 'react';
+import { type TextStyle, TouchableOpacity, View } from 'react-native';
+
+import { Text } from '#components/base';
+
+import { useStyles } from './style';
+
+export interface NavHeaderProps {
+  /** 标题 */
+  title?: string | React.ReactNode;
+  /** 标题样式 */
+  titleStyle?: TextStyle;
+  /** 右侧额外内容 */
+  rightExtra?: React.ReactNode;
+  /** 左侧额外内容 */
+  leftExtra?: React.ReactNode;
+  /** 是否显示返回箭头 */
+  showBackArrow?: boolean;
+  /** 自定义返回事件 */
+  onBackPress?: () => void;
+}
+
+export const NavBar: React.FC<NavHeaderProps> = ({
+  leftExtra,
+  rightExtra,
+  title,
+  titleStyle,
+  showBackArrow = true,
+  onBackPress,
+}) => {
+  const styles = useStyles();
+
+  const handleBackPress = () => {
+    onBackPress?.();
+  };
+
+  return (
+    <View style={[styles.container]}>
+      {/* 左侧图标 */}
+      {showBackArrow && (
+        <View style={[styles.navLeft]}>
+          {leftExtra ?? (
+            <TouchableOpacity hitSlop={20} onPress={handleBackPress}>
+              <ArrowLeftOutlined size={20} />
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {/* 右侧图标 */}
+      {rightExtra && <View style={[styles.navRight]}>{rightExtra}</View>}
+
+      {isValidElement(title) ? (
+        title
+      ) : (
+        <Text
+          size={16}
+          font="semiBold"
+          style={[styles.navTitle, titleStyle]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/components/base/nav-bar/style/index.tsx

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

@@ -0,0 +1,2 @@
+export * from './picker';
+export * from './picker-trigger';

package/src/components/base/picker/picker-trigger.tsx

@@ -0,0 +1,88 @@
+import React, { cloneElement, isValidElement } from 'react';
+import { type StyleProp, TouchableOpacity, type ViewStyle } from 'react-native';
+
+import { useTheme } from '#native-provider';
+import type { AnyObject } from '#shared/utils/types';
+
+import { Flex } from '../flex';
+import { Text } from '../text';
+import { usePickerFieldStyles } from './style';
+
+/** Picker 基础触发器 Props */
+export interface PickerTriggerProps {
+  /** 显示的文本 */
+  displayText?: React.ReactNode;
+  /** 占位文案 */
+  placeholder?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 容器样式（仅默认触发器生效） */
+  style?: StyleProp<ViewStyle>;
+  /** 自定义触发器 */
+  children?: React.ReactElement;
+  /** 点击触发器时的回调 */
+  onPress?: () => void;
+}
+
+export interface PickerTriggerControlledProps<T>
+  extends Omit<PickerTriggerProps, 'displayText' | 'onPress'> {
+  /** 当前选中值（受控） */
+  value?: T;
+  /** 值变化时的回调 */
+  onChange?: (value: T) => void;
+  /** 默认值（非受控） */
+  defaultValue?: T;
+}
+
+export const PickerTrigger: React.FC<PickerTriggerProps> = ({
+  displayText,
+  placeholder = '请选择',
+  disabled = false,
+  style,
+  children,
+  onPress,
+}) => {
+  const theme = useTheme();
+  const styles = usePickerFieldStyles();
+
+  /** 渲染触发器 */
+  const renderTrigger = () => {
+    if (children && isValidElement(children)) {
+      return cloneElement(children, {
+        onPress: onPress,
+        disabled,
+      } as AnyObject);
+    }
+
+    // 使用默认触发器
+    return (
+      <TouchableOpacity
+        style={styles.container}
+        activeOpacity={disabled ? 1 : 0.7}
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <Flex
+          align="center"
+          gap={theme.spacing.sm}
+          style={[styles.content, disabled && styles.disabled, style]}
+        >
+          {React.isValidElement(displayText) ? (
+            displayText
+          ) : (
+            <Text
+              size={14}
+              color={
+                displayText ? theme.palette.fontGray1 : theme.palette.fontGray3
+              }
+            >
+              {displayText || placeholder}
+            </Text>
+          )}
+        </Flex>
+      </TouchableOpacity>
+    );
+  };
+
+  return <>{renderTrigger()}</>;
+};

package/src/components/base/picker/picker.tsx

@@ -0,0 +1,129 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { useMemo, useRef, useState } from 'react';
+
+import { Button } from '../button';
+import { Flex } from '../flex';
+import { Modal, ModalHeader, type ModalHeaderBaseProps } from '../modal';
+import {
+  type PickerOption,
+  type PickerValue,
+  PickerView,
+  type PickerViewProps,
+} from '../picker-view';
+import { findOptionsByValue, getDefaultValues } from '../picker-view/utils/picker';
+import { Portal } from '../portal';
+import { PickerTrigger, type PickerTriggerControlledProps } from './picker-trigger';
+
+export interface PickerProps
+  extends PickerTriggerControlledProps<PickerValue[]>,
+    Omit<PickerViewProps, 'onChange' | 'value' | 'defaultValue'>,
+    Pick<ModalHeaderBaseProps, 'title'> {
+  /**
+   * 自定义格式化函数
+   */
+  formatter?: (value: PickerValue[], options: PickerOption[]) => React.ReactNode;
+  /** 确定按钮文案 */
+  confirmText?: string;
+}
+
+export const Picker: React.FC<PickerProps> = ({
+  placeholder = '请选择',
+  disabled = false,
+  title = '请选择',
+  formatter,
+  children,
+  style,
+  confirmText = '确定',
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue<PickerValue[] | undefined>(
+    restProps,
+    {
+      defaultValue: restProps.defaultValue,
+    },
+  );
+
+  const [visible, setVisible] = useState(false);
+
+  // 内部状态用于管理滚动时的临时值
+  const [localValue, setLocalValue] = useState<PickerValue[]>(
+    restProps.value ?? restProps.defaultValue ?? [],
+  );
+
+  // 用 ref 同步保存最新值，解决 useMemoizedFn 闭包问题
+  const localValueRef = useRef(localValue);
+  localValueRef.current = localValue;
+
+  // 滑动时的临时 options（不用于 displayText）
+  const localOptionsRef = useRef<PickerOption[]>([]);
+
+  /** 格式化显示文案 - 根据 value 从 columns 计算 */
+  const displayText = useMemo(() => {
+    if (!value?.length) return '';
+
+    // 从 columns 计算对应的 options
+    const options = findOptionsByValue(value, restProps.columns);
+
+    if (formatter) {
+      return formatter(value, options);
+    }
+    return options
+      .map(opt => opt?.label)
+      .filter(Boolean)
+      .join(' / ');
+  }, [value, restProps.columns, formatter]);
+
+  const handleOpen = useMemoizedFn(() => {
+    // 打开时同步外部 value 到内部
+    // 如果 value 为空，使用 columns 的默认值（第一个选项）
+    const initialValue = value?.length
+      ? value
+      : getDefaultValues(restProps.columns);
+    setLocalValue(initialValue);
+    setVisible(true);
+  });
+
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
+
+  const handleChange = useMemoizedFn(
+    (v: PickerValue[], options: PickerOption[]) => {
+      setLocalValue(v);
+      localOptionsRef.current = options;
+    },
+  );
+
+  const handleConfirm = useMemoizedFn(() => {
+    setVisible(false);
+    setValue(localValueRef.current);
+  });
+
+  return (
+    <>
+      <PickerTrigger
+        displayText={displayText}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={style}
+        onPress={handleOpen}
+      >
+        {children}
+      </PickerTrigger>
+      <Portal>
+        <Modal
+          visible={visible}
+          position="bottom"
+          safeAreaInsetBottom
+          contentHeight={'50%'}
+        >
+          <Flex vertical align="stretch" gap={16} style={{ flex: 1, padding: 16 }}>
+            <ModalHeader title={title} onClose={handleClose} />
+            <PickerView {...restProps} value={localValue} onChange={handleChange} />
+            <Button text={confirmText} size="large" onPress={handleConfirm} />
+          </Flex>
+        </Modal>
+      </Portal>
+    </>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { createThemedStyles } from '#native-provider';
+
+export const usePickerFieldStyles = createThemedStyles(theme => ({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+  content: {
+    backgroundColor: theme.palette.white,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  disabled: {
+    backgroundColor: theme.palette.blueGray2,
+  },
+}));

package/src/components/base/picker-view/index.ts

@@ -0,0 +1,3 @@
+export * from './picker-view';
+export type * from './types';
+export { getDataType } from './utils/picker';