@kdcloudjs/kdesign 1.0.2

package/es/date-picker/popper.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import React, { useState, useCallback } from 'react';
+import classnames from 'classnames';
+import { usePopper } from 'react-popper';
+import { useOnClickOutside } from '../_utils/hooks';
+
+function Popper(props, ref) {
+  var _classnames;
+
+  var showArrow = props.showArrow,
+      onClickOutside = props.onClickOutside,
+      inputDivRef = props.inputDivRef,
+      prefixCls = props.prefixCls,
+      _props$arrowLeft = props.arrowLeft,
+      arrowLeft = _props$arrowLeft === void 0 ? 0 : _props$arrowLeft,
+      dropdownClassName = props.dropdownClassName,
+      popupStyle = props.popupStyle,
+      isRange = props.isRange,
+      isShowTime = props.isShowTime,
+      picker = props.picker; // ref
+  // const panelDivRef = React.useRef<HTMLDivElement>(null)
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      arrowRef = _useState2[0],
+      setArrowRef = _useState2[1];
+
+  var onSetArrowRef = useCallback(function (ref) {
+    setArrowRef(ref);
+  }, []);
+  useOnClickOutside([ref, inputDivRef], function () {
+    onClickOutside && onClickOutside();
+  }); // console.log(arrowLeft)
+
+  var _usePopper = usePopper(inputDivRef.current, ref.current, {
+    placement: 'bottom-start',
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowRef,
+        padding: {
+          left: 30
+        }
+      }
+    }]
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var arrowCls = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-has-arrow"), showArrow), _defineProperty(_classnames, "".concat(prefixCls, "-no-arrow"), !showArrow), _classnames));
+  var panelWarpperCls = classnames("".concat(prefixCls, "-panel"), dropdownClassName, _defineProperty({
+    'has-arrow': showArrow,
+    'no-arrow': !showArrow
+  }, "".concat(prefixCls, "-panel-range"), isRange && !isShowTime && picker !== 'time'));
+  var arrowPositionStyle = {
+    transform: "translate(".concat(20 + arrowLeft, "px, 0px)")
+  };
+
+  var popperStyle = _extends(_extends({}, styles.popper), popupStyle);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: popperStyle
+  }, attributes.popper, {
+    className: panelWarpperCls,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: onSetArrowRef,
+    style: (styles.arrow, arrowPositionStyle),
+    className: arrowCls
+  }), props.children);
+}
+
+export default /*#__PURE__*/React.forwardRef(Popper);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { InputCommonProps, OutInputCommonProps, RangeValue } from '../interface';
+export interface InputRangeProps extends OutInputCommonProps, InputCommonProps {
+    startInputRef: React.RefObject<HTMLInputElement>;
+    endInputRef: React.RefObject<HTMLInputElement>;
+    startInputDivRef: React.RefObject<HTMLDivElement>;
+    endInputDivRef: React.RefObject<HTMLDivElement>;
+    separatorRef: React.RefObject<HTMLDivElement>;
+    activeBarPositionStyle: React.CSSProperties;
+    activeBarWidth: number;
+    dateValue: RangeValue;
+    selectedValue: RangeValue;
+    mergedDisabled: [boolean, boolean];
+    mergedActivePickerIndex: 0 | 1;
+    startText: string;
+    endText: string;
+    startHoverValue?: string;
+    endHoverValue?: string;
+    startOpen: boolean;
+    endOpen: boolean;
+    separator?: React.ReactNode | string;
+    placeholder?: [string, string];
+    resetStartText: () => void;
+    resetEndText: () => void;
+    setSelectedValue: (date: RangeValue) => void;
+    triggerStartTextChange: (value: string) => void;
+    triggerEndTextChange: (value: string) => void;
+    triggerOpen: (value: boolean, index: 0 | 1) => void;
+    triggerChange: (date: RangeValue, index?: 0 | 1) => void;
+    setMergedActivePickerIndex: (index: number) => void;
+    setHoverRangedValue: (value: RangeValue) => void;
+    triggerOpenAndFocus: (index: 0 | 1) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<InputRangeProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/es/date-picker/range/input-range.js

@@ -0,0 +1,246 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { Icon } from '../../index';
+import usePickerInput from '../hooks/use-picker-input';
+import { getInputSize, getRangePlaceholder, elementsContains, getValue, updateValues } from '../utils';
+
+function InputDate(props, ref) {
+  var _classnames, _context, _classnames2, _context2, _classnames3, _context3, _classnames4;
+
+  var startInputRef = props.startInputRef,
+      endInputRef = props.endInputRef,
+      startInputDivRef = props.startInputDivRef,
+      endInputDivRef = props.endInputDivRef,
+      separatorRef = props.separatorRef,
+      panelDivRef = props.panelDivRef,
+      activeBarPositionStyle = props.activeBarPositionStyle,
+      activeBarWidth = props.activeBarWidth,
+      id = props.id,
+      autoFocus = props.autoFocus,
+      allowClear = props.allowClear,
+      className = props.className,
+      borderType = props.borderType,
+      mergedDisabled = props.mergedDisabled,
+      mergedActivePickerIndex = props.mergedActivePickerIndex,
+      startHoverValue = props.startHoverValue,
+      endHoverValue = props.endHoverValue,
+      startText = props.startText,
+      endText = props.endText,
+      picker = props.picker,
+      propsPlaceholder = props.placeholder,
+      style = props.style,
+      size = props.size,
+      needConfirmButton = props.needConfirmButton,
+      dateValue = props.dateValue,
+      selectedValue = props.selectedValue,
+      startOpen = props.startOpen,
+      endOpen = props.endOpen,
+      separator = props.separator,
+      suffixIcon = props.suffixIcon,
+      clearIcon = props.clearIcon,
+      format = props.format,
+      open = props.open,
+      readOnly = props.readOnly,
+      prefixCls = props.prefixCls,
+      locale = props.locale,
+      dataOrAriaProps = props.dataOrAriaProps,
+      _onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      onMouseDown = props.onMouseDown,
+      onMouseUp = props.onMouseUp,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onContextMenu = props.onContextMenu,
+      onClick = props.onClick,
+      resetStartText = props.resetStartText,
+      resetEndText = props.resetEndText,
+      setSelectedValue = props.setSelectedValue,
+      triggerStartTextChange = props.triggerStartTextChange,
+      triggerEndTextChange = props.triggerEndTextChange,
+      _triggerOpen = props.triggerOpen,
+      triggerChange = props.triggerChange,
+      triggerOpenAndFocus = props.triggerOpenAndFocus,
+      setMergedActivePickerIndex = props.setMergedActivePickerIndex,
+      setHoverRangedValue = props.setHoverRangedValue;
+  var preventBlurRef = useRef(false);
+  var placeholder = getRangePlaceholder(picker, locale, propsPlaceholder);
+
+  var onInternalonClick = function onInternalonClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+
+    if (!open && !startInputRef.current.contains(e.target) && !endInputRef.current.contains(e.target)) {
+      if (!mergedDisabled[0]) {
+        triggerOpenAndFocus(0);
+      } else if (!mergedDisabled[1]) {
+        triggerOpenAndFocus(1);
+      }
+    }
+  };
+
+  var onInternalonMouseDown = function onInternalonMouseDown(e) {
+    if (onMouseDown) {
+      onMouseDown(e);
+    }
+
+    if (open) {
+      preventBlurRef.current = true;
+      requestAnimationFrame(function () {
+        preventBlurRef.current = false;
+      });
+    }
+
+    if (open && (startFocused || endFocused) && !startInputRef.current.contains(e.target) && !endInputRef.current.contains(e.target)) {
+      e.preventDefault();
+    }
+  };
+
+  var suffixNode = /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-suffix")
+  }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+    type: picker === 'time' ? 'waiting' : 'date'
+  }));
+  var clearNode;
+
+  if (allowClear && (getValue(dateValue, 0) && !mergedDisabled[0] || getValue(dateValue, 1) && !mergedDisabled[1])) {
+    clearNode = /*#__PURE__*/React.createElement("span", {
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onMouseUp: function onMouseUp(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var values = dateValue;
+
+        if (!mergedDisabled[0]) {
+          values = updateValues(values, null, 0);
+        }
+
+        if (!mergedDisabled[1]) {
+          values = updateValues(values, null, 1);
+        }
+
+        triggerChange(values);
+
+        _triggerOpen(false, mergedActivePickerIndex);
+
+        setHoverRangedValue([null, null]);
+      },
+      className: "".concat(prefixCls, "-clear")
+    }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "close"
+    }));
+  }
+
+  var getSharedInputHookProps = function getSharedInputHookProps(index, resetText) {
+    return {
+      preventBlurRef: preventBlurRef,
+      blurToCancel: needConfirmButton,
+      onBlur: onBlur,
+      isClickOutside: function isClickOutside(target) {
+        return !elementsContains([panelDivRef.current, startInputDivRef.current, endInputDivRef.current], target);
+      },
+      onFocus: function onFocus(e) {
+        setMergedActivePickerIndex(index);
+
+        if (_onFocus) {
+          _onFocus(e);
+        }
+      },
+      triggerOpen: function triggerOpen(newOpen) {
+        _triggerOpen(newOpen, index);
+      },
+      onSubmit: function onSubmit() {
+        triggerChange(selectedValue, index);
+        resetText();
+      },
+      onCancel: function onCancel() {
+        _triggerOpen(false, index);
+
+        setSelectedValue(dateValue);
+        resetText();
+      }
+    };
+  };
+
+  var _usePickerInput = usePickerInput(_extends(_extends({}, getSharedInputHookProps(0, resetStartText)), {
+    open: startOpen,
+    value: startText
+  })),
+      _usePickerInput2 = _slicedToArray(_usePickerInput, 2),
+      startInputProps = _usePickerInput2[0],
+      _usePickerInput2$ = _usePickerInput2[1],
+      startFocused = _usePickerInput2$.focused,
+      startTyping = _usePickerInput2$.typing;
+
+  var _usePickerInput3 = usePickerInput(_extends(_extends({}, getSharedInputHookProps(1, resetEndText)), {
+    open: endOpen,
+    value: endText
+  })),
+      _usePickerInput4 = _slicedToArray(_usePickerInput3, 2),
+      endInputProps = _usePickerInput4[0],
+      _usePickerInput4$ = _usePickerInput4[1],
+      endFocused = _usePickerInput4$.focused,
+      endTyping = _usePickerInput4$.typing;
+
+  var borderClass = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classnames, "".concat(prefixCls, "-borderless"), borderType === 'none'), _classnames));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classnames(prefixCls, "".concat(prefixCls, "-range"), className, borderClass, (_classnames2 = {}, _defineProperty(_classnames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, size), size), _defineProperty(_classnames2, "".concat(prefixCls, "-disabled"), mergedDisabled[0] && mergedDisabled[1]), _defineProperty(_classnames2, "".concat(prefixCls, "-focused"), mergedActivePickerIndex === 0 ? startFocused : endFocused), _classnames2)),
+    style: style,
+    onMouseDown: onInternalonMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: onContextMenu,
+    onClick: onInternalonClick
+  }, dataOrAriaProps), /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-input"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-input-active"), mergedActivePickerIndex === 0), _defineProperty(_classnames3, "".concat(prefixCls, "-input-placeholder"), !!startHoverValue), _defineProperty(_classnames3, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-input-")).call(_context2, size), size), _classnames3)),
+    ref: startInputDivRef
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: id,
+    ref: startInputRef,
+    disabled: mergedDisabled[0],
+    readOnly: readOnly || typeof format === 'function' || !startTyping,
+    value: startHoverValue || startText,
+    onChange: function onChange(e) {
+      triggerStartTextChange(e.target.value);
+    },
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    autoFocus: autoFocus,
+    placeholder: getValue(placeholder, 0) || ''
+  }, startInputProps, {
+    size: getInputSize(picker, format)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-range-separator"),
+    ref: separatorRef
+  }, separator), /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-input"), (_classnames4 = {}, _defineProperty(_classnames4, "".concat(prefixCls, "-input-active"), mergedActivePickerIndex === 1), _defineProperty(_classnames4, "".concat(prefixCls, "-input-placeholder"), !!endHoverValue), _defineProperty(_classnames4, _concatInstanceProperty(_context3 = "".concat(prefixCls, "-input-")).call(_context3, size), size), _classnames4)),
+    ref: endInputDivRef
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: endInputRef,
+    disabled: mergedDisabled[1],
+    readOnly: readOnly || typeof format === 'function' || !endTyping,
+    value: endHoverValue || endText,
+    onChange: function onChange(e) {
+      triggerEndTextChange(e.target.value);
+    },
+    placeholder: getValue(placeholder, 1) || ''
+  }, endInputProps, {
+    size: getInputSize(picker, format)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-active-bar"),
+    style: _extends(_extends({}, activeBarPositionStyle), {
+      width: activeBarWidth,
+      position: 'absolute'
+    })
+  }), suffixNode, clearNode);
+}
+
+export default /*#__PURE__*/React.forwardRef(InputDate);

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { DateType, RangeValue, EventValue, DisabledTimes, PanelMode, SharedTimeProps } from './interface';
+import { PickerBaseProps, PickerDateProps, PickerTimeProps } from './date-picker';
+export declare type RangeType = 'start' | 'end';
+export interface RangeInfo {
+    range: RangeType;
+}
+export declare type RangeDateRender = (currentDate: DateType, today: DateType, info: RangeInfo) => React.ReactNode;
+export interface RangePickerSharedProps {
+    id?: string;
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    defaultPickerValue?: [DateType, DateType];
+    placeholder?: [string, string];
+    disabled?: boolean | [boolean, boolean];
+    disabledTimePanel?: (date: EventValue, type: RangeType) => DisabledTimes;
+    ranges?: Record<string, DateType[] | (() => DateType[])>;
+    separator?: React.ReactNode;
+    allowEmpty?: [boolean, boolean];
+    mode?: [PanelMode, PanelMode];
+    onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
+    onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;
+    onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onOk?: (dates: RangeValue) => void;
+    activePickerIndex?: 0 | 1;
+    dateRender?: RangeDateRender;
+    panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
+}
+declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTimePanel' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange' | 'onOk' | 'dateRender'>;
+export declare type RangeShowTimeObject = Omit<SharedTimeProps, 'defaultValue'> & {
+    defaultValue?: DateType[];
+};
+export interface RangePickerBaseProps extends RangePickerSharedProps, OmitPickerProps<PickerBaseProps> {
+}
+export interface RangePickerDateProps extends RangePickerSharedProps, OmitPickerProps<PickerDateProps> {
+    showTime?: boolean | RangeShowTimeObject;
+}
+export interface RangePickerTimeProps extends RangePickerSharedProps, OmitPickerProps<PickerTimeProps> {
+    order?: boolean;
+}
+export declare type RangePickerProps = RangePickerBaseProps | RangePickerDateProps | RangePickerTimeProps;
+export declare type RangeArray = {
+    key: string;
+    newValue: RangeValue;
+}[];
+declare function DatePicker(props: Partial<RangePickerProps>): JSX.Element;
+export default DatePicker;