one-design-next 0.0.4-alpha.57

package/dist/color-picker/style/index.css

@@ -0,0 +1,153 @@
+html {
+  --odn-cp-input-width: 100px;
+}
+
+[data-odn-cp] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-odn-cp-button] {
+  aspect-ratio: 1/1;
+}
+
+[data-odn-cp-button-inner] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+[data-odn-cp-input] {
+  width: var(--odn-cp-input-width);
+}
+
+[data-odn-cp-input-left] {
+  margin-right: 4px;
+  color: var(--odn-color-text-placeholder);
+}
+
+[data-odn-cp-popup] {
+  padding: 8px;
+  user-select: none;
+  --odn-slider-margin-inline-end: 0;
+  --odn-slider-track-height: 12px;
+  --odn-slider-track-background: transparent;
+  --odn-slider-border-radius: 2px;
+  --odn-slider-handle-width: 8px;
+  --odn-slider-handle-height: 14px;
+  --odn-slider-handle-border-radius: 4px;
+  --odn-slider-tooltip-padding-block: 4px;
+  --odn-slider-tooltip-padding-inline: 8px;
+  --odn-slider-tooltip-font-size: 12px;
+  --odn-slider-tooltip-border-radius: 6px;
+}
+
+[data-odn-cp-popup-panel] {
+  position: relative;
+  margin-bottom: 6px;
+  width: 160px;
+  height: 90px;
+  border-radius: 2px;
+}
+
+[data-odn-cp-popup-panel-s],
+[data-odn-cp-popup-panel-b] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+[data-odn-cp-popup-panel-s] {
+  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+
+[data-odn-cp-popup-panel-b] {
+  background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
+}
+
+[data-odn-cp-popup-panel-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 14px;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
+}
+
+[data-odn-cp-popup-slider-wrapper] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 20px;
+}
+
+[data-odn-cp-popup-slider-wrapper-label] {
+  flex: none;
+  width: 9px;
+  font-size: 12px;
+}
+
+[data-odn-cp-popup-slider] {
+  flex: 1;
+}
+
+[data-odn-cp-popup-slider-h] {
+  --odn-slider-rail-background: linear-gradient(
+    to right,
+    rgb(255, 0, 0) 0%,
+    rgb(255, 255, 0) 17%,
+    rgb(0, 255, 0) 33%,
+    rgb(0, 255, 255) 50%,
+    rgb(0, 0, 255) 67%,
+    rgb(255, 0, 255) 83%,
+    rgb(255, 0, 0) 100%
+  );
+}
+
+[data-odn-cp-popup-collpase-panel-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-odn-cp-popup-collpase-panel-header-icon] {
+  color: var(--odn-color-black-9);
+  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-odn-cp-popup-collpase-panel-header-icon][data-odn-cp-popup-collpase-panel-header-icon-open=true] {
+  transform: rotate(180deg);
+}
+
+[data-odn-cp-popup-collpase-panel-content] {
+  padding: 0 10px 10px;
+}
+
+[data-odn-cp-popup-collpase-panel-content-grid] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+}
+
+[data-odn-cp-popup-collpase-panel-content-grid-item] {
+  aspect-ratio: 1/1;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+[data-odn-cp-popup-with-palettes] {
+  width: 176px;
+}

package/dist/color-picker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import "./index.scss";

package/dist/color-picker/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/config-provider/index.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { adqIconNames } from '../icon';
+export type DefaultIconName = (typeof adqIconNames)[number];
+export type sizeType = 'small' | 'medium' | 'large';
+export interface ConfigConsumerProps {
+    /**
+     * 自定义 icon，需保证 viewBox 为 0 0 16 16
+     */
+    icons?: Record<string, readonly string[]>;
+    /**
+     * 定义 hoverFill 相关表现
+     */
+    hoverFill?: {
+        /**
+         * 是否开启背景共享
+         */
+        sharable?: boolean;
+    };
+}
+export interface ConfigProviderProps<T extends Record<string, readonly string[]>> {
+    /**
+     * 子节点
+     */
+    children: React.ReactNode;
+    /**
+     * 自定义 icon，需保证 viewBox 为 0 0 16 16
+     */
+    icons?: T;
+    /**
+     * 定义 hoverFill 相关表现
+     */
+    hoverFill?: {
+        /**
+         * 是否开启背景共享
+         */
+        sharable?: boolean;
+    };
+}
+/**
+ * 三个 param，权重依次递减
+ */
+export declare const getComputedSize: (size0?: sizeType, size1?: sizeType, size2?: sizeType) => sizeType;
+export declare const ConfigContext: React.Context<ConfigConsumerProps>;
+export declare const ConfigConsumer: React.Consumer<ConfigConsumerProps>;
+declare function ConfigProvider<T extends Record<string, readonly string[]>>({ children, icons, hoverFill, ...otherProps }: ConfigProviderProps<T>): React.JSX.Element;
+export default ConfigProvider;

package/dist/config-provider/index.js

@@ -0,0 +1,37 @@
+var _excluded = ["children", "icons", "hoverFill"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+/**
+ * 三个 param，权重依次递减
+ */
+export var getComputedSize = function getComputedSize(size0, size1, size2) {
+  if (size0 !== 'medium' && size0) {
+    return size0;
+  }
+  if (size1 !== 'medium' && size1) {
+    return size1;
+  }
+  return size2 || size1 || size0 || 'medium';
+};
+export var ConfigContext = /*#__PURE__*/React.createContext({
+  icons: {},
+  hoverFill: {
+    sharable: true
+  }
+});
+export var ConfigConsumer = ConfigContext.Consumer;
+function ConfigProvider(_ref) {
+  var children = _ref.children,
+    icons = _ref.icons,
+    hoverFill = _ref.hoverFill,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ConfigContext.Provider, _extends({
+    value: {
+      icons: icons,
+      hoverFill: hoverFill
+    }
+  }, otherProps), children);
+}
+export default ConfigProvider;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface MonthPickerProps {
+    selectedRange: [Date, Date] | null;
+    lang: 'zhCN' | 'enUS';
+    month: Date | null;
+    minDate: Date;
+    maxDate: Date;
+    disabledMonths?: Date[];
+    onMonthSelect: (monthRange: [Date, Date]) => void;
+    onMonthChange: (date: Date) => void;
+    onCaptionHoverEnter: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    onCaptionHoverLeave: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+}
+declare const MonthPicker: React.FC<MonthPickerProps>;
+export default MonthPicker;

package/dist/date-picker/MonthPicker.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { convertMonthToString, MONTHS, today } from "../_util/date";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+var MonthPicker = function MonthPicker(_ref) {
+  var selectedRange = _ref.selectedRange,
+    lang = _ref.lang,
+    month = _ref.month,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    disabledMonths = _ref.disabledMonths,
+    onMonthSelect = _ref.onMonthSelect,
+    onMonthChange = _ref.onMonthChange,
+    onCaptionHoverEnter = _ref.onCaptionHoverEnter,
+    onCaptionHoverLeave = _ref.onCaptionHoverLeave;
+  // 优先使用 month，如果没有则使用 today，确保始终有有效的年份
+  var monthYear = month ? month.getFullYear() : today.getFullYear();
+  var currentMonthString = convertMonthToString(selectedRange || undefined, lang);
+  var handleMonthSelect = function handleMonthSelect(monthIndex) {
+    var startDate = new Date(monthYear, monthIndex, 1);
+    var endDate = new Date(monthYear, monthIndex + 1, 0);
+    onMonthSelect([startDate, endDate]);
+  };
+  var handleMonthYearChange = function handleMonthYearChange(direction) {
+    var newYear = direction === 'prev' ? monthYear - 1 : monthYear + 1;
+
+    // 如果没有 month，创建一个基于当前年份的日期
+    var newMonth = month ? new Date(month) : new Date(monthYear, 0, 1);
+    newMonth.setFullYear(newYear);
+
+    // 检查边界
+    if (newMonth < minDate) {
+      newMonth.setFullYear(minDate.getFullYear());
+    } else if (newMonth > maxDate) {
+      newMonth.setFullYear(maxDate.getFullYear());
+    }
+    onMonthChange(newMonth);
+  };
+
+  // 计算按钮禁用状态
+  var isPrevDisabled = monthYear <= minDate.getFullYear();
+  var isNextDisabled = monthYear >= maxDate.getFullYear();
+
+  // 计算每个月份是否禁用
+  var isMonthDisabled = function isMonthDisabled(monthIndex) {
+    var monthStart = new Date(monthYear, monthIndex, 1);
+    var monthEnd = new Date(monthYear, monthIndex + 1, 0);
+
+    // 如果月份的开始日期在 minDate 之前，或者结束日期在 maxDate 之后，则禁用
+    if (monthStart < minDate || monthEnd > maxDate) {
+      return true;
+    }
+
+    // 检查是否在 disabledMonths 中
+    if (disabledMonths && disabledMonths.length > 0) {
+      var currentMonthYear = monthYear;
+      var currentMonth = monthIndex;
+
+      // 检查是否有任何 disabledMonths 中的日期属于当前月份
+      return disabledMonths.some(function (disabledDate) {
+        var disabledYear = disabledDate.getFullYear();
+        var disabledMonth = disabledDate.getMonth();
+        return disabledYear === currentMonthYear && disabledMonth === currentMonth;
+      });
+    }
+    return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-popup": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-caption": true
+  }, /*#__PURE__*/React.createElement("button", {
+    "data-odn-date-picker-caption-nav-button": true,
+    "data-odn-date-picker-caption-nav-button-prev": true,
+    "data-odn-date-picker-caption-nav-button-disabled": isPrevDisabled,
+    "data-hover-fill-target": "prev",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!isPrevDisabled) {
+        handleMonthYearChange('prev');
+      }
+    },
+    disabled: isPrevDisabled,
+    onMouseEnter: onCaptionHoverEnter,
+    onMouseLeave: onCaptionHoverLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "left",
+    "data-odn-date-picker-caption-nav-icon": true
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-caption-nav": true
+  }, monthYear, lang === 'zhCN' ? '年' : ''), /*#__PURE__*/React.createElement("button", {
+    "data-odn-date-picker-caption-nav-button": true,
+    "data-odn-date-picker-caption-nav-button-next": true,
+    "data-odn-date-picker-caption-nav-button-disabled": isNextDisabled,
+    "data-hover-fill-target": "next",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!isNextDisabled) {
+        handleMonthYearChange('next');
+      }
+    },
+    disabled: isNextDisabled,
+    onMouseEnter: onCaptionHoverEnter,
+    onMouseLeave: onCaptionHoverLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "right",
+    "data-odn-date-picker-caption-nav-icon": true
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-body": true
+  }, MONTHS.map(function (monthItem, index) {
+    var isDisabled = isMonthDisabled(index);
+    var monthNumber = index + 1;
+    var monthString = "".concat(monthYear, "-").concat(monthNumber.toString().padStart(2, '0'));
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: index,
+      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": currentMonthString === monthString,
+      onClick: function onClick() {
+        if (!isDisabled) {
+          handleMonthSelect(index);
+        }
+      }
+    }, lang === 'zhCN' ? monthItem.zhCN : monthItem.enUS));
+  })));
+};
+export default MonthPicker;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface QuarterPickerProps {
+    selectedRange: [Date, Date] | null;
+    lang: 'zhCN' | 'enUS';
+    month: Date | null;
+    minDate: Date;
+    maxDate: Date;
+    disabledQuarters?: Date[];
+    onQuarterSelect: (quarterRange: [Date, Date]) => void;
+    onMonthChange: (date: Date) => void;
+    onCaptionHoverEnter: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    onCaptionHoverLeave: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+}
+declare const QuarterPicker: React.FC<QuarterPickerProps>;
+export default QuarterPicker;

package/dist/date-picker/QuarterPicker.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { convertQuarterToString, today } from "../_util/date";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+var QuarterPicker = function QuarterPicker(_ref) {
+  var selectedRange = _ref.selectedRange,
+    lang = _ref.lang,
+    month = _ref.month,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    disabledQuarters = _ref.disabledQuarters,
+    onQuarterSelect = _ref.onQuarterSelect,
+    onMonthChange = _ref.onMonthChange,
+    onCaptionHoverEnter = _ref.onCaptionHoverEnter,
+    onCaptionHoverLeave = _ref.onCaptionHoverLeave;
+  // 优先使用 month，如果没有则使用 today，确保始终有有效的年份
+  var quarterYear = month ? month.getFullYear() : today.getFullYear();
+  var currentQuarterString = convertQuarterToString(selectedRange || undefined, lang);
+  var handleQuarterSelect = function handleQuarterSelect(quarter) {
+    var startMonth = (quarter - 1) * 3;
+    var startDate = new Date(quarterYear, startMonth, 1);
+    var endDate = new Date(quarterYear, startMonth + 3, 0);
+    onQuarterSelect([startDate, endDate]);
+  };
+  var handleQuarterYearChange = function handleQuarterYearChange(direction) {
+    var newYear = direction === 'prev' ? quarterYear - 1 : quarterYear + 1;
+
+    // 如果没有 month，创建一个基于当前年份的日期
+    var newMonth = month ? new Date(month) : new Date(quarterYear, 0, 1);
+    newMonth.setFullYear(newYear);
+
+    // 检查边界
+    if (newMonth < minDate) {
+      newMonth.setFullYear(minDate.getFullYear());
+    } else if (newMonth > maxDate) {
+      newMonth.setFullYear(maxDate.getFullYear());
+    }
+    onMonthChange(newMonth);
+  };
+
+  // 计算按钮禁用状态
+  var isPrevDisabled = quarterYear <= minDate.getFullYear();
+  var isNextDisabled = quarterYear >= maxDate.getFullYear();
+
+  // 计算每个季度是否禁用
+  var isQuarterDisabled = function isQuarterDisabled(quarter) {
+    var startMonth = (quarter - 1) * 3;
+    var quarterStart = new Date(quarterYear, startMonth, 1);
+    var quarterEnd = new Date(quarterYear, startMonth + 3, 0);
+
+    // 如果季度的开始日期在 minDate 之前，或者结束日期在 maxDate 之后，则禁用
+    if (quarterStart < minDate || quarterEnd > maxDate) {
+      return true;
+    }
+
+    // 检查是否在 disabledQuarters 中
+    if (disabledQuarters && disabledQuarters.length > 0) {
+      var currentQuarterYear = quarterYear;
+      var currentQuarter = quarter;
+
+      // 检查是否有任何 disabledQuarters 中的日期属于当前季度
+      return disabledQuarters.some(function (disabledDate) {
+        var disabledYear = disabledDate.getFullYear();
+        var disabledMonth = disabledDate.getMonth();
+        var disabledQuarter = Math.floor(disabledMonth / 3) + 1;
+        return disabledYear === currentQuarterYear && disabledQuarter === currentQuarter;
+      });
+    }
+    return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-popup": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-caption": true
+  }, /*#__PURE__*/React.createElement("button", {
+    "data-odn-date-picker-caption-nav-button": true,
+    "data-odn-date-picker-caption-nav-button-prev": true,
+    "data-odn-date-picker-caption-nav-button-disabled": isPrevDisabled,
+    "data-hover-fill-target": "prev",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!isPrevDisabled) {
+        handleQuarterYearChange('prev');
+      }
+    },
+    disabled: isPrevDisabled,
+    onMouseEnter: onCaptionHoverEnter,
+    onMouseLeave: onCaptionHoverLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "left",
+    "data-odn-date-picker-caption-nav-icon": true
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-caption-nav": true
+  }, quarterYear, lang === 'zhCN' ? '年' : ''), /*#__PURE__*/React.createElement("button", {
+    "data-odn-date-picker-caption-nav-button": true,
+    "data-odn-date-picker-caption-nav-button-next": true,
+    "data-odn-date-picker-caption-nav-button-disabled": isNextDisabled,
+    "data-hover-fill-target": "next",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (!isNextDisabled) {
+        handleQuarterYearChange('next');
+      }
+    },
+    disabled: isNextDisabled,
+    onMouseEnter: onCaptionHoverEnter,
+    onMouseLeave: onCaptionHoverLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "right",
+    "data-odn-date-picker-caption-nav-icon": true
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-grid-body": true
+  }, [1, 2, 3, 4].map(function (quarter) {
+    var isDisabled = isQuarterDisabled(quarter);
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: quarter,
+      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": currentQuarterString === "".concat(quarterYear, "-Q").concat(quarter),
+      onClick: function onClick() {
+        if (!isDisabled) {
+          handleQuarterSelect(quarter);
+        }
+      }
+    }, "Q", quarter));
+  })));
+};
+export default QuarterPicker;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './style';
+interface YearPickerProps {
+    selectedRange: [Date, Date] | null;
+    lang: 'zhCN' | 'enUS';
+    month: Date | null;
+    minDate: Date;
+    maxDate: Date;
+    disabledYears?: Date[];
+    onYearSelect: (yearRange: [Date, Date]) => void;
+}
+declare const YearPicker: React.FC<YearPickerProps>;
+export default YearPicker;

package/dist/date-picker/YearPicker.js

@@ -0,0 +1,81 @@
+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，确保始终有有效的年份
+  var currentYear = month ? month.getFullYear() : today.getFullYear();
+  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 maxYear = maxDate.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-year-body": 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;