From 6246d152b0526faf17d0b00198f92f5debbdef3c Mon Sep 17 00:00:00 2001
From: Dunqing <dengqing0821@gmail.com>
Date: Sat, 7 Jan 2023 09:30:19 +0800
Subject: [PATCH] feat(Select): should compile title and label (#1332)

---
 .../antd/remote-select/RemoteSelect.tsx           | 15 +++++++++++++--
 .../src/schema-component/hooks/useFieldTitle.ts   |  4 +++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
index b309c1744..9d027c924 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
@@ -2,8 +2,9 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { SelectProps } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ResourceActionOptions, useRequest } from '../../../api-client';
+import { useCompile } from '../../hooks';
 import { defaultFieldNames, Select } from '../select';
 import { ReadPretty } from './ReadPretty';
 
@@ -18,6 +19,7 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
 const InternalRemoteSelect = connect(
   (props: RemoteSelectProps) => {
     const { fieldNames = {}, service = {}, wait = 300, ...others } = props;
+    const compile = useCompile();
 
     const { data, run } = useRequest(
       {
@@ -54,6 +56,15 @@ const InternalRemoteSelect = connect(
       });
     };
 
+    const options = useMemo(() => {
+      return (
+        data?.data?.map((item) => ({
+          ...item,
+          [fieldNames.label]: compile(item[fieldNames.label]),
+        })) || []
+      );
+    }, [data, fieldNames.label]);
+
     return (
       <Select
         autoClearSearchValue
@@ -62,7 +73,7 @@ const InternalRemoteSelect = connect(
         fieldNames={fieldNames}
         onSearch={onSearch}
         {...others}
-        options={data?.data || []}
+        options={options}
       />
     );
   },
diff --git a/packages/core/client/src/schema-component/hooks/useFieldTitle.ts b/packages/core/client/src/schema-component/hooks/useFieldTitle.ts
index db321b996..4a772c89f 100644
--- a/packages/core/client/src/schema-component/hooks/useFieldTitle.ts
+++ b/packages/core/client/src/schema-component/hooks/useFieldTitle.ts
@@ -1,6 +1,7 @@
 import { Field } from "@formily/core";
 import { useField, useFieldSchema } from "@formily/react";
 import { useEffect } from "react";
+import { useCompile } from "./useCompile";
 import { useCollection, useCollectionManager } from "../../collection-manager";
 
 export const useFieldTitle = () => {
@@ -9,9 +10,10 @@ export const useFieldTitle = () => {
   const { getField, } = useCollection();
   const { getCollectionJoinField } = useCollectionManager();
   const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
+  const compile = useCompile()
   useEffect(() => {
     if (!field?.title) {
-      field.title = collectionField?.uiSchema?.title;
+      field.title = compile(collectionField?.uiSchema?.title);
     }
   }, [collectionField?.uiSchema?.title]);
 }