@douyinfe/semi-foundation 2.30.2 → 2.31.0

package/carousel/foundation.ts

@@ -18,6 +18,11 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     _interval = null;
+    _forcePlay = false;
+
+    setForcePlay(forcePlay: boolean) {
+        this._forcePlay = forcePlay;
+    }
 
     play(interval: number): void {
         if (this._interval) {
@@ -105,7 +110,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     getSwitchingTime(): number {
         const { autoPlay, speed } = this.getProps(); 
         const autoPlayType = typeof autoPlay;
-        if (autoPlayType === 'boolean' && autoPlay){
+        if (autoPlayType === 'boolean'){ 
             return numbers.DEFAULT_INTERVAL + speed;
         }
         if (isObject(autoPlay)){
@@ -121,7 +126,8 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     handleAutoPlay(): void { 
         const { autoPlay } = this.getProps(); 
         const autoPlayType = typeof autoPlay;
-        if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay)){
+        // when user manually call the play function, force play
+        if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay) || this._forcePlay){
             this.play(this.getSwitchingTime());
         }
     }

package/cascader/cascader.scss

@@ -324,6 +324,14 @@ $module: #{$prefix}-cascader;
             align-items: center;
             position: relative;
 
+            &-small {
+                height: $height-cascader_selection_wrapper_small;
+            }
+
+            &-large {
+                height: $height-cascader_selection_wrapper_large;
+            }
+
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;

package/cascader/foundation.ts

@@ -441,7 +441,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 if (filterable && !multiple) {
                     const displayText = this.renderDisplayText(selectedKey, keyEntities);
                     updateStates.inputPlaceHolder = displayText;
-                    updateStates.inputValue = displayText;
+                    /* 
+                     *  displayText should not be assign to inputValue,
+                     *  cause inputValue should only change by user enter
+                     */
+                    // updateStates.inputValue = displayText;
                 }
             /**
              * If selectedKeys does not meet the update conditions,
@@ -472,7 +476,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             if (filterable && !multiple) {
                 const displayText = this._defaultRenderText(valuePath);
                 updateStates.inputPlaceHolder = displayText;
-                updateStates.inputValue = displayText;
+                /* 
+                 *  displayText should not be assign to inputValue,
+                 *  cause inputValue should only change by user enter
+                 */
+                // updateStates.inputValue = displayText;
             }
             keyEntities[key] = optionNotExist as BasicEntity;
             // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method
@@ -553,7 +561,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     }
 
 
-    updateSearching = (isSearching:boolean)=>{
+    updateSearching = (isSearching: boolean)=>{
         this._adapter.updateStates({ isSearching: false });
     }
 

package/cascader/variables.scss

@@ -96,7 +96,9 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
 $height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
 $height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
-$height-cascader_selection_wrapper: 30px;
+$height-cascader_selection_wrapper_small: 22px;  //级联选择单选搜索时搜索框高度 - 小尺寸
+$height-cascader_selection_wrapper: 30px; // 级联选择单选搜索时搜索框高度 - 默认尺寸
+$height-cascader_selection_wrapper_large: 38px;  //级联选择单选搜索时搜索框高度 - 大尺寸
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/image/previewImageFoundation.ts

@@ -77,8 +77,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     handleWindowResize = (): void => {
-        const { setRatio } = this.getProps();
-        const { ratio } = this.getProps();
+        const { ratio, setRatio } = this.getProps();
         const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
         if (originImageWidth && originImageHeight) {
             if (ratio !== "adaptation") {

package/image/previewInnerFoundation.ts

@@ -41,12 +41,6 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         this._adapter.enabledBodyScroll();
     }
 
-    handleRatio(type: string) {
-        this.setState({
-            ratio: type,
-        } as any);
-    }
-
     handleViewVisibleChange = () => {
         const nowTime = new Date().getTime();
         const mouseActiveTime = this._adapter.getMouseActiveTime();

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

@@ -9,6 +9,8 @@ export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any
 declare class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
     constructor(adapter: CarouselAdapter<P, S>);
     _interval: any;
+    _forcePlay: boolean;
+    setForcePlay(forcePlay: boolean): void;
     play(interval: number): void;
     stop(): void;
     goTo(activeIndex: number): void;

package/lib/cjs/carousel/foundation.js

@@ -19,6 +19,11 @@ class CarouselFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this._interval = null;
+    this._forcePlay = false;
+  }
+
+  setForcePlay(forcePlay) {
+    this._forcePlay = forcePlay;
   }
 
   play(interval) {
@@ -136,7 +141,7 @@ class CarouselFoundation extends _foundation.default {
     } = this.getProps();
     const autoPlayType = typeof autoPlay;
 
-    if (autoPlayType === 'boolean' && autoPlay) {
+    if (autoPlayType === 'boolean') {
       return _constants.numbers.DEFAULT_INTERVAL + speed;
     }
 
@@ -155,9 +160,9 @@ class CarouselFoundation extends _foundation.default {
     const {
       autoPlay
     } = this.getProps();
-    const autoPlayType = typeof autoPlay;
+    const autoPlayType = typeof autoPlay; // when user manually call the play function, force play
 
-    if (autoPlayType === 'boolean' && autoPlay || (0, _isObject2.default)(autoPlay)) {
+    if (autoPlayType === 'boolean' && autoPlay || (0, _isObject2.default)(autoPlay) || this._forcePlay) {
       this.play(this.getSwitchingTime());
     }
   }

package/lib/cjs/cascader/cascader.css

@@ -263,6 +263,12 @@
   align-items: center;
   position: relative;
 }
+.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small {
+  height: 22px;
+}
+.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large {
+  height: 38px;
+}
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
   position: absolute;
   top: 0;

package/lib/cjs/cascader/cascader.scss

@@ -324,6 +324,14 @@ $module: #{$prefix}-cascader;
             align-items: center;
             position: relative;
 
+            &-small {
+                height: $height-cascader_selection_wrapper_small;
+            }
+
+            &-large {
+                height: $height-cascader_selection_wrapper_large;
+            }
+
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;

package/lib/cjs/cascader/foundation.js

@@ -305,7 +305,11 @@ class CascaderFoundation extends _foundation.default {
         if (filterable && !multiple) {
           const displayText = this.renderDisplayText(selectedKey, keyEntities);
           updateStates.inputPlaceHolder = displayText;
-          updateStates.inputValue = displayText;
+          /*
+           *  displayText should not be assign to inputValue,
+           *  cause inputValue should only change by user enter
+           */
+          // updateStates.inputValue = displayText;
         }
         /**
          * If selectedKeys does not meet the update conditions,
@@ -339,7 +343,11 @@ class CascaderFoundation extends _foundation.default {
         const displayText = this._defaultRenderText(valuePath);
 
         updateStates.inputPlaceHolder = displayText;
-        updateStates.inputValue = displayText;
+        /*
+         *  displayText should not be assign to inputValue,
+         *  cause inputValue should only change by user enter
+         */
+        // updateStates.inputValue = displayText;
       }
 
       keyEntities[key] = optionNotExist; // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method

package/lib/cjs/cascader/variables.scss

@@ -96,7 +96,9 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
 $height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
 $height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
-$height-cascader_selection_wrapper: 30px;
+$height-cascader_selection_wrapper_small: 22px;  //级联选择单选搜索时搜索框高度 - 小尺寸
+$height-cascader_selection_wrapper: 30px; // 级联选择单选搜索时搜索框高度 - 默认尺寸
+$height-cascader_selection_wrapper_large: 38px;  //级联选择单选搜索时搜索框高度 - 大尺寸
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/lib/cjs/image/previewImageFoundation.js

@@ -71,11 +71,9 @@ class PreviewImageFoundation extends _foundation.default {
 
     this.handleWindowResize = () => {
       const {
+        ratio,
         setRatio
       } = this.getProps();
-      const {
-        ratio
-      } = this.getProps();
 
       const {
         originImageWidth,

package/lib/cjs/image/previewInnerFoundation.d.ts

@@ -26,7 +26,6 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     constructor(adapter: PreviewInnerAdapter<P, S>);
     beforeShow(): void;
     afterHide(): void;
-    handleRatio(type: string): void;
     handleViewVisibleChange: () => void;
     handleMouseMoveEvent: (e: any, event: string) => void;
     handleMouseMove: (e: any) => void;

package/lib/cjs/image/previewInnerFoundation.js

@@ -334,12 +334,6 @@ class PreviewInnerFoundation extends _foundation.default {
     this._adapter.enabledBodyScroll();
   }
 
-  handleRatio(type) {
-    this.setState({
-      ratio: type
-    });
-  }
-
 }
 
 exports.default = PreviewInnerFoundation;

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

@@ -23,7 +23,7 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyClear(): void;
     updateInputValue(inputValue: string): void;
     focusInput(): void;
-    notifySearch(inputValue: string): void;
+    notifySearch(inputValue: string, event?: any): void;
     registerKeyDown(handler: () => void): void;
     unregisterKeyDown(): void;
     notifyChange(value: string | BasicOptionProps | (string | BasicOptionProps)[]): void;
@@ -78,9 +78,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     clearSelected(): void;
     updateOptionsActiveStatus(selections: Map<any, any>, options?: BasicOptionProps[]): void;
     removeTag(item: BasicOptionProps): void;
-    clearInput(): void;
+    clearInput(event?: any): void;
     focusInput(): void;
-    handleInputChange(sugInput: string): void;
+    handleInputChange(sugInput: string, event: any): void;
     _filterOption(originalOptions: BasicOptionProps[], sugInput: string): BasicOptionProps[];
     _createOptionByInput(allowCreate: boolean, optionsAfterFilter: BasicOptionProps[], sugInput: string): BasicOptionProps[];
     bindKeyBoardEvent(): void;

package/lib/cjs/select/foundation.js

@@ -461,7 +461,7 @@ class SelectFoundation extends _foundation.default {
 
     this._adapter.once('popoverClose', () => {
       if (isFilterable) {
-        this.clearInput();
+        this.clearInput(e);
       }
 
       if (closeCb) {
@@ -579,7 +579,7 @@ class SelectFoundation extends _foundation.default {
 
       if (this._isFilterable()) {
         if (autoClearSearchValue) {
-          this.clearInput();
+          this.clearInput(event);
         }
 
         this.focusInput();
@@ -599,7 +599,7 @@ class SelectFoundation extends _foundation.default {
       if (this._isFilterable()) {
         // When filter active，if autoClearSearchValue is true，reset input after select
         if (autoClearSearchValue) {
-          this.clearInput(); // At the same time, the filtering of options is also cleared, in order to show all candidates
+          this.clearInput(event); // At the same time, the filtering of options is also cleared, in order to show all candidates
 
           const sugInput = '';
           options = this._filterOption(options, sugInput);
@@ -689,9 +689,10 @@ class SelectFoundation extends _foundation.default {
 
       this._notifyChange(selections);
     }
-  }
+  } // The reason why event input is optional is that clearInput may be manually called by the user through ref
+
 
-  clearInput() {
+  clearInput(event) {
     const {
       inputValue
     } = this.getStates(); // only when input is not null, select should notifySearch and updateOptions
@@ -699,7 +700,7 @@ class SelectFoundation extends _foundation.default {
     if (inputValue !== '') {
       this._adapter.updateInputValue('');
 
-      this._adapter.notifySearch(''); // reset options filter
+      this._adapter.notifySearch('', event); // reset options filter
 
 
       const {
@@ -726,7 +727,7 @@ class SelectFoundation extends _foundation.default {
     this._adapter.setIsFocusInContainer(false);
   }
 
-  handleInputChange(sugInput) {
+  handleInputChange(sugInput, event) {
     // Input is a controlled component, so the value needs to be updated
     this._adapter.updateInputValue(sugInput);
 
@@ -750,7 +751,7 @@ class SelectFoundation extends _foundation.default {
 
     this._adapter.updateOptions(optionsAfterFilter);
 
-    this._adapter.notifySearch(sugInput); // In multi-select mode, the drop-down box is repositioned each time you enter, because it may cause a line break as the input changes
+    this._adapter.notifySearch(sugInput, event); // In multi-select mode, the drop-down box is repositioned each time you enter, because it may cause a line break as the input changes
 
 
     if (this._isMultiple()) {
@@ -1026,7 +1027,7 @@ class SelectFoundation extends _foundation.default {
         }
       } else {
         // there are no focusable elements inside the container, tab to next element and trigger blur
-        this.close();
+        this.close(event);
 
         this._notifyBlur(event);
       }
@@ -1052,7 +1053,7 @@ class SelectFoundation extends _foundation.default {
       // focus in the last element in container, focus back to trigger and close panel
       this._focusTrigger();
 
-      this.close();
+      this.close(event);
       (0, _a11y.handlePrevent)(event);
     }
   }
@@ -1064,7 +1065,7 @@ class SelectFoundation extends _foundation.default {
 
     if (!isFocusInContainer) {
       // focus in trigger, close the panel, shift tab to previe element and trigger blur
-      this.close();
+      this.close(event);
 
       this._notifyBlur(event);
     } else if (activeElement === focusableElements[0]) {
@@ -1107,7 +1108,7 @@ class SelectFoundation extends _foundation.default {
           this.onSelect(selectedOption, focusIndex, event);
         }
       } else {
-        this.close();
+        this.close(event);
       }
     }
   }
@@ -1286,7 +1287,7 @@ class SelectFoundation extends _foundation.default {
     } = this.getProps();
 
     if (filter) {
-      this.clearInput();
+      this.clearInput(e);
     }
 
     this.clearSelected(); // prevent this click open dropdown

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

@@ -54,6 +54,9 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getCachedFilteredSortedDataSource: () => RecordType[];
     getCachedFilteredSortedRowKeys: () => BaseRowKeyType[];
     getCachedFilteredSortedRowKeysSet: () => Set<BaseRowKeyType>;
+    setAllDisabledRowKeys: (allDisabledRowKeys: BaseRowKeyType[]) => void;
+    getAllDisabledRowKeys: () => BaseRowKeyType[];
+    getAllDisabledRowKeysSet: () => Set<BaseRowKeyType>;
     notifyFilterDropdownVisibleChange: (visible: boolean, dataIndex: string) => void;
     notifyChange: (changeInfo: {
         pagination: BasePagination;
@@ -159,6 +162,7 @@ declare class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<Re
      */
     setCachedFilteredSortedDataSource: (filteredSortedDataSource: RecordType[]) => void;
     destroy(): void;
+    setAllDisabledRowKeys(disabledRowKeys: any): void;
     handleClick(e: any): void;
     handleMouseEnter(e: any): void;
     handleMouseLeave(e: any): void;

package/lib/cjs/table/foundation.js

@@ -166,12 +166,14 @@ class TableFoundation extends _foundation.default {
     } = this._adapter.getStates();
 
     const filteredSortedDataSource = this.getFilteredSortedDataSource(dataSource, queries);
+    const allDataDisabledRowKeys = this.getAllDisabledRowKeys(filteredSortedDataSource);
     const pageData = this.getCurrentPageData(filteredSortedDataSource);
     this.setAdapterPageData(pageData);
     this.initExpandedRowKeys(pageData);
     this.initSelectedRowKeys(pageData); // cache dataSource after mount, and then calculate it on demand
 
     this.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+    this.setAllDisabledRowKeys(allDataDisabledRowKeys);
   }
 
   initExpandedRowKeys() {
@@ -525,6 +527,10 @@ class TableFoundation extends _foundation.default {
 
   destroy() {}
 
+  setAllDisabledRowKeys(disabledRowKeys) {
+    this._adapter.setAllDisabledRowKeys(disabledRowKeys);
+  }
+
   handleClick(e) {}
 
   handleMouseEnter(e) {}
@@ -774,8 +780,11 @@ class TableFoundation extends _foundation.default {
       const selectedRowKeysSet = this._getSelectedRowKeysSet();
 
       let allRowKeys = [...this._adapter.getCachedFilteredSortedRowKeys()];
-      const disabledRowKeys = this.getAllDisabledRowKeys();
-      const disabledRowKeysSet = new Set(disabledRowKeys);
+
+      const disabledRowKeys = this._adapter.getAllDisabledRowKeys();
+
+      const disabledRowKeysSet = this._adapter.getAllDisabledRowKeysSet();
+
       let changedRowKeys; // Select all, if not disabled && not in selectedRowKeys
 
       if (selected) {
@@ -1142,7 +1151,9 @@ class TableFoundation extends _foundation.default {
   handleClickFilterOrSorter(queries) {
     const dataSource = [...this.getProp('dataSource')];
     const sortedDataSource = this.getFilteredSortedDataSource(dataSource, queries);
+    const allDataDisabledRowKeys = this.getAllDisabledRowKeys(sortedDataSource);
     this.setCachedFilteredSortedDataSource(sortedDataSource);
+    this.setAllDisabledRowKeys(allDataDisabledRowKeys);
     const pageData = this.getCurrentPageData(sortedDataSource);
     this.setAdapterPageData(pageData);
   }

package/lib/cjs/table/rtl.scss

@@ -1,7 +1,6 @@
 $module: #{$prefix}-table;
 
-.#{$prefix}-rtl,
-.#{$prefix}-portal-rtl {
+.#{$module}-wrapper-rtl {
     .#{$module} {
         direction: rtl;
         text-align: right;
@@ -148,6 +147,34 @@ $module: #{$prefix}-table;
                 }
             }
         }
+
+        &-scroll {
+            &-position {
+                &-left {
+                    .#{$module}-tbody,
+                    .#{$module}-thead {
+                        & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
+                            box-shadow: $shadow-table_right;
+                        }
+                        & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
+                            box-shadow: none;
+                        }
+                    }
+                }
+    
+                &-right {
+                    .#{$module}-tbody,
+                    .#{$module}-thead {
+                        & > .#{$module}-row > .#{$module}-cell-fixed-left-last {
+                            box-shadow: none;
+                        }
+                        & > .#{$module}-row > .#{$module}-cell-fixed-right-first {
+                            box-shadow: $shadow-table_left;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .#{$module}-expand-icon {
@@ -155,4 +182,8 @@ $module: #{$prefix}-table;
         margin-left: $spacing-table_expand_icon-marginRight;
         transform: scaleX(-1) translateY(2px);
     }
+
+    .#{$prefix}-spin {
+        direction: rtl;
+    }
 }