fix(Select): collapsedItems's parameter collapsedSelectedItems (#…

…3214) * fix(Select): `collapsedItems`'s parameter `collapsedSelectedItems` * test: add test custom collapsedItems test and custom popup --------- Co-authored-by: wū yāng <[email protected]>
Tencent · Nov 25, 2024 · d1fde90 · d1fde90
1 parent 41966f3
commit d1fde90
Show file tree

Hide file tree

Showing 2 changed files with 188 additions and 3 deletions.
diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx
@@ -1,9 +1,12 @@
 /* eslint-disable */
-import { render, fireEvent, mockTimeout, act } from '@test/utils';
+import { render, fireEvent, mockTimeout, mockDelay, act } from '@test/utils';
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
 
-import { Select } from '../index';
+import { Select, SelectProps } from '../index';
+import Popup from '../../popup';
+import Space from '../../space';
+import Tag from '../../tag';
 
 const { Option, OptionGroup } = Select;
 
@@ -365,4 +368,184 @@ describe('Select 组件测试', () => {
       expect(getByText(text)).toBeTruthy();
     });
   });
+
+  test('collapsedItems all select', async () => {
+    const minCollapsedNum = 1;
+    const renderCollapsedItems: SelectProps['collapsedItems'] = ({ collapsedSelectedItems, onClose }) => (
+      <Popup
+        key={'tags'}
+        overlayInnerStyle={{
+          padding: '5px',
+        }}
+        content={
+          <Space size={5} align="center">
+            {collapsedSelectedItems.map((item, index) => (
+              <Tag
+                color="red"
+                key={index}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+              >
+                {item.label}
+              </Tag>
+            ))}
+          </Space>
+        }
+      >
+        <Tag>More({collapsedSelectedItems?.length})</Tag>
+      </Popup>
+    );
+
+    const MultipleSelect = () => {
+      const selectAllValue = ['apple', 'banana', 'orange'];
+
+      return (
+        <Select
+          options={options}
+          multiple
+          minCollapsedNum={1}
+          value={selectAllValue}
+          collapsedItems={renderCollapsedItems}
+        />
+      );
+    };
+    const { container } = render(<MultipleSelect />);
+
+    const tags = container.querySelectorAll('.t-tag');
+    expect(tags[0]).toHaveTextContent('Apple');
+    expect(tags[1]).toHaveTextContent('More(2)');
+
+    // collapsedItems popup 未展示
+    const selectPopups = document.querySelectorAll(popupSelector);
+    expect(selectPopups.length).toBe(0);
+
+    // collapsedItems popup 展示
+    fireEvent.mouseEnter(tags[1]);
+    const collapsedPopups = document.querySelectorAll(popupSelector);
+    expect(collapsedPopups.length).toBe(1);
+    // 判断展示的tag
+    const collapsedTags = collapsedPopups[0].querySelectorAll('.t-tag');
+    expect(collapsedTags.length).toBe(2);
+    expect(collapsedTags[0]).toHaveTextContent('Banana');
+    expect(collapsedTags[1]).toHaveTextContent('Orange');
+  });
+
+  test('collapsedItems click select', async () => {
+    const minCollapsedNum = 1;
+    const renderCollapsedItems: SelectProps['collapsedItems'] = ({ collapsedSelectedItems, onClose }) => (
+      <Popup
+        key={'tags'}
+        overlayInnerStyle={{
+          padding: '5px',
+        }}
+        content={
+          <Space size={5} align="center" className="collapsed-items-popup">
+            {collapsedSelectedItems.map((item, index) => (
+              <Tag
+                color="red"
+                key={index}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+              >
+                {item.label}
+              </Tag>
+            ))}
+          </Space>
+        }
+      >
+        <Tag>More({collapsedSelectedItems?.length})</Tag>
+      </Popup>
+    );
+
+    const MultipleSelect = () => {
+      const [value, setValue] = useState([]);
+      const onChange = (value) => {
+        setValue(value);
+      };
+      return (
+        <Select
+          options={options}
+          multiple
+          minCollapsedNum={1}
+          onChange={onChange}
+          value={value}
+          collapsedItems={renderCollapsedItems}
+        />
+      );
+    };
+    const { getByText, container } = render(<MultipleSelect />);
+    const tags0 = container.querySelectorAll('.t-tag');
+    expect(tags0.length).toBe(0);
+
+    // 检测第一次select value
+    expect(document.querySelectorAll(popupSelector).length).toBe(0);
+    fireEvent.click(document.querySelector('.t-input'));
+    fireEvent.click(getByText('Apple'));
+    const tags1 = container.querySelectorAll('.t-tag');
+    expect(tags1.length).toBe(1);
+    expect(tags1[0]).toHaveTextContent('Apple');
+    //input popup 消失
+    fireEvent.click(document.querySelector('.t-input'));
+    expect(document.querySelectorAll(popupSelector).length).toBe(1);
+    await mockTimeout(() => {
+      expect(document.querySelector(popupSelector)).toHaveStyle({
+        display: 'none',
+      });
+    });
+
+    // 检测第二次 select value
+    fireEvent.click(document.querySelector('.t-input'));
+    await mockTimeout(() => {
+      expect(document.querySelector(popupSelector)).toHaveStyle({
+        display: 'block',
+      });
+    });
+    fireEvent.click(getByText('Orange'));
+    const tags2 = container.querySelectorAll('.t-tag');
+    expect(tags2.length).toBe(2);
+    expect(tags2[0]).toHaveTextContent('Apple');
+    expect(tags2[1]).toHaveTextContent('More(1)');
+    //input popup 消失
+    fireEvent.click(document.querySelector('.t-input'));
+    await mockTimeout(() => {
+      expect(document.querySelectorAll(popupSelector).length).toBe(1);
+      expect(document.querySelector(popupSelector)).toHaveStyle({
+        display: 'none',
+      });
+    });
+    // collapsedItems popup 展示
+    fireEvent.mouseEnter(tags2[1]);
+    expect(document.querySelectorAll(popupSelector).length).toBe(2);
+    // 判断展示的tag
+    const collapsedTags2 = document.querySelectorAll('.collapsed-items-popup .t-tag');
+    expect(collapsedTags2.length).toBe(1);
+    expect(collapsedTags2[0]).toHaveTextContent('Orange');
+
+    // 检测第三次 select value
+    fireEvent.click(document.querySelector('.t-input'));
+    await mockTimeout(() => {
+      expect(document.querySelector(popupSelector)).toHaveStyle({
+        display: 'block',
+      });
+    });
+    fireEvent.click(getByText('Banana'));
+    const tags3 = container.querySelectorAll('.t-tag');
+    expect(tags3.length).toBe(2);
+    expect(tags3[0]).toHaveTextContent('Apple');
+    expect(tags3[1]).toHaveTextContent('More(2)');
+    //input popup 消失
+    fireEvent.click(document.querySelector('.t-input'));
+    await mockTimeout(() => {
+      expect(document.querySelectorAll(popupSelector).length).toBe(2);
+      expect(document.querySelector(popupSelector)).toHaveStyle({
+        display: 'none',
+      });
+    });
+    // collapsedItems popup 展示
+    fireEvent.mouseEnter(tags3[1]);
+    expect(document.querySelectorAll(popupSelector).length).toBe(2);
+    // 判断展示的tag
+    const collapsedTags3 = document.querySelectorAll('.collapsed-items-popup .t-tag');
+    expect(collapsedTags3.length).toBe(2);
+    expect(collapsedTags3[0]).toHaveTextContent('Orange');
+    expect(collapsedTags3[1]).toHaveTextContent('Banana');
+  });
 });
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -192,9 +192,11 @@ const Select = forwardRefWithStatics(
         return;
       }
 
+
       const values = currentOptions
         .filter((option) => !option.checkAll && !option.disabled)
         .map((option) => option[keys?.value || 'value']);
+
       const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
 
       const checkAllValue =
@@ -436,7 +438,7 @@ const Select = forwardRefWithStatics(
           allowInput={(filterable ?? local.filterable) || isFunction(filter)}
           multiple={multiple}
           value={selectedLabel}
-          options={props.options}
+          options={selectedOptions}
           valueDisplay={renderValueDisplay()}
           clearable={clearable}
           disabled={disabled}