refactor: locale improve

packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx

@@ -3,7 +3,7 @@ import { connect, mapProps, RecursionField, useFieldSchema, useField, observer }
 import { Button, Input } from 'antd';
 import _ from 'lodash';
 import { ActionContext } from '../action';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useFieldTitle } from '../../hooks';
 import { RemoteSelect, RemoteSelectProps } from '../remote-select';
 import { defaultFieldNames } from '../select';
@@ -18,14 +18,13 @@ export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
   multiple?: boolean;
 };
 
-const InternalAssociationSelect = connect(
-  (props: AssociationSelectProps) => {
+const InternalAssociationSelect = memo((props: AssociationSelectProps) => {
   const { fieldNames, objectValue = true } = props;
   const field: any = useField();
   const [visibleAddNewer, setVisibleAddNewer] = useState(false);
   const { getField } = useCollection();
   const collectionField = getField(field.props.name);
-    const service = useServiceOptions(props);
+  const service = fieldNames && useServiceOptions(props);
   const fieldSchema = useFieldSchema();
   const isAllowAddNew = fieldSchema['x-add-new'] !== false;
   const insertAddNewer = useInsertSchema('AddNewer');
@@ -33,11 +32,11 @@ const InternalAssociationSelect = connect(
   const normalizeValues = useCallback(
     (obj) => {
       if (!objectValue && typeof obj === 'object') {
-          return obj[fieldNames.value];
+        return obj[fieldNames?.value];
       }
       return obj;
     },
-      [objectValue, fieldNames.value],
+    [objectValue, fieldNames?.value],
   );
 
   const value = useMemo(() => {
@@ -52,7 +51,7 @@ const InternalAssociationSelect = connect(
     }
   }, [props.value, normalizeValues]);
   return (
-      <>
+    <div key={fieldSchema.name}>
       <Input.Group compact style={{ display: 'flex' }}>
         <RemoteSelect
           style={{ width: '100%' }}
@@ -74,9 +73,7 @@ const InternalAssociationSelect = connect(
         )}
       </Input.Group>
 
-        <ActionContext.Provider
-          value={{ openMode: 'drawer', visible: visibleAddNewer, setVisible: setVisibleAddNewer }}
-        >
+      <ActionContext.Provider value={{ openMode: 'drawer', visible: visibleAddNewer, setVisible: setVisibleAddNewer }}>
         <CollectionProvider name={collectionField.target}>
           <RecursionField
             onlyRenderProperties
@@ -88,23 +85,9 @@ const InternalAssociationSelect = connect(
           />
         </CollectionProvider>
       </ActionContext.Provider>
-      </>
+    </div>
   );
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-      loading: true,
-    },
-    (props, field) => {
-      return {
-        ...props,
-        fieldNames: { ...defaultFieldNames, ...props.fieldNames, ...field.componentProps.fieldNames },
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-);
+});
 
 interface AssociationSelectInterface {
   (props: any): React.ReactElement;
@@ -118,7 +101,6 @@ export const AssociationSelectReadPretty = connect(
   (props: any) => {
     if (props.fieldNames) {
       const service = useServiceOptions(props);
-      console.log(props)
       useFieldTitle();
       return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
     }