@kdcloudjs/kdesign 1.0.2

package/es/date-picker/panel/header/header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface HeaderProps {
+    children: React.ReactNode;
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
+    superPrevIcon?: React.ReactNode;
+    superNextIcon?: React.ReactNode;
+    className?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    onSuperPrev?: () => void;
+    onSuperNext?: () => void;
+}
+declare function Header(props: HeaderProps): JSX.Element;
+export default Header;

package/es/date-picker/panel/header/header.js

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Icon from '../../../icon';
+import Context from '../../context';
+
+function Header(props) {
+  var context = useContext(Context);
+  var prefixCls = context.prefixCls;
+  var className = props.className,
+      children = props.children,
+      prevIcon = props.prevIcon,
+      nextIcon = props.nextIcon,
+      superPrevIcon = props.superPrevIcon,
+      superNextIcon = props.superNextIcon,
+      onPrev = props.onPrev,
+      onNext = props.onNext,
+      onSuperPrev = props.onSuperPrev,
+      onSuperNext = props.onSuperNext;
+  var iconCls = classnames("".concat(prefixCls, "-header-icon"));
+  var textCls = classnames("".concat(prefixCls, "-header-text"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, onSuperPrev ? /*#__PURE__*/React.createElement("span", {
+    className: iconCls,
+    onClick: onSuperPrev
+  }, superPrevIcon || /*#__PURE__*/React.createElement(Icon, {
+    type: "double-arrow-left"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: iconCls
+  }), onPrev ? /*#__PURE__*/React.createElement("span", {
+    className: iconCls,
+    onClick: onPrev
+  }, prevIcon || /*#__PURE__*/React.createElement(Icon, {
+    type: "arrow-left"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: iconCls
+  }), /*#__PURE__*/React.createElement("span", {
+    className: textCls
+  }, children), onNext ? /*#__PURE__*/React.createElement("span", {
+    className: iconCls,
+    onClick: onNext
+  }, nextIcon || /*#__PURE__*/React.createElement(Icon, {
+    type: "arrow-right"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: iconCls
+  }), onSuperNext ? /*#__PURE__*/React.createElement("span", {
+    className: iconCls,
+    onClick: onSuperNext
+  }, superNextIcon || /*#__PURE__*/React.createElement(Icon, {
+    type: "double-arrow-right"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: iconCls
+  }));
+}
+
+export default Header;

package/es/date-picker/panel/month/month.d.ts

@@ -0,0 +1,8 @@
+import { DateType } from '../../interface';
+export declare const monthsNumToText: string[];
+export interface MonthProps {
+    showFullMonth?: boolean;
+    disabledDate?(date: DateType): boolean;
+}
+declare function Month(props: MonthProps): JSX.Element;
+export default Month;

package/es/date-picker/panel/month/month.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { getMonth, newDate, getYear, setMonth, isAfter, isBefore, isSameMonth, getStartOfMonth } from '../../utils/date-fns';
+import Context from '../../context';
+import useRangeCls from '../../hooks/use-range-cls';
+export var monthsNumToText = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '13月'];
+var monthsThreeColumns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
+
+function Month(props) {
+  var context = useContext(Context);
+  var prefixCls = context.prefixCls,
+      dateValue = context.dateValue,
+      viewDate = context.viewDate,
+      onSelect = context.onSelect,
+      onDateMouseEnter = context.onDateMouseEnter,
+      onDateMouseLeave = context.onDateMouseLeave,
+      rangeValue = context.rangeValue,
+      panelPosition = context.panelPosition,
+      hoverRangedValue = context.hoverRangedValue;
+  var disabledDate = props.disabledDate;
+
+  var _dateValue;
+
+  if (panelPosition) {
+    _dateValue = rangeValue;
+  } else {
+    _dateValue = dateValue;
+  }
+
+  var hasFindSelected = false;
+  var hasFindToday = false;
+
+  var getMonthSelected = function getMonthSelected(month) {
+    if (hasFindSelected) return false;
+
+    if (Array.isArray(_dateValue)) {
+      return _dateValue[0] && getMonth(_dateValue[0]) === month && getYear(_dateValue[0]) === getYear(viewDate) || _dateValue[1] && getMonth(_dateValue[1]) === month && getYear(_dateValue[1]) === getYear(viewDate);
+    } else {
+      if (_dateValue && getMonth(_dateValue) === month && getYear(_dateValue) === getYear(viewDate)) {
+        hasFindSelected = true;
+        return true;
+      }
+
+      return false;
+    }
+  };
+
+  var getMonthToday = function getMonthToday(month) {
+    if (hasFindToday) return false;
+
+    if (getYear(viewDate) === getYear(newDate()) && month === getMonth(newDate())) {
+      hasFindToday = true;
+
+      if (Array.isArray(_dateValue)) {
+        return _dateValue[0] ? getMonth(_dateValue[0]) !== month : _dateValue[1] ? getMonth(_dateValue[1]) !== month : true;
+      } else {
+        return _dateValue ? getMonth(_dateValue) !== month : true;
+      }
+    }
+  };
+
+  var getMonthClassNames = function getMonthClassNames(i) {
+    var _classnames;
+
+    return classnames("".concat(prefixCls, "-month-text"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-month-text-selected"), getMonthSelected(i)), _defineProperty(_classnames, "".concat(prefixCls, "-month-text-today"), getMonthToday(i)), _classnames));
+  };
+
+  var getRangeCls = useRangeCls({
+    prefixCls: prefixCls,
+    rangeValue: rangeValue,
+    hoverRangedValue: hoverRangedValue,
+    isRange: !!panelPosition,
+    isAfterStart: function isAfterStart(date, rangedValue) {
+      return rangedValue[0] ? isAfter(getStartOfMonth(date), getStartOfMonth(rangedValue[0])) : false;
+    },
+    isBeforeEnd: function isBeforeEnd(date, rangedValue) {
+      return rangedValue[1] ? isBefore(getStartOfMonth(date), getStartOfMonth(rangedValue[1])) : false;
+    },
+    isStart: function isStart(date, rangedValue) {
+      return rangedValue[0] ? isSameMonth(date, rangedValue[0]) : false;
+    },
+    isEnd: function isEnd(date, rangedValue) {
+      return rangedValue[1] ? isSameMonth(date, rangedValue[1]) : false;
+    }
+  });
+
+  var handleClick = function handleClick(date) {
+    if (!(disabledDate && disabledDate(date))) {
+      onSelect(date, 'mouse');
+    }
+  };
+
+  var renderMonthItem = function renderMonthItem(i) {
+    var monthsText = monthsNumToText[i];
+    return /*#__PURE__*/React.createElement("span", {
+      className: getMonthClassNames(i)
+    }, monthsText);
+  };
+
+  var renderMonth = function renderMonth() {
+    var monthLayout = monthsThreeColumns;
+    var monthLineCls = classnames("".concat(prefixCls, "-month-line"));
+    return _mapInstanceProperty(monthLayout).call(monthLayout, function (month, i) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: monthLineCls,
+        key: i
+      }, _mapInstanceProperty(month).call(month, function (m, j) {
+        var month = setMonth(viewDate, m);
+        var _props = {
+          onClick: function onClick() {
+            return handleClick(month);
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (onDateMouseEnter && !(disabledDate && disabledDate(month))) {
+              onDateMouseEnter(month);
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            if (onDateMouseLeave) {
+              onDateMouseLeave();
+            }
+          }
+        };
+        var monthItemCls = classnames("".concat(prefixCls, "-month-item"), _defineProperty({}, "".concat(prefixCls, "-month-item-disabled"), disabledDate && disabledDate(month)), getRangeCls(month));
+        return /*#__PURE__*/React.createElement("div", _extends({
+          className: monthItemCls,
+          key: j
+        }, _props), renderMonthItem(m));
+      }));
+    });
+  };
+
+  var monthCls = classnames("".concat(prefixCls, "-month"));
+  var monthWarpperCls = classnames("".concat(prefixCls, "-month-warpper"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: monthCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: monthWarpperCls
+  }, renderMonth()));
+}
+
+export default Month;

package/es/date-picker/panel/quarter/quarter.d.ts

@@ -0,0 +1,6 @@
+import { DateType } from '../../interface';
+interface QuarterProps {
+    disabledDate?: (date: DateType) => boolean;
+}
+declare function Quarter(props: QuarterProps): JSX.Element;
+export default Quarter;

package/es/date-picker/panel/quarter/quarter.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Context from '../../context';
+import { getQuarter, getStartOfQuarter, getYear, isAfter, isBefore, isSameQuarter, newDate, setQuarter } from '../../utils/date-fns';
+import useRangeCls from '../../hooks/use-range-cls';
+var quarterList = ['Q1', 'Q2', 'Q3', 'Q4'];
+
+function Quarter(props) {
+  var context = useContext(Context);
+  var prefixCls = context.prefixCls,
+      dateValue = context.dateValue,
+      viewDate = context.viewDate,
+      onSelect = context.onSelect,
+      onDateMouseEnter = context.onDateMouseEnter,
+      onDateMouseLeave = context.onDateMouseLeave,
+      rangeValue = context.rangeValue,
+      panelPosition = context.panelPosition,
+      hoverRangedValue = context.hoverRangedValue;
+  var disabledDate = props.disabledDate;
+
+  var _dateValue;
+
+  if (panelPosition) {
+    _dateValue = rangeValue;
+  } else {
+    _dateValue = dateValue;
+  }
+
+  var hasFindSelected = false;
+  var hasFindToday = false;
+
+  var getQuarterSelected = function getQuarterSelected(quarter) {
+    if (hasFindSelected) return false;
+
+    if (Array.isArray(_dateValue)) {
+      return _dateValue[0] && getQuarter(_dateValue[0]) === quarter && getYear(_dateValue[0]) === getYear(viewDate) || _dateValue[1] && getQuarter(_dateValue[1]) === quarter && getYear(_dateValue[1]) === getYear(viewDate);
+    } else {
+      if (_dateValue && getQuarter(_dateValue) === quarter && getYear(_dateValue) === getYear(viewDate)) {
+        hasFindSelected = true;
+        return true;
+      }
+
+      return false;
+    }
+  };
+
+  var getQuarterToday = function getQuarterToday(quarter) {
+    if (hasFindToday) return false;
+
+    if (getYear(viewDate) === getYear(newDate()) && quarter === getQuarter(newDate())) {
+      hasFindToday = true;
+
+      if (Array.isArray(_dateValue)) {
+        return _dateValue[0] ? getQuarter(_dateValue[0]) !== quarter : _dateValue[1] ? getQuarter(_dateValue[1]) !== quarter : true;
+      } else {
+        return _dateValue ? getQuarter(_dateValue) !== quarter : true;
+      }
+    }
+  };
+
+  var getQuarterClassNames = function getQuarterClassNames(q) {
+    var _classnames;
+
+    return classnames("".concat(prefixCls, "-quarter-text"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-quarter-text-selected"), getQuarterSelected(q)), _defineProperty(_classnames, "".concat(prefixCls, "-quarter-text-today"), getQuarterToday(q)), _classnames));
+  };
+
+  var getRangeCls = useRangeCls({
+    prefixCls: prefixCls,
+    rangeValue: rangeValue,
+    hoverRangedValue: hoverRangedValue,
+    isRange: !!panelPosition,
+    isAfterStart: function isAfterStart(date, rangedValue) {
+      return rangedValue[0] ? isAfter(getStartOfQuarter(date), getStartOfQuarter(rangedValue[0])) : false;
+    },
+    isBeforeEnd: function isBeforeEnd(date, rangedValue) {
+      return rangedValue[1] ? isBefore(getStartOfQuarter(date), getStartOfQuarter(rangedValue[1])) : false;
+    },
+    isStart: function isStart(date, rangedValue) {
+      return rangedValue[0] ? isSameQuarter(date, rangedValue[0]) : false;
+    },
+    isEnd: function isEnd(date, rangedValue) {
+      return rangedValue[1] ? isSameQuarter(date, rangedValue[1]) : false;
+    }
+  });
+
+  var handleClick = function handleClick(date) {
+    if (!(disabledDate && disabledDate(date))) {
+      onSelect(date, 'mouse');
+    }
+  };
+
+  var renderQuarter = function renderQuarter() {
+    return _mapInstanceProperty(quarterList).call(quarterList, function (n, i) {
+      var quarter = setQuarter(viewDate, i + 1);
+      var _props = {
+        onClick: function onClick() {
+          return handleClick(quarter);
+        },
+        onMouseEnter: function onMouseEnter() {
+          if (onDateMouseEnter && !(disabledDate && disabledDate(quarter))) {
+            onDateMouseEnter(quarter);
+          }
+        },
+        onMouseLeave: function onMouseLeave() {
+          if (onDateMouseLeave) {
+            onDateMouseLeave();
+          }
+        }
+      };
+      var quarterCls = classnames("".concat(prefixCls, "-quarter-item"), _defineProperty({}, "".concat(prefixCls, "-quarter-item-disabled"), disabledDate && disabledDate(quarter)), getRangeCls(quarter));
+      return /*#__PURE__*/React.createElement("div", {
+        key: n,
+        className: quarterCls
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        className: getQuarterClassNames(i + 1)
+      }, _props), n));
+    });
+  };
+
+  var quarterCls = classnames("".concat(prefixCls, "-quarter"));
+  var quarterWarpperCls = classnames("".concat(prefixCls, "-quarter-warpper"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: quarterCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: quarterWarpperCls
+  }, renderQuarter()));
+}
+
+export default Quarter;

package/es/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/es/date-picker/panel/time/time-column.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import * as React from 'react';
+import { useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import { scrollTo, waitElementReady } from '../../utils';
+import Context from '../../context';
+
+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),
+      open = _React$useContext.open;
+
+  var ulRef = useRef(null);
+  var liRefs = useRef(new _Map());
+  var scrollRef = useRef();
+  useLayoutEffect(function () {
+    var li = liRefs.current.get(value);
+
+    if (li && open !== false) {
+      scrollTo(ulRef.current, li.offsetTop, 120);
+    }
+  }, [value, selectValue]);
+  useLayoutEffect(function () {
+    if (open) {
+      var li = liRefs.current.get(value);
+
+      if (li) {
+        scrollRef.current = waitElementReady(li, function () {
+          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: classNames("".concat(prefixCls, "-column"), {// [`${prefixCls}-column-active`]: active,
+    }),
+    ref: ulRef,
+    style: {
+      position: 'relative'
+    }
+  }, _mapInstanceProperty(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: classNames(cellPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(cellPrefixCls, "-disabled"), unit.disabled), _defineProperty(_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));
+  }));
+}
+
+export default TimeUnitColumn;

package/es/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;