@douyinfe/semi-ui 2.31.2-alpha.0 → 2.32.0-beta.0

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

@@ -28,10 +28,21 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
     renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode;
     triggerRender?: (props: DatePickerProps) => React.ReactNode;
+    /**
+     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times.
+     *
+     * Use `onOpenChange` or `onClickOutSide` instead
+     */
     onBlur?: React.MouseEventHandler<HTMLInputElement>;
     onClear?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * There are multiple input boxes when selecting a range, and the input boxes will be focused multiple times.
+     *
+     * Use `onOpenChange` or `triggerRender` instead
+     */
     onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void;
     onPresetClick?: (item: PresetType, e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickOutSide?: () => void;
     locale?: Locale['DatePicker'];
     dateFnsLocale?: Locale['dateFnsLocale'];
     yearAndMonthOpts?: ScrollItemProps<any>;
@@ -46,8 +57,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
@@ -113,6 +124,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         rangeSeparator: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;
         yearAndMonthOpts: PropTypes.Requireable<object>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         onChangeWithDateFirst: boolean;
@@ -155,12 +167,14 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         syncSwitchMonth: boolean;
         rangeSeparator: " ~ ";
         insetInput: boolean;
+        onClickOutSide: (...args: any[]) => void;
     };
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;
     monthGrid: React.RefObject<MonthsGrid>;
-    rangeInputStartRef: React.RefObject<HTMLElement>;
-    rangeInputEndRef: React.RefObject<HTMLElement>;
+    inputRef: DateInputProps['inputRef'];
+    rangeInputStartRef: DateInputProps['rangeInputStartRef'];
+    rangeInputEndRef: DateInputProps['rangeInputEndRef'];
     focusRecordsRef: React.RefObject<{
         rangeStart: boolean;
         rangeEnd: boolean;
@@ -175,6 +189,20 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     componentDidUpdate(prevProps: DatePickerProps): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
+    open(): void;
+    close(): void;
+    /**
+     *
+     * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
+     *
+     * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
+     *
+     * 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
+     *
+     * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
+     */
+    focus(focusType?: Exclude<RangeType, false>): void;
+    blur(): void;
     setTriggerRef: (node: HTMLDivElement) => HTMLDivElement;
     handleSelectedChange: MonthsGridProps['onChange'];
     handleYMSelectedChange: YearAndMonthProps['onSelect'];
@@ -199,7 +227,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void;
     handleInsetTimeFocus: () => void;
     handlePanelVisibleChange: (visible: boolean) => void;
-    renderInner(extraProps?: Partial<DatePickerProps>): JSX.Element;
+    renderInner(): JSX.Element;
     handleConfirm: (e: React.MouseEvent) => void;
     handleCancel: (e: React.MouseEvent) => void;
     renderFooter: (locale: Locale['DatePicker'], localeCode: string) => JSX.Element;

package/lib/es/datePicker/datePicker.js

@@ -143,7 +143,8 @@ export default class DatePicker extends BaseComponent {
         density,
         topSlot,
         bottomSlot,
-        presetPosition
+        presetPosition,
+        type
       } = this.props;
       const wrapCls = classnames(cssClasses.PREFIX, {
         [cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
@@ -152,11 +153,12 @@ export default class DatePicker extends BaseComponent {
       return /*#__PURE__*/React.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
-        style: dropdownStyle
+        style: dropdownStyle,
+        "x-type": type
       }, topSlot && /*#__PURE__*/React.createElement("div", {
         className: `${cssClasses.PREFIX}-topSlot`,
         "x-semi-prop": "topSlot"
-      }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
+      }, topSlot), presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
         className: `${cssClasses.PREFIX}-bottomSlot`,
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -166,15 +168,31 @@ export default class DatePicker extends BaseComponent {
       const {
         density,
         presetPosition,
-        yearAndMonthOpts
+        yearAndMonthOpts,
+        type
       } = this.props;
       const date = this.state.value[0];
-      let year = 0;
-      let month = 0;
+      const year = {
+        left: 0,
+        right: 0
+      };
+      const month = {
+        left: 0,
+        right: 0
+      };
 
       if (_isDate(date)) {
-        year = date.getFullYear();
-        month = date.getMonth() + 1;
+        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, {
@@ -190,6 +208,7 @@ export default class DatePicker extends BaseComponent {
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
         renderDateInput: this.renderDateInput(),
+        type: type,
         yearAndMonthOpts: yearAndMonthOpts
       });
     };
@@ -249,6 +268,7 @@ export default class DatePicker extends BaseComponent {
     this.triggerElRef = /*#__PURE__*/React.createRef();
     this.panelRef = /*#__PURE__*/React.createRef();
     this.monthGrid = /*#__PURE__*/React.createRef();
+    this.inputRef = /*#__PURE__*/React.createRef();
     this.rangeInputStartRef = /*#__PURE__*/React.createRef();
     this.rangeInputEndRef = /*#__PURE__*/React.createRef();
     this.focusRecordsRef = /*#__PURE__*/React.createRef(); // @ts-ignore ignore readonly
@@ -264,10 +284,10 @@ export default class DatePicker extends BaseComponent {
     var _this2 = this;
 
     return Object.assign(Object.assign({}, super.adapter), {
-      togglePanel: panelShow => {
+      togglePanel: (panelShow, cb) => {
         this.setState({
           panelShow
-        });
+        }, cb);
 
         if (!panelShow) {
           this.focusRecordsRef.current.rangeEnd = false;
@@ -281,17 +301,20 @@ export default class DatePicker extends BaseComponent {
         }
 
         this.clickOutSideHandler = e => {
-          if (this.adapter.needConfirm()) {
-            return;
-          }
-
           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 (!isInTrigger && !isInPanel && this._mounted) {
-            this.foundation.closePanel(e);
+          if (this.adapter.needConfirm()) {
+            clickOutSide && this.props.onClickOutSide();
+            return;
+          } else {
+            if (clickOutSide) {
+              this.props.onClickOutSide();
+              this.foundation.closePanel(e);
+            }
           }
         };
 
@@ -358,7 +381,7 @@ export default class DatePicker extends BaseComponent {
         }
       },
       needConfirm: () => ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
-      typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
+      typeIsYearOrMonth: () => ['month', 'year', 'monthRange'].includes(this.props.type),
       setRangeInputFocus: rangeInputFocus => {
         const {
           preventScroll
@@ -460,6 +483,39 @@ export default class DatePicker extends BaseComponent {
             break;
         }
       },
+      setInputFocus: () => {
+        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 => {
         this.setState({
           triggerDisabled: disabled
@@ -502,6 +558,33 @@ export default class DatePicker extends BaseComponent {
     super.componentWillUnmount();
   }
 
+  open() {
+    this.foundation.open();
+  }
+
+  close() {
+    this.foundation.close();
+  }
+  /**
+   *
+   * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
+   *
+   * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
+   *
+   * 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
+   *
+   * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
+   */
+
+
+  focus(focusType) {
+    this.foundation.focus(focusType);
+  }
+
+  blur() {
+    this.foundation.blur();
+  }
+
   renderMonthGrid(locale, localeCode, dateFnsLocale) {
     const {
       type,
@@ -623,7 +706,7 @@ export default class DatePicker extends BaseComponent {
     })) : null;
   }
 
-  renderInner(extraProps) {
+  renderInner() {
     const {
       clearIcon,
       type,
@@ -665,7 +748,7 @@ 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), {
+    const props = {
       placeholder: phText,
       clearIcon,
       disabled: inputDisabled,
@@ -699,8 +782,9 @@ export default class DatePicker extends BaseComponent {
       onRangeClear: this.handleRangeInputClear,
       onRangeEndTabPress: this.handleRangeEndTabPress,
       rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
-      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
-    });
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
+      inputRef: this.inputRef
+    };
     return /*#__PURE__*/React.createElement("div", {
       // tooltip will mount a11y props to children
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -815,7 +899,8 @@ DatePicker.propTypes = {
   onPanelChange: PropTypes.func,
   rangeSeparator: PropTypes.string,
   preventScroll: PropTypes.bool,
-  yearAndMonthOpts: PropTypes.object
+  yearAndMonthOpts: PropTypes.object,
+  onClickOutSide: PropTypes.func
 };
 DatePicker.defaultProps = {
   onChangeWithDateFirst: true,
@@ -852,5 +937,6 @@ DatePicker.defaultProps = {
   autoSwitchDate: true,
   syncSwitchMonth: false,
   rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
-  insetInput: false
+  insetInput: false,
+  onClickOutSide: _noop
 };

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

@@ -8,5 +8,6 @@ export type { MonthsGridProps } from './monthsGrid';
 export type { QuickControlProps } from './quickControl';
 export type { YearAndMonthProps } from './yearAndMonth';
 export type { InsetInputProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
+export type { DatePicker as BaseDatePicker };
 declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePicker>>;
 export default _default;

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

@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<any[]>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/es/datePicker/monthsGrid.js

@@ -482,9 +482,17 @@ export default class MonthsGrid extends BaseComponent {
       ref: current => this.cacheRefCurrent(`yam-${panelType}`, current),
       locale: locale,
       localeCode: localeCode,
-      currentYear: y,
-      currentMonth: m,
-      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear, item.currentMonth - 1)),
+      // currentYear={y}
+      // currentMonth={m}
+      currentYear: {
+        left: y,
+        right: 0
+      },
+      currentMonth: {
+        left: m,
+        right: 0
+      },
+      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear.left, item.currentMonth.left - 1)),
       onBackToMain: () => {
         this.foundation.showDatePanel(panelType);
         const wrapCurrent = this.adapter.getCache(`wrap-${panelType}`);

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

@@ -4,14 +4,15 @@ import YearAndMonthFoundation, { MonthScrollItem, YearAndMonthAdapter, YearAndMo
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollItem from '../scrollList/scrollItem';
 import { Locale } from '../locale/interface';
+import { PanelType } from '@douyinfe/semi-foundation/lib/es/datePicker/monthsGridFoundation';
 export interface YearAndMonthProps extends YearAndMonthFoundationProps, BaseProps {
     locale?: Locale['DatePicker'];
 }
 export declare type YearAndMonthState = YearAndMonthFoundationState;
 declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
     static propTypes: {
-        currentYear: PropTypes.Requireable<number>;
-        currentMonth: PropTypes.Requireable<number>;
+        currentYear: PropTypes.Requireable<object>;
+        currentMonth: PropTypes.Requireable<object>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
         localeCode: PropTypes.Requireable<string>;
@@ -23,6 +24,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
     };
     static defaultProps: {
         disabledDate: {
@@ -33,6 +35,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         yearCycled: boolean;
         noBackBtn: boolean;
         onSelect: (...args: any[]) => void;
+        type: string;
     };
     foundation: YearAndMonthFoundation;
     yearRef: React.RefObject<ScrollItem<YearScrollItem>>;
@@ -40,12 +43,13 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
     constructor(props: YearAndMonthProps);
     get adapter(): YearAndMonthAdapter;
     static getDerivedStateFromProps(props: YearAndMonthProps, state: YearAndMonthState): Partial<YearAndMonthFoundationState>;
-    renderColYear(): JSX.Element;
-    selectYear: (item: YearScrollItem) => void;
-    selectMonth: (item: MonthScrollItem) => void;
+    renderColYear(panelType: PanelType): JSX.Element;
+    selectYear: (item: YearScrollItem, panelType?: PanelType) => void;
+    selectMonth: (item: MonthScrollItem, panelType?: PanelType) => void;
     reselect: () => void;
-    renderColMonth(): JSX.Element;
+    renderColMonth(panelType: PanelType): JSX.Element;
     backToMain: React.MouseEventHandler<HTMLButtonElement>;
+    renderPanel(panelType: PanelType): JSX.Element;
     render(): JSX.Element;
 }
 export default YearAndMonth;