@seakoi/native-ui 1.1.3 → 1.3.0

package/src/components/base/picker/picker-context.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type { Any } from '#shared/utils';
+
+export interface PickerContextState<Value = Any> {
+  /** 当前选中的值 */
+  value?: Value;
+  /** 选择器是否可见 */
+  visible?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 设置禁用状态 */
+  setDisabled?: React.Dispatch<React.SetStateAction<boolean>>;
+  /** 切换选择器可见状态 */
+  toggleVisible?: () => void;
+  /** 值变化回调 */
+  onChange?: (value: Value | undefined) => void;
+}
+export const PickerContext = React.createContext<PickerContextState | null>(null);

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

@@ -0,0 +1,56 @@
+import { useLatest } from 'ahooks';
+import { isNil } from 'lodash-es';
+import React, { useContext, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+import { type Any, safetyRenderChildren } from '#shared/utils';
+
+import { PickerContext } from './picker-context';
+import { usePickerFieldStyles } from './style';
+
+export interface PickerFieldProps<Value = Any> {
+  /** 未选中时显示的占位内容 */
+  placeholder?: React.ReactNode;
+  /** 自定义渲染选中值的显示内容 */
+  renderValue?: (value: Value) => React.ReactNode;
+}
+export function PickerField<Value>(props: PickerFieldProps<Value>) {
+  const theme = useTheme();
+  const styles = usePickerFieldStyles();
+  const context = useContext(PickerContext);
+
+  const renderValueRef = useLatest(props.renderValue);
+
+  const value = context?.value;
+  const hasControllableValue =
+    !isNil(value) && (!Array.isArray(value) || value.length > 0);
+
+  const displayValue = useMemo(() => {
+    return typeof renderValueRef.current !== 'function'
+      ? value
+      : renderValueRef.current?.(value);
+  }, [value, renderValueRef]);
+
+  const textColor = hasControllableValue
+    ? theme.palette.fontGray1
+    : theme.palette.fontGray3;
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, context?.disabled && styles.disabled]}
+      onPress={context?.toggleVisible}
+      disabled={!!context?.disabled}
+    >
+      {safetyRenderChildren(
+        hasControllableValue ? displayValue : props.placeholder,
+        displayText => (
+          <Text size={14} color={textColor}>
+            {displayText}
+          </Text>
+        ),
+      )}
+    </TouchableOpacity>
+  );
+}

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

@@ -1,129 +1,62 @@
-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;
+import { useControllableValue, useMemoizedFn, useToggle } from 'ahooks';
+import { type PropsWithChildren, useMemo, useState } from 'react';
+
+import type { Any } from '#shared/utils';
+
+import type { PickerContentProps } from './picker-content';
+import { PickerContext } from './picker-context';
+import type { PickerFieldProps } from './picker-field';
+
+/**
+ * Picker 组件的基础属性接口
+ * @template T 选择器值的类型
+ */
+export interface PickerProps<T = Any> {
+  /** 受控模式下的当前值 */
+  value?: T;
+  /** 非受控模式下的默认值 */
+  defaultValue?: T;
+  /** 触发 onChange 的事件名称,默认为 'onChange' */
+  trigger?: string;
+  /** 是否禁用选择器 */
+  disabled?: boolean;
+  /** 值变化时的回调函数 */
+  onChange?: (value: T) => void;
 }
 
-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 '';
+export interface PickerMergeProps<T>
+  extends PickerProps<T>,
+    PickerFieldProps<T>,
+    PickerContentProps {}
 
-    // 从 columns 计算对应的 options
-    const options = findOptionsByValue(value, restProps.columns);
+export const Picker: React.FC<PropsWithChildren<PickerProps>> = props => {
+  const [visible, { toggle: toggleVisible }] = useToggle();
+  const [disabled, setDisabled] = useState(props.disabled);
 
-    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 [value, setValue] = useControllableValue(props, {
+    trigger: props.trigger,
   });
 
-  const handleClose = useMemoizedFn(() => {
-    setVisible(false);
+  const _onChange = useMemoizedFn(value => {
+    setValue(value);
+    toggleVisible();
   });
 
-  const handleChange = useMemoizedFn(
-    (v: PickerValue[], options: PickerOption[]) => {
-      setLocalValue(v);
-      localOptionsRef.current = options;
-    },
+  const contextValue = useMemo(
+    () => ({
+      value,
+      visible,
+      disabled,
+      setDisabled,
+      toggleVisible,
+      onChange: _onChange,
+    }),
+    [value, visible, disabled, toggleVisible, _onChange],
   );
 
-  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>
-    </>
+    <PickerContext.Provider value={contextValue}>
+      {props.children}
+    </PickerContext.Provider>
   );
 };

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

@@ -4,8 +4,6 @@ export const usePickerFieldStyles = createThemedStyles(theme => ({
   container: {
     flex: 1,
     alignSelf: 'stretch',
-  },
-  content: {
     backgroundColor: theme.palette.white,
     paddingVertical: 12,
     paddingHorizontal: 12,
@@ -14,3 +12,7 @@ export const usePickerFieldStyles = createThemedStyles(theme => ({
     backgroundColor: theme.palette.blueGray2,
   },
 }));
+
+export const usePickerContentStyles = createThemedStyles(() => ({
+  container: { flex: 1, padding: 16 },
+}));

package/src/components/base/picker-backup/base-picker-container.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo,useState } from 'react';
+
+import { Flex } from '../flex';
+import { Modal, ModalHeader, type ModalProps } from '../modal';
+import { Portal } from '../portal';
+import { PickerTrigger, type PickerTriggerProps } from './picker-trigger';
+
+export interface PickerController {
+  visible: boolean;
+
+  /** 控制弹窗 */
+  setVisible: (v: boolean) => void;
+}
+
+export interface BasePickerContainerProps {
+  children: (controller: PickerController) => React.ReactNode;
+  pickerTriggerProps?: PickerTriggerProps;
+  modalProps?: ModalProps;
+}
+
+export const BasePickerContainer = ({
+  children,
+  pickerTriggerProps,
+  modalProps,
+}: BasePickerContainerProps) => {
+  const [visible, setVisible] = useState(false);
+
+  const controller = useMemo(
+    () => ({
+      visible,
+      setVisible,
+    }),
+    [visible],
+  );
+
+  return (
+    <>
+      <PickerTrigger {...pickerTriggerProps} />
+      <Portal>
+        <Modal
+          visible={visible}
+          position="bottom"
+          safeAreaInsetBottom
+          contentHeight={'50%'}
+          {...modalProps}
+        >
+          <Flex vertical align="stretch" gap={16} style={{ flex: 1, padding: 16 }}>
+            <ModalHeader onClose={() => setVisible(false)} />
+            {children(controller)}
+          </Flex>
+        </Modal>
+      </Portal>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,110 @@
+import { useMemoizedFn } from 'ahooks';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import type { AnyObject } from '#shared/utils/types';
+
+import { Button } from '../button';
+import { Picker } from '../picker';
+import type { PickerMergeProps } from '../picker/picker';
+import {
+  type Column,
+  type PickerOption,
+  type PickerValue,
+  PickerView,
+  type PickerViewProps,
+} from '../picker-view';
+import { findOptionsByValue } from '../picker-view/utils/picker';
+import { normalizeColumns } from './utils';
+
+export interface FieldNames {
+  /** 选项文本对应的字段名 @default 'label' */
+  label?: string;
+  /** 选项值对应的字段名 @default 'value' */
+  value?: string;
+  /** 级联子选项对应的字段名 @default 'children' */
+  children?: string;
+}
+
+export type ColumnInput = Column | AnyObject | AnyObject[];
+
+export interface PickerBackupProps
+  extends PickerMergeProps<PickerValue[]>,
+    Omit<PickerViewProps, 'onChange' | 'columns'> {
+  formatter?: (value: PickerValue[], options: PickerOption[]) => React.ReactNode;
+  confirmText?: string;
+  /** 选择器列，支持标准格式或自定义字段名格式（需配合 fieldNames 使用） */
+  columns: ColumnInput[];
+  /**
+   * 自定义字段名，用于映射数据中的属性到组件内部使用的标准字段
+   * @example { label: 'name', value: 'id', children: 'items' }
+   */
+  fieldNames?: FieldNames;
+}
+
+export const PickerBackup: React.FC<PickerBackupProps> = ({
+  placeholder = '请选择',
+  headerTitle = '请选择',
+  formatter,
+  confirmText = '确定',
+  columns: rawColumns,
+  fieldNames,
+  ...restProps
+}) => {
+  const [draftValue, setDraftValue] = useState<PickerValue[]>();
+
+  const committedValueRef = useRef<PickerValue[]>(restProps.value ?? []);
+
+  const handleOpen = useCallback(() => {
+    setDraftValue(committedValueRef.current);
+  }, []);
+
+  /** 标准化列数据：将自定义字段名映射为内部标准格式 */
+  const columns = useMemo(
+    () => normalizeColumns(rawColumns, fieldNames),
+    [rawColumns, fieldNames],
+  );
+
+  /** 格式化显示文案 - 根据 value 从 columns 计算 */
+  const _renderValue = useMemoizedFn(value => {
+    if (!value?.length) return;
+
+    const options = findOptionsByValue(value, columns);
+
+    if (formatter) {
+      return formatter(value, options);
+    }
+    return options
+      .map(opt => opt?.label)
+      .filter(Boolean)
+      .join(' / ');
+  });
+
+  return (
+    <Picker {...restProps}>
+      <Picker.Field placeholder={placeholder} renderValue={_renderValue} />
+      <Picker.Content headerTitle={headerTitle} onOpen={handleOpen}>
+        {({ onChange, value: contextValue }) => {
+          // 同步 ref：始终保持最新的已提交值
+          committedValueRef.current = contextValue ?? [];
+          return (
+            <>
+              <PickerView
+                columns={columns}
+                itemHeight={restProps.itemHeight}
+                value={draftValue}
+                onChange={setDraftValue}
+              />
+              <Button
+                text={confirmText}
+                size="large"
+                onPress={() => {
+                  onChange?.(draftValue);
+                }}
+              />
+            </>
+          );
+        }}
+      </Picker.Content>
+    </Picker>
+  );
+};

package/src/components/base/picker-backup/picker-copy.tsx

@@ -0,0 +1,125 @@
+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 ?? [],
+  );
+
+  // 滑动时的临时 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(localValue);
+  });
+
+  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 → picker-backup}/picker-trigger.tsx

@@ -5,8 +5,8 @@ import { useTheme } from '#native-provider';
 import type { AnyObject } from '#shared/utils/types';
 
 import { Flex } from '../flex';
+import { usePickerFieldStyles } from '../picker/style';
 import { Text } from '../text';
-import { usePickerFieldStyles } from './style';
 
 /** Picker 基础触发器 Props */
 export interface PickerTriggerProps {
@@ -65,7 +65,7 @@ export const PickerTrigger: React.FC<PickerTriggerProps> = ({
         <Flex
           align="center"
           gap={theme.spacing.sm}
-          style={[styles.content, disabled && styles.disabled, style]}
+          style={[disabled && styles.disabled, style]}
         >
           {React.isValidElement(displayText) ? (
             displayText

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

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

package/src/components/base/picker-backup/utils.ts

@@ -0,0 +1,62 @@
+import type { AnyObject } from '#shared/utils/types';
+
+import {
+  type Column,
+  type PickerOption,
+  type PickerValue,
+} from '../picker-view/types';
+import type { ColumnInput, FieldNames } from './picker-backup';
+
+/** 默认字段名 */
+const DEFAULT_FIELD_NAMES: Required<FieldNames> = {
+  label: 'label',
+  value: 'value',
+  children: 'children',
+};
+
+/**
+ * 将自定义字段名的数据标准化为内部使用的 { label, value, children } 格式
+ * 如果 fieldNames 与默认值相同，则直接返回原始数据（零开销）
+ */
+export const normalizeColumns = (
+  columns: ColumnInput[],
+  fieldNames?: FieldNames,
+): Column[] => {
+  if (!fieldNames) return columns as Column[];
+
+  const merged = { ...DEFAULT_FIELD_NAMES, ...fieldNames };
+
+  // 如果所有字段名都和默认值一样，无需转换
+  if (
+    merged.label === 'label' &&
+    merged.value === 'value' &&
+    merged.children === 'children'
+  ) {
+    return columns as Column[];
+  }
+
+  const normalizeOption = (item: AnyObject): PickerOption => {
+    const normalized = { ...item } as AnyObject & PickerOption;
+    if (merged.label !== 'label') {
+      normalized.label = item[merged.label] as PickerValue;
+    }
+    if (merged.value !== 'value') {
+      normalized.value = item[merged.value] as PickerValue;
+    }
+    if (merged.children !== 'children' && item[merged.children]) {
+      normalized.children = (item[merged.children] as AnyObject[]).map(
+        normalizeOption,
+      );
+    } else if (item.children) {
+      normalized.children = (item.children as AnyObject[]).map(normalizeOption);
+    }
+    return normalized;
+  };
+
+  return columns.map(column => {
+    if (Array.isArray(column)) {
+      return column.map(normalizeOption);
+    }
+    return normalizeOption(column);
+  }) as Column[];
+};