feat: Panel use optionRender (#618)

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

src/Panel.tsx

@@ -36,7 +36,8 @@ export type PickType =
   | 'style'
   | 'direction'
   | 'notFoundContent'
-  | 'disabled';
+  | 'disabled'
+  | 'optionRender';
 
 export type PanelProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
@@ -70,6 +71,7 @@ export default function Panel<
     direction,
     notFoundContent = 'Not Found',
     disabled,
+    optionRender,
   } = props as Pick<InternalCascaderProps, PickType>;
 
   // ======================== Multiple ========================
@@ -159,6 +161,7 @@ export default function Panel<
       expandIcon,
       loadingIcon,
       popupMenuColumnStyle: undefined,
+      optionRender
     }),
     [
       mergedOptions,
@@ -172,6 +175,7 @@ export default function Panel<
       expandTrigger,
       expandIcon,
       loadingIcon,
+      optionRender,
     ],
   );
 

tests/Panel.spec.tsx

@@ -110,4 +110,25 @@ describe('Cascader.Panel', () => {
     fireEvent.click(selectOption);
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('Should optionRender work in Panel', () => {
+    const { container, rerender } = render(
+      <Cascader.Panel
+        options={[{ label: 'bamboo', value: 'bamboo' }]}
+        optionRender={option => `${option.label} - test`}
+      />,
+    );
+    expect(container.querySelector('.rc-cascader-menu-item-content')?.innerHTML).toEqual(
+      'bamboo - test',
+    );
+    rerender(
+      <Cascader.Panel
+        options={[{ label: 'bamboo', disabled: true, value: 'bamboo' }]}
+        optionRender={option => JSON.stringify(option)}
+      />,
+    );
+    expect(container.querySelector('.rc-cascader-menu-item-content')?.innerHTML).toEqual(
+      '{"label":"bamboo","disabled":true,"value":"bamboo"}',
+    );
+  });
 });