wssf-kage-ui 0.1.0 → 0.1.2

package/dist/cjs/TimePicker/index.js

@@ -0,0 +1,332 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TimePicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./style.less");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 _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; }
+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 formatTime = function formatTime(hour, minute, second, format) {
+  var h12 = hour % 12 || 12;
+  var period = hour < 12 ? 'AM' : 'PM';
+  return format.replace('HH', String(hour).padStart(2, '0')).replace('H', String(hour)).replace('hh', String(h12).padStart(2, '0')).replace('h', String(h12)).replace('mm', String(minute).padStart(2, '0')).replace('m', String(minute)).replace('ss', String(second).padStart(2, '0')).replace('s', String(second)).replace('A', period).replace('a', period.toLowerCase());
+};
+var parseTime = function parseTime(timeStr, format) {
+  if (!timeStr) return null;
+  var is12Hour = format.includes('h');
+  var hasSecond = format.includes('s');
+  var parts = timeStr.split(':');
+  if (parts.length < 2) return null;
+  var hour = parseInt(parts[0], 10);
+  var minute = parseInt(parts[1], 10);
+  var second = hasSecond && parts.length > 2 ? parseInt(parts[2], 10) : 0;
+
+  // 处理 12 小时制
+  if (is12Hour) {
+    var isPM = timeStr.toLowerCase().includes('pm');
+    if (isPM && hour < 12) hour += 12;
+    if (!isPM && hour === 12) hour = 0;
+  }
+  if (isNaN(hour) || isNaN(minute) || isNaN(second)) return null;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) return null;
+  return {
+    hour: hour,
+    minute: minute,
+    second: second
+  };
+};
+
+// ============ TimePicker Props ============
+
+// ============ TimePicker Component ============
+var TimePicker = exports.TimePicker = function TimePicker(_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 ? 'HH:mm:ss' : _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,
+    _ref$hourStep = _ref.hourStep,
+    hourStep = _ref$hourStep === void 0 ? 1 : _ref$hourStep,
+    _ref$minuteStep = _ref.minuteStep,
+    minuteStep = _ref$minuteStep === void 0 ? 1 : _ref$minuteStep,
+    _ref$secondStep = _ref.secondStep,
+    secondStep = _ref$secondStep === void 0 ? 1 : _ref$secondStep,
+    disabledHours = _ref.disabledHours,
+    disabledMinutes = _ref.disabledMinutes,
+    disabledSeconds = _ref.disabledSeconds,
+    _ref$hideDisabledOpti = _ref.hideDisabledOptions,
+    hideDisabledOptions = _ref$hideDisabledOpti === void 0 ? false : _ref$hideDisabledOpti,
+    _ref$use12Hours = _ref.use12Hours,
+    use12Hours = _ref$use12Hours === void 0 ? false : _ref$use12Hours,
+    onChange = _ref.onChange,
+    onOpenChange = _ref.onOpenChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var showSecond = format.includes('s');
+  var actualFormat = use12Hours && !format.includes('h') ? format.replace('HH', 'hh') + ' A' : format;
+
+  // 解析初始值
+  var parseInitialValue = function parseInitialValue(val) {
+    if (!val) return null;
+    if (_typeof(val) === 'object') return val;
+    return parseTime(val, actualFormat);
+  };
+  var _useState = (0, _react.useState)(parseInitialValue(defaultValue)),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var containerRef = (0, _react.useRef)(null);
+  var hourRef = (0, _react.useRef)(null);
+  var minuteRef = (0, _react.useRef)(null);
+  var secondRef = (0, _react.useRef)(null);
+  var value = controlledValue !== undefined ? parseInitialValue(controlledValue) : internalValue;
+
+  // 打开/关闭面板
+  var setOpen = (0, _react.useCallback)(function (open) {
+    if (disabled) return;
+    setIsOpen(open);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+  }, [disabled, onOpenChange]);
+
+  // 点击外部关闭
+  (0, _react.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]);
+
+  // 滚动到选中项
+  (0, _react.useEffect)(function () {
+    if (isOpen && value) {
+      setTimeout(function () {
+        var scrollToValue = function scrollToValue(ref, targetValue) {
+          if (ref.current) {
+            var item = ref.current.querySelector("[data-value=\"".concat(targetValue, "\"]"));
+            if (item) {
+              ref.current.scrollTop = item.offsetTop - ref.current.offsetHeight / 2 + item.offsetHeight / 2;
+            }
+          }
+        };
+        scrollToValue(hourRef, value.hour);
+        scrollToValue(minuteRef, value.minute);
+        if (showSecond) {
+          scrollToValue(secondRef, value.second);
+        }
+      }, 0);
+    }
+  }, [isOpen, value, showSecond]);
+
+  // 生成选项列表
+  var generateOptions = (0, _react.useCallback)(function (max, step, disabledFn, currentHour, currentMinute) {
+    var options = [];
+    for (var i = 0; i < max; i += step) {
+      var isDisabled = false;
+      if (disabledFn) {
+        if (typeof disabledFn === 'function') {
+          var _disabled = [];
+          if (disabledFn.length === 0) {
+            _disabled = disabledFn();
+          } else if (disabledFn.length === 1) {
+            _disabled = disabledFn(currentHour);
+          } else {
+            _disabled = disabledFn(currentHour, currentMinute);
+          }
+          isDisabled = Array.isArray(_disabled) && _disabled.includes(i);
+        }
+      }
+      if (!hideDisabledOptions || !isDisabled) {
+        options.push(i);
+      }
+    }
+    return options;
+  }, [hideDisabledOptions]);
+
+  // 小时选项
+  var hourOptions = (0, _react.useMemo)(function () {
+    var max = use12Hours ? 12 : 24;
+    var options = generateOptions(max, hourStep);
+    if (use12Hours && !options.includes(12)) {
+      options.push(12);
+    }
+    if (disabledHours) {
+      var _disabled2 = disabledHours();
+      return options.filter(function (h) {
+        return !_disabled2.includes(h);
+      });
+    }
+    return options;
+  }, [use12Hours, hourStep, disabledHours, generateOptions]);
+
+  // 分钟选项
+  var minuteOptions = (0, _react.useMemo)(function () {
+    var options = generateOptions(60, minuteStep);
+    if (disabledMinutes && value) {
+      var _disabled3 = disabledMinutes(value.hour);
+      return options.filter(function (m) {
+        return !_disabled3.includes(m);
+      });
+    }
+    return options;
+  }, [minuteStep, disabledMinutes, value, generateOptions]);
+
+  // 秒选项
+  var secondOptions = (0, _react.useMemo)(function () {
+    var options = generateOptions(60, secondStep);
+    if (disabledSeconds && value) {
+      var _disabled4 = disabledSeconds(value.hour, value.minute);
+      return options.filter(function (s) {
+        return !_disabled4.includes(s);
+      });
+    }
+    return options;
+  }, [secondStep, disabledSeconds, value, generateOptions]);
+
+  // 选择时间
+  var handleSelectTime = (0, _react.useCallback)(function (type, val) {
+    var _value$hour, _value$minute, _value$second;
+    var newValue = _defineProperty({
+      hour: (_value$hour = value === null || value === void 0 ? void 0 : value.hour) !== null && _value$hour !== void 0 ? _value$hour : 0,
+      minute: (_value$minute = value === null || value === void 0 ? void 0 : value.minute) !== null && _value$minute !== void 0 ? _value$minute : 0,
+      second: (_value$second = value === null || value === void 0 ? void 0 : value.second) !== null && _value$second !== void 0 ? _value$second : 0
+    }, type, val);
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    var timeString = formatTime(newValue.hour, newValue.minute, newValue.second, actualFormat);
+    onChange === null || onChange === void 0 || onChange(newValue, timeString);
+  }, [value, controlledValue, actualFormat, onChange]);
+
+  // 清除
+  var handleClear = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    if (controlledValue === undefined) {
+      setInternalValue(null);
+    }
+    onChange === null || onChange === void 0 || onChange(null, '');
+  }, [controlledValue, onChange]);
+
+  // 当前时间
+  var handleNow = (0, _react.useCallback)(function () {
+    var now = new Date();
+    var newValue = {
+      hour: now.getHours(),
+      minute: now.getMinutes(),
+      second: now.getSeconds()
+    };
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    var timeString = formatTime(newValue.hour, newValue.minute, newValue.second, actualFormat);
+    onChange === null || onChange === void 0 || onChange(newValue, timeString);
+    setOpen(false);
+  }, [controlledValue, actualFormat, onChange, setOpen]);
+  var classNames = ['kage-timepicker', "kage-timepicker-".concat(size), disabled && 'kage-timepicker-disabled', status && "kage-timepicker-status-".concat(status), isOpen && 'kage-timepicker-open', className].filter(Boolean).join(' ');
+  var displayValue = value ? formatTime(value.hour, value.minute, value.second, actualFormat) : '';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "kage-timepicker-input",
+      onClick: function onClick() {
+        return setOpen(!isOpen);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "kage-timepicker-value ".concat(!value ? 'kage-timepicker-placeholder' : ''),
+        children: value ? displayValue : placeholder
+      }), allowClear && value && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "kage-timepicker-clear",
+        onClick: handleClear,
+        children: "\xD7"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "kage-timepicker-icon",
+        children: "\uD83D\uDD50"
+      })]
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "kage-timepicker-panel",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "kage-timepicker-panel-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "kage-timepicker-column",
+          ref: hourRef,
+          children: hourOptions.map(function (hour) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              "data-value": hour,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.hour) === hour ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('hour', hour);
+              },
+              children: String(hour).padStart(2, '0')
+            }, hour);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "kage-timepicker-column",
+          ref: minuteRef,
+          children: minuteOptions.map(function (minute) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              "data-value": minute,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.minute) === minute ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('minute', minute);
+              },
+              children: String(minute).padStart(2, '0')
+            }, minute);
+          })
+        }), showSecond && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "kage-timepicker-column",
+          ref: secondRef,
+          children: secondOptions.map(function (second) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              "data-value": second,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.second) === second ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('second', second);
+              },
+              children: String(second).padStart(2, '0')
+            }, second);
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "kage-timepicker-footer",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "kage-timepicker-now",
+          onClick: handleNow,
+          children: "\u6B64\u523B"
+        })
+      })]
+    })]
+  });
+};
+var _default = exports.default = TimePicker;