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

package/dist/Calendar/DatePanel.js

@@ -1,80 +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);
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import IsBetween from 'dayjs/plugin/isBetween';
+import IsoWeek from 'dayjs/plugin/isoWeek';
+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";
+dayjs.extend(IsoWeek);
+dayjs.extend(IsBetween);
+var DatePanel = function DatePanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onPickDate = props.onPickDate;
+  var _useClassNames = useClassNames('date-table'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    be = _useClassNames.be;
+  var _useContext = useContext(CalendarContext),
+    valueProp = _useContext.value,
+    dateType = _useContext.dateType,
+    isoWeek = _useContext.isoWeek,
+    disabledDate = _useContext.disabledDate,
+    formatter = _useContext.formatter;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
 
-// src/Calendar/DatePanel.tsx
-var DatePanel_exports = {};
-__export(DatePanel_exports, {
-  default: () => DatePanel_default
-});
-module.exports = __toCommonJS(DatePanel_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_dayjs = __toESM(require("dayjs"));
-var import_isBetween = __toESM(require("dayjs/plugin/isBetween"));
-var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
-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");
-import_dayjs.default.extend(import_isoWeek.default);
-import_dayjs.default.extend(import_isBetween.default);
-var DatePanel = (props) => {
-  const { value, valueRange, onPickDate } = props;
-  const { b, e, be } = (0, import_hooks.useClassNames)("date-table");
-  const { value: valueProp, dateType, isoWeek, disabledDate, formatter } = (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 === "daterange" && ((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 === 'daterange' && (isNotEmpty(valueRange[0]) && isNotEmpty(valueRange[1]) || isEmpty(valueRange[0]) && isEmpty(valueRange[1]));
   }, [dateType, valueRange]);
-  const startDate = (0, import_react.useMemo)(() => {
-    var _a;
-    if (dateType === "daterange" && (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 === 'daterange' && 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 === "daterange") {
-      if ((0, import_Util.isNotEmpty)(valueRange[1])) {
+
+  // 日期范围时的结束日期
+  // 有默认日期时则为默认日期，没有时根据悬浮日期与开始日期动态比较获取
+  var endDate = useMemo(function () {
+    if (dateType === 'daterange') {
+      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];
         }
@@ -82,49 +75,92 @@ var DatePanel = (props) => {
       }
     }
   }, [dateType, valueRange]);
-  const today = (0, import_react.useMemo)(() => {
-    return (0, import_dayjs.default)();
+
+  // 今天
+  var today = useMemo(function () {
+    return dayjs();
   }, []);
-  const WEEK_DAYS = (0, import_react.useMemo)(() => {
-    return isoWeek ? ["一", "二", "三", "四", "五", "六", "日"] : ["日", "一", "二", "三", "四", "五", "六"];
-  }, [isoWeek]);
-  const rows = (0, import_react.useMemo)(() => {
-    const TOTAL_DAYS = 7 * 6;
-    const days = [];
-    let dayUp = 1;
-    const firstDayOfMonth = currentDate.date(1);
-    const prevMonthDays = (() => {
-      const day = isoWeek ? firstDayOfMonth.isoWeekday() - 1 : firstDayOfMonth.day();
+
+  // 周数
+  var WEEK_DAYS = useMemo(function () {
+    return isoWeek ? [t('el.datepicker.weeks.mon', {
+      lng: locale
+    }), t('el.datepicker.weeks.tue', {
+      lng: locale
+    }), t('el.datepicker.weeks.wed', {
+      lng: locale
+    }), t('el.datepicker.weeks.thu', {
+      lng: locale
+    }), t('el.datepicker.weeks.fri', {
+      lng: locale
+    }), t('el.datepicker.weeks.sat', {
+      lng: locale
+    }), t('el.datepicker.weeks.sun', {
+      lng: locale
+    })] : [t('el.datepicker.weeks.sun', {
+      lng: locale
+    }), t('el.datepicker.weeks.mon', {
+      lng: locale
+    }), t('el.datepicker.weeks.tue', {
+      lng: locale
+    }), t('el.datepicker.weeks.wed', {
+      lng: locale
+    }), t('el.datepicker.weeks.thu', {
+      lng: locale
+    }), t('el.datepicker.weeks.fri', {
+      lng: locale
+    }), t('el.datepicker.weeks.sat', {
+      lng: locale
+    })];
+  }, [isoWeek, locale, t]);
+  var rows = useMemo(function () {
+    var TOTAL_DAYS = 7 * 6;
+    var days = [];
+    // 递增本月天数
+    var dayUp = 1;
+
+    // 本月第一天
+    var firstDayOfMonth = currentDate.date(1);
+    // 上月显示天数
+    var prevMonthDays = function () {
+      // 如果本月第一天刚好处在周日或者iso周的周一时，那么上月天数就是0，所以将上月天数改为显示一周
+      var day = isoWeek ? firstDayOfMonth.isoWeekday() - 1 : firstDayOfMonth.day();
       return day === 0 ? 7 : day;
-    })();
-    const curMonthDays = currentDate.daysInMonth();
-    const nextMonthDays = TOTAL_DAYS - prevMonthDays - curMonthDays;
-    const lastDayOfMonth = currentDate.date(curMonthDays);
-    for (let i = 0; i < 42; i++) {
+    }();
+    // 本月天数
+    var curMonthDays = currentDate.daysInMonth();
+    // 剩余为下月显示天数
+    var nextMonthDays = TOTAL_DAYS - prevMonthDays - curMonthDays;
+    // 本月最后一天
+    var lastDayOfMonth = currentDate.date(curMonthDays);
+    // 显示6周，所以是42天
+    for (var i = 0; i < 42; i++) {
+      // 第一行肯定有上月天数，先遍历上月的
       if (i === 0 && i < prevMonthDays) {
-        for (let j = prevMonthDays; j > 0; j--) {
-          const date = firstDayOfMonth.subtract(j, "d");
+        for (var j = prevMonthDays; j > 0; j--) {
+          var date = firstDayOfMonth.subtract(j, 'd');
           days.push({
             text: date.date(),
-            type: "prev",
+            type: 'prev',
             disabled: disabledDate && disabledDate(date.toDate())
           });
           i++;
         }
       } else if (dayUp <= curMonthDays) {
-        const date = firstDayOfMonth.add(dayUp - 1, "d");
+        var _date = firstDayOfMonth.add(dayUp - 1, 'd');
         days.push({
           text: dayUp++,
-          type: "current",
-          disabled: disabledDate && disabledDate(date.toDate())
+          type: 'current',
+          disabled: disabledDate && disabledDate(_date.toDate())
         });
       } else {
-        for (let j = 0; j < nextMonthDays; j++) {
-          const date = lastDayOfMonth.add(j + 1, "d");
+        // 遍历下月天数
+        for (var _j = 0; _j < nextMonthDays; _j++) {
+          var _date2 = lastDayOfMonth.add(_j + 1, 'd');
           days.push({
-            text: date.date(),
-            type: "next",
-            disabled: disabledDate && disabledDate(date.toDate())
+            text: _date2.date(),
+            type: 'next',
+            disabled: disabledDate && disabledDate(_date2.toDate())
           });
           i++;
         }
@@ -132,79 +168,110 @@ var DatePanel = (props) => {
     }
     return days;
   }, [currentDate, disabledDate, isoWeek]);
-  const getFormattedDate = (0, import_react.useCallback)(
-    (day, type) => {
-      switch (type) {
-        case "prev":
-          return currentDate.startOf("month").subtract(1, "month").date(day);
-        case "next":
-          return currentDate.startOf("month").add(1, "month").date(day);
-        case "current":
-          return currentDate.date(day);
+  var getFormattedDate = useCallback(function (day, type) {
+    switch (type) {
+      case 'prev':
+        return currentDate.startOf('month').subtract(1, 'month').date(day);
+      case 'next':
+        return currentDate.startOf('month').add(1, 'month').date(day);
+      case 'current':
+        return currentDate.date(day);
+    }
+  }, [currentDate]);
+  var getCellClass = useCallback(function (_ref) {
+    var text = _ref.text,
+      type = _ref.type,
+      disabled = _ref.disabled;
+    var date = getFormattedDate(text, type);
+    if (type === 'current') {
+      var classes = [disabled ? 'normal disabled' : 'available'];
+      if (date.isSame(today, 'day')) {
+        classes.push('today');
       }
-    },
-    [currentDate]
-  );
-  const getCellClass = (0, import_react.useCallback)(
-    ({ text, type, disabled }) => {
-      const date = getFormattedDate(text, type);
-      if (type === "current") {
-        const classes = [disabled ? "normal disabled" : "available"];
-        if (date.isSame(today, "day")) {
-          classes.push("today");
+      // 日期范围时的样式
+      if (dateType === 'daterange') {
+        if (date.isSame(endDate) && date.isSame(startDate)) {
+          classes.push('in-range start-date end-date');
+        } else if (date.isSame(startDate)) {
+          classes.push('in-range start-date');
+        } else if (date.isBetween(startDate, endDate, null, '()')) {
+          classes.push('in-range');
+        } else if (date.isSame(endDate)) {
+          classes.push('in-range end-date');
         }
-        if (dateType === "daterange") {
-          if (date.isSame(endDate) && date.isSame(startDate)) {
-            classes.push("in-range start-date end-date");
-          } else if (date.isSame(startDate)) {
-            classes.push("in-range start-date");
-          } else if (date.isBetween(startDate, endDate, null, "()")) {
-            classes.push("in-range");
-          } else if (date.isSame(endDate)) {
-            classes.push("in-range end-date");
-          }
-        } else {
-          if (valueProp && date.isSame(valueProp, "day")) {
-            classes.push("current");
-          }
-        }
-        return (0, import_classnames.default)(...classes);
       } else {
-        return disabled ? "normal disabled" : `${type}-month`;
-      }
-    },
-    [getFormattedDate, today, dateType, startDate, endDate, valueProp]
-  );
-  const onHoverDate = (0, import_react.useCallback)(
-    ({ text, type }) => {
-      if (dateType === "daterange") {
-        if (!lockHover) {
-          const date = getFormattedDate(text, type);
-          onPickDate == null ? void 0 : onPickDate(date, true);
-        } else {
-          onPickDate == null ? void 0 : onPickDate(null, true);
+        if (valueProp && date.isSame(valueProp, 'day')) {
+          classes.push('current');
         }
       }
-    },
-    [dateType, getFormattedDate, lockHover, onPickDate]
-  );
-  const handlePickDate = (0, import_react.useCallback)(
-    ({ text, type, disabled }) => {
-      if (disabled) {
-        return;
+      return classNames.apply(void 0, classes);
+    } else {
+      return disabled ? 'normal disabled' : "".concat(type, "-month");
+    }
+  }, [getFormattedDate, today, dateType, startDate, endDate, valueProp]);
+
+  /**
+   * 悬浮日期回调
+   * @param param0
+   */
+  var onHoverDate = useCallback(function (_ref2) {
+    var text = _ref2.text,
+      type = _ref2.type;
+    if (dateType === 'daterange') {
+      if (!lockHover) {
+        var date = getFormattedDate(text, type);
+        onPickDate === null || onPickDate === void 0 || onPickDate(date, true);
+      } else {
+        onPickDate === null || onPickDate === void 0 || onPickDate(null, true);
       }
-      const date = getFormattedDate(text, type);
-      onPickDate == null ? void 0 : onPickDate(date);
-    },
-    [getFormattedDate, onPickDate]
-  );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(be("picker-panel", "content", false), props.className) }, props.children, /* @__PURE__ */ import_react.default.createElement("table", { cellSpacing: "0", cellPadding: "0", className: b() }, /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", null, WEEK_DAYS.map((item) => {
-    return /* @__PURE__ */ import_react.default.createElement("th", { key: item }, item);
-  })), new Array(6).fill("").map((row, i) => {
-    return /* @__PURE__ */ import_react.default.createElement("tr", { key: i, className: e("row") }, rows.slice(i * 7, (i + 1) * 7).map((cell) => {
-      return /* @__PURE__ */ import_react.default.createElement("td", { key: cell.text, className: getCellClass(cell), onClick: () => handlePickDate(cell), onMouseEnter: () => onHoverDate(cell) }, formatter ? formatter(getFormattedDate(cell.text, cell.type), cell.text) : /* @__PURE__ */ import_react.default.createElement("div", { className: b("cell") }, /* @__PURE__ */ import_react.default.createElement("span", { className: be("cell", "text") }, cell.text)));
+    }
+  }, [dateType, getFormattedDate, lockHover, onPickDate]);
+
+  /**
+   * 选中日期回调
+   * @param param0
+   */
+  var handlePickDate = useCallback(function (_ref3) {
+    var text = _ref3.text,
+      type = _ref3.type,
+      disabled = _ref3.disabled;
+    if (disabled) {
+      return;
+    }
+    var date = getFormattedDate(text, type);
+    onPickDate === null || onPickDate === void 0 || onPickDate(date);
+  }, [getFormattedDate, onPickDate]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(be('picker-panel', 'content', false), props.className)
+  }, props.children, /*#__PURE__*/React.createElement("table", {
+    cellSpacing: "0",
+    cellPadding: "0",
+    className: b()
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, WEEK_DAYS.map(function (item) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: item
+    }, item);
+  })), new Array(6).fill('').map(function (row, i) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: i,
+      className: e('row')
+    }, rows.slice(i * 7, (i + 1) * 7).map(function (cell) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: cell.text,
+        className: getCellClass(cell),
+        onClick: function onClick() {
+          return handlePickDate(cell);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return onHoverDate(cell);
+        }
+      }, formatter ? formatter(getFormattedDate(cell.text, cell.type), cell.text) : /*#__PURE__*/React.createElement("div", {
+        className: b('cell')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: be('cell', 'text')
+      }, cell.text)));
     }));
   }))));
 };
-DatePanel.displayName = "Calendar.DatePanel";
-var DatePanel_default = DatePanel;
+DatePanel.displayName = 'Calendar.DatePanel';
+export default DatePanel;