@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/datePicker/inputFoundation.ts

@@ -1,5 +1,4 @@
-/* eslint-disable max-len */
-import { cloneDeep, isObject, set, get } from 'lodash';
+import { isObject, set, get } from 'lodash';
 import { format as formatFn } from 'date-fns';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
@@ -12,12 +11,13 @@ import { strings } from './constants';
 import getDefaultPickerDate from './_utils/getDefaultPickerDate';
 import { compatibleParse } from './_utils/parser';
 import { isValidDate } from './_utils';
+import copy from 'fast-copy';
 
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
 
 
-export type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
+export type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange' | 'monthRange';
 export type RangeType = 'rangeStart' | 'rangeEnd';
 export type PanelType = 'left' | 'right';
 
@@ -34,13 +34,24 @@ export interface DateInputEventHandlerProps {
 }
 
 export interface DateInputElementProps {
+    borderless?: boolean;
     insetLabel?: any;
     prefix?: any
 }
 
+export interface InsetInputProps {
+    placeholder?: {
+        dateStart?: string;
+        dateEnd?: string;
+        timeStart?: string;
+        timeEnd?: string
+    }
+    // showClear?: boolean
+}
+
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: BaseValueType[];
+    value?: Date[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -51,7 +62,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     prefixCls?: string;
     rangeSeparator?: string;
     panelType?: PanelType;
-    insetInput?: boolean;
+    insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
     defaultPickerValue?: ValueType
@@ -81,7 +92,7 @@ export interface InsetInputChangeProps {
     insetInputValue: InsetInputValue
 }
 
-export interface DateInputAdapter extends DefaultAdapter {
+export interface DateInputAdapter extends DefaultAdapter<DateInputFoundationProps, Record<string, any>> {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];
@@ -100,10 +111,8 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         super({ ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
     handleClick(e: any) {
@@ -170,6 +179,9 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
             case 'month':
                 text = formatDateValues(value, formatToken, undefined, dateFnsLocale);
                 break;
+            case 'monthRange':
+                text = formatDateValues(value, formatToken, { groupSize: 2, groupInnerSeparator: rangeSeparator }, dateFnsLocale);
+                break;
             default:
                 break;
         }
@@ -178,18 +190,20 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
 
     handleInsetInputChange(options: InsetInputChangeFoundationProps) {
         const { value, valuePath, insetInputValue } = options;
-        const { format, type } = this._adapter.getProps();
+        const { format, type, rangeSeparator } = this._adapter.getProps();
         const insetFormatToken = getInsetInputFormatToken({ type, format });
-        let newInsetInputValue = set(cloneDeep(insetInputValue), valuePath, value);
-        newInsetInputValue = this._autoFillTimeToInsetInputValue({ insetInputValue: newInsetInputValue, valuePath, format: insetFormatToken });
-        const newInputValue = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
-        this._adapter.notifyInsetInputChange({ insetInputValue: newInsetInputValue, format: insetFormatToken, insetInputStr: newInputValue });
+        const newInsetInputValue = set(copy(insetInputValue), valuePath, value);
+        const insetInputStr = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
+        const parsedInsetInputValueFromInputStr = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator });
+        const filledTimeInsetInputValue = this._autoFillTimeToInsetInputValue({ insetInputValue: parsedInsetInputValueFromInputStr, valuePath, format: insetFormatToken });
+        const finalInsetInputStr = this.concatInsetInputValue({ insetInputValue: filledTimeInsetInputValue });
+        this._adapter.notifyInsetInputChange({ insetInputValue: filledTimeInsetInputValue, format: insetFormatToken, insetInputStr: finalInsetInputStr });
     }
 
     _autoFillTimeToInsetInputValue(options: { insetInputValue: InsetInputValue; format: string; valuePath: string}) {
         const { valuePath, insetInputValue, format } = options;
         const { type, defaultPickerValue, dateFnsLocale } = this._adapter.getProps();
-        const insetInputValueWithTime = cloneDeep(insetInputValue);
+        const insetInputValueWithTime = copy(insetInputValue);
         const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue, format, dateFnsLocale });
 
         if (type.includes('Time')) {
@@ -234,7 +248,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
      * Otherwise the default format will be used as placeholder
      */
     getInsetInputPlaceholder() {
-        const { type, format } = this._adapter.getProps();
+        const { type, format, rangeSeparator } = this._adapter.getProps();
         const insetInputFormat = getInsetInputFormatToken({ type, format });
         let datePlaceholder, timePlaceholder;
 
@@ -248,6 +262,9 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
             case 'dateTimeRange':
                 [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
                 break;
+            case 'monthRange':
+                datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
+                break;
         }
 
         return ({
@@ -261,7 +278,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
      * 
      * Parse out insetInputValue from current date value or inputValue
      */
-    getInsetInputValue({ value, insetInputValue } : { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
+    getInsetInputValue({ value, insetInputValue }: { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
         const { type, rangeSeparator, format } = this._adapter.getProps();
 
         let inputValueStr = '';
@@ -292,6 +309,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         switch (type) {
             case 'date':
             case 'month':
+            case 'monthRange':
                 inputValue = insetInputValue.monthLeft.dateInput;
                 break;
             case 'dateRange':

package/datePicker/monthFoundation.ts

@@ -114,7 +114,6 @@ export default class CalendarMonthFoundation extends BaseFoundation<MonthAdapter
         this._adapter.setWeekDays(weekdays);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
     handleClick(day: MonthDayInfo) {

package/datePicker/monthsGridFoundation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import {
@@ -20,9 +19,11 @@ import { includes, isSet, isEqual, isFunction } from 'lodash';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
-import { BaseValueType, PresetPosition, ValueType } from './foundation';
+import { BaseValueType, DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
+import isValidTimeZone from './_utils/isValidTimeZone';
+import { YearAndMonthFoundationProps } from './yearAndMonthFoundation';
 
 const dateDiffFns = {
     month: differenceInCalendarMonths,
@@ -53,9 +54,10 @@ interface MonthsGridElementProps {
 export type PanelType = 'left' | 'right';
 export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 
-export interface MonthsGridFoundationProps extends MonthsGridElementProps {
+export interface MonthsGridFoundationProps extends MonthsGridElementProps, Pick<YearAndMonthFoundationProps, 'startYear' | 'endYear'> {
     type?: Type;
-    defaultValue?: ValueType;
+    /** may be null if selection is not complete when type is dateRange or dateTimeRange */
+    defaultValue?: (Date | null)[];
     defaultPickerValue?: ValueType;
     multiple?: boolean;
     max?: number;
@@ -89,14 +91,18 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any
 }
 
 export interface MonthInfo {
+    /** The date displayed in the current date panel, update when switching year and month */
     pickerDate: Date;
+    /**
+     * Default date or selected date (when selected)
+     */
     showDate: Date;
     isTimePickerOpen: boolean;
     isYearPickerOpen: boolean
@@ -167,22 +173,22 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         }
     }
 
-    updateSelectedFromProps(values: ValueType, refreshPicker = true) {
+    updateSelectedFromProps(values: (Date | null)[], refreshPicker = true) {
         const type: Type = this.getProp('type');
         const { selected, rangeStart, rangeEnd } = this.getStates();
-        if (values && (values as BaseValueType[]).length) {
+        if (values && values?.length) {
             switch (type) {
                 case 'date':
-                    this._initDatePickerFromValue(values as BaseValueType[], refreshPicker);
+                    this._initDatePickerFromValue(values, refreshPicker);
                     break;
                 case 'dateRange':
-                    this._initDateRangePickerFromValue(values as BaseValueType[]);
+                    this._initDateRangePickerFromValue(values);
                     break;
                 case 'dateTime':
-                    this._initDateTimePickerFromValue(values as BaseValueType[]);
+                    this._initDateTimePickerFromValue(values);
                     break;
                 case 'dateTimeRange':
-                    this._initDateTimeRangePickerFormValue(values as BaseValueType[]);
+                    this._initDateTimeRangePickerFormValue(values);
                     break;
                 default:
                     break;
@@ -222,13 +228,14 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         }
     }
 
-    _initDatePickerFromValue(values: BaseValueType[], refreshPicker = true) {
-        const monthLeft = this.getState('monthLeft');
+    _initDatePickerFromValue(values: Date[], refreshPicker = true) {
+        const { monthLeft } = this._adapter.getStates();
         const newMonthLeft = { ...monthLeft };
         // REMOVE:
         this._adapter.updateMonthOnLeft(newMonthLeft);
         const newSelected = new Set<string>();
-        if (!this._isMultiple()) {
+        const isMultiple = this._isMultiple();
+        if (!isMultiple) {
             values[0] && newSelected.add(format(values[0] as Date, strings.FORMAT_FULL_DATE));
         } else {
             values.forEach(date => {
@@ -236,7 +243,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             });
         }
         if (refreshPicker) {
-            this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            if (isMultiple) {
+                const leftPickerDateInSelected = values?.some(item => item && differenceInCalendarMonths(item, monthLeft.pickerDate) === 0);
+                !leftPickerDateInSelected && this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            } else {
+                this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
+            }
         } else {
             // FIXME:
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
@@ -244,16 +256,32 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         this._adapter.updateDaySelected(newSelected);
     }
 
-    _initDateRangePickerFromValue(values: BaseValueType[], withTime = false) {
+    _initDateRangePickerFromValue(values: (Date | null)[], withTime = false) {
         // init month panel
-        const monthLeft = this.getState('monthLeft');
-        const monthRight = this.getState('monthRight');
+        const monthLeft = this.getState('monthLeft') as MonthsGridFoundationState['monthLeft'];
+        const monthRight = this.getState('monthRight') as MonthsGridFoundationState['monthRight'];
         const adjustResult = this._autoAdjustMonth(
             { ...monthLeft, pickerDate: values[0] || monthLeft.pickerDate },
             { ...monthRight, pickerDate: values[1] || monthRight.pickerDate }
         );
-        this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-        this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+
+        const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+        if (validValue) {
+            this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+            this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        } else {
+            const selectedDate = values.find(item => item) as Date;
+            // 如果日期不完整且输入日期不在面板范围内，则更新面板
+            if (selectedDate) {                
+                const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
+                const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
+    
+                if (notLeftPanelDate && notRightPanelDate) {
+                    this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+                    this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+                }
+            }
+        }
 
         // init range
         const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
@@ -268,15 +296,14 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         this._adapter.setHoverDay(rangeEnd);
     }
 
-    _initDateTimePickerFromValue(values: BaseValueType[]) {
+    _initDateTimePickerFromValue(values: Date[]) {
         this._initDatePickerFromValue(values);
     }
 
-    _initDateTimeRangePickerFormValue(values: BaseValueType[]) {
+    _initDateTimeRangePickerFormValue(values: (Date | null)[]) {
         this._initDateRangePickerFromValue(values, true);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() { }
 
     /**
@@ -421,13 +448,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         return format(date, token, { locale: dateFnsLocale });
     }
 
-    isValidTimeZone(timeZone?: string | number) {
-        const propTimeZone = this.getProp('timeZone');
-        const _timeZone = isNullOrUndefined(timeZone) ? propTimeZone : timeZone;
-
-        return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-    }
-
     /**
      * 根据 type 处理 onChange 返回的参数
      *
@@ -457,9 +477,9 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      */
     disposeCallbackArgs(value: Date | Date[]) {
         let _value = Array.isArray(value) ? value : (value && [value]) || [];
+        const timeZone = this.getProp('timeZone');
 
-        if (this.isValidTimeZone()) {
-            const timeZone = this.getProp('timeZone');
+        if (isValidTimeZone(timeZone)) {
             _value = _value.map(date => zonedTimeToUtc(date, timeZone));
         }
         const type = this.getProp('type');

package/datePicker/variables.scss

@@ -9,6 +9,7 @@ $height-datepicker_timeType_tpk: calc(100% - 54px); // 时间面板高度
 $height-datepicker_panel_yam_scrolllist:  266px; // 时间滚动内容高度
 
 $width-datepicker_monthPanel_max: 284px; // 年月选择器最大宽度
+$width-datepicker_monthRangePanel_max: 384px; // 年月选择器最大宽度
 $height-datepicker_timepicker_header_min: 24px; // 年月选择 header 最小高度
 $width-datepicker_navigation_button_min: 32px; // header 按钮最小宽度
 $height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小高度
@@ -30,10 +31,12 @@ $height-datepicker_timeType_insetInput_yam: 100%; // 时间面板高度 - 内嵌
 $height-datepicker_timeType_insetInput_tpk: 100%; // 时间面板高度 - 内嵌输入框
 $width-datepicker_insetInput_date_type_wrapper: 284px; // 日期类型内嵌输入框宽度
 $width-datepicker_insetInput_date_range_type_wrapper: $width-datepicker_insetInput_date_type_wrapper * 2; // 范围选择内嵌输入框宽度
-$width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_type_wrapper: 165px; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_range_type_wrapper: 331px; // 年月范围类型内嵌输入框宽度
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
+$width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
@@ -142,6 +145,12 @@ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
 $color-datepicker_insetInput_separator: var(--semi-color-text-3);
+$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
+$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
+$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
+$color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
+
+
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
@@ -216,7 +225,7 @@ $transition-datepicker_range_input: background-color .16s ease-in-out;
 $width-datepicker_presetPanel_left_and_right_content: $width-datepicker_presetPanel_left_and_right - $spacing-datepicker_quick_control_content-paddingX * 2; // 左右方位快捷选择面板，内容宽度
 $width-datepicker_presetPanel_top_and_bottom_content_date: $width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（284 - 40）px
 $width-datepicker_presetPanel_top_and_bottom_content_range: ($width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认528px
-$width-datepicker_presetPanel_top_and_bottom_content_month: 194px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
+$width-datepicker_presetPanel_top_and_bottom_content_month: 165px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
 
 $height-datepicker_month_max: $width-datepicker_day * 7 + 1px; // 年月面板最大高度, 最多6 + 1行，再加上一个border宽度, 默认253px
 $height-datepicker_month_max_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-paddingTop + $spacing-datepicker_weeks_compact-padding + $spacing-datepicker_weekday_compact-paddingBottom; // 年月面板最大高度, 最多6 + 1行，再加上padding，默认220px
@@ -227,7 +236,7 @@ $height-datepicker_presetPanel_left_and_right_except_content: 20px + $spacing-da
 // compact
 $width-datepicker_presetPanel_top_and_bottom_content_date_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（216 - 20）px
 $width-datepicker_presetPanel_top_and_bottom_content_range_compact: ($width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认412px
-$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 194px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
+$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 165px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
 
 $height-datepicker_date_panel_compact: $height-datepicker_month_max_compact + $width-datepicker_nav_compact + $spacing-datepicker_nav_compact-padding; // compact，date/dateRange，面板渲染最大高度，默认256px
 $height-datepicker_date_time_panel_compact: $height-datepicker_date_panel_compact + $height-datepicker_switch_compact; // compact，dateTime/dateTImeRange，面板渲染最大高度，默认288px
@@ -236,7 +245,7 @@ $height-datepicker_presetPanel_left_and_right_except_content_compact: 20px + $sp
 $width-datepicker_presetPanel_left_and_right_two_col_button: ($width-datepicker_presetPanel_left_and_right_content - $spacing-datepicker_quick_control_item-margin) * 0.5; // 左右方位快捷选择面板，固定两列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_three_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_date - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_five_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_range - $spacing-datepicker_quick_control_item-margin * 4) * 0.2; // 上下方位快捷选择面板，固定五列，按钮宽度
-$width-datepicker_presetPanel_top_and_bottom_two_col_button:($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_two_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
 
 // compact
 $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_date_compact - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度

package/datePicker/yearAndMonthFoundation.ts

@@ -1,11 +1,17 @@
 import { setMonth, setYear } from 'date-fns';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
+import { ArrayElement } from '../utils/type';
+import { strings } from './constants';
+import { PanelType } from './monthsGridFoundation';
+import copy from 'fast-copy';
+
+type Type = ArrayElement<typeof strings.TYPE_SET>;
 
 export interface YearAndMonthFoundationProps {
-    currentYear?: number;
-    currentMonth?: number;
-    onSelect?: (obj: { currentMonth: number; currentYear: number }) => void;
+    currentYear: { left: number; right: number };
+    currentMonth: { left: number; right: number };
+    onSelect?: (obj: { currentMonth: { left: number; right: number }; currentYear: { left: number; right: number } }) => void;
     onBackToMain?: () => void;
     locale?: any;
     localeCode?: string;
@@ -17,20 +23,25 @@ export interface YearAndMonthFoundationProps {
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
-    yearAndMonthOpts?: any
+    type?: Type;
+    yearAndMonthOpts?: any;
+    startYear?: number;
+    endYear?: number
 }
 
 export interface YearAndMonthFoundationState {
     years: Array<{ value: number; year: number }>;
     months: Array<{ value: number; month: number }>;
-    currentYear: number;
-    currentMonth: number
+    currentYear: { left: number; right: number };
+    currentMonth: { left: number; right: number }
 }
 export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
-    setCurrentYear: (currentYear: number, cb?: () => void) => void;
-    setCurrentMonth: (currentMonth: number) => void;
-    notifySelectYear: (year: number) => void;
-    notifySelectMonth: (month: number) => void;
+    setCurrentYear: (currentYear: { left: number; right: number }, cb?: () => void) => void;
+    setCurrentMonth: (currentMonth: { left: number; right: number }) => void;
+    setCurrentYearAndMonth: (currentYear: { left: number; right: number }, currentMonth: { left: number; right: number }) => void;
+    notifySelectYear: (year: { left: number; right: number }) => void;
+    notifySelectMonth: (month: { left: number; right: number }) => void;
+    notifySelectYearAndMonth: (year: { left: number; right: number }, month: { left: number; right: number }) => void;
     notifyBackToMain: () => void
 }
 
@@ -54,20 +65,51 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
         super({ ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     destroy() {}
 
-    selectYear(item: YearScrollItem) {
-        const year = item.value;
-        this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item));
+    selectYear(item: YearScrollItem, panelType?: PanelType) {
+        // const year = item.value;
+        const { currentYear, currentMonth } = this.getStates();
+        const { type } = this.getProps();
+        const left = strings.PANEL_TYPE_LEFT;
+        const right = strings.PANEL_TYPE_RIGHT;
+
+        const year = copy(currentYear);
+        year[panelType] = item.value;
+
+        // make sure the right panel time is always less than the left panel time
+        if (type === 'monthRange') {
+            const isSameYearIllegalDate = year[left] === year[right] && currentMonth[left] > currentMonth[right];
+            if ((panelType === left && item.value > year[right]) || (panelType === left && isSameYearIllegalDate)) {
+                // 1. select left year and left year > right year
+                // 2. select left year, left year = right year, but left date > right date
+                year[right] = item.value + 1;
+            } else if (panelType === right && isSameYearIllegalDate) {
+                // 1. select right year, left year = right year, but left date > right date
+                year[left] = item.value - 1;
+            }
+        }
+
+        this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item, panelType, year));
         this._adapter.notifySelectYear(year);
     }
 
-    selectMonth(item: MonthScrollItem) {
-        const { month } = item;
+    selectMonth(item: MonthScrollItem, panelType?: PanelType) {
+        const { currentMonth, currentYear } = this.getStates();
+        const { type } = this.getProps();
+        const left = strings.PANEL_TYPE_LEFT;
+        const right = strings.PANEL_TYPE_RIGHT;
+
+        const month = copy(currentMonth);
+        month[panelType] = item.month;
+
+        // make sure the right panel time is always less than the left panel time
+        if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
+            month[right] = item.month + 1;
+        } 
+
         this._adapter.setCurrentMonth(month);
         this._adapter.notifySelectMonth(month);
     }
@@ -75,14 +117,14 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
     /**
      * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
      */
-    autoSelectMonth(item: YearScrollItem) {
+    autoSelectMonth(item: YearScrollItem, panelType: PanelType, year: { left: number; right: number }) {
         const { disabledDate, locale } = this._adapter.getProps();
         const { months, currentMonth } = this._adapter.getStates();
 
         const currentDate = setYear(Date.now(), item.year);
-        const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth - 1));
+        const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
         if (isCurrentMonthDisabled) {
-            const currentIndex = months.findIndex(({ month }) => month === currentMonth);
+            const currentIndex = months.findIndex(({ month }) => month === currentMonth[panelType]);
             let validMonth: typeof months[number];
             // First look in the back, if you can't find it in the back, then look in the front
             validMonth = months.slice(currentIndex).find(({ month }) => !disabledDate(setMonth(currentDate, month - 1)));
@@ -90,7 +132,12 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
                 validMonth = months.slice(0, currentIndex).find(({ month }) => !disabledDate(setMonth(currentDate, month - 1)));
             }
             if (validMonth) {
-                this.selectMonth({ month: validMonth.month, value: locale.fullMonths[validMonth.month], disabled: false });
+                const month = copy(currentMonth);
+                month[panelType] = validMonth.month;
+
+                // change year and month same time
+                this._adapter.setCurrentYearAndMonth(year, month);
+                this._adapter.notifySelectYearAndMonth(year, month);
             }
         }
     }

package/descriptions/constants.ts

@@ -6,7 +6,8 @@ const cssClasses = {
 
 const strings = {
     ALIGN_SET: ['left', 'justify', 'plain', 'center'],
-    SIZE_SET: ['small', 'medium', 'large']
+    SIZE_SET: ['small', 'medium', 'large'],
+    LAYOUT_SET: ['horizontal', 'vertical']
 };
 
 const numbers = {};

package/descriptions/descriptions.scss

@@ -110,10 +110,12 @@ $module: #{$prefix}-descriptions;
             .#{$module}-key {
                 @include font-size-small;
                 padding-bottom: 0;
+                font-size: $font-descriptions_key_small-fontSize;
             }
 
             .#{$module}-value {
                 @include font-size-header-6;
+                font-size: $font-descriptions_value_small-fontSize;
             }
         }
 
@@ -124,10 +126,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_medium-paddingBottom;
+                font-size: $font-descriptions_key_medium-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-4;
+                font-size: $font-descriptions_value_medium-fontSize;
             }
         }
 
@@ -138,13 +142,29 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_large-paddingBottom;
+                font-size: $font-descriptions_key_large-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-2;
+                font-size: $font-descriptions_value_large-fontSize;
             }
         }
     }
+
+    &-horizontal {
+        table {
+            table-layout: fixed;
+        }
+        table, tbody {
+            width: 100%;
+        }
+    }
+
+    &-horizontal &-item {
+        flex: 0;
+    }
+
 }
 
 @import "./rtl.scss";

package/descriptions/foundation.ts

@@ -0,0 +1,36 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+export interface DescriptionsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {}
+
+export default class DescriptionsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<DescriptionsAdapter<P, S>, P, S> {
+    constructor(adapter: DescriptionsAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    getHorizontalList() {
+        const { column, data, children } = this.getProps();
+        let columns;
+        if (data?.length) {
+            columns = data || [];
+        } else {
+            columns =
+                children?.map(item => ({
+                    value: item.props.children,
+                    ...item.props,
+                })) || [];
+        }
+        const horizontalList = [];
+        const curSpan = { totalSpan: 0, itemList: [] };
+        for (const item of columns) {
+            curSpan.totalSpan += item.span || 1;
+            curSpan.itemList.push(item);
+            if (curSpan.totalSpan >= column) {
+                horizontalList.push(curSpan.itemList);
+                curSpan.itemList = [];
+                curSpan.totalSpan = 0;
+            }
+        }
+        if (curSpan.itemList.length != 0) horizontalList.push(curSpan.itemList);
+        return horizontalList;
+    }
+}