fix(antd/next): fix Cascader in form readPretty mode display error #3250

(#3253) * fix(antd): fix Cascader in form readPretty mode display error * fix(next): fix Cascader in form readPretty mode display error
alibaba · Jul 6, 2022 · d571910 · d571910
1 parent 679fbb7
commit d571910
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 13 deletions.
diff --git a/packages/antd/src/preview-text/index.tsx b/packages/antd/src/preview-text/index.tsx
@@ -6,7 +6,7 @@ import { InputProps } from 'antd/lib/input'
 import { InputNumberProps } from 'antd/lib/input-number'
 import { SelectProps } from 'antd/lib/select'
 import { TreeSelectProps } from 'antd/lib/tree-select'
-import { CascaderProps } from 'antd/lib/cascader'
+import { CascaderProps, DefaultOptionType } from 'antd/lib/cascader'
 import {
   DatePickerProps,
   RangePickerProps as DateRangePickerProps,
@@ -239,18 +239,43 @@ const Cascader: React.FC<React.PropsWithChildren<CascaderProps<any>>> =
       : props?.options?.length
       ? props.options
       : []
+    const findSelectedItem = (
+      items: DefaultOptionType[],
+      val: string | number
+    ) => {
+      return items.find((item) => item.value == val)
+    }
+    const findSelectedItems = (
+      sources: DefaultOptionType[],
+      selectedValues: Array<string[] | number[]>
+    ): Array<any[]> => {
+      return selectedValues.map((value) => {
+        const result: Array<DefaultOptionType> = []
+        let items = sources
+        value.forEach((val) => {
+          const selectedItem = findSelectedItem(items, val)
+          result.push({
+            label: selectedItem?.label ?? '',
+            value: selectedItem?.value,
+          })
+          items = selectedItem?.children ?? []
+        })
+        return result
+      })
+    }
     const getSelected = () => {
       const val = toArr(props.value)
-      return props.multiple
-        ? val.map((item) => item[item.length - 1])
-        : val.slice(val.length - 1)
+      // unified conversion to multi selection mode
+      return props.multiple ? val : [val]
     }
     const getLabels = () => {
       const selected = getSelected()
-      const labels = getValueByValue(dataSource, selected)
-        ?.filter((item) => isValid(item))
-        ?.map((item) => item?.whole?.join('/'))
-        .join(', ')
+      const values = findSelectedItems(dataSource, selected)
+      const labels = values
+        .map((val: Array<DefaultOptionType>) => {
+          return val.map((item) => item.label).join('/')
+        })
+        .join(' ')
       return labels || placeholder
     }
     return (

diff --git a/packages/next/src/preview-text/index.tsx b/packages/next/src/preview-text/index.tsx
@@ -208,6 +208,12 @@ const TreeSelect: React.FC<React.PropsWithChildren<TreeSelectProps>> = observer(
   }
 )
 
+type SelectOptionType = {
+  value: string
+  label: string
+  children?: SelectOptionType[]
+}
+
 const Cascader: React.FC<React.PropsWithChildren<CascaderProps>> = observer(
   (props) => {
     const field = useField<Field>()
@@ -218,15 +224,43 @@ const Cascader: React.FC<React.PropsWithChildren<CascaderProps>> = observer(
       : props?.dataSource?.length
       ? props.dataSource
       : []
+    const findSelectedItem = (
+      items: SelectOptionType[],
+      val: string | number
+    ) => {
+      return items.find((item) => item.value == val)
+    }
+    const findSelectedItems = (
+      sources: SelectOptionType[],
+      selectedValues: Array<string[] | number[]>
+    ): Array<SelectOptionType[]> => {
+      return selectedValues.map((value) => {
+        const result: Array<SelectOptionType> = []
+        let items = sources
+        value.forEach((val) => {
+          const selectedItem = findSelectedItem(items, val)
+          result.push({
+            label: selectedItem?.label ?? '',
+            value: selectedItem?.value,
+          })
+          items = selectedItem?.children ?? []
+        })
+        return result
+      })
+    }
     const getSelected = () => {
-      return props.multiple ? toArr(props.value) : [props.value]
+      const val = toArr(props.value)
+      // unified conversion to multi selection mode
+      return props.multiple ? val : [val]
     }
     const getLabels = () => {
       const selected = getSelected()
-      const labels = getValueByValue(dataSource, selected)
-        ?.filter((item) => isValid(item))
-        ?.map((item) => item?.whole?.join('/'))
-        .join(', ')
+      const values = findSelectedItems(dataSource, selected)
+      const labels = values
+        .map((val: Array<{ value: string; label: string }>) => {
+          return val.map((item) => item.label).join('/')
+        })
+        .join(' ')
       return labels || placeholder
     }
     return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>