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

package/dist/Calendar/DateRangePanel.js

@@ -1,145 +1,174 @@
-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 DatePanel from "./DatePanel";
+import Header from "./Header";
+import { initDate } from "./util";
+var DateRangePanel = function DateRangePanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onHoverDate = props.onHoverDate,
+    onPickDateRange = props.onPickDateRange;
+  var _useClassNames = useClassNames('date-range-picker'),
+    e = _useClassNames.e,
+    is = _useClassNames.is;
+  var _useContext = useContext(CalendarContext),
+    unlinkPanels = _useContext.unlinkPanels;
+  var hoverDate = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
 
-// src/Calendar/DateRangePanel.tsx
-var DateRangePanel_exports = {};
-__export(DateRangePanel_exports, {
-  default: () => DateRangePanel_default
-});
-module.exports = __toCommonJS(DateRangePanel_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_DatePanel = __toESM(require("./DatePanel"));
-var import_Header = __toESM(require("./Header"));
-var import_util = require("./util");
-var DateRangePanel = (props) => {
-  const { value, valueRange, onHoverDate, onPickDateRange } = 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], "M") || !value[0]) {
-        const date = value[1];
+      if (value[0] && value[1].isAfter(value[0], 'M') || !value[0]) {
+        var date = value[1];
         if (date.isValid()) {
           return date;
         }
       }
     }
-    return startDate.add(1, "M");
+    return startDate.add(1, 'M');
   }, [value, startDate]);
-  const disabledForward = (0, import_react.useMemo)(() => endDate.diff(startDate, "M") <= 1, [endDate, startDate]);
-  const disabledForwards = (0, import_react.useMemo)(() => endDate.diff(startDate, "M") <= 12, [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 disabledForward = useMemo(function () {
+    return endDate.diff(startDate, 'M') <= 1;
+  }, [endDate, startDate]);
+  var disabledForwards = useMemo(function () {
+    return endDate.diff(startDate, 'M') <= 12;
+  }, [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 handlePickDate = useCallback(function (date) {
+    var hover = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 handlePickDate = (0, import_react.useCallback)(
-    (date, 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(DatePanel, {
+    value: startDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["content"]))), is(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["left"])))),
+    onPickDate: handlePickDate
+  }, /*#__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",
+    onToggleView: props.onToggleView,
+    disabledForward: disabledForward,
+    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_DatePanel.default, { value: startDate, valueRange, className: (0, import_classnames.default)(e`content`, is`left`), onPickDate: handlePickDate }, /* @__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",
-      onToggleView: props.onToggleView,
-      disabledForward,
-      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_DatePanel.default, { value: endDate, valueRange, className: (0, import_classnames.default)(e`content`, is`right`), onPickDate: handlePickDate }, /* @__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",
-      onToggleView: props.onToggleView,
-      disabledBackward: disabledForward,
-      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(DatePanel, {
+    value: endDate,
+    valueRange: valueRange,
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["content"]))), is(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["right"])))),
+    onPickDate: handlePickDate
+  }, /*#__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",
+    onToggleView: props.onToggleView,
+    disabledBackward: disabledForward,
+    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');
     }
-  )));
+  })));
 };
-DateRangePanel.displayName = "Calendar.DateRangePanel";
-var DateRangePanel_default = DateRangePanel;
+DateRangePanel.displayName = 'Calendar.DateRangePanel';
+export default DateRangePanel;

package/dist/Calendar/Footer.js

@@ -1,56 +1,64 @@
-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);
-
-// src/Calendar/Footer.tsx
-var Footer_exports = {};
-__export(Footer_exports, {
-  default: () => Footer_default
-});
-module.exports = __toCommonJS(Footer_exports);
-var import_dayjs = __toESM(require("dayjs"));
-var import_react = __toESM(require("react"));
-var import_Button = require("../Button");
-var import_Message = require("../Message");
-var import_hooks = require("../hooks");
-var import_CalendarContext = __toESM(require("./CalendarContext"));
-var Footer = () => {
-  const { e } = (0, import_hooks.useClassNames)("picker-panel");
-  const { showToday, showNow, onChange, close, disabledDate } = (0, import_react.useContext)(import_CalendarContext.default);
-  const onPickToday = (0, import_react.useCallback)(() => {
-    const today = (0, import_dayjs.default)();
+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 dayjs from 'dayjs';
+import React, { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from "../Button/Button";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { Message } from "../Message";
+import { useClassNames } from "../hooks";
+import CalendarContext from "./CalendarContext";
+var Footer = function Footer() {
+  var _useClassNames = useClassNames('picker-panel'),
+    e = _useClassNames.e;
+  var _useContext = useContext(CalendarContext),
+    showToday = _useContext.showToday,
+    showNow = _useContext.showNow,
+    onChange = _useContext.onChange,
+    close = _useContext.close,
+    disabledDate = _useContext.disabledDate;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onPickToday = useCallback(function () {
+    var today = dayjs();
     if (disabledDate && disabledDate(today.toDate())) {
-      import_Message.Message.error(`“${showToday ? "今天" : "此刻"}”在禁选日期范围内!`);
+      Message.error("\u201C".concat(showToday ? t('el.datepicker.today', {
+        lng: locale
+      }) : t('el.datepicker.now', {
+        lng: locale
+      }), "\u201D\u5728\u7981\u9009\u65E5\u671F\u8303\u56F4\u5185!"));
       return;
     }
-    onChange((0, import_dayjs.default)());
-    close == null ? void 0 : close();
-  }, [close, disabledDate, onChange, showToday]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: e`footer` }, showToday && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "primary", link: true, className: e`today-btn`, onClick: onPickToday }, "今 天"), showNow && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "primary", link: true, className: e`link-btn`, onClick: onPickToday }, "此 刻"), /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "default", className: e`link-btn`, onClick: close }, "确 定")));
+    onChange(dayjs());
+    close === null || close === void 0 || close();
+  }, [close, disabledDate, locale, onChange, showToday, t]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["footer"])))
+  }, showToday && /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    link: true,
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["today-btn"]))),
+    onClick: onPickToday
+  }, t('el.datepicker.today', {
+    lng: locale
+  })), showNow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    size: "small",
+    text: true,
+    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["link-btn"]))),
+    onClick: onPickToday
+  }, t('el.datepicker.now', {
+    lng: locale
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    size: "small",
+    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["link-btn"]))),
+    onClick: close
+  }, t('el.datepicker.confirm', {
+    lng: locale
+  }))));
 };
-Footer.displayName = "ElCalendar.Footer";
-var Footer_default = Footer;
+Footer.displayName = 'Calendar.Footer';
+export default Footer;

package/dist/Calendar/Header.js

@@ -1,66 +1,88 @@
-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 });
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, { useMemo } from 'react';
+import Icon from "../Icon/Icon";
+import Link from "../Link/Link";
+import { useClassNames } from "../hooks";
+var Header = function Header(props) {
+  var prefix = props.prefix,
+    _props$showBackward = props.showBackward,
+    showBackward = _props$showBackward === void 0 ? true : _props$showBackward,
+    _props$showForward = props.showForward,
+    showForward = _props$showForward === void 0 ? true : _props$showForward,
+    _props$showMonth = props.showMonth,
+    showMonth = _props$showMonth === void 0 ? true : _props$showMonth,
+    plain = props.plain,
+    postion = props.postion,
+    year = props.year,
+    month = props.month,
+    disabledForward = props.disabledForward,
+    disabledBackward = props.disabledBackward,
+    disabledForwards = props.disabledForwards,
+    disabledBackwards = props.disabledBackwards,
+    onMoveBackward = props.onMoveBackward,
+    onMoveBackwards = props.onMoveBackwards,
+    onMoveForward = props.onMoveForward,
+    onMoveForwards = props.onMoveForwards,
+    onToggleView = props.onToggleView,
+    border = props.border;
+  var _useClassNames = useClassNames(prefix !== null && prefix !== void 0 ? prefix : 'date-picker'),
+    e = _useClassNames.e,
+    be = _useClassNames.be,
+    em = _useClassNames.em;
+  var iconClass = useMemo(function () {
+    return be('picker-panel', 'icon-btn', false);
+  }, [be]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))), _defineProperty({}, em('header', 'bordered'), border))
+  }, showBackward && /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["prev-btn"])))
+  }, /*#__PURE__*/React.createElement(Link, {
+    disabled: disabledBackwards,
+    underline: "never",
+    className: classNames(iconClass, 'd-arrow-left'),
+    onClick: onMoveBackwards
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angles-left"
+  })), showMonth && /*#__PURE__*/React.createElement(Link, {
+    disabled: disabledBackward,
+    underline: "never",
+    className: classNames(iconClass, 'arrow-left'),
+    onClick: onMoveBackward
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angle-left"
+  }))), !plain && /*#__PURE__*/React.createElement("span", {
+    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["header-label"]))),
+    onClick: function onClick() {
+      return onToggleView('year', postion);
+    }
+  }, year), !plain && showMonth && /*#__PURE__*/React.createElement("span", {
+    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["header-label"]))),
+    onClick: function onClick() {
+      return onToggleView('month', postion);
+    }
+  }, month), showForward && /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["next-btn"])))
+  }, showMonth && /*#__PURE__*/React.createElement(Link, {
+    disabled: disabledForward,
+    underline: "never",
+    className: classNames(iconClass, 'arrow-right'),
+    onClick: onMoveForward
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angle-right"
+  })), /*#__PURE__*/React.createElement(Link, {
+    disabled: disabledForwards,
+    underline: "never",
+    className: classNames(iconClass, 'd-arrow-right'),
+    onClick: onMoveForwards
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angles-right"
+  }))), plain && /*#__PURE__*/React.createElement("div", null, showMonth ? "".concat(year, "  ").concat(month) : year));
 };
-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);
-
-// src/Calendar/Header.tsx
-var Header_exports = {};
-__export(Header_exports, {
-  default: () => Header_default
-});
-module.exports = __toCommonJS(Header_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_Icon = require("../Icon");
-var import_Link = require("../Link");
-var import_hooks = require("../hooks");
-var Header = (props) => {
-  const {
-    prefix,
-    showBackward = true,
-    showForward = true,
-    showMonth = true,
-    plain,
-    postion,
-    year,
-    month,
-    disabledForward,
-    disabledBackward,
-    disabledForwards,
-    disabledBackwards,
-    onMoveBackward,
-    onMoveBackwards,
-    onMoveForward,
-    onMoveForwards,
-    onToggleView,
-    border
-  } = props;
-  const { e, be, em } = (0, import_hooks.useClassNames)(prefix ?? "date-picker");
-  const iconClass = (0, import_react.useMemo)(() => be("picker-panel", "icon-btn", false), [be]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`header`, { [em("header", "bordered")]: border }) }, showBackward && /* @__PURE__ */ import_react.default.createElement("div", { className: e`prev-btn` }, /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledBackwards, className: (0, import_classnames.default)(iconClass, "d-arrow-left"), onClick: onMoveBackwards }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-left" })), showMonth && /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledBackward, className: (0, import_classnames.default)(iconClass, "arrow-left"), onClick: onMoveBackward }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-left" }))), !plain && /* @__PURE__ */ import_react.default.createElement("span", { className: e`header-label`, onClick: () => onToggleView("year", postion) }, year), !plain && showMonth && /* @__PURE__ */ import_react.default.createElement("span", { className: e`header-label`, onClick: () => onToggleView("month", postion) }, month), showForward && /* @__PURE__ */ import_react.default.createElement("div", { className: e`next-btn` }, showMonth && /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledForward, className: (0, import_classnames.default)(iconClass, "arrow-right"), onClick: onMoveForward }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" })), /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledForwards, className: (0, import_classnames.default)(iconClass, "d-arrow-right"), onClick: onMoveForwards }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-right" }))), plain && /* @__PURE__ */ import_react.default.createElement("div", null, showMonth ? `${year}  ${month}` : year));
-};
-Header.displayName = "Calendar.Header";
-var Header_default = Header;
+Header.displayName = 'Calendar.Header';
+export default Header;