@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

package/lib/es/datePicker/datePicker.js

@@ -5,13 +5,9 @@ import _get from "lodash/get";
 import _isDate from "lodash/isDate";
 import _stubFalse from "lodash/stubFalse";
 import _noop from "lodash/noop";
-
 /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
-
 /* eslint-disable max-len */
-
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import classnames from 'classnames';
@@ -32,62 +28,41 @@ import '@douyinfe/semi-foundation/lib/es/datePicker/datePicker.css';
 export default class DatePicker extends BaseComponent {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
-
-    this.setTriggerRef = node => this.triggerElRef.current = node; // Called when changes are selected by clicking on the selected date
-
-
-    this.handleSelectedChange = (v, options) => this.foundation.handleSelectedChange(v, options); // Called when the year and month change
-
-
+    this.setTriggerRef = node => this.triggerElRef.current = node;
+    // Called when changes are selected by clicking on the selected date
+    this.handleSelectedChange = (v, options) => this.foundation.handleSelectedChange(v, options);
+    // Called when the year and month change
     this.handleYMSelectedChange = item => this.foundation.handleYMSelectedChange(item);
-
     this.disabledDisposeDate = function (date) {
       for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         rest[_key - 1] = arguments[_key];
       }
-
       return _this.foundation.disabledDisposeDate(date, ...rest);
     };
-
     this.disabledDisposeTime = function (date) {
       for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         rest[_key2 - 1] = arguments[_key2];
       }
-
       return _this.foundation.disabledDisposeTime(date, ...rest);
     };
-
     this.handleOpenPanel = () => this.foundation.openPanel();
-
     this.handleInputChange = function () {
       return _this.foundation.handleInputChange(...arguments);
     };
-
     this.handleInsetInputChange = options => this.foundation.handleInsetInputChange(options);
-
     this.handleInputComplete = v => this.foundation.handleInputComplete(v);
-
     this.handleInputBlur = e => this.foundation.handleInputBlur(_get(e, 'nativeEvent.target.value'), e);
-
     this.handleInputFocus = function () {
       return _this.foundation.handleInputFocus(...arguments);
     };
-
     this.handleInputClear = e => this.foundation.handleInputClear(e);
-
     this.handleTriggerWrapperClick = e => this.foundation.handleTriggerWrapperClick(e);
-
     this.handleSetRangeFocus = rangeInputFocus => this.foundation.handleSetRangeFocus(rangeInputFocus);
-
     this.handleRangeInputBlur = (value, e) => this.foundation.handleRangeInputBlur(value, e);
-
     this.handleRangeInputClear = e => this.foundation.handleRangeInputClear(e);
-
     this.handleRangeEndTabPress = e => this.foundation.handleRangeEndTabPress(e);
-
     this.isAnotherPanelHasOpened = currentRangeInput => {
       if (currentRangeInput === 'rangeStart') {
         return this.focusRecordsRef.current.rangeEnd;
@@ -95,35 +70,26 @@ export default class DatePicker extends BaseComponent {
         return this.focusRecordsRef.current.rangeStart;
       }
     };
-
     this.handleInsetDateFocus = (e, rangeType) => {
       const monthGridFoundation = _get(this, 'monthGrid.current.foundation');
-
       if (monthGridFoundation) {
         monthGridFoundation.showDatePanel(strings.PANEL_TYPE_LEFT);
         monthGridFoundation.showDatePanel(strings.PANEL_TYPE_RIGHT);
       }
-
       this.handleInputFocus(e, rangeType);
     };
-
     this.handleInsetTimeFocus = () => {
       const monthGridFoundation = _get(this, 'monthGrid.current.foundation');
-
       if (monthGridFoundation) {
         monthGridFoundation.showTimePicker(strings.PANEL_TYPE_LEFT);
         monthGridFoundation.showTimePicker(strings.PANEL_TYPE_RIGHT);
       }
     };
-
     this.handlePanelVisibleChange = visible => {
       this.foundation.handlePanelVisibleChange(visible);
     };
-
     this.handleConfirm = e => this.foundation.handleConfirm();
-
     this.handleCancel = e => this.foundation.handleCancel();
-
     this.renderFooter = (locale, localeCode) => {
       if (this.adapter.needConfirm()) {
         return /*#__PURE__*/React.createElement(Footer, Object.assign({}, this.props, {
@@ -133,10 +99,8 @@ export default class DatePicker extends BaseComponent {
           onCancelClick: this.handleCancel
         }));
       }
-
       return null;
     };
-
     this.renderPanel = (locale, localeCode, dateFnsLocale) => {
       const {
         dropdownClassName,
@@ -164,7 +128,6 @@ export default class DatePicker extends BaseComponent {
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
-
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
         density,
@@ -183,21 +146,17 @@ export default class DatePicker extends BaseComponent {
         left: 0,
         right: 0
       };
-
       if (_isDate(date)) {
         year.left = date.getFullYear();
         month.left = date.getMonth() + 1;
       }
-
       if (type === 'monthRange') {
         const dateRight = this.state.value[1];
-
         if (_isDate(dateRight)) {
           year.right = dateRight.getFullYear();
           month.right = dateRight.getMonth() + 1;
         }
       }
-
       return /*#__PURE__*/React.createElement(YearAndMonth, {
         locale: locale,
         localeCode: localeCode,
@@ -217,12 +176,11 @@ export default class DatePicker extends BaseComponent {
         endYear: endYear
       });
     };
-
     this.wrapPopover = children => {
       const {
         panelShow
-      } = this.state; // rtl changes the default position
-
+      } = this.state;
+      // rtl changes the default position
       const {
         direction
       } = this.context;
@@ -256,7 +214,6 @@ export default class DatePicker extends BaseComponent {
         onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
-
     this.state = {
       panelShow: props.open || props.defaultOpen,
       isRange: false,
@@ -275,24 +232,21 @@ export default class DatePicker extends BaseComponent {
     this.inputRef = /*#__PURE__*/React.createRef();
     this.rangeInputStartRef = /*#__PURE__*/React.createRef();
     this.rangeInputEndRef = /*#__PURE__*/React.createRef();
-    this.focusRecordsRef = /*#__PURE__*/React.createRef(); // @ts-ignore ignore readonly
-
+    this.focusRecordsRef = /*#__PURE__*/React.createRef();
+    // @ts-ignore ignore readonly
     this.focusRecordsRef.current = {
       rangeStart: false,
       rangeEnd: false
     };
     this.foundation = new DatePickerFoundation(this.adapter);
   }
-
   get adapter() {
     var _this2 = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       togglePanel: (panelShow, cb) => {
         this.setState({
           panelShow
         }, cb);
-
         if (!panelShow) {
           this.focusRecordsRef.current.rangeEnd = false;
           this.focusRecordsRef.current.rangeStart = false;
@@ -303,14 +257,12 @@ export default class DatePicker extends BaseComponent {
           this.adapter.unregisterClickOutSide();
           this.clickOutSideHandler = null;
         }
-
         this.clickOutSideHandler = e => {
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
           const isInPanel = panelEl && panelEl.contains(e.target);
           const clickOutSide = !isInTrigger && !isInPanel && this._mounted;
-
           if (this.adapter.needConfirm()) {
             clickOutSide && this.props.onClickOutSide();
             return;
@@ -321,7 +273,6 @@ export default class DatePicker extends BaseComponent {
             }
           }
         };
-
         document.addEventListener('mousedown', this.clickOutSideHandler);
       },
       unregisterClickOutSide: () => {
@@ -359,11 +310,9 @@ export default class DatePicker extends BaseComponent {
       }),
       updateCachedSelectedValue: cachedSelectedValue => {
         let _cachedSelectedValue = cachedSelectedValue;
-
         if (cachedSelectedValue && !Array.isArray(cachedSelectedValue)) {
           _cachedSelectedValue = [...cachedSelectedValue];
         }
-
         this.setState({
           cachedSelectedValue: _cachedSelectedValue
         });
@@ -377,7 +326,6 @@ export default class DatePicker extends BaseComponent {
         const {
           insetInput
         } = this.props;
-
         if (insetInput && !_isEqual(insetInputValue, this.state.insetInputValue)) {
           this.setState({
             insetInputValue
@@ -390,17 +338,14 @@ export default class DatePicker extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         if (rangeInputFocus !== this.state.rangeInputFocus) {
           this.setState({
             rangeInputFocus
           });
         }
-
         switch (rangeInputFocus) {
           case 'rangeStart':
             const inputStartNode = _get(this, 'rangeInputStartRef.current');
-
             inputStartNode && inputStartNode.focus({
               preventScroll
             });
@@ -417,15 +362,12 @@ export default class DatePicker extends BaseComponent {
              * If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
              * resulting in the panel being closed before endDate is selected
              */
-
             setTimeout(() => {
               this.focusRecordsRef.current.rangeStart = true;
             }, 0);
             break;
-
           case 'rangeEnd':
             const inputEndNode = _get(this, 'rangeInputEndRef.current');
-
             inputEndNode && inputEndNode.focus({
               preventScroll
             });
@@ -442,12 +384,10 @@ export default class DatePicker extends BaseComponent {
              * If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
              * resulting in the panel being closed before endDate is selected
              */
-
             setTimeout(() => {
               this.focusRecordsRef.current.rangeEnd = true;
             }, 0);
             break;
-
           default:
             return;
         }
@@ -461,29 +401,23 @@ export default class DatePicker extends BaseComponent {
         const {
           rangeInputFocus
         } = this.state;
-
         switch (rangeInputFocus) {
           case 'rangeEnd':
             if (document.activeElement !== this.rangeInputEndRef.current) {
               const inputEndNode = _get(this, 'rangeInputEndRef.current');
-
               inputEndNode && inputEndNode.focus({
                 preventScroll
               });
             }
-
             break;
-
           case 'rangeStart':
           default:
             if (document.activeElement !== this.rangeInputStartRef.current) {
               const inputStartNode = _get(this, 'rangeInputStartRef.current');
-
               inputStartNode && inputStartNode.focus({
                 preventScroll
               });
             }
-
             break;
         }
       },
@@ -491,33 +425,26 @@ export default class DatePicker extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         const inputNode = _get(this, 'inputRef.current');
-
         inputNode && inputNode.focus({
           preventScroll
         });
       },
       setInputBlur: () => {
         const inputNode = _get(this, 'inputRef.current');
-
         inputNode && inputNode.blur();
       },
       setRangeInputBlur: () => {
         const {
           rangeInputFocus
         } = this.state;
-
         if (rangeInputFocus === 'rangeStart') {
           const inputStartNode = _get(this, 'rangeInputStartRef.current');
-
           inputStartNode && inputStartNode.blur();
         } else if (rangeInputFocus === 'rangeEnd') {
           const inputEndNode = _get(this, 'rangeInputEndRef.current');
-
           inputEndNode && inputEndNode.blur();
         }
-
         this.adapter.setRangeInputFocus(false);
       },
       setTriggerDisabled: disabled => {
@@ -527,11 +454,9 @@ export default class DatePicker extends BaseComponent {
       }
     });
   }
-
   isRangeType(type, triggerRender) {
     return /range/i.test(type) && !_isFunction(triggerRender);
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.value !== this.props.value) {
       this.foundation.initFromProps(Object.assign({}, this.props));
@@ -542,30 +467,24 @@ export default class DatePicker extends BaseComponent {
         prevTimeZone: prevProps.timeZone
       });
     }
-
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
-
       if (!this.props.open) {
         this.foundation.clearRangeInputFocus();
       }
     }
   }
-
   componentDidMount() {
     this._mounted = true;
     super.componentDidMount();
   }
-
   componentWillUnmount() {
     this._mounted = false;
     super.componentWillUnmount();
   }
-
   open() {
     this.foundation.open();
   }
-
   close() {
     this.foundation.close();
   }
@@ -579,16 +498,12 @@ export default class DatePicker extends BaseComponent {
    *
    * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
    */
-
-
   focus(focusType) {
     this.foundation.focus(focusType);
   }
-
   blur() {
     this.foundation.blur();
   }
-
   renderMonthGrid(locale, localeCode, dateFnsLocale) {
     const {
       type,
@@ -663,7 +578,6 @@ export default class DatePicker extends BaseComponent {
       endYear: endYear
     });
   }
-
   renderQuickControls() {
     const {
       presets,
@@ -679,7 +593,6 @@ export default class DatePicker extends BaseComponent {
       onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e)
     });
   }
-
   renderDateInput() {
     const {
       insetInput,
@@ -713,7 +626,6 @@ export default class DatePicker extends BaseComponent {
       insetInput: insetInput
     })) : null;
   }
-
   renderInner(extraProps) {
     const {
       clearIcon,
@@ -743,8 +655,8 @@ export default class DatePicker extends BaseComponent {
       inputValue,
       rangeInputFocus,
       triggerDisabled
-    } = this.state; // This class is not needed when triggerRender is function
-
+    } = this.state;
+    // This class is not needed when triggerRender is function
     const isRangeType = this.isRangeType(type, triggerRender);
     const inputDisabled = disabled || insetInput && triggerDisabled;
     const inputCls = classnames(`${cssClasses.PREFIX}-input`, {
@@ -757,7 +669,6 @@ export default class DatePicker extends BaseComponent {
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary
-
     const props = Object.assign(Object.assign({}, extraProps), {
       placeholder: phText,
       clearIcon,
@@ -809,7 +720,6 @@ export default class DatePicker extends BaseComponent {
       componentProps: Object.assign({}, this.props)
     })) : /*#__PURE__*/React.createElement(DateInput, Object.assign({}, props)));
   }
-
   render() {
     const {
       style,
@@ -830,16 +740,13 @@ export default class DatePicker extends BaseComponent {
       'aria-required': this.props['aria-required']
     };
     const innerPropKeys = [];
-
     if (!type.toLowerCase().includes("range")) {
       innerPropKeys.push("borderless");
     }
-
     const inner = this.renderInner(_pick(this.props, innerPropKeys));
     const wrappedInner = this.wrapPopover(inner);
     return /*#__PURE__*/React.createElement("div", Object.assign({}, outerProps), wrappedInner);
   }
-
 }
 DatePicker.contextType = ConfigContext;
 DatePicker.propTypes = {

package/lib/es/datePicker/index.js

@@ -11,7 +11,6 @@ export default forwardStatics( /*#__PURE__*/React.forwardRef((props, ref) => {
     format,
     rangeSeparator
   } = propsObj;
-
   if (typeof format === 'string' && format) {
     if (!/[Hhms]+/.test(format)) {
       if (type === 'dateTime') {
@@ -20,13 +19,11 @@ export default forwardStatics( /*#__PURE__*/React.forwardRef((props, ref) => {
         propsObj.type = 'dateRange';
       }
     }
-  } // Add spaces at both ends to prevent conflicts with characters in the date when separating
-
-
+  }
+  // Add spaces at both ends to prevent conflicts with characters in the date when separating
   if (rangeSeparator && typeof rangeSeparator === 'string') {
     propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
   }
-
   if (propsObj.insetInput) {
     if (!propsObj.position) {
       propsObj.position = strings.POSITION_INLINE_INPUT;
@@ -36,13 +33,10 @@ export default forwardStatics( /*#__PURE__*/React.forwardRef((props, ref) => {
      *
      * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
      */
-
-
     if (propsObj.position.includes('Over') && !propsObj.spacing) {
       propsObj.spacing = numbers.SPACING_INSET_INPUT;
     }
   }
-
   return /*#__PURE__*/React.createElement(ConfigContext.Consumer, null, _ref => {
     let {
       timeZone

package/lib/es/datePicker/insetInput.js

@@ -10,9 +10,7 @@ export function InsetDateInput(props) {
     placeholder,
     forwardRef
   } = props;
-
   const value = _get(insetInputValue, valuePath);
-
   return /*#__PURE__*/React.createElement(Input, {
     value: value,
     onChange: (value, event) => {
@@ -38,15 +36,11 @@ export function InsetTimeInput(props) {
     placeholder,
     disabled
   } = props;
-
   const _isTimeType = type.includes('Time');
-
   if (!_isTimeType) {
     return null;
   }
-
   const value = _get(insetInputValue, valuePath);
-
   return /*#__PURE__*/React.createElement(Input, {
     value: value,
     onChange: (value, event) => {

package/lib/es/datePicker/month.d.ts

@@ -11,7 +11,7 @@ export interface MonthProps extends MonthFoundationProps, BaseProps {
         rangeEnd: boolean;
     }>;
 }
-export declare type MonthState = MonthFoundationState;
+export type MonthState = MonthFoundationState;
 export default class Month extends BaseComponent<MonthProps, MonthState> {
     static propTypes: {
         month: PropTypes.Requireable<object>;