feat: support option render (#470)

* feat: support option render * feat: test * feat: test * feat: add option * feat: 优化示例 * feat: 优化类型 * feat: review * feat: review * feat: 添加 level index * feat: 删除 level index * feat: disaled * feat: opeion
react-component · Mar 6, 2024 · 1e95a21 · 1e95a21
1 parent f31fa63
commit 1e95a21
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 1 deletion.
diff --git a/docs/demo/option-render.md b/docs/demo/option-render.md
@@ -0,0 +1,8 @@
+---
+title: option-render
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/option-render.tsx"></code>
diff --git a/examples/option-render.tsx b/examples/option-render.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import '../assets/index.less';
+import Cascader from '../src';
+
+const addressOptions = [
+  {
+    label: '福建',
+    title: '福建-fj',
+    value: 'fj',
+    children: [
+      {
+        label: '福州',
+        value: 'fuzhou',
+        children: [
+          {
+            label: '马尾',
+            value: 'mawei',
+          },
+        ],
+      },
+      {
+        label: '泉州',
+        value: 'quanzhou',
+      },
+    ],
+  },
+  {
+    label: '浙江',
+    value: 'zj',
+    title: '浙江-zj',
+    children: [
+      {
+        label: '杭州',
+        value: 'hangzhou',
+        children: [
+          {
+            label: '余杭',
+            value: 'yuhang',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '北京',
+    value: 'bj',
+    title: '北京-bj',
+    children: [
+      {
+        label: '朝阳区',
+        value: 'chaoyang',
+      },
+      {
+        label: '海淀区',
+        value: 'haidian',
+      },
+    ],
+  },
+];
+
+const Demo = () => {
+  return (
+    <div>
+      <Cascader
+        options={addressOptions}
+        optionRender={option => {
+          return <label title={option.title}>{option.label}</label>;
+        }}
+      />
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/src/Cascader.tsx b/src/Cascader.tsx
@@ -74,6 +74,7 @@ interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionTyp
   id?: string;
   prefixCls?: string;
   fieldNames?: FieldNames;
+  optionRender?: (option: OptionType) => React.ReactNode;
   children?: React.ReactElement;
 
   // Value
@@ -210,6 +211,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     children,
     dropdownMatchSelectWidth = false,
     showCheckedStrategy = SHOW_PARENT,
+    optionRender,
     ...restProps
   } = props;
 
@@ -384,6 +386,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      optionRender,
     }),
     [
       mergedOptions,
@@ -400,6 +403,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      optionRender,
     ],
   );
 

diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx
@@ -51,6 +51,7 @@ export default function Column({
     expandIcon,
     loadingIcon,
     dropdownMenuColumnStyle,
+    optionRender,
   } = React.useContext(CascaderContext);
 
   const hoverOpen = expandTrigger === 'hover';
@@ -197,7 +198,9 @@ export default function Column({
                   }}
                 />
               )}
-              <div className={`${menuItemPrefixCls}-content`}>{label}</div>
+              <div className={`${menuItemPrefixCls}-content`}>
+                {optionRender ? optionRender(option) : label}
+              </div>
               {!isLoading && expandIcon && !isMergedLeaf && (
                 <div className={`${menuItemPrefixCls}-expand-icon`}>{expandIcon}</div>
               )}

diff --git a/src/context.ts b/src/context.ts
@@ -21,6 +21,7 @@ export interface CascaderContextProps {
   expandIcon?: React.ReactNode;
   loadingIcon?: React.ReactNode;
   dropdownMenuColumnStyle?: React.CSSProperties;
+  optionRender?: CascaderProps['optionRender'];
 }
 
 const CascaderContext = React.createContext<CascaderContextProps>(null);

diff --git a/tests/search.spec.tsx b/tests/search.spec.tsx
@@ -305,4 +305,26 @@ describe('Cascader.Search', () => {
       'bamboo / little',
     );
   });
+  it('Should optionRender work', () => {
+    const { container, rerender } = render(
+      <Cascader
+        open
+        options={[{ label: 'bamboo', value: 'bamboo' }]}
+        optionRender={option => `${option.label} - test`}
+      />,
+    );
+    expect(container.querySelector('.rc-cascader-menu-item-content').innerHTML).toEqual(
+      'bamboo - test',
+    );
+    rerender(
+      <Cascader
+        open
+        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"}',
+    );
+  });
 });