@qsxy/element-plus-react 1.0.0-next.10 → 1.0.0-next.11

package/dist/Calendar/WeekPanel.js

@@ -1,102 +1,138 @@
-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);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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, useState } from 'react';
+import { useClassNames } from "../hooks";
+import CalendarContext from "./CalendarContext";
+import { initDate } from "./util";
+dayjs.extend(IsoWeek);
+dayjs.extend(IsBetween);
+var WeekPanel = function WeekPanel(props) {
+  var value = props.value,
+    valueRange = props.valueRange,
+    onPickDate = props.onPickDate,
+    onPickDateRange = props.onPickDateRange;
+  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;
 
-// src/Calendar/WeekPanel.tsx
-var WeekPanel_exports = {};
-__export(WeekPanel_exports, {
-  default: () => WeekPanel_default
-});
-module.exports = __toCommonJS(WeekPanel_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_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 WeekPanel = (props) => {
-  const { value, valueRange, onPickDate, onPickDateRange } = 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 [startDate, setSartDate] = (0, import_react.useState)(null);
-  const [endDate, setEndDate] = (0, import_react.useState)(null);
-  const today = (0, import_react.useMemo)(() => {
-    return (0, import_dayjs.default)();
+
+  // // 日期范围时的开始日期，与悬浮日期动态比较获取
+  // const startDate = useMemo(() => {
+  //     if (isNotEmpty(valueRange[0])) {
+  //         if (isNotEmpty(valueRange[1])) {
+  //             return valueRange[1].isSame(valueRange[0]) || valueRange[1]?.isAfter(valueRange[0]) ? valueRange[0] : valueRange[1];
+  //         }
+  //         return valueRange[0];
+  //     }
+  //     return null;
+  // }, [valueRange]);
+
+  // // 日期范围时的结束日期
+  // // 有默认日期时则为默认日期，没有时根据悬浮日期与开始日期动态比较获取
+  // const endDate = useMemo(() => {
+  //     if (isNotEmpty(valueRange[1])) {
+  //         return valueRange[1];
+  //     } else {
+  //         if (isNotEmpty(valueRange[0])) {
+  //             if (isNotEmpty(valueRange[2])) {
+  //                 return valueRange[2].isSame(valueRange[0]) || valueRange[2]?.isBefore(valueRange[0]) ? valueRange[0] : valueRange[2];
+  //             }
+  //             return valueRange[0];
+  //         }
+  //         return null;
+  //     }
+  // }, [valueRange]);
+
+  // 日期范围时的开始日期，与悬浮日期动态比较获取
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    startDate = _useState2[0],
+    setSartDate = _useState2[1];
+  // 日期范围时的结束日期
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    endDate = _useState4[0],
+    setEndDate = _useState4[1];
+
+  // 今天
+  var today = useMemo(function () {
+    return dayjs();
   }, []);
-  const WEEK_DAYS = (0, import_react.useMemo)(() => {
-    return isoWeek ? ["一", "二", "三", "四", "五", "六", "日"] : ["日", "一", "二", "三", "四", "五", "六"];
+
+  // 周数
+  var WEEK_DAYS = useMemo(function () {
+    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 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++;
         }
@@ -104,76 +140,108 @@ var WeekPanel = (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);
-      }
-    },
-    [currentDate]
-  );
-  const getCellClass = (0, import_react.useCallback)(
-    ({ text, type, disabled }) => {
-      const date = getFormattedDate(text, type);
-      const classes = [];
-      if (type === "current") {
-        classes.push(disabled ? "normal disabled" : "available");
-        if (date.isSame(today, "day")) {
-          classes.push("today");
-        }
-      } else {
-        classes.push(disabled ? "normal disabled" : `${type}-month`);
-      }
-      if (dateType === "week") {
-        if (valueRange[0] && date.isSame(valueRange[0], "day")) {
-          classes.push("in-range start-date");
-        } else if (valueRange[1] && date.isSame(valueRange[1], "day")) {
-          classes.push("in-range end-date");
-        } else if (valueRange[0] && valueRange[1] && date.isBetween(valueRange[0], valueRange[1], "day", "()") || startDate && endDate && date.isBetween(startDate, endDate, "day", "[]")) {
-          classes.push("in-range");
-        }
-      } else {
-        if (valueProp && date.isSame(valueProp, "day")) {
-          classes.push("current");
-        }
+  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);
+    var classes = [];
+    if (type === 'current') {
+      classes.push(disabled ? 'normal disabled' : 'available');
+      if (date.isSame(today, 'day')) {
+        classes.push('today');
       }
-      return (0, import_classnames.default)(...classes);
-    },
-    [getFormattedDate, dateType, today, valueRange, startDate, endDate, valueProp]
-  );
-  const onHoverDate = (0, import_react.useCallback)(
-    ({ text, type }) => {
-      if (dateType === "week") {
-        const date = getFormattedDate(text, type);
-        setSartDate(isoWeek ? date.isoWeekday(1) : date.isoWeekday(0));
-        setEndDate(isoWeek ? date.isoWeekday(7) : date.isoWeekday(6));
+    } else {
+      classes.push(disabled ? 'normal disabled' : "".concat(type, "-month"));
+    }
+    // 日期范围时的样式
+    if (dateType === 'week') {
+      if (valueRange[0] && date.isSame(valueRange[0], 'day')) {
+        classes.push('in-range start-date');
+      } else if (valueRange[1] && date.isSame(valueRange[1], 'day')) {
+        classes.push('in-range end-date');
+      } else if (valueRange[0] && valueRange[1] && date.isBetween(valueRange[0], valueRange[1], 'day', '()') || startDate && endDate && date.isBetween(startDate, endDate, 'day', '[]')) {
+        classes.push('in-range');
       }
-    },
-    [dateType, getFormattedDate, isoWeek]
-  );
-  const handlePickDate = (0, import_react.useCallback)(
-    ({ text, type, disabled }) => {
-      if (disabled) {
-        return;
+    } else {
+      if (valueProp && date.isSame(valueProp, 'day')) {
+        classes.push('current');
       }
-      const date = getFormattedDate(text, type);
-      onPickDate == null ? void 0 : onPickDate(date);
-      onPickDateRange == null ? void 0 : onPickDateRange([isoWeek ? date.isoWeekday(1) : date.isoWeekday(0), isoWeek ? date.isoWeekday(7) : date.isoWeekday(6)]);
-    },
-    [getFormattedDate, isoWeek, onPickDate, onPickDateRange]
-  );
-  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: (0, import_classnames.default)(b(), "is-week-mode") }, /* @__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)));
+    }
+    return classNames.apply(void 0, classes);
+  }, [getFormattedDate, dateType, today, valueRange, startDate, endDate, valueProp]);
+
+  /**
+   * 悬浮日期回调
+   * @param param0
+   */
+  var onHoverDate = useCallback(function (_ref2) {
+    var text = _ref2.text,
+      type = _ref2.type;
+    if (dateType === 'week') {
+      var date = getFormattedDate(text, type);
+      setSartDate(isoWeek ? date.isoWeekday(1) : date.isoWeekday(0));
+      setEndDate(isoWeek ? date.isoWeekday(7) : date.isoWeekday(6));
+      // console.log(date.isoWeekday(1).format('YYYY-MM-DD'), date.isoWeekday(7).format('YYYY-MM-DD'));
+    }
+  }, [dateType, getFormattedDate, isoWeek]);
+
+  /**
+   * 选中日期回调
+   * @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);
+    onPickDateRange === null || onPickDateRange === void 0 || onPickDateRange([isoWeek ? date.isoWeekday(1) : date.isoWeekday(0), isoWeek ? date.isoWeekday(7) : date.isoWeekday(6)]);
+  }, [getFormattedDate, isoWeek, onPickDate, onPickDateRange]);
+  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: classNames(b(), 'is-week-mode')
+  }, /*#__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)));
     }));
   }))));
 };
-WeekPanel.displayName = "Calendar.DatePanel";
-var WeekPanel_default = WeekPanel;
+WeekPanel.displayName = 'Calendar.DatePanel';
+export default WeekPanel;