taro-uno-ui 1.0.0 → 1.0.2

package/src/components/form/DatePicker/DatePicker.tsx

@@ -1,376 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text, Input } from '@tarojs/components';
-import type { DatePickerProps, DatePickerRef, DatePickerFormat } from './DatePicker.types';
-import { DatePickerStyles } from './DatePicker.styles';
-
-/** 日期选择器组件 */
-export const DatePickerComponent = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    range = false,
-    valueRange,
-    defaultRangeValue,
-    onRangeChange,
-    size = 'md',
-    variant = 'outlined',
-    status = 'normal',
-    readOnly = false,
-    disabled = false,
-    placeholder = '请选择日期',
-    rangePlaceholder = ['开始时间', '结束时间'],
-    allowClear = false,
-    format = 'YYYY-MM-DD',
-    className,
-    style,
-    onOpenChange,
-    onFocus,
-    onBlur,
-    onClick,
-    dateRender,
-    renderExtraFooter,
-  } = props;
-
-  // 内部状态管理
-  const [internalValue, setInternalValue] = useState<Date | null>(defaultValue || value || null);
-  const [internalRangeValue, setInternalRangeValue] = useState<{ start: Date; end: Date } | null>(
-    defaultRangeValue || valueRange || null,
-  );
-  const [isOpened, setIsOpened] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-
-  // 引用
-  const pickerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // 日期格式化函数
-  const formatDate = useCallback(
-    (date: Date | null, formatStr: DatePickerFormat = format): string => {
-      if (!date) return '';
-
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-
-      switch (formatStr) {
-        case 'YYYY-MM-DD':
-          return `${year}-${month}-${day}`;
-        case 'YYYY/MM/DD':
-          return `${year}/${month}/${day}`;
-        case 'DD/MM/YYYY':
-          return `${day}/${month}/${year}`;
-        case 'MM/DD/YYYY':
-          return `${month}/${day}/${year}`;
-        case 'YYYY年MM月DD日':
-          return `${year}年${month}月${day}日`;
-        default:
-          return `${year}-${month}-${day}`;
-      }
-    },
-    [format],
-  );
-
-  // 日期变化处理
-  const handleDateChange = useCallback(
-    (date: Date | null) => {
-      setInternalValue(date);
-      const dateString = formatDate(date, format);
-      onChange?.(date, dateString);
-      // 如果有自定义日期渲染，自动打开面板
-      if (dateRender && !isOpened) {
-        setIsOpened(true);
-        onOpenChange?.(true);
-      }
-    },
-    [onChange, formatDate, format, dateRender, isOpened, onOpenChange],
-  );
-
-  // 范围日期变化处理
-  const handleRangeDateChange = useCallback(
-    (range: { start: Date; end: Date } | null) => {
-      setInternalRangeValue(range);
-      if (range) {
-        const startString = formatDate(range.start, format);
-        const endString = formatDate(range.end, format);
-        onRangeChange?.(range, [startString, endString]);
-      } else {
-        onRangeChange?.(null, ['', '']);
-      }
-    },
-    [onRangeChange, formatDate, format],
-  );
-
-  // 打开/关闭选择器
-  const togglePicker = useCallback(() => {
-    if (disabled || readOnly) return;
-    const newIsOpened = !isOpened;
-    setIsOpened(newIsOpened);
-    onOpenChange?.(newIsOpened);
-  }, [isOpened, disabled, readOnly, onOpenChange]);
-
-  // 清除选择
-  const clearSelection = useCallback(() => {
-    if (range) {
-      handleRangeDateChange(null);
-    } else {
-      handleDateChange(null);
-    }
-  }, [range, handleDateChange, handleRangeDateChange]);
-
-  // 同步外部值变化
-  useEffect(() => {
-    if (value !== undefined) {
-      setInternalValue(value);
-    }
-  }, [value]);
-
-  // 初始化时如果有自定义日期渲染，自动打开面板
-  useEffect(() => {
-    if (dateRender && !isOpened) {
-      setIsOpened(true);
-      onOpenChange?.(true);
-    }
-  }, [dateRender, isOpened, onOpenChange]);
-
-  useEffect(() => {
-    if (valueRange !== undefined) {
-      setInternalRangeValue(valueRange);
-    }
-  }, [valueRange]);
-
-  // 获取格式化日期字符串
-  const getDateString = useCallback(() => {
-    return formatDate(internalValue, format);
-  }, [internalValue, formatDate, format]);
-
-  // 获取格式化范围日期字符串
-  const getRangeDateString = useCallback(() => {
-    if (!internalRangeValue) return null;
-    return [formatDate(internalRangeValue.start, format), formatDate(internalRangeValue.end, format)] as [
-      string,
-      string,
-    ];
-  }, [internalRangeValue, formatDate, format]);
-
-  // 打开选择器
-  const open = useCallback(() => {
-    if (disabled || readOnly) return;
-    setIsOpened(true);
-    onOpenChange?.(true);
-  }, [disabled, readOnly, onOpenChange]);
-
-  // 关闭选择器
-  const close = useCallback(() => {
-    setIsOpened(false);
-    onOpenChange?.(false);
-  }, [onOpenChange]);
-
-  // 聚焦处理
-  const handleFocus = useCallback(
-    (event: any) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    },
-    [onFocus],
-  );
-
-  // 失焦处理
-  const handleBlur = useCallback(
-    (event: any) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    },
-    [onBlur],
-  );
-
-  // 点击处理
-  const handleClick = useCallback(
-    (event: any) => {
-      onClick?.(event);
-      togglePicker();
-      // 自动触发焦点事件以支持测试
-      if (!isFocused) {
-        setIsFocused(true);
-        onFocus?.(event);
-      }
-    },
-    [onClick, togglePicker, isFocused, onFocus],
-  );
-
-  // 使用 ref 来存储最新的值，确保 getValue 能够立即获取到更新后的值
-  const latestValueRef = useRef<Date | null>(internalValue);
-  const latestRangeValueRef = useRef<{ start: Date; end: Date } | null>(internalRangeValue);
-
-  // 更新 ref 值
-  useEffect(() => {
-    latestValueRef.current = internalValue;
-    latestRangeValueRef.current = internalRangeValue;
-  }, [internalValue, internalRangeValue]);
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: pickerRef.current,
-      getValue: () => latestValueRef.current,
-      setValue: (value: Date | null) => {
-        // 立即更新状态和 ref
-        latestValueRef.current = value;
-        setInternalValue(value);
-        const dateString = formatDate(value, format);
-        onChange?.(value, dateString);
-      },
-      getRangeValue: () => latestRangeValueRef.current,
-      setRangeValue: (value: { start: Date; end: Date } | null) => {
-        handleRangeDateChange(value);
-      },
-      getDateString,
-      getRangeDateString,
-      clear: clearSelection,
-      focus: () => {
-        inputRef.current?.focus();
-      },
-      blur: () => {
-        inputRef.current?.blur();
-      },
-      disable: () => {
-        // 禁用逻辑通过props控制
-      },
-      enable: () => {
-        // 启用逻辑通过props控制
-      },
-      open,
-      close,
-      isOpen: () => isOpened,
-      isDisabled: () => disabled,
-      isReadOnly: () => readOnly,
-    }),
-    [
-      internalValue,
-      internalRangeValue,
-      getDateString,
-      getRangeDateString,
-      clearSelection,
-      open,
-      close,
-      isOpened,
-      disabled,
-      readOnly,
-      handleDateChange,
-      handleRangeDateChange,
-    ],
-  );
-
-  // 生成样式
-  const pickerStyle = DatePickerStyles.getStyle({ size, variant, status, disabled, readOnly, style });
-  const pickerClassName = DatePickerStyles.getClassName({
-    size,
-    variant,
-    status,
-    disabled,
-    readOnly,
-    opened: isOpened,
-    focused: isFocused,
-    className,
-  });
-
-  return (
-    <View
-      ref={pickerRef}
-      className={`${pickerClassName} taro-uno-h5-datepicker taro-uno-h5-datepicker--${size} taro-uno-h5-datepicker--${variant}${status !== 'normal' ? ` taro-uno-h5-datepicker--${status}` : ''}${disabled || readOnly ? ' taro-uno-h5-datepicker--disabled' : ''}`}
-      style={pickerStyle}
-      onClick={handleClick}
-    >
-      {/* 输入区域 */}
-      <View
-        className="taro-uno-datepicker__input-wrapper"
-        style={DatePickerStyles.getInputWrapperStyle({ size, focused: isFocused })}
-        onClick={handleClick}
-      >
-        {range ? (
-          // 范围选择输入框
-          <View className="taro-uno-datepicker__range-inputs" style={DatePickerStyles.getRangeInputsStyle()}>
-            <Input
-              ref={inputRef}
-              className="taro-uno-datepicker__input"
-              style={DatePickerStyles.getInputStyle({ size, disabled })}
-              value={internalRangeValue ? formatDate(internalRangeValue.start, format) : ''}
-              placeholder={rangePlaceholder[0]}
-              disabled={disabled}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-            <Text style={DatePickerStyles.getRangeSeparatorStyle()}>至</Text>
-            <Input
-              className="taro-uno-datepicker__input"
-              style={DatePickerStyles.getInputStyle({ size, disabled })}
-              value={internalRangeValue ? formatDate(internalRangeValue.end, format) : ''}
-              placeholder={rangePlaceholder[1]}
-              disabled={disabled}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-            />
-          </View>
-        ) : (
-          // 单日期选择输入框
-          <Input
-            ref={inputRef}
-            className="taro-uno-datepicker__input"
-            style={DatePickerStyles.getInputStyle({ size, disabled })}
-            value={getDateString()}
-            placeholder={placeholder}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        )}
-
-        {/* 清除按钮 */}
-        {allowClear && (internalValue || internalRangeValue) && !disabled && !readOnly && (
-          <View
-            className="taro-uno-datepicker__clear-button"
-            style={DatePickerStyles.getClearButtonStyle()}
-            onClick={(e) => {
-              e.stopPropagation();
-              clearSelection();
-            }}
-          >
-            ×
-          </View>
-        )}
-
-        {/* 日历图标 */}
-        <Text className="taro-uno-datepicker__calendar-icon" style={DatePickerStyles.getCalendarIconStyle({ size })}>
-          📅
-        </Text>
-      </View>
-
-      {/* 日期选择面板 */}
-      {isOpened && (
-        <View className="taro-uno-datepicker__panel" style={DatePickerStyles.getPanelStyle()}>
-          <View className="taro-uno-datepicker__panel-content" style={DatePickerStyles.getPanelContentStyle()}>
-            {/* 日历内容 */}
-            <View className="taro-uno-datepicker__calendar" style={DatePickerStyles.getCalendarStyle()}>
-              <Text>Calendar Panel</Text>
-
-              {/* 自定义日期渲染 */}
-              {dateRender && (
-                <View className="taro-uno-datepicker__custom-date">{dateRender(internalValue || new Date())}</View>
-              )}
-            </View>
-
-            {/* 自定义底部 */}
-            {renderExtraFooter && <View className="taro-uno-datepicker__custom-footer">{renderExtraFooter()}</View>}
-          </View>
-        </View>
-      )}
-    </View>
-  );
-});
-
-/** 日期选择器组件显示名称 */
-DatePickerComponent.displayName = 'DatePicker';
-
-/** 导出日期选择器组件 */
-export default DatePickerComponent;

package/src/components/form/DatePicker/DatePicker.types.ts

@@ -1,250 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-
-/** 日期选择器尺寸 */
-export type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/** 日期选择器变体 */
-export type DatePickerVariant = 'outlined' | 'filled' | 'underlined';
-
-/** 日期选择器状态 */
-export type DatePickerStatus = 'normal' | 'error' | 'warning' | 'success' | 'disabled';
-
-/** 日期格式 */
-export type DatePickerFormat = 'YYYY-MM-DD' | 'YYYY/MM/DD' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY年MM月DD日';
-
-/** 日期范围 */
-export interface DateRange {
-  start: Date;
-  end: Date;
-}
-
-/** 日期禁用配置 */
-export interface DisabledDate {
-  /** 禁用日期函数 */
-  disabledDate?: (_date: Date) => boolean;
-  /** 禁用时间函数 */
-  disabledTime?: (_date: Date) => { disabledHours?: number[]; disabledMinutes?: number[]; disabledSeconds?: number[] };
-}
-
-/** 日期选择器原生属性类型 */
-export type DatePickerNativeProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'onFocus' | 'onBlur' | 'onClick' | 'defaultValue'
->;
-
-/** 日期选择器组件属性接口 */
-export interface DatePickerProps extends DatePickerNativeProps {
-  /** 选中日期 */
-  value?: Date | null;
-  /** 默认日期 */
-  defaultValue?: Date | null;
-  /** 日期变化回调 */
-  onChange?: (_date: Date | null, dateString: string) => void;
-  /** 日期范围选择 */
-  range?: boolean;
-  /** 日期范围值 */
-  valueRange?: DateRange | null;
-  /** 默认日期范围 */
-  defaultRangeValue?: DateRange | null;
-  /** 日期范围变化回调 */
-  onRangeChange?: (_range: DateRange | null, dateStrings: [string, string]) => void;
-  /** 日期格式 */
-  format?: DatePickerFormat;
-  /** 占位符 */
-  placeholder?: string;
-  /** 范围选择占位符 */
-  rangePlaceholder?: [string, string];
-  /** 禁用日期配置 */
-  disabledDate?: DisabledDate['disabledDate'];
-  /** 禁用时间配置 */
-  disabledTime?: DisabledDate['disabledTime'];
-  /** 尺寸 */
-  size?: DatePickerSize;
-  /** 变体 */
-  variant?: DatePickerVariant;
-  /** 状态 */
-  status?: DatePickerStatus;
-  /** 是否显示清除按钮 */
-  allowClear?: boolean;
-  /** 是否只读 */
-  readOnly?: boolean;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 自定义样式类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 获取焦点回调 */
-  onFocus?: (_event: ITouchEvent) => void;
-  /** 失去焦点回调 */
-  onBlur?: (_event: ITouchEvent) => void;
-  /** 点击回调 */
-  onClick?: (_event: ITouchEvent) => void;
-  /** 面板打开回调 */
-  onOpenChange?: (_open: boolean) => void;
-  /** 最小日期 */
-  minDate?: Date;
-  /** 最大日期 */
-  maxDate?: Date;
-  /** 显示时间选择 */
-  showTime?: boolean;
-  /** 时间格式 */
-  timeFormat?: string;
-  /** 自定义日期单元格渲染 */
-  dateRender?: (_currentDate: Date) => ReactNode;
-  /** 自定义面板头部渲染 */
-  renderExtraFooter?: () => ReactNode;
-  /** 是否启用无障碍访问 */
-  accessible?: boolean;
-  /** 无障碍标签 */
-  accessibilityLabel?: string;
-  /** 无障碍角色 */
-  accessibilityRole?: string;
-}
-
-/** 日期选择器组件引用类型 */
-export type DatePickerRef = {
-  /** 获取当前值 */
-  getValue: () => Date | null;
-  /** 设置值 */
-  setValue: (_value: Date | null) => void;
-  /** 获取范围值 */
-  getRangeValue: () => DateRange | null;
-  /** 设置范围值 */
-  setRangeValue: (_value: DateRange | null) => void;
-  /** 获取格式化字符串 */
-  getDateString: () => string;
-  /** 获取范围格式化字符串 */
-  getRangeDateString: () => [string, string] | null;
-  /** 聚焦 */
-  focus: () => void;
-  /** 失焦 */
-  blur: () => void;
-  /** 打开面板 */
-  open: () => void;
-  /** 关闭面板 */
-  close: () => void;
-  /** 清除值 */
-  clear: () => void;
-  /** 禁用 */
-  disable: () => void;
-  /** 启用 */
-  enable: () => void;
-  /** 是否打开 */
-  isOpen: () => boolean;
-  /** 是否禁用 */
-  isDisabled: () => boolean;
-  /** 是否只读 */
-  isReadOnly: () => boolean;
-  /** 获取DOM元素 */
-  element: HTMLDivElement | null;
-};
-
-/** 日期选择器工具函数接口 */
-export interface DatePickerUtils {
-  /** 格式化日期 */
-  formatDate: (_date: Date, format: DatePickerFormat) => string;
-  /** 解析日期字符串 */
-  parseDate: (_dateString: string, format: DatePickerFormat) => Date | null;
-  /** 日期是否在范围内 */
-  isDateInRange: (_date: Date, min?: Date, max?: Date) => boolean;
-  /** 日期是否相等 */
-  isSameDate: (_date1: Date, date2: Date) => boolean;
-  /** 日期是否在同一月 */
-  isSameMonth: (_date1: Date, date2: Date) => boolean;
-  /** 日期是否在同一年 */
-  isSameYear: (_date1: Date, date2: Date) => boolean;
-  /** 获取月份天数 */
-  getDaysInMonth: (_year: number, month: number) => number;
-  /** 获取月份第一天 */
-  getFirstDayOfMonth: (_year: number, month: number) => Date;
-  /** 获取月份最后一天 */
-  getLastDayOfMonth: (_year: number, month: number) => Date;
-  /** 获取月份信息 */
-  getMonthInfo: (
-    year: number,
-    month: number,
-  ) => {
-    firstDay: Date;
-    lastDay: Date;
-    days: number;
-    startDay: number;
-  };
-  /** 日期加减 */
-  addDays: (_date: Date, days: number) => Date;
-  /** 月份加减 */
-  addMonths: (_date: Date, months: number) => Date;
-  /** 年份加减 */
-  addYears: (_date: Date, years: number) => Date;
-  /** 获取日期范围 */
-  getDateRange: (_start: Date, end: Date) => Date[];
-  /** 验证日期 */
-  isValidDate: (_date: Date) => boolean;
-  /** 获取时间戳 */
-  getTimestamp: (_date: Date) => number;
-  /** 从时间戳创建日期 */
-  fromDateTimestamp: (_timestamp: number) => Date;
-}
-
-/** 日期选择器样式配置接口 */
-export interface DatePickerStyleConfig {
-  /** 基础样式 */
-  base: React.CSSProperties;
-  /** 尺寸样式 */
-  sizes: Record<DatePickerSize, React.CSSProperties>;
-  /** 变体样式 */
-  variants: Record<DatePickerVariant, React.CSSProperties>;
-  /** 状态样式 */
-  statuses: Record<DatePickerStatus, React.CSSProperties>;
-  /** 输入框样式 */
-  input: React.CSSProperties;
-  /** 输入框尺寸样式 */
-  inputSizes: Record<DatePickerSize, React.CSSProperties>;
-  /** 面板样式 */
-  panel: React.CSSProperties;
-  /** 日历样式 */
-  calendar: React.CSSProperties;
-  /** 日期单元格样式 */
-  cell: React.CSSProperties;
-  /** 选中日期样式 */
-  selectedCell: React.CSSProperties;
-  /** 禁用日期样式 */
-  disabledCell: React.CSSProperties;
-  /** 今日样式 */
-  todayCell: React.CSSProperties;
-  /** 范围选择样式 */
-  rangeCell: React.CSSProperties;
-  /** 清除按钮样式 */
-  clearButton: React.CSSProperties;
-  /** 图标样式 */
-  icon: React.CSSProperties;
-}
-
-/** 日期选择器上下文接口 */
-export interface DatePickerContext {
-  /** 当前值 */
-  value: Date | null;
-  /** 范围值 */
-  rangeValue: DateRange | null;
-  /** 格式 */
-  format: DatePickerFormat;
-  /** 最小日期 */
-  minDate?: Date;
-  /** 最大日期 */
-  maxDate?: Date;
-  /** 禁用日期函数 */
-  disabledDate?: (_date: Date) => boolean;
-  /** 工具函数 */
-  utils: DatePickerUtils;
-  /** 样式配置 */
-  styleConfig: DatePickerStyleConfig;
-  /** 设置值 */
-  setValue: (_value: Date | null) => void;
-  /** 设置范围值 */
-  setRangeValue: (_value: DateRange | null) => void;
-  /** 打开面板 */
-  openPanel: () => void;
-  /** 关闭面板 */
-  closePanel: () => void;
-}

package/src/components/form/DatePicker/index.tsx

@@ -1,15 +0,0 @@
-export { DatePickerComponent as DatePicker } from './DatePicker';
-export type {
-  DatePickerProps,
-  DatePickerRef,
-  DatePickerSize,
-  DatePickerVariant,
-  DatePickerStatus,
-  DatePickerFormat,
-  DateRange,
-  DisabledDate,
-  DatePickerUtils,
-  DatePickerStyleConfig,
-  DatePickerContext,
-} from './DatePicker.types';
-export { datePickerStyles } from './DatePicker.styles';