@douyinfe/semi-foundation 2.1.6-alpha.0 → 2.2.1

package/lib/cjs/cascader/foundation.js

@@ -62,6 +62,8 @@ var _treeUtil = require("../tree/treeUtil");
 
 var _util = require("./util");
 
+var _constants = require("./constants");
+
 // eslint-disable-next-line max-len
 class CascaderFoundation extends _foundation.default {
   constructor(adapter) {
@@ -568,10 +570,12 @@ class CascaderFoundation extends _foundation.default {
   }
 
   _defaultRenderText(path, displayRender) {
+    const separator = this.getProp('separator');
+
     if (displayRender && typeof displayRender === 'function') {
       return displayRender(path);
     } else {
-      return path.join(' / ');
+      return path.join(separator);
     }
   }
 
@@ -645,7 +649,8 @@ class CascaderFoundation extends _foundation.default {
     const {
       changeOnSelect: allowChange,
       filterLeafOnly,
-      multiple
+      multiple,
+      enableLeafClick
     } = this.getProps();
     const {
       keyEntities,
@@ -679,6 +684,10 @@ class CascaderFoundation extends _foundation.default {
       this._adapter.updateStates({
         activeKeys: new _set.default(activeKeys)
       });
+
+      if (isLeaf && enableLeafClick) {
+        this.onItemCheckboxClick(item);
+      }
     } else {
       this._adapter.notifySelect(data.value);
 
@@ -728,12 +737,13 @@ class CascaderFoundation extends _foundation.default {
     const {
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.getStates();
     const {
       autoMergeValue,
       max,
-      disableStrictly
+      disableStrictly,
+      leafOnly
     } = this.getProps(); // prev checked status
 
     const prevCheckedStatus = checkedKeys.has(key); // next checked status
@@ -744,15 +754,18 @@ class CascaderFoundation extends _foundation.default {
       checkedKeys: curCheckedKeys,
       halfCheckedKeys: curHalfCheckedKeys
     } = disableStrictly ? this.calcNonDisabedCheckedKeys(key, curCheckedStatus) : this.calcCheckedKeys(key, curCheckedStatus);
-    const curMergedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(curCheckedKeys, keyEntities));
-    const curRealCheckedKeys = autoMergeValue ? curMergedCheckedKeys : curCheckedKeys;
+    const mergeType = (0, _util.calcMergeType)(autoMergeValue, leafOnly);
+    const isLeafOnlyMerge = mergeType === _constants.strings.LEAF_ONLY_MERGE_TYPE;
+    const isNoneMerge = mergeType === _constants.strings.NONE_MERGE_TYPE;
+    const curResolvedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(curCheckedKeys, keyEntities, isLeafOnlyMerge));
+    const curRealCheckedKeys = isNoneMerge ? curCheckedKeys : curResolvedCheckedKeys;
 
     if ((0, _isNumber2.default)(max)) {
-      if (autoMergeValue) {
+      if (!isNoneMerge) {
         // When it exceeds max, the quantity is allowed to be reduced, and no further increase is allowed
-        if (mergedCheckedKeys.size < curMergedCheckedKeys.size && curMergedCheckedKeys.size > max) {
+        if (resolvedCheckedKeys.size < curResolvedCheckedKeys.size && curResolvedCheckedKeys.size > max) {
           const checkedEntities = [];
-          (0, _forEach.default)(curMergedCheckedKeys).call(curMergedCheckedKeys, itemKey => {
+          (0, _forEach.default)(curResolvedCheckedKeys).call(curResolvedCheckedKeys, itemKey => {
             checkedEntities.push(keyEntities[itemKey]);
           });
 
@@ -779,7 +792,7 @@ class CascaderFoundation extends _foundation.default {
       this._adapter.updateStates({
         checkedKeys: curCheckedKeys,
         halfCheckedKeys: curHalfCheckedKeys,
-        mergedCheckedKeys: curMergedCheckedKeys
+        resolvedCheckedKeys: curResolvedCheckedKeys
       });
     } // The click event during multiple selection will definitely cause the checked state of node to change,
     // so there is no need to judge the value to change.
@@ -935,7 +948,7 @@ class CascaderFoundation extends _foundation.default {
       newState.halfCheckedKeys = new _set.default([]);
       newState.selectedKeys = new _set.default([]);
       newState.activeKeys = new _set.default([]);
-      newState.mergedCheckedKeys = new _set.default([]);
+      newState.resolvedCheckedKeys = new _set.default([]);
 
       this._adapter.notifyChange([]);
     } else {

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

@@ -2,3 +2,4 @@ export declare function isValid(val: any): boolean;
 export declare function normalizedArr(val: any): any[];
 export declare function convertDataToEntities(dataNodes: any): any;
 export declare function findKeysForValues(value: any, keyEntities: any): any[];
+export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;

package/lib/cjs/cascader/util.js

@@ -8,6 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
+exports.calcMergeType = calcMergeType;
 exports.convertDataToEntities = convertDataToEntities;
 exports.findKeysForValues = findKeysForValues;
 exports.isValid = isValid;
@@ -33,6 +34,8 @@ var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
 
+var _constants = require("./constants");
+
 function getPosition(level, index) {
   var _context;
 
@@ -111,4 +114,18 @@ function findKeysForValues(value, keyEntities) {
   const valuePath = normalizedArr(value);
   const res = (0, _map.default)(_context2 = (0, _filter.default)(_context3 = (0, _values.default)(keyEntities)).call(_context3, item => (0, _isEqual2.default)(item.valuePath, valuePath))).call(_context2, item => item.key);
   return res;
+}
+
+function calcMergeType(autoMergeValue, leafOnly) {
+  let mergeType;
+
+  if (leafOnly) {
+    mergeType = _constants.strings.LEAF_ONLY_MERGE_TYPE;
+  } else if (autoMergeValue) {
+    mergeType = _constants.strings.AUTO_MERGE_VALUE_MERGE_TYPE;
+  } else {
+    mergeType = _constants.strings.NONE_MERGE_TYPE;
+  }
+
+  return mergeType;
 }

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

@@ -1,4 +1,9 @@
+/**
+ * @file
+ * Various date-related analysis methods
+ */
+import { Locale } from 'date-fns';
 /**
  * Parsing value to Date object
  */
-export declare function compatiableParse(value: string, formatToken?: string, baseDate?: Date, locale?: any): Date | null;
+export declare function compatiableParse(value: string, formatToken?: string, baseDate?: Date, locale?: Locale): Date | null;

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

@@ -37,7 +37,9 @@ function compatiableParse(value, formatToken, baseDate, locale) {
       result = new Date(Date.parse(value));
     }
 
-    if (!(0, _dateFns.isValid)(result)) {
+    const yearInvalid = (0, _dateFns.isValid)(result) && String(result.getFullYear()).length > 4;
+
+    if (!(0, _dateFns.isValid)(result) || yearInvalid) {
       result = null;
     }
   }

package/lib/cjs/datePicker/datePicker.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -72,6 +71,9 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
 }
+.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 216px;
+}
 .semi-datepicker-panel-yam {
   max-width: 284px;
 }
@@ -96,6 +98,12 @@
   text-align: right;
   background-color: var(--semi-color-fill-0);
 }
+.semi-datepicker-footer .semi-button:first-of-type {
+  margin-right: 12px;
+}
+.semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 8px;
+}
 .semi-datepicker-yam {
   position: absolute;
   top: 0;
@@ -561,6 +569,9 @@
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
   margin-top: 17px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 168px;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -700,6 +711,16 @@
   padding-left: 8px;
   text-align: left;
 }
+.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
+.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
+  margin-left: 0;
+  margin-right: 0;
+}
+.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
+.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 12px;
+  margin-left: 0;
+}
 .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
 .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -735,12 +756,20 @@
   margin-right: 8px;
 }
 .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
-.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
 .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
-.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
   transform: scaleX(-1);
 }
 .semi-rtl .semi-datepicker-range-input-prefix,

package/lib/cjs/datePicker/datePicker.scss

@@ -94,6 +94,15 @@ $module: #{$prefix}-datepicker;
                 min-height: $height-datepicker_timepicker_header_min;
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day;
+            }
+        }
     }
 
     // 年月选择器
@@ -131,6 +140,17 @@ $module: #{$prefix}-datepicker;
         padding-bottom: $spacing-datepicker_footer-paddingBottom;
         text-align: right;
         background-color: $color-datepicker_footer-bg-default;
+
+        .#{$prefix}-button {
+            // cancel button
+            &:first-of-type {
+                margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+            }
+            // confirm button
+            &:nth-of-type(2) {
+                margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
+            }
+        }
     }
 
     // 年月选择
@@ -833,6 +853,15 @@ $module: #{$prefix}-datepicker;
                 }
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day_compact;
+            }
+        }
     }
 
     // 年月选择器

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

@@ -201,10 +201,13 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *   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
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]): void;
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]): void;
+    /**
+     * clear input value when selected date is not confirmed
+     */
+    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
+    resetCachedSelectedValue(willUpdateDates?: Date[]): void;
     /**
      * timing to call closePanel
      *  1. click confirm button

package/lib/cjs/datePicker/foundation.js

@@ -250,12 +250,10 @@ class DatePickerFoundation extends _foundation.default {
    *   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
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
 
 
-  rangeTypeSideEffectsWhenClosePanel(inputValue, dates) {
+  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
     if (this._isRangeType()) {
       this._adapter.setRangeInputFocus(false);
       /**
@@ -265,17 +263,36 @@ class DatePickerFoundation extends _foundation.default {
 
 
       this.handleInputBlur(inputValue);
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+  /**
+   * clear input value when selected date is not confirmed
+   */
 
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
 
-      const newCachedSelectedValue = (0, _isArray.default)(dates) && dates.length ? dates : value;
+  needConfirmSideEffectsWhenClosePanel(willUpdateDates) {
+    if (this._adapter.needConfirm() && !this._isRangeType()) {
+      /**
+       * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+       * if `` input element will show `` directly
+       */
+      this._adapter.updateInputValue(null);
 
-      if (!(0, _isEqual2.default)(newCachedSelectedValue, cachedSelectedValue)) {
-        this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-      }
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+
+  resetCachedSelectedValue(willUpdateDates) {
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const newCachedSelectedValue = (0, _isArray.default)(willUpdateDates) ? willUpdateDates : value;
+
+    if (!(0, _isEqual2.default)(newCachedSelectedValue, cachedSelectedValue)) {
+      this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
     }
   }
   /**
@@ -294,7 +311,14 @@ class DatePickerFoundation extends _foundation.default {
 
   closePanel(e) {
     let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const willUpdateDates = (0, _isNullOrUndefined.default)(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
 
     if (!this._isControlledComponent('open')) {
       this._adapter.togglePanel(false);
@@ -303,7 +327,8 @@ class DatePickerFoundation extends _foundation.default {
     } // range type picker, closing panel requires the following side effects
 
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
+    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
 
     this._adapter.notifyOpenChange(false);
 
@@ -365,7 +390,8 @@ class DatePickerFoundation extends _foundation.default {
     if (parsedResult && parsedResult.length) {
       this._updateValueAndInput(parsedResult, input === '');
     } else if (input === '') {
-      this._updateValueAndInput('', true);
+      // if clear input, set input to `''`
+      this._updateValueAndInput('', true, '');
     } else {
       this._updateValueAndInput(stateValue);
     }

package/lib/cjs/datePicker/inputFoundation.js

@@ -56,6 +56,9 @@ class InputFoundation extends _foundation.default {
   }
 
   handleRangeInputClear(e) {
+    // prevent trigger click outside
+    this.stopPropagation(e);
+
     this._adapter.notifyRangeInputClear(e);
   }
 

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

@@ -13,6 +13,7 @@ interface MonthsGridElementProps {
     renderFullDate?: () => React.ReactNode;
 }
 export declare type PanelType = 'left' | 'right';
+export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
     defaultValue?: ValueType;
@@ -104,11 +105,34 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     _initDateTimePickerFromValue(values: BaseValueType[]): void;
     _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
     destroy(): void;
+    /**
+     * sync change another panel month when change months from the else yam panel
+     * call it when
+     *  - current change panel targe date month is same with another panel date
+     *
+     * @example
+     *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+     *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+     */
+    handleSyncChangeMonths(options: {
+        panelType: PanelType;
+        target: Date;
+    }): void;
+    /**
+     * Get the target date based on the panel type and switch type
+     */
+    getTargetChangeDate(options: {
+        panelType: PanelType;
+        switchType: YearMonthChangeType;
+    }): Date;
+    /**
+     * Change month by yam panel
+     */
     toMonth(panelType: PanelType, target: Date): void;
     toYear(panelType: PanelType, target: Date): void;
     toYearMonth(panelType: PanelType, target: Date): void;
     isRangeType(type?: Type): boolean;
-    handleSwitchMonth(switchType: 'prevMonth' | 'nextMonth', panelType: PanelType): void;
+    handleSwitchMonthOrYear(switchType: YearMonthChangeType, panelType: PanelType): void;
     prevMonth(panelType: PanelType): void;
     nextMonth(panelType: PanelType): void;
     prevYear(panelType: PanelType): void;
@@ -158,13 +182,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         notifyValue: any;
         notifyDate: any;
     };
-    handleYearOrMonthChange(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
+    handleYearOrMonthChange(type: YearMonthChangeType, panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
     /**
      * You have chosen to switch the year and month in the future to directly update the Date without closing the date panel
      * @param {*} type
      * @param {*} targetDate
      */
-    updateDateAfterChangeYM(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', targetDate: Date): void;
+    updateDateAfterChangeYM(type: YearMonthChangeType, targetDate: Date): void;
     _isMultiple(): boolean;
     _isRange(): void;
     handleDayClick(day: MonthDayInfo, panelType: PanelType): void;
@@ -214,5 +238,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     showYearPicker(panelType: PanelType): void;
     showTimePicker(panelType: PanelType, opt?: boolean): void;
     showDatePanel(panelType: PanelType): void;
+    /**
+     * Get year and month panel open type
+     *
+     * It is useful info to set minHeight of weeks.
+     *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+     *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+     */
+    getYAMOpenType(): "left" | "right" | "none" | "both";
 }
 export {};

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -241,11 +241,99 @@ class MonthsGridFoundation extends _foundation.default {
 
 
   destroy() {}
+  /**
+   * sync change another panel month when change months from the else yam panel
+   * call it when
+   *  - current change panel targe date month is same with another panel date
+   *
+   * @example
+   *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+   *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+   */
+
+
+  handleSyncChangeMonths(options) {
+    const {
+      panelType,
+      target
+    } = options;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    if (this.isRangeType(type)) {
+      if (panelType === 'right' && (0, _dateFns.differenceInCalendarMonths)(target, monthLeft.pickerDate) === 0) {
+        this.handleYearOrMonthChange('prevMonth', 'left', 1, true);
+      } else if (panelType === 'left' && (0, _dateFns.differenceInCalendarMonths)(monthRight.pickerDate, target) === 0) {
+        this.handleYearOrMonthChange('nextMonth', 'right', 1, true);
+      }
+    }
+  }
+  /**
+   * Get the target date based on the panel type and switch type
+   */
+
+
+  getTargetChangeDate(options) {
+    const {
+      panelType,
+      switchType
+    } = options;
+
+    const {
+      monthRight,
+      monthLeft
+    } = this._adapter.getStates();
+
+    const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
+    let target;
+
+    switch (switchType) {
+      case 'prevMonth':
+        target = (0, _dateFns.addMonths)(currentDate, -1);
+        break;
+
+      case 'nextMonth':
+        target = (0, _dateFns.addMonths)(currentDate, 1);
+        break;
+
+      case 'prevYear':
+        target = (0, _dateFns.addYears)(currentDate, -1);
+        break;
+
+      case 'nextYear':
+        target = (0, _dateFns.addYears)(currentDate, 1);
+        break;
+    }
+
+    return target;
+  }
+  /**
+   * Change month by yam panel
+   */
+
 
   toMonth(panelType, target) {
+    const {
+      type
+    } = this._adapter.getProps();
+
     const diff = this._getDiff('month', target, panelType);
 
     this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
+
+    if (this.isRangeType(type)) {
+      this.handleSyncChangeMonths({
+        panelType,
+        target
+      });
+    }
   }
 
   toYear(panelType, target) {
@@ -267,34 +355,51 @@ class MonthsGridFoundation extends _foundation.default {
     return typeof realType === 'string' && /range/i.test(realType);
   }
 
-  handleSwitchMonth(switchType, panelType) {
+  handleSwitchMonthOrYear(switchType, panelType) {
     const {
       type,
       syncSwitchMonth
     } = this.getProps();
+    const rangeType = this.isRangeType(type); // range type and syncSwitchMonth, we should change panels at same time
 
-    if (this.isRangeType(type) && syncSwitchMonth) {
+    if (rangeType && syncSwitchMonth) {
       this.handleYearOrMonthChange(switchType, 'left', 1, true);
       this.handleYearOrMonthChange(switchType, 'right', 1, true);
     } else {
       this.handleYearOrMonthChange(switchType, panelType);
+      /**
+       * default behavior (v2.2.0)
+       * In order to prevent the two panels from being the same month, this will confuse the user when selecting the range
+       * https://github.com/DouyinFE/semi-design/issues/260
+       */
+
+      if (rangeType) {
+        const target = this.getTargetChangeDate({
+          panelType,
+          switchType
+        });
+        this.handleSyncChangeMonths({
+          panelType,
+          target
+        });
+      }
     }
   }
 
   prevMonth(panelType) {
-    this.handleSwitchMonth('prevMonth', panelType);
+    this.handleSwitchMonthOrYear('prevMonth', panelType);
   }
 
   nextMonth(panelType) {
-    this.handleSwitchMonth('nextMonth', panelType);
+    this.handleSwitchMonthOrYear('nextMonth', panelType);
   }
 
   prevYear(panelType) {
-    this.handleYearOrMonthChange('prevYear', panelType);
+    this.handleSwitchMonthOrYear('prevYear', panelType);
   }
 
   nextYear(panelType) {
-    this.handleYearOrMonthChange('nextYear', panelType);
+    this.handleSwitchMonthOrYear('nextYear', panelType);
   }
   /**
    * Calculate the year and month difference
@@ -948,6 +1053,34 @@ class MonthsGridFoundation extends _foundation.default {
       isYearPickerOpen: false
     });
   }
+  /**
+   * Get year and month panel open type
+   *
+   * It is useful info to set minHeight of weeks.
+   *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+   *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+   */
+
+
+  getYAMOpenType() {
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    const leftYearPickerOpen = monthLeft.isYearPickerOpen;
+    const rightYearPickerOpen = monthRight.isYearPickerOpen;
+
+    if (leftYearPickerOpen && rightYearPickerOpen) {
+      return 'both';
+    } else if (leftYearPickerOpen) {
+      return 'left';
+    } else if (rightYearPickerOpen) {
+      return 'right';
+    } else {
+      return 'none';
+    }
+  }
 
 }