@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,81 @@
+import { useMemoizedFn } from 'ahooks';
+import { useMemo, useRef, useState } from 'react';
+
+import {
+  Button,
+  DateTimePicker,
+  Flex,
+  ModalHeader,
+  type ModalHeaderBaseProps,
+} from '#components/base';
+
+import { useDatePickerStyles } from './style';
+import type { DateTimePickerProps } from './types';
+
+export interface DatePickerViewProps
+  extends DateTimePickerProps,
+    ModalHeaderBaseProps {
+  /** 确定按钮文案 */
+  confirmText?: string;
+}
+
+export const DatePickerView: React.FC<DatePickerViewProps> = ({
+  mode = 'Y-D',
+  onChange,
+  onClose,
+  title,
+  confirmText = '确定',
+  ...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 _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);
+  });
+
+  // 只在点击确定按钮时才调用外部 onChange
+  const onConfirm = useMemoizedFn(() => {
+    onChange?.(localValue);
+  });
+
+  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>
+  );
+};

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

@@ -0,0 +1,191 @@
+import dayjs from 'dayjs';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import {
+  Button,
+  DateTimePicker,
+  Flex,
+  ModalHeader,
+  type ModalHeaderBaseProps,
+  Text,
+} from '#components/base';
+
+import { useDateRangePickerStyles } from './style';
+import type { DateTimePickerProps } from './types';
+import { sortRange } from './utils';
+
+export interface DateRangePickerViewProps
+  extends Omit<DateTimePickerProps, 'value' | 'defaultValue' | 'onChange'>,
+    ModalHeaderBaseProps {
+  /** 当前值（受控） */
+  value?: [Date, Date];
+  /** 默认值 (非受控) */
+  defaultValue?: [Date, Date];
+  /** 值变化时的回调 */
+  onChange?: (value: [Date, Date]) => void;
+  /** start 开始时间的占位文案 */
+  startText?: string;
+  /** end 结束时间的占位文案 */
+  endText?: string;
+  /** 确定按钮文案 */
+  confirmText?: string;
+  /** 重置按钮文案 */
+  resetText?: string;
+  /**
+   * 自定义格式化函数。
+   * 配置参考 https://day.js.org/docs/zh-CN/display/format
+   */
+  formatter: string | ((date: Date) => string);
+}
+
+type Selected = 'start' | 'end';
+
+export const DateRangePickerView: React.FC<DateRangePickerViewProps> = ({
+  onClose,
+  min,
+  max,
+  value,
+  defaultValue,
+  onChange,
+  title = '自定义日期',
+  startText = '请选择开始时间',
+  endText = '请选择结束时间',
+  confirmText = '确定',
+  resetText = '重置',
+  formatter,
+}) => {
+  const styles = useDateRangePickerStyles();
+
+  /** 当前编辑的是 start 还是 end */
+  const [selected, setSelected] = useState<Selected>('start');
+
+  /** 初始化 draft */
+  const [draft, setDraft] = useState<[Date?, Date?]>(() => {
+    if (value) return sortRange(value);
+    if (defaultValue) return sortRange(defaultValue);
+    return [new Date(), undefined];
+  });
+
+  const _startText =
+    (draft[0] &&
+      (typeof formatter === 'string'
+        ? dayjs(draft[0]).format(formatter)
+        : formatter(draft[0]))) ||
+    startText;
+  const _endText =
+    (draft[1] &&
+      (typeof formatter === 'string'
+        ? dayjs(draft[1]).format(formatter)
+        : formatter(draft[1]))) ||
+    endText;
+
+  /** 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 onConfirm = useCallback(() => {
+    if (!draft[0] || !draft[1]) return;
+
+    // start > end 自动修正
+    onChange?.(sortRange([draft[0], draft[1]]));
+  }, [draft, onChange]);
+
+  // 受控模式：检测外部 value 变化
+  useEffect(() => {
+    if (value) {
+      const sorted = sortRange(value);
+
+      setDraft(sorted);
+    }
+  }, [value]);
+
+  return (
+    <Flex vertical align="stretch" style={styles.container}>
+      {/* Header */}
+      <ModalHeader title={title} onClose={onClose} />
+
+      <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>
+
+      {/* Picker */}
+      <DateTimePicker
+        value={pickerValue}
+        min={minDate}
+        max={maxDate}
+        onChange={onChangePicker}
+      />
+
+      {/* Footer */}
+      <Button.Group block>
+        <Button size="large" text={resetText} theme="secondary" onPress={onReset} />
+        <Button
+          size="large"
+          text={confirmText}
+          onPress={onConfirm}
+          disabled={!canConfirm}
+        />
+      </Button.Group>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { useControllableValue } from 'ahooks';
+import { useMemo } from 'react';
+
+import { PickerView } from '#components/base';
+
+import { useDateTimePicker } from './hooks/use-date-time-picker';
+import type { DateTimePickerProps } from './types';
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  mode = 'Y-D',
+  min,
+  max,
+  ...restProps
+}) => {
+  // 确保有一个稳定的默认日期值
+  const defaultDate = useMemo(() => new Date(), []);
+
+  const [value, onChange] = useControllableValue(restProps, {
+    defaultValue: defaultDate,
+  });
+
+  // 确保 value 始终有值，避免 undefined 传递给 hook
+  const safeValue = value ?? defaultDate;
+
+  const [values, columns, onChangePicker] = useDateTimePicker({
+    mode,
+    value: safeValue,
+    onChange,
+    min,
+    max,
+  });
+
+  return <PickerView columns={columns} value={values} onChange={onChangePicker} />;
+};

package/src/components/base/date-picker-view/hooks/use-date-min-max.ts

@@ -0,0 +1,38 @@
+import { isDate } from 'lodash-es';
+import { useMemo } from 'react';
+
+import type { DatePickerColumnMode, DatePickerColumnType } from '../types';
+import { getMonthDays, serializeMode } from '../utils';
+
+export const useDateMinMax = (
+  mode: DatePickerColumnMode,
+  min?: Date,
+  max?: Date,
+) => {
+  const modes = useMemo(
+    () => serializeMode(mode.split('-') as DatePickerColumnType[]),
+    [mode],
+  );
+
+  const [defaultMinDate, defaultMaxDate] = useMemo(() => {
+    const day = new Date();
+    const currentYear = day.getFullYear();
+    const _defaultMinDate = new Date(day.setFullYear(currentYear - 10));
+    const _defaultMaxDate = new Date(day.setFullYear(currentYear + 10));
+
+    if (!modes.includes('D')) {
+      _defaultMinDate.setDate(1);
+      _defaultMaxDate.setDate(
+        getMonthDays(_defaultMaxDate.getFullYear(), _defaultMaxDate.getMonth() + 1),
+      );
+    }
+    if (!modes.includes('M')) {
+      _defaultMinDate.setMonth(0);
+      _defaultMaxDate.setMonth(11);
+    }
+
+    return [_defaultMinDate, _defaultMaxDate];
+  }, [modes]);
+
+  return [isDate(min) ? min : defaultMinDate, isDate(max) ? max : defaultMaxDate];
+};

package/src/components/base/date-picker-view/hooks/use-date-time-picker.ts

@@ -0,0 +1,143 @@
+import { useMemoizedFn } from 'ahooks';
+import { useMemo } from 'react';
+
+import type { PickerOption, PickerValue } from '../../picker-view/types';
+import type {
+  DatePickerColumnType,
+  RenderLabel,
+  UseDatePickerOption,
+} from '../types';
+import {
+  COLUMN_SERIALIZE_TYPES,
+  getDateBoundary,
+  getMonthDays,
+  serializeMode,
+  toDateObject,
+} from '../utils';
+import { useDateMinMax } from './use-date-min-max';
+
+const buildColumnData = (
+  mode: DatePickerColumnType,
+  start: number,
+  end: number,
+  renderLabel: RenderLabel,
+) => {
+  const items: PickerOption[] = [];
+  for (let index = start; index <= end; index++) {
+    items.push({
+      value: index,
+      label: renderLabel(mode, index),
+    });
+  }
+  return items;
+};
+
+export const useDateTimePicker = ({
+  mode,
+  value,
+  onChange,
+  min,
+  max,
+}: UseDatePickerOption) => {
+  const modes = useMemo(
+    () => serializeMode(mode.split('-') as DatePickerColumnType[]),
+    [mode],
+  );
+
+  const [minDate, maxDate] = useDateMinMax(mode, min, max);
+
+  const renderLabelPersistFn: RenderLabel = useMemoizedFn((t, n) => {
+    switch (t) {
+      case 'Y':
+        return `${n}年`;
+      case 'M':
+        return `${n}月`;
+      case 'D':
+        return `${n}日`;
+
+      default:
+        return `${n}`;
+    }
+  });
+
+  const boundary = useMemo(
+    () =>
+      getDateBoundary(value, modes, {
+        defaultMin: minDate,
+        defaultMax: maxDate,
+        min,
+        max,
+      }),
+    [value, modes, minDate, maxDate, min, max],
+  );
+
+  // 仅当日期边界实际发生变化时（例如从 1月 滑动到 2月，天数从 31 变 28），才会重新计算 Day 列的数据。在同月内滑动日期，**不会** 触发任何列数据的重算。
+  const boundaryKey = JSON.stringify(boundary);
+
+  const pickerColumns = useMemo(() => {
+    const _columnsMap: Record<string, PickerOption[]> = {};
+
+    COLUMN_SERIALIZE_TYPES.forEach(key => {
+      const ab = boundary[key];
+      if (!ab) return;
+      const a = key === 'M' ? ab[0] + 1 : ab[0];
+      const b = key === 'M' ? ab[1] + 1 : ab[1];
+      _columnsMap[key] = buildColumnData(key, a, b, renderLabelPersistFn);
+    });
+
+    return modes.map(key => _columnsMap[key]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [boundaryKey, modes, renderLabelPersistFn]);
+
+  const pickerValues = useMemo(() => {
+    const valueDateObject = toDateObject(value);
+    return modes.map(key =>
+      key === 'M' ? valueDateObject[key] + 1 : valueDateObject[key],
+    );
+  }, [value, modes]);
+
+  const onChangePicker = useMemoizedFn((v: PickerValue[]) => {
+    const newValue = new Date(value);
+
+    modes.forEach((key, index) => {
+      const num = v[index] as number;
+      switch (key) {
+        case 'Y':
+          newValue.setFullYear(num);
+          break;
+        case 'M': {
+          // 对 D 进行修正
+          const days = getMonthDays(newValue.getFullYear(), num);
+          const valueDays = newValue.getDate();
+          newValue.setMonth(num - 1, valueDays > days ? days : valueDays);
+          break;
+        }
+        case 'D': {
+          // 对 D 进行修正
+          const days = getMonthDays(
+            newValue.getFullYear(),
+            newValue.getMonth() + 1,
+          );
+
+          newValue.setDate(num > days ? days : num);
+          break;
+        }
+
+        default:
+          break;
+      }
+    });
+
+    const finallyValue =
+      newValue.getTime() >= minDate.getTime() &&
+      newValue.getTime() <= maxDate.getTime()
+        ? newValue
+        : newValue.getTime() < minDate.getTime()
+          ? minDate
+          : maxDate;
+
+    onChange(finallyValue);
+  });
+
+  return [pickerValues, pickerColumns, onChangePicker, minDate, maxDate] as const;
+};

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

@@ -0,0 +1,4 @@
+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/style/index.ts

@@ -0,0 +1,27 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useDatePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1,
+  },
+}));
+
+export const useDateRangePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1,
+  },
+  dateValue: {
+    flex: 1,
+    justifyContent: 'center',
+    borderWidth: 1,
+    paddingVertical: 6,
+    borderRadius: 4,
+    borderColor: theme.palette.fontGray5,
+  },
+}));

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

@@ -0,0 +1,55 @@
+import type { PickerOption } from '../picker-view/types';
+
+export interface UseDatePickerOption {
+  mode: DatePickerColumnMode;
+  value: Date;
+  onChange: (value: Date) => void;
+  min?: Date;
+  max?: Date;
+}
+
+export type Values = number[];
+export type ColumnItem = PickerOption[];
+export type Columns = ColumnItem[];
+
+/** 时间选择视图类型 */
+export type DatePickerColumnMode = 'Y' | 'Y-M' | 'Y-D' | 'M' | 'M-D' | 'D';
+
+export type DatePickerColumnType = 'Y' | 'M' | 'D';
+
+export type RenderLabel = (t: DatePickerColumnType, n: number) => string;
+
+export interface DateTimePickerProps {
+  /**
+   * 选中项
+   */
+  value?: Date;
+
+  /**
+   * 默认选中项
+   */
+  defaultValue?: Date;
+
+  /**
+   * 变化时的回调函数
+   */
+  onChange?: (value: Date) => void;
+
+  /**
+   * 日期选择的类型
+   * @default 'Y-m'
+   */
+  mode?: DatePickerColumnMode;
+
+  /**
+   * 最小值
+   * @default 十年前
+   */
+  min?: Date;
+
+  /**
+   * 最大值
+   * @default 十年后
+   */
+  max?: Date;
+}

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

@@ -0,0 +1,131 @@
+import { isDate } from 'lodash-es';
+
+import type { DatePickerColumnType } from './types';
+
+/**
+ * 可选项序列数组
+ */
+export const COLUMN_SERIALIZE_TYPES: DatePickerColumnType[] = ['Y', 'M', 'D'];
+
+export const serializeMode = (
+  modes: DatePickerColumnType[],
+): DatePickerColumnType[] => {
+  if (modes.length === 1) {
+    return modes;
+  }
+
+  // 起点终点
+  const startIndex = COLUMN_SERIALIZE_TYPES.findIndex(k => k === modes[0]);
+  const endIndex = COLUMN_SERIALIZE_TYPES.findIndex(k => k === modes[1]);
+
+  const serializeModes: DatePickerColumnType[] = [];
+
+  for (let index = startIndex; index <= endIndex; index++) {
+    serializeModes.push(COLUMN_SERIALIZE_TYPES[index]);
+  }
+
+  return serializeModes;
+};
+
+/**
+ * 获取某年的某个月有多少天
+ * @param year 年
+ * @param month 月 1~12
+ * @returns 天数
+ */
+export const getMonthDays = (year: number, month: number) => {
+  const day = new Date();
+
+  day.setFullYear(year);
+  day.setDate(1);
+  day.setMonth(month, 0);
+
+  return day.getDate();
+};
+
+export const toDateObject = (d: Date) => ({
+  Y: d.getFullYear(),
+  M: d.getMonth(),
+  D: d.getDate(),
+});
+
+export const getDateBoundary = (
+  value: Date,
+  modes: DatePickerColumnType[],
+  {
+    defaultMin,
+    defaultMax,
+    min,
+    max,
+  }: {
+    defaultMin: Date;
+    defaultMax: Date;
+    min?: Date;
+    max?: Date;
+  },
+) => {
+  const minDefined = isDate(min);
+  const maxDefined = isDate(max);
+
+  const minDateObject = toDateObject(minDefined ? min : defaultMin);
+  const maxDateObject = toDateObject(maxDefined ? max : defaultMax);
+  const valueDateObject = toDateObject(value);
+
+  // 边界值
+  const isInMinYear = valueDateObject.Y === minDateObject.Y;
+  const isInMaxYear = valueDateObject.Y === maxDateObject.Y;
+  const isInMinMonth = isInMinYear && valueDateObject.M <= minDateObject.M;
+  const isInMaxMonth = isInMaxYear && valueDateObject.M >= maxDateObject.M;
+
+  const boundary: Record<DatePickerColumnType, [number, number]> = {
+    Y: [minDateObject.Y, maxDateObject.Y],
+    M: (() => {
+      if (modes[0] === 'M') {
+        // 从月开始选
+        // 有限制时间根据限制时间选择，没有默认所有月份都可以
+        const a = minDefined ? minDateObject.M : 0;
+        const b = maxDefined ? maxDateObject.M : 11;
+
+        // a < b
+        if (a >= b) {
+          return [0, 11];
+        }
+
+        return [a, b];
+      }
+
+      const a = isInMinYear ? minDateObject.M : 0;
+      const b = isInMaxYear ? maxDateObject.M : 11;
+
+      return [a, b];
+    })(),
+    D: (() => {
+      if (modes[0] === 'D') {
+        const a = minDefined ? minDateObject.D : 1;
+        const b = maxDefined
+          ? maxDateObject.D
+          : getMonthDays(valueDateObject.Y, valueDateObject.M + 1);
+
+        // a < b
+        if (a >= b) {
+          return [1, getMonthDays(valueDateObject.Y, valueDateObject.M + 1)];
+        }
+
+        return [a, b];
+      }
+
+      const a = isInMinMonth ? minDateObject.D : 1;
+      const b = isInMaxMonth
+        ? maxDateObject.D
+        : getMonthDays(valueDateObject.Y, valueDateObject.M + 1);
+      return [a, b];
+    })(),
+  };
+
+  return boundary;
+};
+
+/** 排序日期范围，确保 start <= end */
+export const sortRange = (range: [Date, Date]): [Date, Date] => {
+  return range[0] > range[1] ? [range[1], range[0]] : range;
+};