feat: add value and disabled to TransBtn props on OptionList (#983)

react-component · Sep 19, 2023 · 0ce4e3f · 0ce4e3f
1 parent b5fccbd
commit 0ce4e3f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
@@ -22,10 +22,11 @@ const clearPath =
   ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
   '28.7 64-64V306c0-35.3-28.7-64-64-64z';
 
-const menuItemSelectedIcon = (props) => {
-  const { ...p } = props;
-  return <span style={{ position: 'absolute', right: 0 }}>{p.isSelected ? '🌹' : '☑️'}</span>;
-};
+const menuItemSelectedIcon = (props) => (
+  <span style={{ position: 'absolute', right: 0, opacity: props.disabled ? 0.5 : 1 }}>
+    {props.isSelected ? '🌹' : '☑️'}
+  </span>
+);
 
 const singleItemIcon = (
   <span style={{ position: 'absolute', right: '0px' }} role="img" aria-label="rose">

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -372,7 +372,11 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
                 <TransBtn
                   className={`${itemPrefixCls}-option-state`}
                   customizeIcon={menuItemSelectedIcon}
-                  customizeIconProps={{ isSelected: selected }}
+                  customizeIconProps={{
+                    value,
+                    disabled,
+                    isSelected: selected,
+                  }}
                 >
                   {selected ? '✓' : null}
                 </TransBtn>

diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -1489,6 +1489,7 @@ describe('Select.Basic', () => {
 
   it('dropdown selection item customize icon', () => {
     const menuItemSelectedIcon = jest.fn();
+
     mount(
       <Select
         value="1"
@@ -1497,8 +1498,25 @@ describe('Select.Basic', () => {
         menuItemSelectedIcon={menuItemSelectedIcon}
       />,
     );
+    expect(menuItemSelectedIcon).toHaveBeenCalledWith({
+      value: '1',
+      disabled: undefined,
+      isSelected: true,
+    });
 
-    expect(menuItemSelectedIcon).toHaveBeenCalledWith({ isSelected: true });
+    mount(
+      <Select
+        value="1"
+        options={[{ value: '2', disabled: true } as any]}
+        open
+        menuItemSelectedIcon={menuItemSelectedIcon}
+      />,
+    );
+    expect(menuItemSelectedIcon).toHaveBeenCalledWith({
+      value: '2',
+      disabled: true,
+      isSelected: false,
+    });
   });
 
   it('keyDown & KeyUp event', () => {