@seakoi/native-ui 1.1.3 → 1.2.0

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

@@ -1,95 +1,98 @@
-import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import {
+  Button,
   DatePickerView,
   type DatePickerViewProps,
-  Modal,
-  PickerTrigger,
-  type PickerTriggerControlledProps,
-  Portal,
+  Flex,
+  Picker,
+  type PickerMergeProps,
 } from '#components/base';
 
+import { useDatePickerStyles } from './style';
+
 export interface DatePickerProps
-  extends PickerTriggerControlledProps<Date>,
-    Omit<DatePickerViewProps, 'onClose' | 'onChange' | 'value'> {
+  extends PickerMergeProps<Date>,
+    Omit<DatePickerViewProps, 'onClose' | 'onChange' | 'value' | 'defaultValue'> {
   /**
    * 自定义格式化函数。
    * 配置参考 https://day.js.org/docs/zh-CN/display/format
    */
   formatter?: string | ((date: Date) => string);
+  /** 确定按钮文案 */
+  confirmText?: string;
 }
 
 export const DatePicker: React.FC<DatePickerProps> = ({
   placeholder = '请选择日期',
-  disabled = false,
   formatter = 'YYYY/MM/DD',
-  style,
-  children,
   mode = 'Y-D',
-  title,
-  confirmText,
+  headerTitle,
+  confirmText = '确定',
   ...restProps
 }) => {
-  const [value, setValue] = useControllableValue<Date | undefined>(restProps, {
-    defaultValue: restProps.defaultValue,
-  });
+  const [draftValue, setDraftValue] = useState<Date>();
+
+  const styles = useDatePickerStyles();
 
-  const [visible, setVisible] = useState(false);
+  const committedValueRef = useRef<Date>(new Date());
+
+  const handleOpen = useCallback(() => {
+    setDraftValue(committedValueRef.current);
+  }, []);
 
   /** 格式化显示文案 */
-  const displayText = useMemo(() => {
-    if (!value) return '';
+  const _renderValue = useMemoizedFn(value => {
+    if (!value) return;
     if (typeof formatter === 'string') {
       return dayjs(value).format(formatter);
     }
     return formatter(value);
-  }, [value, mode, formatter]);
-
-  const handleOpen = useMemoizedFn(() => {
-    setVisible(true);
   });
 
-  const handleChange = useMemoizedFn((date: Date) => {
-    setValue(date);
-    setVisible(false);
-  });
-
-  const handleClose = useMemoizedFn(() => {
-    setVisible(false);
-  });
+  const _headerTitle = useMemo(() => {
+    if (headerTitle) {
+      return headerTitle;
+    }
+    switch (mode) {
+      case 'Y':
+        return '请选择年';
+      case 'Y-M':
+        return '请选择年月';
+      case 'Y-D':
+        return '请选择年月日';
+      default:
+        return '请选择日期';
+    }
+  }, [mode, headerTitle]);
 
   return (
-    <>
-      <PickerTrigger
-        displayText={displayText}
-        placeholder={placeholder}
-        disabled={disabled}
-        style={style}
-        onPress={handleOpen}
-      >
-        {children}
-      </PickerTrigger>
-
-      <Portal>
-        <Modal
-          visible={visible}
-          position="bottom"
-          safeAreaInsetBottom
-          contentHeight={'50%'}
-        >
-          <DatePickerView
-            {...restProps}
-            mode={mode}
-            title={title}
-            confirmText={confirmText}
-            value={value}
-            onChange={handleChange}
-            onClose={handleClose}
-          />
-        </Modal>
-      </Portal>
-    </>
+    <Picker {...restProps}>
+      <Picker.Field placeholder={placeholder} renderValue={_renderValue} />
+      <Picker.Content headerTitle={_headerTitle} onOpen={handleOpen}>
+        {({ onChange, value: contextValue }) => {
+          // 同步 ref：始终保持最新的已提交值
+          committedValueRef.current = contextValue ?? new Date();
+          return (
+            <Flex vertical align="stretch" style={styles.container}>
+              <DatePickerView
+                mode={mode}
+                value={draftValue}
+                onChange={setDraftValue}
+              />
+              <Button
+                text={confirmText}
+                size="large"
+                onPress={() => {
+                  onChange?.(draftValue);
+                }}
+              />
+            </Flex>
+          );
+        }}
+      </Picker.Content>
+    </Picker>
   );
 };

package/src/components/base/date-picker/date-range-picker.tsx

@@ -1,62 +1,87 @@
-import { useControllableValue } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import {
-  DateRangePickerView,
-  type DateRangePickerViewProps,
-  Modal,
-  PickerTrigger,
-  type PickerTriggerControlledProps,
-  Portal,
+  Button,
+  DatePickerView,
+  Flex,
+  Picker,
+  type PickerMergeProps,
+  Text,
 } from '#components/base';
 
+import { useDateRangePickerStyles } from '../date-picker-view/style';
+import type { DatePickerViewProps } from '../date-picker-view/types';
+import { sortRange } from '../date-picker-view/utils';
+
 export interface DateRangePickerProps
-  extends PickerTriggerControlledProps<[Date, Date]>,
-    Omit<DateRangePickerViewProps, 'onClose' | 'onChange' | 'value' | 'formatter'> {
+  extends PickerMergeProps<[Date, Date]>,
+    Omit<DatePickerViewProps, 'onClose' | 'onChange' | 'value' | 'defaultValue'> {
   /**
    * 自定义格式化函数。
    * 配置参考 https://day.js.org/docs/zh-CN/display/format
    */
-  formatter?: string | ((date: [Date, Date] | Date) => string);
+  formatter?: string | ((date: [Date, Date]) => string);
   /** 范围分隔符 */
   separator?: string;
+  /** start 开始时间的占位文案 */
+  startText?: string;
+  /** end 结束时间的占位文案 */
+  endText?: string;
+  /** 确定按钮文案 */
+  confirmText?: string;
+  /** 重置按钮文案 */
+  resetText?: string;
 }
 
+type Selected = 'start' | 'end';
+
 export const DateRangePicker: React.FC<DateRangePickerProps> = ({
   placeholder = '请选择日期范围',
-  disabled = false,
   formatter = 'YYYY/MM/DD',
-  style,
   separator = ' ~ ',
-  children,
-  title,
-  confirmText,
-  resetText,
-  startText,
-  endText,
+  headerTitle,
+  startText = '请选择开始时间',
+  endText = '请选择结束时间',
+  confirmText = '确定',
+  resetText = '重置',
+  min,
+  max,
   ...restProps
 }) => {
-  const [value, setValue] = useControllableValue<[Date, Date] | undefined>(
-    restProps,
-    {
-      defaultValue: restProps.defaultValue,
-    },
-  );
+  const styles = useDateRangePickerStyles();
+
+  /** 当前编辑的是 start 还是 end */
+  const [selected, setSelected] = useState<Selected>('start');
 
-  const [visible, setVisible] = useState(false);
+  /**
+   * 草稿值：用户在弹窗内选择时的临时值
+   * - 弹窗打开时重置为已提交的值（通过 onOpen）
+   */
+  const [draft, setDraft] = useState<[Date?, Date?]>([]);
 
-  const openModal = () => {
-    setVisible(true);
-  };
+  /**
+   * 追踪 Picker context 中的已提交值
+   * 非受控模式下 restProps.value 始终是 undefined，真正的值在 Picker context 内
+   */
+  const committedValueRef = useRef<[Date, Date] | undefined>(undefined);
 
-  const closeModal = () => {
-    setVisible(false);
-  };
+  /**
+   * 弹窗打开时，将草稿值重置为已提交的值
+   */
+  const handleOpen = useCallback(() => {
+    if (committedValueRef.current) {
+      setDraft(sortRange(committedValueRef.current));
+    } else {
+      setDraft([new Date(), undefined]);
+    }
+    setSelected('start');
+  }, []);
 
   /** 格式化显示文案 */
-  const displayText = useMemo(() => {
-    if (!value) return '';
+  const _renderValue = useMemoizedFn(value => {
+    if (!value) return;
     if (typeof formatter === 'string') {
       return (
         dayjs(value[0]).format(formatter) +
@@ -65,44 +90,127 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
       );
     }
     return formatter(value);
-  }, [value, formatter, separator]);
+  });
+
+  /** Picker 当前值 */
+  const pickerValue = (selected === 'start' ? draft[0] : draft[1]) ?? new Date();
+
+  /** Picker 可选范围 */
+  const minDate = useMemo(() => {
+    return selected === 'end' ? (draft[0] ?? min) : min;
+  }, [selected, draft, min]);
+
+  const maxDate = useMemo(() => {
+    return selected === 'start' ? (draft[1] ?? max) : max;
+  }, [selected, draft, max]);
+
+  /** Picker 改 draft */
+  const onChangePicker = useCallback(
+    (date: Date) => {
+      setDraft(prev => {
+        const index = selected === 'start' ? 0 : 1;
+        if (prev[index]?.getTime() === date.getTime()) {
+          return prev;
+        }
+        const next: [Date?, Date?] = [prev[0], prev[1]];
+        next[index] = date;
+        return next;
+      });
+    },
+    [selected],
+  );
+
+  const changeSelected = useCallback((nextSelected: Selected) => {
+    setSelected(nextSelected);
+    setDraft(prev => {
+      const next: [Date?, Date?] = [prev[0], prev[1]];
+      const index = nextSelected === 'start' ? 0 : 1;
+      next[index] ??= new Date();
+      return next;
+    });
+  }, []);
+
+  /** 重置 */
+  const onReset = useCallback(() => {
+    setDraft([new Date(), undefined]);
+    setSelected('start');
+  }, []);
+
+  /** 是否可以确定 */
+  const canConfirm = Boolean(draft[0] && draft[1]);
+
+  const _startText =
+    (draft[0] &&
+      dayjs(draft[0]).format(
+        typeof formatter === 'string' ? formatter : 'YYYY/MM/DD',
+      )) ||
+    startText;
+  const _endText =
+    (draft[1] &&
+      dayjs(draft[1]).format(
+        typeof formatter === 'string' ? formatter : 'YYYY/MM/DD',
+      )) ||
+    endText;
 
   return (
-    <>
-      <PickerTrigger
-        displayText={displayText}
-        placeholder={placeholder}
-        disabled={disabled}
-        style={style}
-        onPress={openModal}
+    <Picker {...restProps}>
+      <Picker.Field placeholder={placeholder} renderValue={_renderValue} />
+      <Picker.Content
+        headerTitle={headerTitle}
+        contentHeight={490}
+        onOpen={handleOpen}
       >
-        {children}
-      </PickerTrigger>
-
-      <Portal>
-        <Modal
-          visible={visible}
-          position="bottom"
-          safeAreaInsetBottom
-          contentHeight={490}
-        >
-          <DateRangePickerView
-            {...restProps}
-            title={title}
-            confirmText={confirmText}
-            resetText={resetText}
-            startText={startText}
-            endText={endText}
-            value={value}
-            onChange={range => {
-              setValue(range);
-              closeModal();
-            }}
-            onClose={closeModal}
-            formatter={formatter}
-          />
-        </Modal>
-      </Portal>
-    </>
+        {({ onChange, value: contextValue }) => {
+          // 同步 ref：始终保持最新的已提交值
+          committedValueRef.current = contextValue;
+          return (
+            <Flex vertical align="stretch" style={styles.container}>
+              <Flex>
+                <Button
+                  variant="outline"
+                  theme={selected === 'start' ? 'primary' : 'default'}
+                  block
+                  text={_startText}
+                  onPress={() => changeSelected('start')}
+                />
+                <Text>—</Text>
+                <Button
+                  variant="outline"
+                  theme={selected === 'end' ? 'primary' : 'default'}
+                  block
+                  text={_endText}
+                  onPress={() => changeSelected('end')}
+                />
+              </Flex>
+
+              <DatePickerView
+                value={pickerValue}
+                min={minDate}
+                max={maxDate}
+                onChange={onChangePicker}
+              />
+
+              <Button.Group block>
+                <Button
+                  size="large"
+                  text={resetText}
+                  theme="secondary"
+                  onPress={onReset}
+                />
+                <Button
+                  size="large"
+                  text={confirmText}
+                  onPress={() => {
+                    if (!draft[0] || !draft[1]) return;
+                    onChange?.(sortRange([draft[0], draft[1]]));
+                  }}
+                  disabled={!canConfirm}
+                />
+              </Button.Group>
+            </Flex>
+          );
+        }}
+      </Picker.Content>
+    </Picker>
   );
 };

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

@@ -0,0 +1,10 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useDatePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1,
+  },
+}));

package/src/components/base/date-picker-view/date-picker-view.tsx

@@ -1,81 +1,34 @@
-import { useMemoizedFn } from 'ahooks';
-import { useMemo, useRef, useState } from 'react';
+import { useControllableValue } from 'ahooks';
+import { useMemo } from 'react';
 
-import {
-  Button,
-  DateTimePicker,
-  Flex,
-  ModalHeader,
-  type ModalHeaderBaseProps,
-} from '#components/base';
+import { PickerView } from '#components/base';
 
-import { useDatePickerStyles } from './style';
-import type { DateTimePickerProps } from './types';
-
-export interface DatePickerViewProps
-  extends DateTimePickerProps,
-    ModalHeaderBaseProps {
-  /** 确定按钮文案 */
-  confirmText?: string;
-}
+import { useDateTimePicker } from './hooks/use-date-time-picker';
+import type { DatePickerViewProps } from './types';
 
 export const DatePickerView: React.FC<DatePickerViewProps> = ({
   mode = 'Y-D',
-  onChange,
-  onClose,
-  title,
-  confirmText = '确定',
+  min,
+  max,
   ...restProps
 }) => {
-  const styles = useDatePickerStyles();
-
-  // 内部状态用于管理滚动时的临时值
-  const [localValue, setLocalValue] = useState<Date>(
-    restProps.value ?? restProps.defaultValue ?? new Date(),
-  );
-
-  const lastValueRef = useRef(restProps.value);
-  if (restProps.value !== undefined && restProps.value !== lastValueRef.current) {
-    lastValueRef.current = restProps.value;
-    setLocalValue(restProps.value);
-  }
+  // 确保有一个稳定的默认日期值
+  const defaultDate = useMemo(() => new Date(), []);
 
-  const _title = useMemo(() => {
-    if (title) {
-      return title;
-    }
-    switch (mode) {
-      case 'Y':
-        return '请选择年';
-      case 'Y-M':
-        return '请选择年月';
-      case 'Y-D':
-        return '请选择年月日';
-      default:
-        return '请选择日期';
-    }
-  }, [mode, title]);
-
-  // 滚动时只更新内部状态，不触发外部 onChange
-  const onChangePicker = useMemoizedFn((value: Date) => {
-    setLocalValue(value);
+  const [value, onChange] = useControllableValue(restProps, {
+    defaultValue: defaultDate,
   });
 
-  // 只在点击确定按钮时才调用外部 onChange
-  const onConfirm = useMemoizedFn(() => {
-    onChange?.(localValue);
+  // 确保 value 始终有值，避免 undefined 传递给 hook
+  const safeValue = value ?? defaultDate;
+
+  const [values, columns, onChangePicker] = useDateTimePicker({
+    mode,
+    value: safeValue,
+    onChange,
+    min,
+    max,
   });
 
-  return (
-    <Flex vertical align="stretch" style={styles.container}>
-      <ModalHeader title={_title} onClose={onClose} />
-      <DateTimePicker
-        {...restProps}
-        mode={mode}
-        value={localValue}
-        onChange={onChangePicker}
-      />
-      <Button text={confirmText} size="large" onPress={onConfirm} />
-    </Flex>
-  );
+  return <PickerView columns={columns} value={values} onChange={onChangePicker} />;
 };

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

@@ -1,4 +1,2 @@
 export * from './date-picker-view';
-export * from './date-range-picker-view';
-export * from './date-time-picker';
 export type * from './types';

package/src/components/base/date-picker-view/types.ts

@@ -19,7 +19,7 @@ export type DatePickerColumnType = 'Y' | 'M' | 'D';
 
 export type RenderLabel = (t: DatePickerColumnType, n: number) => string;
 
-export interface DateTimePickerProps {
+export interface DatePickerViewProps {
   /**
    * 选中项
    */

package/src/components/base/index.ts

@@ -23,6 +23,7 @@ export * from './loading';
 export * from './modal';
 export * from './nav-bar';
 export * from './picker';
+export * from './picker-backup';
 export * from './picker-view';
 export * from './portal';
 export * from './radio';
@@ -30,4 +31,5 @@ export * from './result';
 export * from './surface';
 export * from './switch';
 export * from './tabs';
+export * from './tag';
 export * from './text';

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

@@ -1,2 +1,12 @@
+import { Picker as _Picker } from './picker';
+import { PickerContent } from './picker-content';
+import { PickerField } from './picker-field';
+
 export * from './picker';
-export * from './picker-trigger';
+export * from './picker-content';
+export * from './picker-field';
+
+export const Picker = Object.assign(_Picker, {
+  Field: PickerField,
+  Content: PickerContent,
+});

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

@@ -0,0 +1,75 @@
+import React, { useContext, useEffect } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import {
+  Flex,
+  Modal,
+  ModalHeader,
+  type ModalProps,
+  Portal,
+} from '#components/base';
+import type { Any } from '#shared/utils';
+
+import { PickerContext } from './picker-context';
+
+export interface PickerContentProps
+  extends Omit<ModalProps, 'visible' | 'children'> {
+  hiddenHeaderCloseIcon?: boolean;
+  headerTitle?: React.ReactNode;
+  headerStyle?: StyleProp<ViewStyle>;
+  children?:
+    | React.ReactElement
+    | ((props: {
+        value: Any;
+        onChange?: (value: Any) => void;
+      }) => React.ReactElement);
+}
+
+export const PickerContent: React.FC<PickerContentProps> = ({
+  children,
+  headerTitle,
+  headerStyle,
+  hiddenHeaderCloseIcon,
+  ...modalProps
+}) => {
+  const context = useContext(PickerContext);
+
+  let childNode: React.ReactElement<Any> | null = null;
+
+  if (React.isValidElement(children)) {
+    childNode = React.cloneElement<Any>(children, {
+      value: context?.value,
+      onChange: context?.onChange,
+    });
+  } else if (typeof children === 'function') {
+    childNode = children({
+      value: context?.value,
+      onChange: context?.onChange,
+    });
+  }
+  useEffect(() => {
+    context?.setDisabled?.(!!childNode?.props?.disabled);
+  }, [childNode?.props?.disabled, context?.setDisabled]);
+
+  return (
+    <Portal>
+      <Modal
+        safeAreaInsetBottom
+        position="bottom"
+        contentHeight={'50%'}
+        {...modalProps}
+        visible={!!context?.visible}
+      >
+        <Flex vertical align="stretch" gap={16} style={{ flex: 1, padding: 16 }}>
+          <ModalHeader
+            title={headerTitle}
+            style={headerStyle}
+            onClose={context?.toggleVisible}
+            showClose={!hiddenHeaderCloseIcon}
+          />
+          {childNode}
+        </Flex>
+      </Modal>
+    </Portal>
+  );
+};