@qsxy/element-plus-react 1.0.0-next.7 → 1.0.1

package/dist/Calendar/YearPanel.js

@@ -1,76 +1,62 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import React, { useCallback, useContext, useMemo } from 'react';
+import { isEmpty, isNotEmpty } from "../Util";
+import { useClassNames } from "../hooks";
+import CalendarContext from "./CalendarContext";
+import { initDate } from "./util";
+var YearPanel = function YearPanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onPickYear = props.onPickYear;
+  var _useClassNames = useClassNames('picker-panel'),
+    e = _useClassNames.e,
+    b = _useClassNames.b;
+  var _useContext = useContext(CalendarContext),
+    valueProp = _useContext.value,
+    dateType = _useContext.dateType,
+    disabledDate = _useContext.disabledDate;
 
-// src/Calendar/YearPanel.tsx
-var YearPanel_exports = {};
-__export(YearPanel_exports, {
-  default: () => YearPanel_default
-});
-module.exports = __toCommonJS(YearPanel_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_dayjs = __toESM(require("dayjs"));
-var import_react = __toESM(require("react"));
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_CalendarContext = __toESM(require("./CalendarContext"));
-var import_util = require("./util");
-var YearPanel = (props) => {
-  const { value, valueRange, onPickYear } = props;
-  const { e, b } = (0, import_hooks.useClassNames)("picker-panel");
-  const { value: valueProp, dateType, disabledDate } = (0, import_react.useContext)(import_CalendarContext.default);
-  const currentDate = (0, import_react.useMemo)(() => {
+  // 当前日期
+  var currentDate = useMemo(function () {
     if (value.isValid()) {
       return value;
     }
-    return (0, import_util.initDate)();
+    return initDate();
   }, [value]);
-  const lockHover = (0, import_react.useMemo)(() => {
-    return dateType === "yearrange" && ((0, import_Util.isNotEmpty)(valueRange[0]) && (0, import_Util.isNotEmpty)(valueRange[1]) || (0, import_Util.isEmpty)(valueRange[0]) && (0, import_Util.isEmpty)(valueRange[1]));
+
+  /**
+   * 当两个日期同时为空和不为空时，锁定鼠标悬浮样式
+   */
+  var lockHover = useMemo(function () {
+    return dateType === 'yearrange' && (isNotEmpty(valueRange[0]) && isNotEmpty(valueRange[1]) || isEmpty(valueRange[0]) && isEmpty(valueRange[1]));
   }, [dateType, valueRange]);
-  const startDate = (0, import_react.useMemo)(() => {
-    var _a;
-    if (dateType === "yearrange" && (0, import_Util.isNotEmpty)(valueRange[0])) {
-      if ((0, import_Util.isNotEmpty)(valueRange[2])) {
-        return valueRange[2].isSame(valueRange[0]) || ((_a = valueRange[2]) == null ? void 0 : _a.isAfter(valueRange[0])) ? valueRange[0] : valueRange[2];
+
+  // 日期范围时的开始日期，与悬浮日期动态比较获取
+  var startDate = useMemo(function () {
+    if (dateType === 'yearrange' && isNotEmpty(valueRange[0])) {
+      if (isNotEmpty(valueRange[2])) {
+        var _valueRange$;
+        return valueRange[2].isSame(valueRange[0]) || (_valueRange$ = valueRange[2]) !== null && _valueRange$ !== void 0 && _valueRange$.isAfter(valueRange[0]) ? valueRange[0] : valueRange[2];
       }
       return valueRange[0];
     }
     return null;
   }, [dateType, valueRange]);
-  const endDate = (0, import_react.useMemo)(() => {
-    var _a;
-    if (dateType === "yearrange") {
-      if ((0, import_Util.isNotEmpty)(valueRange[1])) {
+
+  // 日期范围时的结束日期
+  // 有默认日期时则为默认日期，没有时根据悬浮日期与开始日期动态比较获取
+  var endDate = useMemo(function () {
+    if (dateType === 'yearrange') {
+      if (isNotEmpty(valueRange[1])) {
         return valueRange[1];
       } else {
-        if ((0, import_Util.isNotEmpty)(valueRange[0])) {
-          if ((0, import_Util.isNotEmpty)(valueRange[2])) {
-            return valueRange[2].isSame(valueRange[0]) || ((_a = valueRange[2]) == null ? void 0 : _a.isBefore(valueRange[0])) ? valueRange[0] : valueRange[2];
+        if (isNotEmpty(valueRange[0])) {
+          if (isNotEmpty(valueRange[2])) {
+            var _valueRange$2;
+            return valueRange[2].isSame(valueRange[0]) || (_valueRange$2 = valueRange[2]) !== null && _valueRange$2 !== void 0 && _valueRange$2.isBefore(valueRange[0]) ? valueRange[0] : valueRange[2];
           }
           return valueRange[0];
         }
@@ -78,81 +64,120 @@ var YearPanel = (props) => {
       }
     }
   }, [dateType, valueRange]);
-  const today = (0, import_react.useMemo)(() => {
-    return (0, import_dayjs.default)();
+
+  // 今天
+  var today = useMemo(function () {
+    return dayjs();
   }, []);
-  const rows = (0, import_react.useMemo)(() => {
-    const years = [];
-    const curYear = currentDate.year();
-    const position = currentDate.year() % 10;
-    for (let i = position; i > 0; i--) {
-      years.push({ text: curYear - i, type: "current", disabled: disabledDate && disabledDate(currentDate.year(curYear - i).toDate()) });
+  var rows = useMemo(function () {
+    var years = [];
+    // 当前年份
+    var curYear = currentDate.year();
+    // 当前年份在本年代的位置
+    var position = currentDate.year() % 10;
+    // 10年前一年
+    // years.push({ text: curYear - position - 1, type: 'prev', disabled: disabledDate && disabledDate(currentDate.year(curYear - position - 1).toDate()) });
+    for (var i = position; i > 0; i--) {
+      years.push({
+        text: curYear - i,
+        type: 'current',
+        disabled: disabledDate && disabledDate(currentDate.year(curYear - i).toDate())
+      });
     }
-    for (let i = 0; i < 10 - position; i++) {
-      years.push({ text: curYear + i, type: "current", disabled: disabledDate && disabledDate(currentDate.year(curYear + i).toDate()) });
+    for (var _i = 0; _i < 10 - position; _i++) {
+      years.push({
+        text: curYear + _i,
+        type: 'current',
+        disabled: disabledDate && disabledDate(currentDate.year(curYear + _i).toDate())
+      });
     }
+    // 10年一年
+    // years.push({ text: curYear + (10 - position), type: 'next', disabled: disabledDate && disabledDate(currentDate.year(curYear + (10 - position)).toDate()) });
     return years;
   }, [currentDate, disabledDate]);
-  const getCellClass = (0, import_react.useCallback)(
-    ({ text, type, disabled }) => {
-      if (type === "current") {
-        const classes = [""];
-        const year = currentDate.year(text);
-        if (year.isSame(today, "year")) {
-          classes.push("today");
-        }
-        if (disabled) {
-          classes.push("disabled");
-        }
-        if (dateType === "yearrange") {
-          if (year.isSame(endDate) && year.isSame(startDate)) {
-            classes.push("in-range start-date end-date");
-          } else if (year.isSame(startDate)) {
-            classes.push("in-range start-date");
-          } else if (year.isBetween(startDate, endDate, null, "()")) {
-            classes.push("in-range");
-          } else if (year.isSame(endDate)) {
-            classes.push("in-range end-date");
-          }
-        } else {
-          if (valueProp && year.isSame(valueProp, "year")) {
-            classes.push("current");
-          }
+  var getCellClass = useCallback(function (_ref) {
+    var text = _ref.text,
+      type = _ref.type,
+      disabled = _ref.disabled;
+    if (type === 'current') {
+      var classes = [''];
+      var year = currentDate.year(text);
+      if (year.isSame(today, 'year')) {
+        classes.push('today');
+      }
+      if (disabled) {
+        classes.push('disabled');
+      }
+
+      // 日期范围时的样式
+      if (dateType === 'yearrange') {
+        if (year.isSame(endDate) && year.isSame(startDate)) {
+          classes.push('in-range start-date end-date');
+        } else if (year.isSame(startDate)) {
+          classes.push('in-range start-date');
+        } else if (year.isBetween(startDate, endDate, null, '()')) {
+          classes.push('in-range');
+        } else if (year.isSame(endDate)) {
+          classes.push('in-range end-date');
         }
-        return (0, import_classnames.default)(...classes);
       } else {
-        return `${type}-year`;
-      }
-    },
-    [currentDate, dateType, endDate, startDate, today, valueProp]
-  );
-  const onHoverDate = (0, import_react.useCallback)(
-    ({ text }) => {
-      if (dateType === "yearrange") {
-        if (!lockHover) {
-          const year = currentDate.year(text);
-          onPickYear == null ? void 0 : onPickYear(year, text, true);
-        } else {
-          onPickYear == null ? void 0 : onPickYear(null, text, true);
+        if (valueProp && year.isSame(valueProp, 'year')) {
+          classes.push('current');
         }
       }
-    },
-    [currentDate, dateType, lockHover, onPickYear]
-  );
-  const handlePickYear = (0, import_react.useCallback)(
-    ({ text, disabled }) => {
-      if (disabled) {
-        return;
+      return classNames.apply(void 0, classes);
+    } else {
+      return "".concat(type, "-year");
+    }
+  }, [currentDate, dateType, endDate, startDate, today, valueProp]);
+
+  /**
+   * 悬浮日期回调
+   * @param param0
+   */
+  var onHoverDate = useCallback(function (_ref2) {
+    var text = _ref2.text;
+    if (dateType === 'yearrange') {
+      if (!lockHover) {
+        var year = currentDate.year(text);
+        onPickYear === null || onPickYear === void 0 || onPickYear(year, text, true);
+      } else {
+        onPickYear === null || onPickYear === void 0 || onPickYear(null, text, true);
       }
-      onPickYear == null ? void 0 : onPickYear(currentDate.year(text), text);
-    },
-    [currentDate, onPickYear]
-  );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`content`, props.className) }, props.children, /* @__PURE__ */ import_react.default.createElement("table", { cellSpacing: "0", cellPadding: "0", className: b("year-table", false) }, /* @__PURE__ */ import_react.default.createElement("tbody", null, new Array(4).fill("").map((_, i) => {
-    return /* @__PURE__ */ import_react.default.createElement("tr", { key: i }, rows.slice(i * 4, (i + 1) * 4).map((cell) => {
-      return /* @__PURE__ */ import_react.default.createElement("td", { key: cell.text, className: getCellClass(cell), onClick: () => handlePickYear(cell), onMouseEnter: () => onHoverDate(cell) }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { className: "cell" }, cell.text)));
+    }
+  }, [currentDate, dateType, lockHover, onPickYear]);
+  var handlePickYear = useCallback(function (_ref3) {
+    var text = _ref3.text,
+      disabled = _ref3.disabled;
+    if (disabled) {
+      return;
+    }
+    onPickYear === null || onPickYear === void 0 || onPickYear(currentDate.year(text), text);
+  }, [currentDate, onPickYear]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["content"]))), props.className)
+  }, props.children, /*#__PURE__*/React.createElement("table", {
+    cellSpacing: "0",
+    cellPadding: "0",
+    className: b('year-table', false)
+  }, /*#__PURE__*/React.createElement("tbody", null, new Array(4).fill('').map(function (_, i) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: i
+    }, rows.slice(i * 4, (i + 1) * 4).map(function (cell) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: cell.text,
+        className: getCellClass(cell),
+        onClick: function onClick() {
+          return handlePickYear(cell);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return onHoverDate(cell);
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+        className: "cell"
+      }, cell.text)));
     }));
   }))));
 };
-YearPanel.displayName = "Calendar.YearPanel";
-var YearPanel_default = YearPanel;
+YearPanel.displayName = 'Calendar.YearPanel';
+export default YearPanel;

package/dist/Calendar/YearRangePanel.js

@@ -1,152 +1,172 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { isEmpty, isNotEmpty } from "../Util";
+import { useClassNames } from "../hooks";
+import CalendarContext from "./CalendarContext";
+import Header from "./Header";
+import YearPanel from "./YearPanel";
+import { initDate } from "./util";
+var YearRangePanel = function YearRangePanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onPickDateRange = props.onPickDateRange,
+    onHoverDate = props.onHoverDate;
+  var _useClassNames = useClassNames('date-range-picker'),
+    e = _useClassNames.e,
+    is = _useClassNames.is;
+  var _useContext = useContext(CalendarContext),
+    unlinkPanels = _useContext.unlinkPanels;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var hoverDate = useRef(null);
 
-// src/Calendar/YearRangePanel.tsx
-var YearRangePanel_exports = {};
-__export(YearRangePanel_exports, {
-  default: () => YearRangePanel_default
-});
-module.exports = __toCommonJS(YearRangePanel_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_CalendarContext = __toESM(require("./CalendarContext"));
-var import_Header = __toESM(require("./Header"));
-var import_YearPanel = __toESM(require("./YearPanel"));
-var import_util = require("./util");
-var YearRangePanel = (props) => {
-  const { value, valueRange, onPickDateRange, onHoverDate } = props;
-  const { e, is } = (0, import_hooks.useClassNames)("date-range-picker");
-  const { unlinkPanels } = (0, import_react.useContext)(import_CalendarContext.default);
-  const hoverDate = (0, import_react.useRef)(null);
-  const startDate = (0, import_react.useMemo)(() => {
+  // 开始日期
+  var startDate = useMemo(function () {
     if (value[0]) {
-      const date = value[0];
+      var date = value[0];
       if (date.isValid()) {
         return date;
       }
     }
-    return (0, import_util.initDate)();
+    return initDate();
   }, [value]);
-  const endDate = (0, import_react.useMemo)(() => {
+
+  /**
+   * 结束日期
+   * 当结束日期不为空且大于开始日期时有效
+   * 开始日期为空但有结束日期不为空时也有效
+   */
+  var endDate = useMemo(function () {
     if (value[1]) {
-      if (value[0] && value[1].diff(value[0], "y") > 9 || !value[0]) {
-        const date = value[1];
+      // if (value[1].diff(value[0], 'y') <= 9) {
+      //     return startDate.add(10, 'y')
+      // }
+      if (value[0] && value[1].diff(value[0], 'y') > 9 || !value[0]) {
+        var date = value[1];
         if (date.isValid()) {
           return date;
         }
       }
     }
-    return startDate.add(10, "y");
+    return startDate.add(10, 'y');
   }, [value, startDate]);
-  const disabledForwards = (0, import_react.useMemo)(() => {
-    const curYear = startDate.year();
-    const position = startDate.year() % 10;
+  var disabledForwards = useMemo(function () {
+    var curYear = startDate.year();
+    var position = startDate.year() % 10;
     return curYear + (9 - position) + 1 == endDate.year() - endDate.year() % 10;
   }, [endDate, startDate]);
-  const leftYear = (0, import_react.useMemo)(() => {
-    const curYear = startDate.year();
-    const position = startDate.year() % 10;
-    return `${curYear - position} ~ ${curYear + (9 - position)}`;
+
+  // 当前年份
+  var leftYear = useMemo(function () {
+    var curYear = startDate.year();
+    var position = startDate.year() % 10;
+    return "".concat(curYear - position, " ").concat(t('el.datepicker.year', {
+      lng: locale
+    }), " - ").concat(curYear + (9 - position), " ").concat(t('el.datepicker.year', {
+      lng: locale
+    }));
   }, [startDate]);
-  const rightYear = (0, import_react.useMemo)(() => {
-    const curYear = endDate.year();
-    const position = endDate.year() % 10;
-    return `${curYear - position} ~ ${curYear + (9 - position)}`;
+
+  // 当前年份
+  var rightYear = useMemo(function () {
+    var curYear = endDate.year();
+    var position = endDate.year() % 10;
+    return "".concat(curYear - position, " ~ ").concat(curYear + (9 - position));
   }, [endDate]);
-  const switchDate = (0, import_react.useCallback)(
-    (duration, unit, positon) => {
-      if (unlinkPanels) {
-        const start = startDate.add(duration, unit);
-        const end = endDate.add(duration, unit);
-        onPickDateRange == null ? void 0 : onPickDateRange([start, end], false);
-      } else {
-        const start = positon === "left" ? startDate.add(duration, unit) : startDate;
-        const end = positon === "right" ? endDate.add(duration, unit) : endDate;
-        onPickDateRange == null ? void 0 : onPickDateRange([start, end], false);
+
+  /**
+   * 切换年月
+   * @param unlinkPanels 在范围选择器里取消两个日期面板之间的联动
+   */
+  var switchDate = useCallback(function (duration, unit, positon) {
+    if (unlinkPanels) {
+      var start = startDate.add(duration, unit);
+      var end = endDate.add(duration, unit);
+      onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([start, end], false);
+    } else {
+      var _start = positon === 'left' ? startDate.add(duration, unit) : startDate;
+      var _end = positon === 'right' ? endDate.add(duration, unit) : endDate;
+      onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([_start, _end], false);
+    }
+  }, [unlinkPanels, startDate, endDate, onPickDateRange]);
+
+  /**
+   * 选中或悬浮日期后的回调
+   * @param date
+   * @param hover 是否为悬浮日期
+   */
+  var onPickYear = useCallback(function (date, year) {
+    var hover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    // 记录悬浮时的日期，用来处理样式
+    if (hover) {
+      if (isNotEmpty(date)) {
+        hoverDate.current = date;
+        onHoverDate === null || onHoverDate === void 0 || onHoverDate([valueRange[0], valueRange[1], date]);
       }
-    },
-    [unlinkPanels, startDate, endDate, onPickDateRange]
-  );
-  const onPickYear = (0, import_react.useCallback)(
-    (date, year, hover = false) => {
-      if (hover) {
-        if ((0, import_Util.isNotEmpty)(date)) {
-          hoverDate.current = date;
-          onHoverDate == null ? void 0 : onHoverDate([valueRange[0], valueRange[1], date]);
-        }
-      } else {
-        if ((0, import_Util.isEmpty)(valueRange[0]) && (0, import_Util.isEmpty)(valueRange[1]) || (0, import_Util.isNotEmpty)(valueRange[0]) && (0, import_Util.isNotEmpty)(valueRange[1])) {
-          onHoverDate == null ? void 0 : onHoverDate([date, null, hoverDate.current]);
-        } else if (date.isSame(valueRange[0])) {
-          onHoverDate == null ? void 0 : onHoverDate([date, date, hoverDate.current]);
-          onPickDateRange == null ? void 0 : onPickDateRange([date, date], true);
-        } else if (date.isBefore(valueRange[0])) {
-          onHoverDate == null ? void 0 : onHoverDate([date, valueRange[0], hoverDate.current]);
-          onPickDateRange == null ? void 0 : onPickDateRange([date, valueRange[0]], true);
-        } else if (date.isAfter(valueRange[0])) {
-          onHoverDate == null ? void 0 : onHoverDate([valueRange[0], date, hoverDate.current]);
-          onPickDateRange == null ? void 0 : onPickDateRange([valueRange[0], date], true);
-        }
+    } else {
+      // 当两个日期同时为空和不为空时，填充开始日期
+      // 然后判断悬浮日期和开始日期的大小，动态改变两个日期的位置
+      if (isEmpty(valueRange[0]) && isEmpty(valueRange[1]) || isNotEmpty(valueRange[0]) && isNotEmpty(valueRange[1])) {
+        onHoverDate === null || onHoverDate === void 0 || onHoverDate([date, null, hoverDate.current]);
+      } else if (date.isSame(valueRange[0])) {
+        onHoverDate === null || onHoverDate === void 0 || onHoverDate([date, date, hoverDate.current]);
+        onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([date, date], true);
+      } else if (date.isBefore(valueRange[0])) {
+        onHoverDate === null || onHoverDate === void 0 || onHoverDate([date, valueRange[0], hoverDate.current]);
+        onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([date, valueRange[0]], true);
+      } else if (date.isAfter(valueRange[0])) {
+        onHoverDate === null || onHoverDate === void 0 || onHoverDate([valueRange[0], date, hoverDate.current]);
+        onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([valueRange[0], date], true);
       }
+    }
+  }, [onHoverDate, onPickDateRange, valueRange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(YearPanel, {
+    value: startDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["content"]))), is(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["left"])))),
+    onPickYear: onPickYear
+  }, /*#__PURE__*/React.createElement(Header, {
+    year: leftYear,
+    showForward: !unlinkPanels,
+    plain: true,
+    prefix: "date-range-picker",
+    postion: "left",
+    showMonth: false,
+    onToggleView: props.onToggleView,
+    disabledForwards: disabledForwards,
+    onMoveBackwards: function onMoveBackwards() {
+      return switchDate(-10, 'y', 'left');
     },
-    [onHoverDate, onPickDateRange, valueRange]
-  );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_YearPanel.default, { value: startDate, valueRange, className: (0, import_classnames.default)(e`content`, is`left`), onPickYear }, /* @__PURE__ */ import_react.default.createElement(
-    import_Header.default,
-    {
-      year: leftYear,
-      showForward: !unlinkPanels,
-      plain: true,
-      prefix: "date-range-picker",
-      postion: "left",
-      showMonth: false,
-      onToggleView: props.onToggleView,
-      disabledForwards,
-      onMoveBackwards: () => switchDate(-10, "y", "left"),
-      onMoveForwards: () => switchDate(10, "y", "left")
+    onMoveForwards: function onMoveForwards() {
+      return switchDate(10, 'y', 'left');
     }
-  )), /* @__PURE__ */ import_react.default.createElement(import_YearPanel.default, { value: endDate, valueRange, className: (0, import_classnames.default)(e`content`, is`right`), onPickYear }, /* @__PURE__ */ import_react.default.createElement(
-    import_Header.default,
-    {
-      year: rightYear,
-      showBackward: !unlinkPanels,
-      plain: true,
-      prefix: "date-range-picker",
-      postion: "right",
-      showMonth: false,
-      onToggleView: props.onToggleView,
-      disabledBackwards: disabledForwards,
-      onMoveBackwards: () => switchDate(-10, "y", "right"),
-      onMoveForwards: () => switchDate(10, "y", "right")
+  })), /*#__PURE__*/React.createElement(YearPanel, {
+    value: endDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["content"]))), is(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["right"])))),
+    onPickYear: onPickYear
+  }, /*#__PURE__*/React.createElement(Header, {
+    year: rightYear,
+    showBackward: !unlinkPanels,
+    plain: true,
+    prefix: "date-range-picker",
+    postion: "right",
+    showMonth: false,
+    onToggleView: props.onToggleView,
+    disabledBackwards: disabledForwards,
+    onMoveBackwards: function onMoveBackwards() {
+      return switchDate(-10, 'y', 'right');
+    },
+    onMoveForwards: function onMoveForwards() {
+      return switchDate(10, 'y', 'right');
     }
-  )));
+  })));
 };
-YearRangePanel.displayName = "Calendar.YearRangePanel";
-var YearRangePanel_default = YearRangePanel;
+YearRangePanel.displayName = 'Calendar.YearRangePanel';
+export default YearRangePanel;