fix: label with ReactNode (#232)

* fix: label with ReactNode

* fix: label with ReactNode

* test: coverage

examples/debug.tsx

@@ -5,7 +5,7 @@ import Cascader from '../src';
 
 const addressOptions = [
   {
-    label: '空孩子',
+    label: <span>空孩子</span>,
     value: 'empty',
     children: [],
   },
@@ -91,7 +91,7 @@ const addressOptions = [
 const defaultValue = ['not', 'exist'];
 
 const Demo = () => {
-  const [multiple, setMultiple] = React.useState(false);
+  const [multiple, setMultiple] = React.useState(true);
   const [, setInputValue] = React.useState('');
 
   const onChange = (value: any, selectedOptions: any) => {
@@ -119,10 +119,15 @@ const Demo = () => {
         checkable={multiple}
         allowClear
         // defaultValue={multiple ? [defaultValue] : defaultValue}
-        defaultValue={[['not', 'yet'], ['exist']]}
+        // defaultValue={[['not', 'yet'], ['exist']]}
+        defaultValue={[['empty']]}
         showSearch
         // showSearch={{ limit: 1 }}
         open
+        // tagRender={props => {
+        //   console.log(props);
+        //   return props.label as any;
+        // }}
         // direction="rtl"
         // searchValue="福a"
         // changeOnSelect

src/hooks/useDisplayValues.ts

@@ -12,7 +12,26 @@ export default (
   rawValues: SingleValueType[],
   options: DefaultOptionType[],
   fieldNames: InternalFieldNames,
-  displayRender: CascaderProps['displayRender'] = labels => labels.join(' / '),
+  displayRender: CascaderProps['displayRender'] = labels => {
+    const SPLIT = ' / ';
+
+    if (labels.every(label => ['string', 'number'].includes(typeof label))) {
+      return labels.join(SPLIT);
+    }
+
+    // If exist non-string value, use ReactNode instead
+    return labels.reduce((list, label, index) => {
+      const keyedLabel = React.isValidElement(label)
+        ? React.cloneElement(label, { key: index })
+        : label;
+
+      if (index === 0) {
+        return [keyedLabel];
+      }
+
+      return [...list, SPLIT, keyedLabel];
+    }, []);
+  },
 ) => {
   return React.useMemo(() => {
     return rawValues.map(valueCells => {

tests/index.spec.tsx

@@ -710,4 +710,35 @@ describe('Cascader.Basic', () => {
     expect(onValueChange).toHaveBeenCalledWith(['parent'], expect.anything());
     expect(wrapper.find('ul.rc-cascader-menu')).toHaveLength(1);
   });
+
+  it('ReactNode label should not be [object]', () => {
+    const wrapper = mount(
+      <Cascader
+        options={[
+          { label: <span>Parent</span>, value: 'parent' },
+          {
+            label: 'Normal',
+            value: 'normal',
+            children: [
+              {
+                label: <span>Child</span>,
+                value: 'child',
+              },
+              {
+                label: 'Child2',
+                value: 'child2',
+              },
+            ],
+          },
+        ]}
+        value={[['parent'], ['normal', 'child']]}
+        checkable
+      />,
+    );
+
+    expect(wrapper.find('.rc-cascader-selection-item-content').first().text()).toEqual('Parent');
+    expect(wrapper.find('.rc-cascader-selection-item-content').last().text()).toEqual(
+      'Normal / Child',
+    );
+  });
 });