@kdcloudjs/kdesign 1.0.2

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DateRender, PanelMode, CellRender, OnPanelChange, PickerMode, SharedTimeProps, DateType, DisabledTime, InnerLocale, Components } from './interface';
+export interface PickerPanelSharedProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    mode?: PanelMode;
+    tabIndex?: number;
+    yearItemNumber?: number;
+    locale: InnerLocale;
+    value?: DateType | null;
+    defaultValue?: DateType;
+    pickerValue?: DateType;
+    defaultPickerValue?: DateType;
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
+    superPrevIcon?: React.ReactNode;
+    superNextIcon?: React.ReactNode;
+    mergedActivePickerIndex?: 0 | 1;
+    useWeekdaysShort?: boolean;
+    showWeekNumber?: boolean;
+    showWeeksTitle?: boolean;
+    disabledDate?: (date: DateType) => boolean;
+    dateRender?: DateRender;
+    monthCellRender?: CellRender;
+    renderExtraFooter?: (mode: PanelMode) => React.ReactNode;
+    onSelect?: (value: DateType) => void;
+    onChange?: (value: DateType) => void;
+    onPanelChange?: OnPanelChange;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onOk?: (date: DateType) => void;
+    components?: Components;
+}
+export interface PickerPanelBaseProps extends PickerPanelSharedProps {
+    picker: Exclude<PickerMode, 'date' | 'time'>;
+}
+export interface PickerPanelDateProps extends PickerPanelSharedProps {
+    picker?: 'date';
+    showToday?: boolean;
+    showNow?: boolean;
+    showTime?: boolean | SharedTimeProps;
+    disabledTimePanel?: DisabledTime;
+}
+export interface PickerPanelTimeProps extends PickerPanelSharedProps, SharedTimeProps {
+    picker: 'time';
+}
+export declare type PickerPanelProps = PickerPanelBaseProps | PickerPanelDateProps | PickerPanelTimeProps;
+declare type OmitType = Omit<PickerPanelBaseProps, 'picker'> & Omit<PickerPanelDateProps, 'picker'> & Omit<PickerPanelTimeProps, 'picker'>;
+interface MergedPickerPanelProps extends OmitType {
+    picker?: PickerMode;
+}
+declare function Panel(props: MergedPickerPanelProps): JSX.Element;
+export default Panel;

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

@@ -0,0 +1,272 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Month from './panel/month/month';
+import Year from './panel/year/year';
+import Quarter from './panel/quarter/quarter';
+import Calendar from './calendar';
+import Time from './panel/time/time';
+import Context from './context';
+import Header from './panel/header/header';
+import { addMonths, addYears, getMonth, getYear, getYearsPeriod, DEFAULT_YEAR_ITEM_NUMBER } from './utils/date-fns';
+import { getClosingViewDate, getTimeProps } from './utils';
+import isBoolean from 'lodash/isBoolean';
+import DateTime from './panel/date-time/date-time';
+
+function Panel(props) {
+  // console.log('props', props)
+  var context = useContext(Context);
+  var prefixCls = context.prefixCls,
+      viewDate = context.viewDate,
+      setViewDate = context.setViewDate,
+      panelPosition = context.panelPosition;
+  var _props$picker = props.picker,
+      picker = _props$picker === void 0 ? 'date' : _props$picker,
+      format = props.format,
+      showTime = props.showTime,
+      mergedActivePickerIndex = props.mergedActivePickerIndex,
+      useWeekdaysShort = props.useWeekdaysShort,
+      showWeekNumber = props.showWeekNumber,
+      showWeeksTitle = props.showWeeksTitle,
+      disabledDate = props.disabledDate;
+
+  var getHeader = function getHeader() {
+    return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
+      className: headerObj.className
+    }), headerObj.children);
+  };
+
+  var renderYearPanel = function renderYearPanel() {
+    var _props$yearItemNumber = props.yearItemNumber,
+        yearItemNumber = _props$yearItemNumber === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber;
+    return /*#__PURE__*/React.createElement(Year, _extends({}, props, {
+      yearItemNumber: yearItemNumber
+    }));
+  };
+
+  var renderMonthPanel = function renderMonthPanel() {
+    return /*#__PURE__*/React.createElement(Month, _extends({}, props));
+  };
+
+  var renderQuarterPanel = function renderQuarterPanel() {
+    return /*#__PURE__*/React.createElement(Quarter, _extends({}, props));
+  };
+
+  var renderDatePanel = function renderDatePanel() {
+    if (!showTime) {
+      var dateProps = {
+        picker: picker,
+        useWeekdaysShort: useWeekdaysShort,
+        showWeekNumber: showWeekNumber,
+        showWeeksTitle: showWeeksTitle,
+        disabledDate: disabledDate
+      };
+      return /*#__PURE__*/React.createElement(Calendar, _extends({}, dateProps, {
+        picker: picker
+      }));
+    } else {
+      var _props = _extends(_extends(_extends({}, props), showTime && !isBoolean(showTime) ? getTimeProps(_extends(_extends({
+        format: format
+      }, showTime), {
+        picker: picker
+      })) : {}), picker === 'time' ? getTimeProps(_extends(_extends({
+        format: format
+      }, props), {
+        picker: picker
+      })) : {});
+
+      return /*#__PURE__*/React.createElement(DateTime, _extends({}, _props, {
+        picker: picker,
+        dateHeader: getHeader()
+      }));
+    }
+  };
+
+  var renderTimePanel = function renderTimePanel() {
+    var _props = _extends(_extends(_extends(_extends({}, props), {
+      format: undefined
+    }), showTime && !isBoolean(showTime) ? getTimeProps(_extends(_extends({
+      format: format
+    }, showTime), {
+      picker: picker
+    })) : {}), picker === 'time' ? getTimeProps(_extends(_extends({
+      format: format
+    }, props), {
+      picker: picker
+    })) : {});
+
+    return /*#__PURE__*/React.createElement(Time, _extends({}, _props));
+  };
+
+  var renderYearHeader = function renderYearHeader() {
+    var _props$yearItemNumber2 = props.yearItemNumber,
+        yearItemNumber = _props$yearItemNumber2 === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber2;
+
+    var _getYearsPeriod = getYearsPeriod(viewDate, yearItemNumber),
+        startPeriod = _getYearsPeriod.startPeriod,
+        endPeriod = _getYearsPeriod.endPeriod;
+
+    var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-year"));
+    return {
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, startPeriod, " - ", endPeriod),
+      className: headerCls
+    };
+  };
+
+  var renderMonthHeader = function renderMonthHeader() {
+    var year = getYear(viewDate);
+    var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"));
+    return {
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, year, "\u5E74"),
+      className: headerCls
+    };
+  };
+
+  var renderDateHeader = function renderDateHeader() {
+    var year = getYear(viewDate);
+    var month = getMonth(viewDate) + 1;
+    var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
+    return {
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, year, "\u5E74"), /*#__PURE__*/React.createElement("span", null, month, "\u6708")),
+      className: headerCls
+    };
+  };
+
+  var onSuperPrev = function onSuperPrev() {
+    var date;
+
+    if (picker === 'year') {
+      var _props$yearItemNumber3 = props.yearItemNumber,
+          yearItemNumber = _props$yearItemNumber3 === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber3;
+      date = addYears(viewDate, 0 - yearItemNumber);
+    } else {
+      date = addYears(viewDate, -1);
+    }
+
+    setViewDate(date, mergedActivePickerIndex);
+  };
+
+  var onSuperNext = function onSuperNext() {
+    var date;
+
+    if (picker === 'year') {
+      var _props$yearItemNumber4 = props.yearItemNumber,
+          yearItemNumber = _props$yearItemNumber4 === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber4;
+      var _viewDate = viewDate;
+
+      if (panelPosition) {
+        _viewDate = getClosingViewDate(viewDate, picker, -1, yearItemNumber);
+      }
+
+      date = addYears(_viewDate, yearItemNumber);
+    } else {
+      var _viewDate2 = viewDate;
+
+      if (panelPosition) {
+        _viewDate2 = getClosingViewDate(viewDate, picker, -1);
+      }
+
+      date = addYears(_viewDate2, 1);
+    }
+
+    setViewDate(date, mergedActivePickerIndex);
+  };
+
+  var onPrev = function onPrev() {
+    var date = addMonths(viewDate, -1);
+    setViewDate(date, mergedActivePickerIndex);
+  };
+
+  var onNext = function onNext() {
+    if (panelPosition) {
+      setViewDate(viewDate, mergedActivePickerIndex);
+    } else {
+      var date = addMonths(viewDate, 1);
+      setViewDate(date);
+    }
+  };
+
+  var panel;
+  var headerProps = {};
+  var headerObj;
+
+  switch (picker) {
+    case 'year':
+      {
+        panel = renderYearPanel();
+        headerObj = renderYearHeader();
+        headerProps = {
+          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+        };
+        break;
+      }
+
+    case 'month':
+      {
+        panel = renderMonthPanel();
+        headerObj = renderMonthHeader();
+        headerProps = {
+          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+        };
+        break;
+      }
+
+    case 'quarter':
+      {
+        panel = renderQuarterPanel();
+        headerObj = renderMonthHeader();
+        headerProps = {
+          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+        };
+        break;
+      }
+
+    case 'date':
+      {
+        headerObj = renderDateHeader();
+        headerProps = {
+          onPrev: panelPosition === 'right' ? undefined : onPrev,
+          onNext: panelPosition === 'left' ? undefined : onNext,
+          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+        };
+        panel = renderDatePanel();
+        break;
+      }
+
+    case 'week':
+      {
+        panel = renderDatePanel();
+        headerObj = renderDateHeader();
+        headerProps = {
+          onPrev: panelPosition === 'right' ? undefined : onPrev,
+          onNext: panelPosition === 'left' ? undefined : onNext,
+          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
+          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+        };
+        break;
+      }
+
+    case 'time':
+      {
+        panel = renderTimePanel();
+        break;
+      }
+
+    default:
+      {
+        break;
+      }
+  }
+
+  var showHeader = !(picker === 'date' && showTime || picker === 'time');
+  var containerCls = classnames("".concat(prefixCls, "-warpper"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerCls
+  }, showHeader ? getHeader() : null, panel);
+}
+
+export default Panel;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DateType } from './interface';
+import { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps } from './date-panel';
+import { BorderType, InputSiteType } from '../input/input';
+export interface PickerSharedProps extends React.AriaAttributes {
+    dropdownClassName?: string;
+    popupStyle?: React.CSSProperties;
+    transitionName?: string;
+    placeholder?: string;
+    allowClear?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    inputReadOnly?: boolean;
+    id?: string;
+    borderType: BorderType;
+    size: InputSiteType;
+    format?: string;
+    suffixIcon?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
+    superPrevIcon?: React.ReactNode;
+    superNextIcon?: React.ReactNode;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
+    onChange?: (value: DateType | null, dateString: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+}
+declare type OmitPanelProps<Props> = Omit<Props, 'onChange' | 'hideHeader' | 'pickerValue' | 'onPickerValueChange'>;
+export interface PickerBaseProps extends PickerSharedProps, OmitPanelProps<PickerPanelBaseProps> {
+}
+export interface PickerDateProps extends PickerSharedProps, OmitPanelProps<PickerPanelDateProps> {
+}
+export interface PickerTimeProps extends PickerSharedProps, Omit<OmitPanelProps<PickerPanelTimeProps>, 'format'> {
+    picker: 'time';
+    defaultOpenValue?: DateType;
+}
+export declare type PickerProps = PickerBaseProps | PickerDateProps | PickerTimeProps;
+declare function DatePicker(props: Partial<PickerProps>): JSX.Element;
+export default DatePicker;