fix(antd): fix use treeData props for PreviewText.TreeSelect (#2867)

alibaba · Feb 25, 2022 · edcc954 · edcc954
1 parent d7eb3df
commit edcc954
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/packages/antd/docs/components/PreviewText.md b/packages/antd/docs/components/PreviewText.md
@@ -43,6 +43,34 @@ export default () => {
               { label: 'A222', value: '222' },
             ]}
           />
+
+          <SchemaField.String
+            x-decorator="FormItem"
+            title="TreeSelect preview"
+            x-component="PreviewText.TreeSelect"
+            x-component-props={{
+              multiple: true,
+            }}
+            default={['123', '222']}
+            enum={[
+              { label: 'A111', value: '123' },
+              { label: 'A222', value: '222' },
+            ]}
+          />
+          <SchemaField.String
+            x-decorator="FormItem"
+            title="TreeSelect（treeData）preview"
+            x-component="PreviewText.TreeSelect"
+            x-component-props={{
+              multiple: true,
+              treeNodeLabelProp: 'name',
+              treeData: [
+                { name: 'A111', value: '123' },
+                { name: 'A222', value: '222' },
+              ],
+            }}
+            default={['123', '222']}
+          />
           <SchemaField.String
             x-decorator="FormItem"
             title="date preview"

diff --git a/packages/antd/docs/components/PreviewText.zh-CN.md b/packages/antd/docs/components/PreviewText.zh-CN.md
@@ -43,6 +43,33 @@ export default () => {
               { label: 'A222', value: '222' },
             ]}
           />
+          <SchemaField.String
+            x-decorator="FormItem"
+            title="树选择预览"
+            x-component="PreviewText.TreeSelect"
+            x-component-props={{
+              multiple: true,
+            }}
+            default={['123', '222']}
+            enum={[
+              { label: 'A111', value: '123' },
+              { label: 'A222', value: '222' },
+            ]}
+          />
+          <SchemaField.String
+            x-decorator="FormItem"
+            title="树选择（treeData）预览"
+            x-component="PreviewText.TreeSelect"
+            x-component-props={{
+              multiple: true,
+              treeNodeLabelProp: 'name',
+              treeData: [
+                { name: 'A111', value: '123' },
+                { name: 'A222', value: '222' },
+              ],
+            }}
+            default={['123', '222']}
+          />
           <SchemaField.String
             x-decorator="FormItem"
             title="日期预览"

diff --git a/packages/antd/src/preview-text/index.tsx b/packages/antd/src/preview-text/index.tsx
@@ -32,6 +32,7 @@ interface IGetValueByValue {
     path?: any[]
   ): any
 }
+
 const getValueByValue: IGetValueByValue = (
   array,
   inputValue,
@@ -144,8 +145,8 @@ const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
   const prefixCls = usePrefixCls('form-text', props)
   const dataSource = field?.dataSource?.length
     ? field.dataSource
-    : props?.options?.length
-    ? props.options
+    : props?.treeData?.length
+    ? props.treeData
     : []
   const getSelected = () => {
     const value = props.value
@@ -166,13 +167,17 @@ const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
     }
   }
 
-  const findLabel = (value: any, dataSource: any[]) => {
+  const findLabel = (
+    value: any,
+    dataSource: any[],
+    treeNodeLabelProp?: string
+  ) => {
     for (let i = 0; i < dataSource?.length; i++) {
       const item = dataSource[i]
       if (item?.value === value) {
-        return item?.label
+        return item?.label ?? item[treeNodeLabelProp]
       } else {
-        const childLabel = findLabel(value, item?.children)
+        const childLabel = findLabel(value, item?.children, treeNodeLabelProp)
         if (childLabel) return childLabel
       }
     }
@@ -184,7 +189,9 @@ const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
     return selected.map(({ value, label }, key) => {
       return (
         <Tag key={key}>
-          {findLabel(value, dataSource) || label || placeholder}
+          {findLabel(value, dataSource, props.treeNodeLabelProp) ||
+            label ||
+            placeholder}
         </Tag>
       )
     })