feat(Select): support checkAll (#1841)

* feat(Select): support checkAll

* chore: update snapshot

src/select/_example/multiple.jsx

@@ -4,6 +4,7 @@ import { Select, Space } from 'tdesign-react';
 const { Option } = Select;
 
 const options1 = [
+  { label: '全选', checkAll: true },
   { label: '架构云', value: '1' },
   { label: '大数据', value: '2' },
   { label: '区块链', value: '3' },
@@ -27,10 +28,14 @@ const options2 = [
 const MultipleSelect = () => {
   const [value, setValue] = useState(['3', '5']);
 
+  const handleChange = (v, context) => {
+    console.log('context:', context);
+    setValue(v);
+  };
+
   return (
     <Space breakLine style={{ width: '100%' }}>
-      <Select value={value} onChange={(v) => setValue(v)} filterable multiple options={options1} />
-      <br></br>
+      <Select value={value} onChange={handleChange} filterable multiple options={options1} />
       <Select defaultValue={['1', '2', '3', '4', '5', '6']} placeholder="请选择云产品" multiple>
         {options2.map((item) => (
           <Option value={item.value} label={item.label} key={item.value} content={item.content}></Option>

src/select/base/Option.tsx

@@ -28,8 +28,10 @@ export interface SelectOptionProps
       restData?: Record<string, any>;
     },
   ) => void;
+  onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => void;
   restData?: Record<string, any>;
   keys?: SelectKeysType;
+  optionLength?: number;
 }
 
 const componentType = 'select';
@@ -39,6 +41,7 @@ const Option = (props: SelectOptionProps) => {
     disabled: propDisabled,
     label: propLabel,
     selectedValue,
+    checkAll,
     multiple,
     size,
     max,
@@ -70,7 +73,6 @@ const Option = (props: SelectOptionProps) => {
         ? value === selectedValue
         : value === get(selectedValue, keys?.value || 'value');
   }
-
   // 处理多选场景
   if (multiple && Array.isArray(selectedValue)) {
     selected = selectedValue.some((item) => {
@@ -80,12 +82,18 @@ const Option = (props: SelectOptionProps) => {
       }
       return get(item, keys?.value || 'value') === value;
     });
+    if (props.checkAll) {
+      selected = selectedValue.length === props.optionLength;
+    }
   }
 
   const handleSelect = (event: React.MouseEvent<HTMLLIElement>) => {
-    if (!disabled) {
+    if (!disabled && !checkAll) {
       onSelect(value, { label: String(label), selected, event, restData });
     }
+    if (checkAll) {
+      props.onCheckAllChange?.(selected, event);
+    }
   };
 
   const renderItem = (children: React.ReactNode) => {

src/select/base/PopupContent.tsx

@@ -42,6 +42,7 @@ interface SelectPopupProps
    */
   setShowPopup: (show: boolean) => void;
   children?: React.ReactNode;
+  onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => void;
 }
 
 const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElement>) => {
@@ -62,6 +63,7 @@ const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElemen
     keys,
     panelTopContent,
     panelBottomContent,
+    onCheckAllChange,
   } = props;
 
   // 国际化文本初始化
@@ -118,6 +120,7 @@ const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElemen
           uniqueOptions.push(option);
         }
       });
+      const selectableOption = uniqueOptions.filter((v) => !v.disabled && !v.checkAll);
       // 通过 options API配置的
       return (
         <ul className={`${classPrefix}-select__list`}>
@@ -130,12 +133,14 @@ const PopupContent = forwardRef((props: SelectPopupProps, ref: Ref<HTMLDivElemen
                 value={optionValue}
                 onSelect={onSelect}
                 selectedValue={value}
+                optionLength={selectableOption.length}
                 multiple={multiple}
                 size={size}
                 disabled={disabled}
                 restData={restData}
                 keys={keys}
                 content={content}
+                onCheckAllChange={onCheckAllChange}
                 {...restData}
               >
                 {children}

src/select/base/Select.tsx

@@ -162,6 +162,16 @@ const Select = forwardRefWithStatics(
         }
       }
     };
+    const onCheckAllChange = (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => {
+      if (!props.multiple) return;
+      const selectableOptions = currentOptions
+        .filter((option) => !option.checkAll && !option.disabled)
+        .map((option) => option.value);
+
+      const checkAllValue =
+        !checkAll && selectableOptions.length !== (props.value as Array<SelectOption>).length ? selectableOptions : [];
+      onChange?.(checkAllValue, { e, trigger: checkAll ? 'check' : 'uncheck', selectedOptions: checkAllValue });
+    };
 
     // 选中 Popup 某项
     const handleChange = (
@@ -268,6 +278,7 @@ const Select = forwardRefWithStatics(
         keys,
         panelBottomContent,
         panelTopContent,
+        onCheckAllChange,
       };
       return <PopupContent {...popupContentProps}>{children}</PopupContent>;
     };

test/snap/__snapshots__/csr.test.jsx.snap

@@ -159709,11 +159709,6 @@ exports[`csr snapshot test > csr test src/select/_example/multiple.jsx 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="t-space-item"
-        >
-          <br />
-        </div>
         <div
           class="t-space-item"
         >
@@ -159982,11 +159977,6 @@ exports[`csr snapshot test > csr test src/select/_example/multiple.jsx 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="t-space-item"
-      >
-        <br />
-      </div>
       <div
         class="t-space-item"
       >