feat: support displayRender

src/Cascader.tsx

@@ -38,6 +38,10 @@ const RefCascader = generate({
   optionList: OptionList,
 });
 
+function defaultDisplayRender(labels: React.ReactNode[]) {
+  return labels.join(' / ');
+}
+
 // ====================================== Wrap ======================================
 interface BaseCascaderProps
   extends Omit<
@@ -73,6 +77,9 @@ interface BaseCascaderProps
 
   fieldNames?: FieldNames;
 
+  // Display
+  displayRender?: (label: React.ReactNode[], selectedOptions: DataNode[]) => React.ReactNode;
+
   // Search
   showSearch?: boolean | ShowSearchType;
   searchValue?: string;
@@ -142,6 +149,8 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
     expandIcon = '>',
     loadingIcon,
 
+    displayRender = defaultDisplayRender,
+
     loadData,
     dropdownMenuColumnStyle,
 
@@ -213,9 +222,11 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
       return entity.data.node[fieldLabel];
     }
 
-    return restoreCompatibleValue(entity, mergedFieldNames)
-      .options.map(opt => opt[fieldLabel])
-      .join('>');
+    const { options: selectedOptions } = restoreCompatibleValue(entity, mergedFieldNames);
+    const rawOptions = selectedOptions.map(opt => opt.node);
+    const labelList = rawOptions.map(opt => opt[fieldLabel]);
+
+    return displayRender(labelList, rawOptions);
   };
 
   // =========================== Change ===========================

src/index.tsx

@@ -1,5 +1,5 @@
 import Cascader, { CascaderProps } from './Cascader';
-import type { FieldNames, DataNode, ShowSearchType } from './interface';
+import { FieldNames, DataNode, ShowSearchType } from './interface';
 
 export { CascaderProps, FieldNames, DataNode, ShowSearchType };
 

tests/fieldNames.spec.tsx

@@ -78,10 +78,29 @@ describe('Cascader.FieldNames', () => {
       />,
     );
 
+    expect(wrapper.find('.rc-cascader-selection-item').text()).toEqual('Bamboo / Little / Toy');
+
     expect(wrapper.find('.rc-cascader-menu')).toHaveLength(3);
     expect(wrapper.find('.rc-cascader-menu-item-active')).toHaveLength(3);
     expect(wrapper.find('.rc-cascader-menu-item-active').at(0).text()).toEqual('Bamboo');
     expect(wrapper.find('.rc-cascader-menu-item-active').at(1).text()).toEqual('Little');
     expect(wrapper.find('.rc-cascader-menu-item-active').at(2).text()).toEqual('Toy');
   });
+
+  it('displayRender', () => {
+    const wrapper = mount(
+      <Cascader
+        options={options}
+        fieldNames={fieldNames}
+        defaultValue={['bamboo', 'little', 'toy']}
+        displayRender={(labels, selectOptions) =>
+          `${labels.join('->')} & ${selectOptions.map((opt: any) => opt.customValue).join('>>')}`
+        }
+      />,
+    );
+
+    expect(wrapper.find('.rc-cascader-selection-item').text()).toEqual(
+      'Bamboo->Little->Toy & bamboo>>little>>toy',
+    );
+  });
 });