From 88dc2db0f263f15acae8ae0b3cad9d7ff46962b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E6=98=B6?= <jinchang@baicl.com>
Date: Wed, 22 Jun 2022 13:41:21 +0800
Subject: [PATCH] Fix field pattern (#520)

* fix: field pattern

* fix: remove console.log
---
 .../collection-manager/CollectionField.tsx    |  8 ++-
 .../antd/form-item/FormItem.tsx               | 51 ++++++++++---------
 .../antd/record-picker/InputRecordPicker.tsx  |  4 +-
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/core/client/src/collection-manager/CollectionField.tsx b/packages/core/client/src/collection-manager/CollectionField.tsx
index 42695cadc..c9790f725 100644
--- a/packages/core/client/src/collection-manager/CollectionField.tsx
+++ b/packages/core/client/src/collection-manager/CollectionField.tsx
@@ -23,6 +23,7 @@ const InternalField: React.FC = (props) => {
     }
   };
   const ctx = useFormBlockContext();
+  
   useEffect(() => {
     if (ctx?.field) {
       ctx.field.added = ctx.field.added || new Set();
@@ -41,7 +42,12 @@ const InternalField: React.FC = (props) => {
     if (!field.validator && uiSchema['x-validator']) {
       field.validator = uiSchema['x-validator'];
     }
-    field.readPretty = uiSchema['x-read-pretty'];
+    if (fieldSchema['x-disabled'] === true) {
+      field.disabled = true;
+    }
+    if (fieldSchema['x-read-pretty'] === true) {
+      field.readPretty = true;  
+    }
     setRequired();
     // @ts-ignore
     field.dataSource = uiSchema.enum;
diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
index 9d611f76c..c0b0ea24b 100644
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -5,6 +5,7 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCompile, useDesignable } from '../..';
+import { useFormBlockContext } from '../../../block-provider';
 import { useCollection, useCollectionManager } from '../../../collection-manager';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { BlockItem } from '../block-item';
@@ -36,6 +37,7 @@ export const FormItem: any = (props) => {
 FormItem.Designer = () => {
   const { getCollectionFields } = useCollectionManager();
   const { getField } = useCollection();
+  const { form } = useFormBlockContext();
   const field = useField<Field>();
   const fieldSchema = useFieldSchema();
   const { t } = useTranslation();
@@ -57,16 +59,17 @@ FormItem.Designer = () => {
       label: compile(field?.uiSchema?.title) || field?.name,
     }));
   let readOnlyMode = 'editable';
+  if (fieldSchema['x-disabled'] === true) {
+    readOnlyMode = 'readonly';
+  }
   if (fieldSchema['x-read-pretty'] === true) {
     readOnlyMode = 'read-pretty';
   }
-  if (fieldSchema['x-component-props']?.['readOnly'] === true) {
-    readOnlyMode = 'readonly';
-  }
   return (
     <GeneralSchemaDesigner>
       {collectionField && (
         <SchemaSettings.ModalItem
+          key="edit-field-title"
           title={t('Edit field title')}
           schema={
             {
@@ -101,6 +104,7 @@ FormItem.Designer = () => {
       )}
       {!field.readPretty && (
         <SchemaSettings.ModalItem
+          key="edit-description"
           title={t('Edit description')}
           schema={
             {
@@ -132,6 +136,7 @@ FormItem.Designer = () => {
       )}
       {field.readPretty && (
         <SchemaSettings.ModalItem
+          key="edit-tooltip"
           title={t('Edit tooltip')}
           schema={
             {
@@ -163,6 +168,7 @@ FormItem.Designer = () => {
       )}
       {!field.readPretty && (
         <SchemaSettings.SwitchItem
+          key="required"
           title={t('Required')}
           checked={field.required}
           onChange={(required) => {
@@ -179,53 +185,46 @@ FormItem.Designer = () => {
           }}
         />
       )}
-      {!field.readPretty && (
+      {!form.readPretty && collectionField.interface !== 'o2m' && (
         <SchemaSettings.SelectItem
+        key="pattern"
         title={t('Pattern')}
         options={
           [{ label: t('Editable'), value: 'editable' }, { label: t('Readonly'), value: 'readonly' }, { label: t('Easy-reading'), value: 'read-pretty' }]
         }
         value={readOnlyMode}
         onChange={(v) => {
-          const schema = {
+          console.log('v', v);
+          const schema: ISchema = {
             ['x-uid']: fieldSchema['x-uid'],
           };
 
           switch(v) {
             case 'readonly': {
               fieldSchema['x-read-pretty'] = false;  
+              fieldSchema['x-disabled'] = true;
               schema['x-read-pretty'] = false;
-              fieldSchema['x-component-props'] = {
-                ...fieldSchema['x-component-props'],
-                readOnly: true,
-              }
-              schema['x-component-props'] = fieldSchema['x-component-props'];
+              schema['x-disabled'] = true;
               field.readPretty = false;
-              field.componentProps.readOnly = true;
+              field.disabled = true;
               break;
             }
             case 'read-pretty': {
-              fieldSchema['x-read-pretty'] = true;
+              fieldSchema['x-read-pretty'] = true;  
+              fieldSchema['x-disabled'] = false;
               schema['x-read-pretty'] = true;
-              fieldSchema['x-component-props'] = {
-                ...fieldSchema['x-component-props'],
-                readOnly: false,
-              }
-              schema['x-component-props'] = fieldSchema['x-component-props'];
+              schema['x-disabled'] = false;
               field.readPretty = true;
-              field.componentProps.readOnly = false;
+              // field.disabled = true;
               break;
             }
             default: {
-              fieldSchema['x-read-pretty'] = false;
+              fieldSchema['x-read-pretty'] = false;  
+              fieldSchema['x-disabled'] = false;
               schema['x-read-pretty'] = false;
-              fieldSchema['x-component-props'] = {
-                ...fieldSchema['x-component-props'],
-                readOnly: false,
-              }
-              schema['x-component-props'] = fieldSchema['x-component-props'];
+              schema['x-disabled'] = false;
               field.readPretty = false;
-              field.componentProps.readOnly = false;
+              field.disabled = false;
               break;
             }
           }
@@ -239,6 +238,7 @@ FormItem.Designer = () => {
       )}
       {collectionField?.target && (
         <SchemaSettings.SelectItem
+          key="title-field"
           title={t('Title field')}
           options={options}
           value={field?.componentProps?.fieldNames?.label}
@@ -265,6 +265,7 @@ FormItem.Designer = () => {
       )}
       {collectionField && <SchemaSettings.Divider />}
       <SchemaSettings.Remove
+        key="remove"
         removeParentsIfNoChildren
         confirm={{
           title: t('Delete field')
diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
index 53d6b4072..0824af193 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
@@ -54,7 +54,7 @@ const useAssociation = (props) => {
 };
 
 export const InputRecordPicker: React.FC<any> = (props) => {
-  const { value, multiple, onChange } = props;
+  const { value, multiple, onChange, ...others } = props;
   const fieldNames = useFieldNames(props);
   const [visible, setVisible] = useState(false);
   const fieldSchema = useFieldSchema();
@@ -72,7 +72,7 @@ export const InputRecordPicker: React.FC<any> = (props) => {
   return (
     <div>
       <Select
-        size={props.size}
+        {...others}
         mode={multiple ? 'multiple' : props.mode}
         fieldNames={fieldNames}
         onDropdownVisibleChange={(open) => {