@kdcloudjs/kdesign 1.0.2

package/lib/date-picker/panel/time/time-column.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateType } from '../../interface';
+export interface Unit {
+    label: React.ReactText;
+    value: number;
+    disabled: boolean;
+}
+export interface TimeUnitColumnProps {
+    prefixCls?: string;
+    units?: Unit[];
+    value?: number;
+    selectValue?: DateType;
+    hideDisabledOptions?: boolean;
+    onSelect?: (value: number) => void;
+}
+declare function TimeUnitColumn(props: TimeUnitColumnProps): JSX.Element;
+export default TimeUnitColumn;

package/lib/date-picker/panel/time/time-column.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../../utils");
+
+var _context = _interopRequireDefault(require("../../context"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function TimeUnitColumn(props) {
+  var prefixCls = props.prefixCls,
+      units = props.units,
+      onSelect = props.onSelect,
+      value = props.value,
+      hideDisabledOptions = props.hideDisabledOptions,
+      selectValue = props.selectValue;
+  var cellPrefixCls = "".concat(prefixCls, "-cell");
+
+  var _React$useContext = React.useContext(_context.default),
+      open = _React$useContext.open;
+
+  var ulRef = (0, React.useRef)(null);
+  var liRefs = (0, React.useRef)(new _map.default());
+  var scrollRef = (0, React.useRef)();
+  (0, React.useLayoutEffect)(function () {
+    var li = liRefs.current.get(value);
+
+    if (li && open !== false) {
+      (0, _utils.scrollTo)(ulRef.current, li.offsetTop, 120);
+    }
+  }, [value, selectValue]);
+  (0, React.useLayoutEffect)(function () {
+    if (open) {
+      var li = liRefs.current.get(value);
+
+      if (li) {
+        scrollRef.current = (0, _utils.waitElementReady)(li, function () {
+          (0, _utils.scrollTo)(ulRef.current, li.offsetTop, 0);
+        });
+      }
+    }
+
+    return function () {
+      var _a;
+
+      (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.call(scrollRef);
+    };
+  }, [open]);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-column"), {// [`${prefixCls}-column-active`]: active,
+    }),
+    ref: ulRef,
+    style: {
+      position: 'relative'
+    }
+  }, (0, _map2.default)(units).call(units, function (unit) {
+    var _classNames;
+
+    if (hideDisabledOptions && unit.disabled) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: unit.value,
+      ref: function ref(element) {
+        liRefs.current.set(unit.value, element);
+      },
+      className: (0, _classnames.default)(cellPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(cellPrefixCls, "-disabled"), unit.disabled), (0, _defineProperty2.default)(_classNames, "".concat(cellPrefixCls, "-selected"), value === unit.value), _classNames)),
+      onClick: function onClick() {
+        if (unit.disabled) {
+          return;
+        }
+
+        onSelect(unit.value);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(cellPrefixCls, "-inner")
+    }, unit.label));
+  }));
+}
+
+var _default = TimeUnitColumn;
+exports.default = _default;

package/lib/date-picker/panel/time/time.d.ts

@@ -0,0 +1,20 @@
+import { DateType, DisabledTimes, PanelSharedProps, PickerMode } from '../../interface';
+export interface SharedTimeProps extends DisabledTimes {
+    format?: string;
+    showNow?: boolean;
+    showHour?: boolean;
+    showMinute?: boolean;
+    showSecond?: boolean;
+    use12Hours?: boolean;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    hideDisabledOptions?: boolean;
+    defaultValue?: DateType;
+}
+export interface TimePanelProps extends PanelSharedProps, SharedTimeProps {
+    format?: string;
+    picker?: PickerMode;
+}
+declare function TimePanel(props: TimePanelProps): JSX.Element;
+export default TimePanel;

package/lib/date-picker/panel/time/time.js

@@ -0,0 +1,285 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _timeColumn = _interopRequireDefault(require("./time-column"));
+
+var _dateFns = require("../../utils/date-fns");
+
+var _context2 = _interopRequireDefault(require("../../context"));
+
+var _useStateMemo = _interopRequireDefault(require("../../hooks/use-state-memo"));
+
+var _utils = require("../../utils");
+
+var _header = _interopRequireDefault(require("../header/header"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// export interface TimePanelProps extends SharedTimeProps {
+//   format?: string
+//   // active?: boolean
+// }
+function shouldUnitsUpdate(prevUnits, nextUnits) {
+  if (prevUnits.length !== nextUnits.length) return true;
+
+  for (var i = 0; i < prevUnits.length; i += 1) {
+    if (prevUnits[i].disabled !== nextUnits[i].disabled) return true;
+  }
+
+  return false;
+}
+
+function TimePanel(props) {
+  var context = React.useContext(_context2.default);
+  var prefixCls = context.prefixCls,
+      dateValue = context.dateValue,
+      onSelect = context.onSelect,
+      _context$originHour = context.originHour,
+      originHour = _context$originHour === void 0 ? -1 : _context$originHour,
+      _context$minute = context.minute,
+      minute = _context$minute === void 0 ? -1 : _context$minute,
+      _context$second = context.second,
+      second = _context$second === void 0 ? -1 : _context$second,
+      _context$hours = context.hours,
+      rawHours = _context$hours === void 0 ? [] : _context$hours,
+      _context$minutes = context.minutes,
+      minutes = _context$minutes === void 0 ? [] : _context$minutes,
+      _context$seconds = context.seconds,
+      seconds = _context$seconds === void 0 ? [] : _context$seconds,
+      disabledTimePanel = context.disabledTimePanel;
+  var picker = props.picker,
+      _props$format = props.format,
+      format = _props$format === void 0 ? 'HH:mm:ss' : _props$format,
+      showHour = props.showHour,
+      showMinute = props.showMinute,
+      showSecond = props.showSecond,
+      _props$use12Hours = props.use12Hours,
+      use12Hours = _props$use12Hours === void 0 ? false : _props$use12Hours,
+      hideDisabledOptions = props.hideDisabledOptions; // console.log(rawHours)
+
+  if (disabledTimePanel) {
+    originHour = -1;
+    minute = -1;
+    second = -1;
+  } // const bodyOperationRef = React.useRef<BodyOperationRef>()
+  // ======================= Keyboard =======================
+  // const [activeColumnIndex, setActiveColumnIndex] = React.useState(-1)
+  // debugger
+
+
+  var value = dateValue; // if (mergedActivePickerIndex === 0) {
+  //   value = rangeValue![0]
+  // } else if (mergedActivePickerIndex === 1) {
+  //   value = rangeValue![1]
+  // }
+
+  var columns = [];
+  var columnPrefixCls = "".concat(prefixCls, "-time");
+  var isPM; // const originHour = value ? getHours(value) : -1
+
+  var hour = originHour; // const minute = value ? getMinutes(value) : -1
+  // const second = value ? getSeconds(value) : -1
+
+  var setTime = function setTime(isPM, newHour, newMinute, newSecond) {
+    var _a, _b, _c;
+
+    var date = value || (0, _dateFns.newDate)();
+
+    var _hour = newHour > -1 ? newHour : (_a = (0, _find.default)(rawHours).call(rawHours, function (n) {
+      return !n.disabled;
+    })) === null || _a === void 0 ? void 0 : _a.value;
+
+    var _minute = newMinute > -1 ? newMinute : (_b = (0, _find.default)(minutes).call(minutes, function (n) {
+      return !n.disabled;
+    })) === null || _b === void 0 ? void 0 : _b.value;
+
+    var _second = newSecond > -1 ? newSecond : (_c = (0, _find.default)(seconds).call(seconds, function (n) {
+      return !n.disabled;
+    })) === null || _c === void 0 ? void 0 : _c.value;
+
+    if (!_hour && _hour !== 0) {
+      _hour = -1;
+    }
+
+    if (!_minute && _minute !== 0) {
+      _minute = -1;
+    }
+
+    if (!_second && _second !== 0) {
+      _second = -1;
+    } // 所有时或分或秒 disabled 时，返回空（date-time）
+
+
+    if (_hour > -1 && _minute > -1 && _second > -1) {
+      date = (0, _dateFns.setTime)(date, {
+        hour: !use12Hours || !isPM ? _hour : _hour + 12,
+        minute: _minute,
+        second: _second
+      });
+      return date;
+    }
+
+    return null;
+  }; // const rawHours = generateUnits(0, 23, hourStep, disabledHours && disabledHours())
+
+
+  var memorizedRawHours = (0, _useStateMemo.default)(function () {
+    return rawHours;
+  }, rawHours, shouldUnitsUpdate);
+
+  if (use12Hours) {
+    isPM = hour >= 12;
+    hour %= 12;
+  }
+
+  var _React$useMemo = React.useMemo(function () {
+    if (!use12Hours) {
+      return [false, false];
+    }
+
+    var AMPMDisabled = [true, true];
+    memorizedRawHours.forEach(function (_ref) {
+      var disabled = _ref.disabled,
+          hourValue = _ref.value;
+      if (disabled) return;
+
+      if (hourValue >= 12) {
+        AMPMDisabled[1] = false;
+      } else {
+        AMPMDisabled[0] = false;
+      }
+    });
+    return AMPMDisabled;
+  }, [use12Hours, memorizedRawHours]),
+      _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
+      AMDisabled = _React$useMemo2[0],
+      PMDisabled = _React$useMemo2[1];
+
+  var hours = React.useMemo(function () {
+    var _context;
+
+    if (!use12Hours) return memorizedRawHours;
+    return (0, _map.default)(_context = (0, _filter.default)(memorizedRawHours).call(memorizedRawHours, isPM ? function (hourMeta) {
+      return hourMeta.value >= 12;
+    } : function (hourMeta) {
+      return hourMeta.value < 12;
+    })).call(_context, function (hourMeta) {
+      var hourValue = hourMeta.value % 12;
+      var hourLabel = hourValue === 0 ? '12' : (0, _utils.leftPad)(hourValue, 2);
+      return (0, _extends2.default)((0, _extends2.default)({}, hourMeta), {
+        label: hourLabel,
+        value: hourValue
+      });
+    });
+  }, [use12Hours, memorizedRawHours, isPM]); // const minutes = generateUnits(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour))
+  // const seconds = generateUnits(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute))
+
+  function addColumnNode(condition, node, columnValue, units, onColumnSelect) {
+    if (condition !== false) {
+      columns.push({
+        node: /*#__PURE__*/React.cloneElement(node, {
+          prefixCls: columnPrefixCls,
+          value: columnValue,
+          onSelect: onColumnSelect,
+          units: units,
+          selectValue: value,
+          hideDisabledOptions: hideDisabledOptions
+        })
+      });
+    }
+  }
+
+  addColumnNode(showHour, /*#__PURE__*/React.createElement(_timeColumn.default, {
+    key: "hour"
+  }), hour, hours, function (num) {
+    var time = setTime(isPM, num, minute, second);
+
+    if (time) {
+      onSelect(time, 'mouse');
+    }
+  });
+  addColumnNode(showMinute, /*#__PURE__*/React.createElement(_timeColumn.default, {
+    key: "minute"
+  }), minute, minutes, function (num) {
+    var time = setTime(isPM, hour, num, second);
+
+    if (time) {
+      onSelect(time, 'mouse');
+    }
+  });
+  addColumnNode(showSecond, /*#__PURE__*/React.createElement(_timeColumn.default, {
+    key: "second"
+  }), second, seconds, function (num) {
+    var time = setTime(isPM, hour, minute, num);
+
+    if (time) {
+      onSelect(time, 'mouse');
+    }
+  });
+  var PMIndex = -1;
+
+  if (typeof isPM === 'boolean') {
+    PMIndex = isPM ? 1 : 0;
+  }
+
+  addColumnNode(use12Hours === true, /*#__PURE__*/React.createElement(_timeColumn.default, {
+    key: "12hours"
+  }), PMIndex, [{
+    label: 'AM',
+    value: 0,
+    disabled: AMDisabled
+  }, {
+    label: 'PM',
+    value: 1,
+    disabled: PMDisabled
+  }], function (num) {
+    var time = setTime(!!num, hour, minute, second);
+
+    if (time) {
+      onSelect(time, 'mouse');
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-time"), {// [`${panelPrefixCls}-active`]: active,
+    })
+  }, picker !== 'time' ? /*#__PURE__*/React.createElement(_header.default, {
+    className: "".concat(prefixCls, "-time-header")
+  }, !disabledTimePanel && value ? (0, _dateFns.formatDate)(value, format) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-content"), {// [`${panelPrefixCls}-active`]: active,
+    })
+  }, (0, _map.default)(columns).call(columns, function (_ref2) {
+    var node = _ref2.node;
+    return node;
+  })));
+}
+
+var _default = TimePanel;
+exports.default = _default;

package/lib/date-picker/panel/week/week.d.ts

@@ -0,0 +1,10 @@
+import { DateType, PickerMode } from '../../interface';
+export interface WeekProps {
+    day: DateType;
+    picker: PickerMode;
+    showWeekNumber?: boolean;
+    showTime?: boolean;
+    disabledDate?: (date: DateType) => boolean;
+}
+declare function Week(props: WeekProps): JSX.Element;
+export default Week;