@douyinfe/semi-foundation 2.31.2 → 2.32.0-beta.0

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 { cloneDeep } from 'lodash';
+
+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,23 @@ export interface YearAndMonthFoundationProps {
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
+    type?: Type;
     yearAndMonthOpts?: any
 }
 
 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
 }
 
@@ -60,14 +69,47 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
     // 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 = cloneDeep(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 = cloneDeep(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 = cloneDeep(currentMonth);
+                month[panelType] = validMonth.month;
+
+                // change year and month same time
+                this._adapter.setCurrentYearAndMonth(year, month);
+                this._adapter.notifySelectYearAndMonth(year, month);
             }
         }
     }

package/lib/cjs/cascader/foundation.d.ts

@@ -47,8 +47,10 @@ export interface BasicTriggerRenderProps {
      * should call this function when the value of the Input component
      * customized by triggerRender is updated to synchronize the state
      * with Cascader. */
+    onSearch: (inputValue: string) => void;
     onChange: (inputValue: string) => void;
     onClear: (e: any) => void;
+    onRemove: (key: string) => void;
 }
 export interface BasicScrollPanelProps {
     panelIndex: number;

package/lib/cjs/datePicker/_utils/getDefaultFormatToken.d.ts

@@ -4,6 +4,7 @@ declare const getDefaultFormatToken: (type: string) => {
     readonly dateRange: "yyyy-MM-dd";
     readonly dateTimeRange: "yyyy-MM-dd HH:mm:ss";
     readonly month: "yyyy-MM";
+    readonly monthRange: "yyyy-MM";
 };
 export declare function getDefaultFormatTokenByType(type: string): any;
 export default getDefaultFormatToken;

package/lib/cjs/datePicker/_utils/getDefaultFormatToken.js

@@ -13,7 +13,8 @@ const defaultFormatTokens = {
   dateTime: _constants.strings.FORMAT_DATE_TIME,
   dateRange: _constants.strings.FORMAT_FULL_DATE,
   dateTimeRange: _constants.strings.FORMAT_DATE_TIME,
-  month: _constants.strings.FORMAT_YEAR_MONTH
+  month: _constants.strings.FORMAT_YEAR_MONTH,
+  monthRange: _constants.strings.FORMAT_YEAR_MONTH
 };
 
 const getDefaultFormatToken = type => defaultFormatTokens;

package/lib/cjs/datePicker/_utils/getInsetInputFormatToken.js

@@ -41,6 +41,7 @@ function getInsetInputFormatToken(options) {
 
     case 'date':
     case 'month':
+    case 'monthRange':
     case 'dateRange':
     default:
       const dateResult = dateReg.exec(format);

package/lib/cjs/datePicker/_utils/getInsetInputValueFromInsetInputStr.js

@@ -43,6 +43,7 @@ function getInsetInputValueFromInsetInputStr(options) {
   switch (type) {
     case 'date':
     case 'month':
+    case 'monthRange':
       insetInputValue.monthLeft.dateInput = inputValue;
       break;
 

package/lib/cjs/datePicker/constants.d.ts

@@ -35,7 +35,7 @@ declare const strings: {
     readonly DEFAULT_SEPARATOR_MULTIPLE: ",";
     readonly DEFAULT_SEPARATOR_RANGE: " ~ ";
     readonly SIZE_SET: readonly ["small", "default", "large"];
-    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "dateTime", "dateTimeRange"];
+    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "monthRange", "dateTime", "dateTimeRange"];
     readonly PRESET_POSITION_SET: readonly ["left", "right", "top", "bottom"];
     readonly DENSITY_SET: readonly ["default", "compact"];
     readonly PANEL_TYPE_LEFT: "left";

package/lib/cjs/datePicker/constants.js

@@ -51,7 +51,7 @@ const strings = Object.assign({
   DEFAULT_SEPARATOR_MULTIPLE: ',',
   DEFAULT_SEPARATOR_RANGE: ' ~ ',
   SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'monthRange', 'dateTime', 'dateTimeRange'],
   PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
   DENSITY_SET: ['default', 'compact'],
   PANEL_TYPE_LEFT: 'left',

package/lib/cjs/datePicker/datePicker.css

@@ -118,6 +118,15 @@
 .semi-datepicker-panel-yam {
   max-width: 484px;
 }
+.semi-datepicker-panel-yam[x-type=monthRange] {
+  max-width: 584px;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border-left: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-panel-yam .semi-scrolllist {
   box-shadow: none;
   height: 266px;
@@ -132,10 +141,7 @@
   padding: 0;
   overflow: hidden;
 }
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel {
-  border: none;
-}
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item {
+.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) {
   border: none;
 }
 .semi-datepicker-footer {
@@ -456,16 +462,16 @@
 .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(2, minmax(65.5px, 73px));
+  grid-template-columns: repeat(2, minmax(51px, 58.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 20px;
 }
 .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 73px;
+  max-width: 58.5px;
 }
 .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 57px;
+  max-width: 42.5px;
   color: var(--semi-color-primary);
 }
 .semi-datepicker-quick-control-month {
@@ -555,7 +561,10 @@
   width: 568px;
 }
 .semi-datepicker-inset-input-wrapper[x-type=month] {
-  width: 204px;
+  width: 165px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=monthRange] {
+  width: 331px;
 }
 .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
   flex: 1;
@@ -585,6 +594,9 @@
 .semi-datepicker-range-input:active {
   border-color: transparent;
 }
+.semi-datepicker-range-input .semi-datepicker-monthRange-input {
+  background-color: transparent;
+}
 .semi-datepicker-range-input-wrapper {
   box-sizing: border-box;
   background-color: transparent;
@@ -754,6 +766,12 @@
   height: 48px;
   padding: 12px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -955,16 +973,16 @@
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
   display: grid;
-  grid-template-columns: repeat(2, minmax(75.5px, 83px));
+  grid-template-columns: repeat(2, minmax(61px, 68.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 10px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 83px;
+  max-width: 68.5px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 67px;
+  max-width: 52.5px;
   font-size: 12px;
   color: var(--semi-color-primary);
 }

package/lib/cjs/datePicker/datePicker.scss

@@ -169,11 +169,23 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     // 年月选择器
-
     &-panel-yam {
         // add left or right preset panel to panel yam, max-width will be bigger
         max-width: $width-datepicker_monthPanel_max + $width-datepicker_presetPanel_left_and_right;
 
+        &[x-type="monthRange"] {
+            max-width: $width-datepicker_monthRangePanel_max + $width-datepicker_presetPanel_left_and_right;
+        }
+
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2) {
+                border-left: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             box-shadow: none;
             height: $height-datepicker_panel_yam_scrolllist;
@@ -196,13 +208,14 @@ $module-list: #{$prefix}-scrolllist;
                 padding: 0;
                 overflow: hidden;
 
-                .#{$prefix}-scrolllist-item-wheel {
+                .#{$prefix}-scrolllist-item-wheel:not(#neverExistElement) {
+                    // equal to #{$prefix}-scrolllist-item-wheel, add [:not] selector only to increase selector priority
                     border: none;
                 }
 
-                .#{$prefix}-scrolllist-item {
-                    border: none;
-                }
+                // .#{$prefix}-scrolllist-item {
+                //     border: none;
+                // }
             }
         }
     }
@@ -832,6 +845,9 @@ $module-list: #{$prefix}-scrolllist;
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper;
             }
+            &[x-type=monthRange] {
+                width: $width-datepicker_insetInput_month_range_type_wrapper;
+            }
 
             .#{$prefix}-input-wrapper {
                 flex: 1;
@@ -869,7 +885,9 @@ $module-list: #{$prefix}-scrolllist;
                 border-color: $color-datepicker_range_trigger-border-active ;
             }
 
-
+            .#{$module}-monthRange-input {
+                background-color: transparent;
+            }
 
             &-wrapper {
                 box-sizing: border-box;
@@ -1108,6 +1126,15 @@ $module-list: #{$prefix}-scrolllist;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
         }
 
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2){
+                border: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             @include font-size-small;
             line-height: $lineHeight-datepicker_compact;

package/lib/cjs/datePicker/foundation.d.ts

@@ -85,6 +85,7 @@ export interface EventHandlerProps {
     onClear?: (e: any) => void;
     onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
+    onClickOutSide?: () => void;
 }
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
     autoAdjustOverflow?: boolean;
@@ -155,7 +156,7 @@ export interface DatePickerFoundationState {
 }
 export { Type, DateInputFoundationProps };
 export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationProps, DatePickerFoundationState> {
-    togglePanel: (panelShow: boolean) => void;
+    togglePanel: (panelShow: boolean, cb?: () => void) => void;
     registerClickOutSide: () => void;
     unregisterClickOutSide: () => void;
     notifyBlur: DatePickerFoundationProps['onBlur'];
@@ -178,6 +179,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
     setInsetInputFocus: () => void;
     setTriggerDisabled: (disabled: boolean) => void;
+    setInputFocus: () => void;
+    setInputBlur: () => void;
+    setRangeInputBlur: () => void;
 }
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -185,6 +189,7 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
  *  task 2. When the input box changes, update the date value = > Notify the change
  */
 export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
+    clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
     isValidTimeZone(timeZone?: string | number): boolean;
@@ -215,17 +220,17 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     initPanelOpenStatus(defaultOpen?: boolean): void;
     openPanel(): void;
     /**
+     * @deprecated
      * do these side effects when type is dateRange or dateTimeRange
      *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
      *   2. set cachedSelectedValue using given dates(in needConfirm mode)
      *      - directly closePanel without click confirm will set cachedSelectedValue to state value
      *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]): void;
     /**
+     * @deprecated
      * clear input value when selected date is not confirmed
      */
-    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
     /**
      * clear inset input value when close panel
      */
@@ -247,6 +252,23 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      */
     closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    open(): void;
+    close(): void;
+    focus(focusType?: Exclude<RangeType, false>): void;
+    blur(): void;
+    /**
+     * reset cachedSelectedValue, inputValue when close panel
+     */
+    resetInnerSelectedStates(willUpdateDates?: Date[]): void;
+    resetFocus(e?: any): void;
+    /**
+     * cachedSelectedValue can be `(Date|null)[]` or `null`
+     */
+    isCachedSelectedValueValid(dates: Date[]): boolean;
+    /**
+     * 将输入框内容置空
+     */
+    clearInputValue(): void;
     /**
      * clear range input focus when open is controlled
      * fixed github 1375
@@ -381,12 +403,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         needCheckFocusRecord?: boolean;
     }): void;
     /**
-     * when changing the year and month through the panel when the type is year or month
+     * when changing the year and month through the panel when the type is year or month or monthRange
      * @param {*} item
      */
     handleYMSelectedChange(item?: {
-        currentMonth?: number;
-        currentYear?: number;
+        currentMonth?: {
+            left: number;
+            right: number;
+        };
+        currentYear?: {
+            left: number;
+            right: number;
+        };
     }): void;
     handleConfirm(): void;
     handleCancel(): void;