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

package/lib/cjs/datePicker/datePicker.js

@@ -4,121 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _isDate2 = _interopRequireDefault(require("lodash/isDate"));
-
 var _stubFalse2 = _interopRequireDefault(require("lodash/stubFalse"));
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/foundation"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
-
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _index = _interopRequireDefault(require("../popover/index"));
-
 var _dateInput = _interopRequireDefault(require("./dateInput"));
-
 var _monthsGrid = _interopRequireDefault(require("./monthsGrid"));
-
 var _quickControl = _interopRequireDefault(require("./quickControl"));
-
 var _footer = _interopRequireDefault(require("./footer"));
-
 var _trigger = _interopRequireDefault(require("../trigger"));
-
 var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
-
 require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* 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 */
+
 class DatePicker extends _baseComponent.default {
   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((0, _get2.default)(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;
@@ -126,35 +78,26 @@ class DatePicker extends _baseComponent.default {
         return this.focusRecordsRef.current.rangeStart;
       }
     };
-
     this.handleInsetDateFocus = (e, rangeType) => {
       const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
-
       if (monthGridFoundation) {
         monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_LEFT);
         monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_RIGHT);
       }
-
       this.handleInputFocus(e, rangeType);
     };
-
     this.handleInsetTimeFocus = () => {
       const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
-
       if (monthGridFoundation) {
         monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_LEFT);
         monthGridFoundation.showTimePicker(_constants.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.default.createElement(_footer.default, Object.assign({}, this.props, {
@@ -164,10 +107,8 @@ class DatePicker extends _baseComponent.default {
           onCancelClick: this.handleCancel
         }));
       }
-
       return null;
     };
-
     this.renderPanel = (locale, localeCode, dateFnsLocale) => {
       const {
         dropdownClassName,
@@ -195,7 +136,6 @@ class DatePicker extends _baseComponent.default {
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
-
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
         density,
@@ -214,21 +154,17 @@ class DatePicker extends _baseComponent.default {
         left: 0,
         right: 0
       };
-
       if ((0, _isDate2.default)(date)) {
         year.left = date.getFullYear();
         month.left = date.getMonth() + 1;
       }
-
       if (type === 'monthRange') {
         const dateRight = this.state.value[1];
-
         if ((0, _isDate2.default)(dateRight)) {
           year.right = dateRight.getFullYear();
           month.right = dateRight.getMonth() + 1;
         }
       }
-
       return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
         locale: locale,
         localeCode: localeCode,
@@ -248,12 +184,11 @@ class DatePicker extends _baseComponent.default {
         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;
@@ -287,7 +222,6 @@ class DatePicker extends _baseComponent.default {
         onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
-
     this.state = {
       panelShow: props.open || props.defaultOpen,
       isRange: false,
@@ -306,24 +240,21 @@ class DatePicker extends _baseComponent.default {
     this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.rangeInputStartRef = /*#__PURE__*/_react.default.createRef();
     this.rangeInputEndRef = /*#__PURE__*/_react.default.createRef();
-    this.focusRecordsRef = /*#__PURE__*/_react.default.createRef(); // @ts-ignore ignore readonly
-
+    this.focusRecordsRef = /*#__PURE__*/_react.default.createRef();
+    // @ts-ignore ignore readonly
     this.focusRecordsRef.current = {
       rangeStart: false,
       rangeEnd: false
     };
     this.foundation = new _foundation.default(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;
@@ -334,14 +265,12 @@ class DatePicker extends _baseComponent.default {
           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;
@@ -352,7 +281,6 @@ class DatePicker extends _baseComponent.default {
             }
           }
         };
-
         document.addEventListener('mousedown', this.clickOutSideHandler);
       },
       unregisterClickOutSide: () => {
@@ -390,11 +318,9 @@ class DatePicker extends _baseComponent.default {
       }),
       updateCachedSelectedValue: cachedSelectedValue => {
         let _cachedSelectedValue = cachedSelectedValue;
-
         if (cachedSelectedValue && !Array.isArray(cachedSelectedValue)) {
           _cachedSelectedValue = [...cachedSelectedValue];
         }
-
         this.setState({
           cachedSelectedValue: _cachedSelectedValue
         });
@@ -408,7 +334,6 @@ class DatePicker extends _baseComponent.default {
         const {
           insetInput
         } = this.props;
-
         if (insetInput && !(0, _isEqual2.default)(insetInputValue, this.state.insetInputValue)) {
           this.setState({
             insetInputValue
@@ -421,13 +346,11 @@ class DatePicker extends _baseComponent.default {
         const {
           preventScroll
         } = this.props;
-
         if (rangeInputFocus !== this.state.rangeInputFocus) {
           this.setState({
             rangeInputFocus
           });
         }
-
         switch (rangeInputFocus) {
           case 'rangeStart':
             const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
@@ -447,12 +370,10 @@ class DatePicker extends _baseComponent.default {
              * 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 = (0, _get2.default)(this, 'rangeInputEndRef.current');
             inputEndNode && inputEndNode.focus({
@@ -471,12 +392,10 @@ class DatePicker extends _baseComponent.default {
              * 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;
         }
@@ -490,7 +409,6 @@ class DatePicker extends _baseComponent.default {
         const {
           rangeInputFocus
         } = this.state;
-
         switch (rangeInputFocus) {
           case 'rangeEnd':
             if (document.activeElement !== this.rangeInputEndRef.current) {
@@ -499,9 +417,7 @@ class DatePicker extends _baseComponent.default {
                 preventScroll
               });
             }
-
             break;
-
           case 'rangeStart':
           default:
             if (document.activeElement !== this.rangeInputStartRef.current) {
@@ -510,7 +426,6 @@ class DatePicker extends _baseComponent.default {
                 preventScroll
               });
             }
-
             break;
         }
       },
@@ -531,7 +446,6 @@ class DatePicker extends _baseComponent.default {
         const {
           rangeInputFocus
         } = this.state;
-
         if (rangeInputFocus === 'rangeStart') {
           const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
           inputStartNode && inputStartNode.blur();
@@ -539,7 +453,6 @@ class DatePicker extends _baseComponent.default {
           const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
           inputEndNode && inputEndNode.blur();
         }
-
         this.adapter.setRangeInputFocus(false);
       },
       setTriggerDisabled: disabled => {
@@ -549,11 +462,9 @@ class DatePicker extends _baseComponent.default {
       }
     });
   }
-
   isRangeType(type, triggerRender) {
     return /range/i.test(type) && !(0, _isFunction2.default)(triggerRender);
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.value !== this.props.value) {
       this.foundation.initFromProps(Object.assign({}, this.props));
@@ -564,30 +475,24 @@ class DatePicker extends _baseComponent.default {
         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();
   }
@@ -601,16 +506,12 @@ class DatePicker extends _baseComponent.default {
    *
    * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
    */
-
-
   focus(focusType) {
     this.foundation.focus(focusType);
   }
-
   blur() {
     this.foundation.blur();
   }
-
   renderMonthGrid(locale, localeCode, dateFnsLocale) {
     const {
       type,
@@ -685,7 +586,6 @@ class DatePicker extends _baseComponent.default {
       endYear: endYear
     });
   }
-
   renderQuickControls() {
     const {
       presets,
@@ -701,7 +601,6 @@ class DatePicker extends _baseComponent.default {
       onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e)
     });
   }
-
   renderDateInput() {
     const {
       insetInput,
@@ -735,7 +634,6 @@ class DatePicker extends _baseComponent.default {
       insetInput: insetInput
     })) : null;
   }
-
   renderInner(extraProps) {
     const {
       clearIcon,
@@ -765,8 +663,8 @@ class DatePicker extends _baseComponent.default {
       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 = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-input`, {
@@ -779,7 +677,6 @@ class DatePicker extends _baseComponent.default {
     });
     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,
@@ -831,7 +728,6 @@ class DatePicker extends _baseComponent.default {
       componentProps: Object.assign({}, this.props)
     })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, Object.assign({}, props)));
   }
-
   render() {
     const {
       style,
@@ -852,18 +748,14 @@ class DatePicker extends _baseComponent.default {
       'aria-required': this.props['aria-required']
     };
     const innerPropKeys = [];
-
     if (!type.toLowerCase().includes("range")) {
       innerPropKeys.push("borderless");
     }
-
     const inner = this.renderInner((0, _pick2.default)(this.props, innerPropKeys));
     const wrappedInner = this.wrapPopover(inner);
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, outerProps), wrappedInner);
   }
-
 }
-
 exports.default = DatePicker;
 DatePicker.contextType = _context.default;
 DatePicker.propTypes = {

package/lib/cjs/datePicker/footer.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Footer;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _button = _interopRequireDefault(require("../button"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function Footer() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {

package/lib/cjs/datePicker/index.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _object = require("@douyinfe/semi-foundation/lib/cjs/utils/object");
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
-
 var _datePicker = _interopRequireDefault(require("./datePicker"));
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const propsObj = Object.assign({}, props);
   const {
@@ -26,7 +18,6 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
     format,
     rangeSeparator
   } = propsObj;
-
   if (typeof format === 'string' && format) {
     if (!/[Hhms]+/.test(format)) {
       if (type === 'dateTime') {
@@ -35,13 +26,11 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
         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 = _constants.strings.POSITION_INLINE_INPUT;
@@ -51,13 +40,10 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
      *
      * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
      */
-
-
     if (propsObj.position.includes('Over') && !propsObj.spacing) {
       propsObj.spacing = _constants.numbers.SPACING_INSET_INPUT;
     }
   }
-
   return /*#__PURE__*/_react.default.createElement(_context.default.Consumer, null, _ref => {
     let {
       timeZone
@@ -74,5 +60,4 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
     })));
   });
 }), _datePicker.default);
-
 exports.default = _default;

package/lib/cjs/datePicker/insetInput.js

@@ -5,15 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InsetDateInput = InsetDateInput;
 exports.InsetTimeInput = InsetTimeInput;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _input = _interopRequireDefault(require("../input"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function InsetDateInput(props) {
   const {
     insetInputValue,
@@ -39,7 +34,6 @@ function InsetDateInput(props) {
     ref: forwardRef
   });
 }
-
 function InsetTimeInput(props) {
   const {
     insetInputValue,
@@ -50,13 +44,10 @@ function InsetTimeInput(props) {
     placeholder,
     disabled
   } = props;
-
   const _isTimeType = type.includes('Time');
-
   if (!_isTimeType) {
     return null;
   }
-
   const value = (0, _get2.default)(insetInputValue, valuePath);
   return /*#__PURE__*/_react.default.createElement(_input.default, {
     value: value,

package/lib/cjs/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>;