fix: When all items except the disabled item in the left panel of tra… (#2574)

* fix: When all items except the disabled item in the left panel of transfer are selected, the operation button should display Cancel all selections

* chore: Fix variable typo

packages/semi-foundation/transfer/transfer.scss

@@ -53,6 +53,7 @@ $module: #{$prefix}-transfer;
         margin-bottom: $spacing-transfer_header-marginBottom;
         margin-left: $spacing-transfer_header-marginLeft;
         color: $color-transfer_header-text;
+        flex-shrink: 0;
 
         &-all {
             font-weight: $font-transfer_header_all-fontWeight;

packages/semi-ui/transfer/index.tsx

@@ -409,18 +409,28 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         // For example, the filtered data on the left is 1, 3, 4;
         // The selected option is 1,2,3,4, it is true
         // The selected option is 2,3,4, then it is false
-        const leftContainesNotInSelected = Boolean(filterData.find(f => !selectedItems.has(f.key)));
+        let filterDataAllDisabled = true;
+        const leftContainsNotInSelected = Boolean(filterData.find(f => {
+            if (f.disabled) {
+                return false;
+            } else {
+                if (filterDataAllDisabled) {
+                    filterDataAllDisabled = false;
+                }
+                return !selectedItems.has(f.key);
+            }
+        }));
 
         const totalText = totalToken.replace('${total}', `${showNumber}`);
 
         const headerConfig: HeaderConfig = {
             totalContent: totalText,
-            allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
-            onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
+            allContent: leftContainsNotInSelected ? locale.selectAll : locale.clearSelectAll,
+            onAllClick: () => this.foundation.handleAll(leftContainsNotInSelected),
             type: 'left',
-            showButton: type !== strings.TYPE_TREE_TO_LIST,
+            showButton: type !== strings.TYPE_TREE_TO_LIST && !filterDataAllDisabled,
             num: showNumber,
-            allChecked: !leftContainesNotInSelected
+            allChecked: !leftContainsNotInSelected
         };
         const inputCom = this.renderFilter(locale);
         const headerCom = this.renderHeader(headerConfig);
@@ -472,13 +482,13 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             filterData,
             sourceData: data,
             propsDataSource: dataSource,
-            allChecked: !leftContainesNotInSelected,
+            allChecked: !leftContainsNotInSelected,
             showNumber,
             inputValue,
             selectedItems,
             value: values,
             onSelect: this.foundation.handleSelect.bind(this.foundation),
-            onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
+            onAllClick: () => this.foundation.handleAll(leftContainsNotInSelected),
             onSearch: this.onInputChange,
             onSelectOrRemove: (item: ResolvedDataItem) => this.onSelectOrRemove(item),
         };
@@ -638,12 +648,13 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
         const selectedToken = locale.selected;
         const selectedText = selectedToken.replace('${total}', `${selectedData.length}`);
+        const hasValidSelected = selectedData.findIndex(item => !item.disabled) !== -1;
         const headerConfig = {
             totalContent: selectedText,
             allContent: locale.clear,
             onAllClick: () => this.foundation.handleClear(),
             type: 'right',
-            showButton: Boolean(selectedData.length),
+            showButton: Boolean(selectedData.length) && hasValidSelected,
             num: selectedData.length,
         };
         const headerCom = this.renderHeader(headerConfig);