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

package/dist/Calendar/MonthPanel.js

@@ -1,76 +1,73 @@
-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 { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { isEmpty, isNotEmpty } from "../Util";
+import { useClassNames } from "../hooks";
+import CalendarContext from "./CalendarContext";
+import { initDate } from "./util";
+var MonthPanel = function MonthPanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onPickMonth = props.onPickMonth;
+  var _useClassNames = useClassNames('picker-panel'),
+    e = _useClassNames.e,
+    b = _useClassNames.b;
+  var _useContext = useContext(CalendarContext),
+    valueProp = _useContext.value,
+    dateType = _useContext.dateType,
+    disabledDate = _useContext.disabledDate;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var monthsI18n = useMemo(function () {
+    return dayjs().locale('en').localeData().monthsShort().map(function (_) {
+      return _.toLowerCase();
+    });
+  }, []);
 
-// src/Calendar/MonthPanel.tsx
-var MonthPanel_exports = {};
-__export(MonthPanel_exports, {
-  default: () => MonthPanel_default
-});
-module.exports = __toCommonJS(MonthPanel_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 MonthPanel = (props) => {
-  const { value, valueRange, onPickMonth } = 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 === "monthrange" && ((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 === 'monthrange' && (isNotEmpty(valueRange[0]) && isNotEmpty(valueRange[1]) || isEmpty(valueRange[0]) && isEmpty(valueRange[1]));
   }, [dateType, valueRange]);
-  const startDate = (0, import_react.useMemo)(() => {
-    var _a;
-    if (dateType === "monthrange" && (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 === 'monthrange' && 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 === "monthrange") {
-      if ((0, import_Util.isNotEmpty)(valueRange[1])) {
+
+  // 日期范围时的结束日期
+  // 有默认日期时则为默认日期，没有时根据悬浮日期与开始日期动态比较获取
+  var endDate = useMemo(function () {
+    if (dateType === 'monthrange') {
+      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,79 +75,109 @@ var MonthPanel = (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 months = [];
-    for (let i = 0; i < 12; i++) {
-      const month = currentDate.month(i);
-      months.push({ text: i, type: "current", disabled: disabledDate && disabledDate(month.toDate()) });
+  var rows = useMemo(function () {
+    var months = [];
+    for (var i = 0; i < 12; i++) {
+      var month = currentDate.month(i);
+      months.push({
+        text: i,
+        type: 'current',
+        disabled: disabledDate && disabledDate(month.toDate())
+      });
     }
     return months;
   }, [currentDate, disabledDate]);
-  const getCellClass = (0, import_react.useCallback)(
-    ({ text, disabled }) => {
-      const classes = [""];
-      const month = currentDate.month(text);
-      if (month.isSame(today, "month")) {
-        classes.push("today");
-      }
-      if (disabled) {
-        return "disabled";
-      }
-      if (dateType === "monthrange") {
-        if (month.isSame(endDate) && month.isSame(startDate)) {
-          classes.push("in-range start-date end-date");
-        } else if (month.isSame(startDate)) {
-          classes.push("in-range start-date");
-        } else if (month.isBetween(startDate, endDate, null, "()")) {
-          classes.push("in-range");
-        } else if (month.isSame(endDate)) {
-          classes.push("in-range end-date");
-        }
-      } else {
-        if (valueProp) {
-          if (month.isSame(valueProp, "month")) {
-            classes.push("current");
-          }
-        }
+  var getCellClass = useCallback(function (_ref) {
+    var text = _ref.text,
+      disabled = _ref.disabled;
+    var classes = [''];
+    var month = currentDate.month(text);
+    if (month.isSame(today, 'month')) {
+      classes.push('today');
+    }
+    if (disabled) {
+      return 'disabled';
+    }
+    // 日期范围时的样式
+    if (dateType === 'monthrange') {
+      if (month.isSame(endDate) && month.isSame(startDate)) {
+        classes.push('in-range start-date end-date');
+      } else if (month.isSame(startDate)) {
+        classes.push('in-range start-date');
+      } else if (month.isBetween(startDate, endDate, null, '()')) {
+        classes.push('in-range');
+      } else if (month.isSame(endDate)) {
+        classes.push('in-range end-date');
       }
-      return (0, import_classnames.default)(...classes);
-    },
-    [currentDate, dateType, endDate, startDate, today, valueProp]
-  );
-  const onHoverDate = (0, import_react.useCallback)(
-    ({ text }) => {
-      if (dateType === "monthrange") {
-        if (!lockHover) {
-          const month = currentDate.month(text);
-          onPickMonth == null ? void 0 : onPickMonth(month, text, true);
-        } else {
-          onPickMonth == null ? void 0 : onPickMonth(null, text, true);
+    } else {
+      if (valueProp) {
+        if (month.isSame(valueProp, 'month')) {
+          classes.push('current');
         }
       }
-    },
-    [currentDate, dateType, lockHover, onPickMonth]
-  );
-  const handlePickMonth = (0, import_react.useCallback)(
-    ({ type, text, disabled }) => {
-      if (disabled) {
-        return;
-      }
-      if (type === "special") {
-        onPickMonth == null ? void 0 : onPickMonth(currentDate.month(text + 1), text);
+    }
+    return classNames.apply(void 0, classes);
+  }, [currentDate, dateType, endDate, startDate, today, valueProp]);
+
+  /**
+   * 悬浮日期回调
+   * @param param0
+   */
+  var onHoverDate = useCallback(function (_ref2) {
+    var text = _ref2.text;
+    if (dateType === 'monthrange') {
+      if (!lockHover) {
+        var month = currentDate.month(text);
+        onPickMonth === null || onPickMonth === void 0 || onPickMonth(month, text, true);
       } else {
-        onPickMonth == null ? void 0 : onPickMonth(currentDate.month(text), text);
+        onPickMonth === null || onPickMonth === void 0 || onPickMonth(null, text, true);
       }
-    },
-    [currentDate, onPickMonth]
-  );
-  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("month-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: () => handlePickMonth(cell), onMouseEnter: () => onHoverDate(cell) }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { className: "cell" }, cell.type === "special" ? "00" : `${cell.text + 1}月`)));
+    }
+  }, [currentDate, dateType, lockHover, onPickMonth]);
+  var handlePickMonth = useCallback(function (_ref3) {
+    var type = _ref3.type,
+      text = _ref3.text,
+      disabled = _ref3.disabled;
+    if (disabled) {
+      return;
+    }
+    if (type === 'special') {
+      onPickMonth === null || onPickMonth === void 0 || onPickMonth(currentDate.month(text + 1), text);
+    } else {
+      onPickMonth === null || onPickMonth === void 0 || onPickMonth(currentDate.month(text), text);
+    }
+  }, [currentDate, onPickMonth]);
+  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('month-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 handlePickMonth(cell);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return onHoverDate(cell);
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+        className: "cell"
+      }, t('el.datepicker.months.' + monthsI18n[cell.text], {
+        lng: locale
+      }))));
     }));
   }))));
 };
-MonthPanel.displayName = "Calendar.MonthPanel";
-var MonthPanel_default = MonthPanel;
+MonthPanel.displayName = 'Calendar.MonthPanel';
+export default MonthPanel;

package/dist/Calendar/MonthRangePanel.js

@@ -1,144 +1,171 @@
-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 MonthPanel from "./MonthPanel";
+import { initDate } from "./util";
+var MonthRangePanel = function MonthRangePanel(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 _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var hoverDate = useRef(null);
 
-// src/Calendar/MonthRangePanel.tsx
-var MonthRangePanel_exports = {};
-__export(MonthRangePanel_exports, {
-  default: () => MonthRangePanel_default
-});
-module.exports = __toCommonJS(MonthRangePanel_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_MonthPanel = __toESM(require("./MonthPanel"));
-var import_util = require("./util");
-var MonthRangePanel = (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].isAfter(value[0], "y") || !value[0]) {
-        const date = value[1];
+      if (value[0] && value[1].isAfter(value[0], 'y') || !value[0]) {
+        var date = value[1];
         if (date.isValid()) {
           return date;
         }
       }
     }
-    return startDate.add(1, "y");
+    return startDate.add(1, 'y');
   }, [value, startDate]);
-  const disabledForwards = (0, import_react.useMemo)(() => startDate.year() + 1 === endDate.year(), [endDate, startDate]);
-  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);
+  var disabledForwards = useMemo(function () {
+    return startDate.year() + 1 === endDate.year();
+  }, [endDate, startDate]);
+
+  /**
+   * 切换年月
+   * @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 onPickMonth = useCallback(function (date, month) {
+    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 onPickMonth = (0, import_react.useCallback)(
-    (date, month, 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(MonthPanel, {
+    value: startDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["content"]))), is(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["left"])))),
+    onPickMonth: onPickMonth
+  }, /*#__PURE__*/React.createElement(Header, {
+    year: startDate.year() + t('el.datepicker.year', {
+      lng: locale
+    }),
+    month: t("el.datepicker.month".concat(startDate.month() + 1), {
+      lng: locale
+    }),
+    showForward: !unlinkPanels,
+    plain: unlinkPanels,
+    prefix: "date-range-picker",
+    postion: "left",
+    showMonth: false,
+    onToggleView: props.onToggleView,
+    disabledForwards: disabledForwards,
+    onMoveBackward: function onMoveBackward() {
+      return switchDate(-1, 'M', 'left');
+    },
+    onMoveForward: function onMoveForward() {
+      return switchDate(1, 'M', 'left');
+    },
+    onMoveBackwards: function onMoveBackwards() {
+      return switchDate(-1, 'y', 'left');
     },
-    [onHoverDate, onPickDateRange, valueRange]
-  );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_MonthPanel.default, { value: startDate, valueRange, className: (0, import_classnames.default)(e`content`, is`left`), onPickMonth }, /* @__PURE__ */ import_react.default.createElement(
-    import_Header.default,
-    {
-      year: startDate.year() + "年",
-      month: `${startDate.month() + 1}月`,
-      showForward: !unlinkPanels,
-      plain: unlinkPanels,
-      prefix: "date-range-picker",
-      postion: "left",
-      showMonth: false,
-      onToggleView: props.onToggleView,
-      disabledForwards,
-      onMoveBackward: () => switchDate(-1, "M", "left"),
-      onMoveForward: () => switchDate(1, "M", "left"),
-      onMoveBackwards: () => switchDate(-1, "y", "left"),
-      onMoveForwards: () => switchDate(1, "y", "left")
+    onMoveForwards: function onMoveForwards() {
+      return switchDate(1, 'y', 'left');
     }
-  )), /* @__PURE__ */ import_react.default.createElement(import_MonthPanel.default, { value: endDate, valueRange, className: (0, import_classnames.default)(e`content`, is`right`), onPickMonth }, /* @__PURE__ */ import_react.default.createElement(
-    import_Header.default,
-    {
-      year: endDate.year() + "年",
-      month: `${endDate.month() + 1}月`,
-      showBackward: !unlinkPanels,
-      plain: unlinkPanels,
-      prefix: "date-range-picker",
-      postion: "right",
-      showMonth: false,
-      onToggleView: props.onToggleView,
-      disabledBackwards: disabledForwards,
-      onMoveBackward: () => switchDate(-1, "M", "right"),
-      onMoveForward: () => switchDate(1, "M", "right"),
-      onMoveBackwards: () => switchDate(-1, "y", "right"),
-      onMoveForwards: () => switchDate(1, "y", "right")
+  })), /*#__PURE__*/React.createElement(MonthPanel, {
+    value: endDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["content"]))), is(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["right"])))),
+    onPickMonth: onPickMonth
+  }, /*#__PURE__*/React.createElement(Header, {
+    year: endDate.year() + t('el.datepicker.year', {
+      lng: locale
+    }),
+    month: t("el.datepicker.month".concat(endDate.month() + 1), {
+      lng: locale
+    }),
+    showBackward: !unlinkPanels,
+    plain: unlinkPanels,
+    prefix: "date-range-picker",
+    postion: "right",
+    showMonth: false,
+    onToggleView: props.onToggleView,
+    disabledBackwards: disabledForwards,
+    onMoveBackward: function onMoveBackward() {
+      return switchDate(-1, 'M', 'right');
+    },
+    onMoveForward: function onMoveForward() {
+      return switchDate(1, 'M', 'right');
+    },
+    onMoveBackwards: function onMoveBackwards() {
+      return switchDate(-1, 'y', 'right');
+    },
+    onMoveForwards: function onMoveForwards() {
+      return switchDate(1, 'y', 'right');
     }
-  )));
+  })));
 };
-MonthRangePanel.displayName = "Calendar.MonthRangePanel";
-var MonthRangePanel_default = MonthRangePanel;
+MonthRangePanel.displayName = 'Calendar.MonthRangePanel';
+export default MonthRangePanel;