wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/DatePicker/index.js

@@ -0,0 +1,371 @@
+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 React, { useState, useRef, useEffect, useCallback } from 'react';
+import "./style.less";
+
+// ============ 日期工具函数 ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var formatDate = function formatDate(date) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+};
+var parseDate = function parseDate(dateStr) {
+  var date = new Date(dateStr);
+  return isNaN(date.getTime()) ? null : date;
+};
+var isSameDay = function isSameDay(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var getDaysInMonth = function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+};
+var getFirstDayOfMonth = function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+};
+
+// ============ DatePicker Props ============
+
+// ============ DatePicker Component ============
+export var DatePicker = function DatePicker(_ref) {
+  var controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请选择日期' : _ref$placeholder,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? 'YYYY-MM-DD' : _ref$format,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    status = _ref.status,
+    disabledDate = _ref.disabledDate,
+    onChange = _ref.onChange,
+    onOpenChange = _ref.onOpenChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  // 解析初始值
+  var parseInitialValue = function parseInitialValue(val) {
+    if (!val) return null;
+    if (val instanceof Date) return val;
+    return parseDate(val);
+  };
+  var _useState = useState(parseInitialValue(defaultValue)),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var _useState5 = useState(new Date()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    viewDate = _useState6[0],
+    setViewDate = _useState6[1];
+  var _useState7 = useState('date'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    viewMode = _useState8[0],
+    setViewMode = _useState8[1];
+  var containerRef = useRef(null);
+  var value = controlledValue !== undefined ? parseInitialValue(controlledValue) : internalValue;
+
+  // 同步 viewDate
+  useEffect(function () {
+    if (value) {
+      setViewDate(new Date(value));
+    }
+  }, [value]);
+
+  // 打开/关闭面板
+  var setOpen = useCallback(function (open) {
+    if (disabled) return;
+    setIsOpen(open);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+    if (open) {
+      setViewMode('date');
+      if (value) {
+        setViewDate(new Date(value));
+      } else {
+        setViewDate(new Date());
+      }
+    }
+  }, [disabled, value, onOpenChange]);
+
+  // 点击外部关闭
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setOpen]);
+
+  // 选择日期
+  var handleSelectDate = useCallback(function (date) {
+    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date)) return;
+    if (controlledValue === undefined) {
+      setInternalValue(date);
+    }
+    onChange === null || onChange === void 0 || onChange(date, formatDate(date, format));
+    setOpen(false);
+  }, [controlledValue, format, disabledDate, onChange, setOpen]);
+
+  // 清除
+  var handleClear = useCallback(function (e) {
+    e.stopPropagation();
+    if (controlledValue === undefined) {
+      setInternalValue(null);
+    }
+    onChange === null || onChange === void 0 || onChange(null, '');
+  }, [controlledValue, onChange]);
+
+  // 切换月份
+  var handlePrevMonth = useCallback(function () {
+    setViewDate(function (prev) {
+      return new Date(prev.getFullYear(), prev.getMonth() - 1, 1);
+    });
+  }, []);
+  var handleNextMonth = useCallback(function () {
+    setViewDate(function (prev) {
+      return new Date(prev.getFullYear(), prev.getMonth() + 1, 1);
+    });
+  }, []);
+
+  // 切换年份
+  var handlePrevYear = useCallback(function () {
+    if (viewMode === 'year') {
+      setViewDate(function (prev) {
+        return new Date(prev.getFullYear() - 12, prev.getMonth(), 1);
+      });
+    } else {
+      setViewDate(function (prev) {
+        return new Date(prev.getFullYear() - 1, prev.getMonth(), 1);
+      });
+    }
+  }, [viewMode]);
+  var handleNextYear = useCallback(function () {
+    if (viewMode === 'year') {
+      setViewDate(function (prev) {
+        return new Date(prev.getFullYear() + 12, prev.getMonth(), 1);
+      });
+    } else {
+      setViewDate(function (prev) {
+        return new Date(prev.getFullYear() + 1, prev.getMonth(), 1);
+      });
+    }
+  }, [viewMode]);
+
+  // 选择月份
+  var handleSelectMonth = useCallback(function (month) {
+    setViewDate(function (prev) {
+      return new Date(prev.getFullYear(), month, 1);
+    });
+    setViewMode('date');
+  }, []);
+
+  // 选择年份
+  var handleSelectYear = useCallback(function (year) {
+    setViewDate(function (prev) {
+      return new Date(year, prev.getMonth(), 1);
+    });
+    setViewMode('month');
+  }, []);
+
+  // 选择今天
+  var handleToday = useCallback(function () {
+    var today = new Date();
+    handleSelectDate(today);
+  }, [handleSelectDate]);
+
+  // 生成日期网格
+  var generateDateGrid = useCallback(function () {
+    var year = viewDate.getFullYear();
+    var month = viewDate.getMonth();
+    var daysInMonth = getDaysInMonth(year, month);
+    var firstDay = getFirstDayOfMonth(year, month);
+    var prevMonthDays = getDaysInMonth(year, month - 1);
+    var days = [];
+
+    // 上个月的天数
+    for (var i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDays - i),
+        isCurrentMonth: false
+      });
+    }
+
+    // 当前月的天数
+    for (var _i = 1; _i <= daysInMonth; _i++) {
+      days.push({
+        date: new Date(year, month, _i),
+        isCurrentMonth: true
+      });
+    }
+
+    // 下个月的天数
+    var remaining = 42 - days.length;
+    for (var _i2 = 1; _i2 <= remaining; _i2++) {
+      days.push({
+        date: new Date(year, month + 1, _i2),
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }, [viewDate]);
+
+  // 生成月份网格
+  var generateMonthGrid = useCallback(function () {
+    var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+    return months.map(function (name, index) {
+      return {
+        name: name,
+        index: index
+      };
+    });
+  }, []);
+
+  // 生成年份网格
+  var generateYearGrid = useCallback(function () {
+    var currentYear = viewDate.getFullYear();
+    var startYear = Math.floor(currentYear / 12) * 12;
+    var years = [];
+    for (var i = 0; i < 12; i++) {
+      years.push(startYear + i);
+    }
+    return years;
+  }, [viewDate]);
+  var classNames = ['kage-datepicker', "kage-datepicker-".concat(size), disabled && 'kage-datepicker-disabled', status && "kage-datepicker-status-".concat(status), isOpen && 'kage-datepicker-open', className].filter(Boolean).join(' ');
+  var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  var today = new Date();
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-datepicker-input",
+      onClick: function onClick() {
+        return setOpen(!isOpen);
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-datepicker-value ".concat(!value ? 'kage-datepicker-placeholder' : ''),
+        children: value ? formatDate(value, format) : placeholder
+      }), allowClear && value && !disabled && /*#__PURE__*/_jsx("span", {
+        className: "kage-datepicker-clear",
+        onClick: handleClear,
+        children: "\xD7"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "kage-datepicker-icon",
+        children: "\uD83D\uDCC5"
+      })]
+    }), isOpen && /*#__PURE__*/_jsxs("div", {
+      className: "kage-datepicker-panel",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-datepicker-header",
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "kage-datepicker-header-btn",
+          onClick: handlePrevYear,
+          children: "\xAB"
+        }), viewMode === 'date' && /*#__PURE__*/_jsx("button", {
+          className: "kage-datepicker-header-btn",
+          onClick: handlePrevMonth,
+          children: "\u2039"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "kage-datepicker-header-title",
+          children: [/*#__PURE__*/_jsxs("span", {
+            onClick: function onClick() {
+              return setViewMode('year');
+            },
+            children: [viewMode === 'year' ? "".concat(generateYearGrid()[0], " - ").concat(generateYearGrid()[11]) : viewDate.getFullYear(), "\u5E74"]
+          }), viewMode === 'date' && /*#__PURE__*/_jsxs("span", {
+            onClick: function onClick() {
+              return setViewMode('month');
+            },
+            children: [viewDate.getMonth() + 1, "\u6708"]
+          })]
+        }), viewMode === 'date' && /*#__PURE__*/_jsx("button", {
+          className: "kage-datepicker-header-btn",
+          onClick: handleNextMonth,
+          children: "\u203A"
+        }), /*#__PURE__*/_jsx("button", {
+          className: "kage-datepicker-header-btn",
+          onClick: handleNextYear,
+          children: "\xBB"
+        })]
+      }), viewMode === 'date' && /*#__PURE__*/_jsxs("div", {
+        className: "kage-datepicker-body",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "kage-datepicker-weekdays",
+          children: weekDays.map(function (day) {
+            return /*#__PURE__*/_jsx("span", {
+              className: "kage-datepicker-weekday",
+              children: day
+            }, day);
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "kage-datepicker-dates",
+          children: generateDateGrid().map(function (_ref2, index) {
+            var date = _ref2.date,
+              isCurrentMonth = _ref2.isCurrentMonth;
+            var isSelected = value && isSameDay(date, value);
+            var isToday = isSameDay(date, today);
+            var isDisabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date);
+            var dayClassNames = ['kage-datepicker-date', !isCurrentMonth && 'kage-datepicker-date-other', isSelected && 'kage-datepicker-date-selected', isToday && 'kage-datepicker-date-today', isDisabled && 'kage-datepicker-date-disabled'].filter(Boolean).join(' ');
+            return /*#__PURE__*/_jsx("span", {
+              className: dayClassNames,
+              onClick: function onClick() {
+                return !isDisabled && handleSelectDate(date);
+              },
+              children: date.getDate()
+            }, index);
+          })
+        })]
+      }), viewMode === 'month' && /*#__PURE__*/_jsx("div", {
+        className: "kage-datepicker-months",
+        children: generateMonthGrid().map(function (_ref3) {
+          var name = _ref3.name,
+            index = _ref3.index;
+          return /*#__PURE__*/_jsx("span", {
+            className: "kage-datepicker-month ".concat(viewDate.getMonth() === index ? 'kage-datepicker-month-selected' : ''),
+            onClick: function onClick() {
+              return handleSelectMonth(index);
+            },
+            children: name
+          }, index);
+        })
+      }), viewMode === 'year' && /*#__PURE__*/_jsx("div", {
+        className: "kage-datepicker-years",
+        children: generateYearGrid().map(function (year) {
+          return /*#__PURE__*/_jsx("span", {
+            className: "kage-datepicker-year ".concat(viewDate.getFullYear() === year ? 'kage-datepicker-year-selected' : ''),
+            onClick: function onClick() {
+              return handleSelectYear(year);
+            },
+            children: year
+          }, year);
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-datepicker-footer",
+        children: /*#__PURE__*/_jsx("button", {
+          className: "kage-datepicker-today",
+          onClick: handleToday,
+          children: "\u4ECA\u5929"
+        })
+      })]
+    })]
+  });
+};
+export default DatePicker;