one-design-next 0.0.4-alpha.100

package/dist/date-picker/YearPicker.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { convertYearToString, today } from "../_util/date";
+import HoverFill from "../hover-fill";
+import "./style";
+var YearPicker = function YearPicker(_ref) {
+  var selectedRange = _ref.selectedRange,
+    lang = _ref.lang,
+    month = _ref.month,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    disabledYears = _ref.disabledYears,
+    onYearSelect = _ref.onYearSelect;
+  // 优先使用 month，如果没有则使用 today，确保始终有有效的年份，且要判断不超过 maxDate
+  var currentYear = month ? month.getFullYear() : today.getFullYear();
+  var maxYear = maxDate.getFullYear();
+  if (currentYear > maxYear) {
+    currentYear = maxYear;
+  }
+  var currentYearString = convertYearToString(selectedRange || undefined, lang);
+  var handleYearSelect = function handleYearSelect(year) {
+    var startDate = new Date(year, 0, 1);
+    var endDate = new Date(year, 11, 31);
+    onYearSelect([startDate, endDate]);
+  };
+
+  // 计算每个年份是否禁用
+  var isYearDisabled = function isYearDisabled(year) {
+    var yearStart = new Date(year, 0, 1);
+    var yearEnd = new Date(year, 11, 31);
+
+    // 如果年份的开始日期在 minDate 之前，或者结束日期在 maxDate 之后，则禁用
+    if (year < minDate.getFullYear() || year > maxDate.getFullYear()) {
+      return true;
+    }
+
+    // 检查是否在 disabledYears 中
+    if (disabledYears && disabledYears.length > 0) {
+      var _currentYear = year;
+
+      // 检查是否有任何 disabledYears 中的日期属于当前年份
+      return disabledYears.some(function (disabledDate) {
+        var disabledYear = disabledDate.getFullYear();
+        return disabledYear === _currentYear;
+      });
+    }
+    return false;
+  };
+
+  // 根据 minDate 和 maxDate 生成年份列表
+  var minYear = minDate.getFullYear();
+  var years = Array.from({
+    length: maxYear - minYear + 1
+  }, function (_, i) {
+    return minYear + i;
+  }).reverse(); // 倒序显示，最新的年份在前面
+
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-popup": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-body": true,
+    "data-odn-date-picker-grid-body-year": true
+  }, years.map(function (year) {
+    var isDisabled = isYearDisabled(year);
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: year,
+      bgStyle: {
+        borderRadius: '6px'
+      },
+      hoverColor: "#F5F8FF",
+      disabled: isDisabled,
+      "data-odn-date-picker-grid-item-wrapper": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-date-picker-grid-item": true,
+      "data-odn-date-picker-grid-item-disabled": isDisabled,
+      "data-odn-date-picker-grid-item-active": currentYearString === "".concat(year),
+      onClick: function onClick() {
+        if (!isDisabled) {
+          handleYearSelect(year);
+        }
+      }
+    }, year));
+  })));
+};
+export default YearPicker;

package/dist/date-picker/index.d.ts

@@ -0,0 +1,240 @@
+import React from 'react';
+import { DayPickerProps } from 'react-day-picker';
+import { type PopoverProps } from '../pop-base';
+import './style';
+export interface DatePickerCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'prefix'> {
+    /**
+     * @description 是否可清空
+     * @default true
+     */
+    allowClear?: boolean;
+    /**
+     * @description 最大日期
+     */
+    maxDate?: Date;
+    /**
+     * @description 最小日期
+     */
+    minDate?: Date;
+    /**
+     * @description 外部控制显示
+     * @default null
+     */
+    visible?: boolean | null;
+    /**
+     * @description 显示回调
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @description 禁用日期 - 在日、周选择器时有效，可配合 minDate 和 maxDate 使用
+     */
+    disabledDays?: Date[] | ((date: Date) => boolean);
+    /**
+     * @description 禁用月份 - 在月选择器时有效，可配合 minDate 和 maxDate 使用；传入 Date 对象，会禁用包含该日期的整个月
+     */
+    disabledMonths?: Date[];
+    /**
+     * @description 禁用季度 - 传入 Date 对象，可配合 minDate 和 maxDate 使用；传入 Date 对象，会禁用包含该日期的整个季度
+     */
+    disabledQuarters?: Date[];
+    /**
+     * @description 禁用年份 - 传入 Date 对象，可配合 minDate 和 maxDate 使用；传入 Date 对象，会禁用包含该日期的整年
+     */
+    disabledYears?: Date[];
+    /**
+     * @description 占位符
+     */
+    placeholder?: string;
+    /**
+     * @description 弹窗渲染
+     */
+    popupRender?: (node: React.ReactNode) => React.ReactNode;
+    /**
+     * @description 禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 语言
+     * @default 'zhCN'
+     */
+    lang?: 'zhCN' | 'enUS';
+    /**
+     * @description 轻量
+     * @default false
+     */
+    light?: boolean;
+    /**
+     * @description 弹窗样式
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * @description 标题布局
+     */
+    captionLayout?: DayPickerProps['captionLayout'];
+    /**
+     * @description 标题导航按钮图标
+     */
+    captionPrevIcon?: React.ReactNode;
+    /**
+     * @description 标题导航按钮图标
+     */
+    captionNextIcon?: React.ReactNode;
+    /**
+     * @description 自定义组件
+     */
+    components?: DayPickerProps['components'];
+    /**
+     * @description 自定义样式
+     */
+    classNames?: DayPickerProps['classNames'];
+    /**
+     * @description 触发元素
+     */
+    triggerElement?: React.ReactNode;
+    /**
+     * @description 选择日期后是否关闭弹窗
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * @description 自定义图标
+     */
+    icon?: React.ReactNode | null;
+    /**
+     * @description 自定义清除图标
+     */
+    clearIcon?: React.ReactNode | null;
+    /**
+     * @description 前缀
+     */
+    prefix?: React.ReactNode;
+    /**
+     * @description 显示的月份数量
+     * @default 1
+     */
+    numberOfMonths?: number;
+    /**
+     * @description Popover 属性透传
+     */
+    popoverProps?: Omit<PopoverProps, 'popup' | 'children'>;
+    /**
+     * @description 日期单元格鼠标进入事件
+     */
+    onDayMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>, info?: {
+        startDate: Date;
+        endDate: Date;
+        year: number;
+        weekIndex: number;
+    }) => void;
+    /**
+     * @description 日期单元格鼠标离开事件
+     */
+    onDayMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>, info?: {
+        startDate: Date;
+        endDate: Date;
+        year: number;
+        weekIndex: number;
+    }) => void;
+    /**
+     * @description 自定义季度渲染函数
+     */
+    renderQuarter?: (quarter: number) => React.ReactNode;
+    /**
+     * @description 月份项鼠标进入事件
+     */
+    onMonthMouseEnter?: (e: React.MouseEvent<HTMLDivElement>, info: {
+        monthIndex: number;
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    /**
+     * @description 月份项鼠标离开事件
+     */
+    onMonthMouseLeave?: (e: React.MouseEvent<HTMLDivElement>, info: {
+        monthIndex: number;
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    /**
+     * @description 季度项鼠标进入事件
+     */
+    onQuarterMouseEnter?: (e: React.MouseEvent<HTMLDivElement>, info: {
+        quarter: number;
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    /**
+     * @description 季度项鼠标离开事件
+     */
+    onQuarterMouseLeave?: (e: React.MouseEvent<HTMLDivElement>, info: {
+        quarter: number;
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+}
+type PickerType = 'day' | 'week' | 'month' | 'quarter' | 'year';
+export type DatePickerProps = (DatePickerCommonProps & {
+    /**
+     * @description 选择器类型
+     * @default 'day'
+     */
+    picker?: 'day';
+    /**
+     * @description 值
+     */
+    value?: Date | null;
+    /**
+     * @description 值变化回调, 参数为日期和 info 对象
+     */
+    onChange?: (date: Date | null, info: {
+        dateString: string;
+    }) => void;
+    /**
+     * @description 快捷选项
+     */
+    shortcuts?: {
+        label: string;
+        value?: Date;
+        active?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    }[];
+    /**
+     * @description 自定义日期格式，当使用自定义格式时，将不提供 input 的输入功能
+     */
+    format?: (date: Date | null, info: {
+        dateString: string;
+    }) => string;
+}) | (DatePickerCommonProps & {
+    /**
+     * @description 选择器类型
+     */
+    picker: Exclude<PickerType, 'day'>;
+    /**
+     * @description 值（区间）
+     */
+    value?: [Date, Date] | null;
+    /**
+     * @description 值变化回调, 参数为日期区间和 info 对象
+     */
+    onChange?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => void;
+    /**
+     * @description 快捷选项
+     */
+    shortcuts?: {
+        label: string;
+        value?: [Date, Date];
+        active?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    }[];
+    /**
+     * @description 自定义日期格式，当使用自定义格式时，将不提供 input 的输入功能
+     */
+    format?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => string;
+});
+declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
+export default DatePicker;