Fix field pattern (#520)

* fix: field pattern

* fix: remove console.log
This commit is contained in:
金昶 2022-06-22 13:41:21 +08:00 committed by GitHub
parent 19987c5846
commit 88dc2db0f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 28 deletions

View File

@ -23,6 +23,7 @@ const InternalField: React.FC = (props) => {
} }
}; };
const ctx = useFormBlockContext(); const ctx = useFormBlockContext();
useEffect(() => { useEffect(() => {
if (ctx?.field) { if (ctx?.field) {
ctx.field.added = ctx.field.added || new Set(); ctx.field.added = ctx.field.added || new Set();
@ -41,7 +42,12 @@ const InternalField: React.FC = (props) => {
if (!field.validator && uiSchema['x-validator']) { if (!field.validator && uiSchema['x-validator']) {
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(); setRequired();
// @ts-ignore // @ts-ignore
field.dataSource = uiSchema.enum; field.dataSource = uiSchema.enum;

View File

@ -5,6 +5,7 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useCompile, useDesignable } from '../..'; import { useCompile, useDesignable } from '../..';
import { useFormBlockContext } from '../../../block-provider';
import { useCollection, useCollectionManager } from '../../../collection-manager'; import { useCollection, useCollectionManager } from '../../../collection-manager';
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
import { BlockItem } from '../block-item'; import { BlockItem } from '../block-item';
@ -36,6 +37,7 @@ export const FormItem: any = (props) => {
FormItem.Designer = () => { FormItem.Designer = () => {
const { getCollectionFields } = useCollectionManager(); const { getCollectionFields } = useCollectionManager();
const { getField } = useCollection(); const { getField } = useCollection();
const { form } = useFormBlockContext();
const field = useField<Field>(); const field = useField<Field>();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const { t } = useTranslation(); const { t } = useTranslation();
@ -57,16 +59,17 @@ FormItem.Designer = () => {
label: compile(field?.uiSchema?.title) || field?.name, label: compile(field?.uiSchema?.title) || field?.name,
})); }));
let readOnlyMode = 'editable'; let readOnlyMode = 'editable';
if (fieldSchema['x-disabled'] === true) {
readOnlyMode = 'readonly';
}
if (fieldSchema['x-read-pretty'] === true) { if (fieldSchema['x-read-pretty'] === true) {
readOnlyMode = 'read-pretty'; readOnlyMode = 'read-pretty';
} }
if (fieldSchema['x-component-props']?.['readOnly'] === true) {
readOnlyMode = 'readonly';
}
return ( return (
<GeneralSchemaDesigner> <GeneralSchemaDesigner>
{collectionField && ( {collectionField && (
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
key="edit-field-title"
title={t('Edit field title')} title={t('Edit field title')}
schema={ schema={
{ {
@ -101,6 +104,7 @@ FormItem.Designer = () => {
)} )}
{!field.readPretty && ( {!field.readPretty && (
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
key="edit-description"
title={t('Edit description')} title={t('Edit description')}
schema={ schema={
{ {
@ -132,6 +136,7 @@ FormItem.Designer = () => {
)} )}
{field.readPretty && ( {field.readPretty && (
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
key="edit-tooltip"
title={t('Edit tooltip')} title={t('Edit tooltip')}
schema={ schema={
{ {
@ -163,6 +168,7 @@ FormItem.Designer = () => {
)} )}
{!field.readPretty && ( {!field.readPretty && (
<SchemaSettings.SwitchItem <SchemaSettings.SwitchItem
key="required"
title={t('Required')} title={t('Required')}
checked={field.required} checked={field.required}
onChange={(required) => { onChange={(required) => {
@ -179,53 +185,46 @@ FormItem.Designer = () => {
}} }}
/> />
)} )}
{!field.readPretty && ( {!form.readPretty && collectionField.interface !== 'o2m' && (
<SchemaSettings.SelectItem <SchemaSettings.SelectItem
key="pattern"
title={t('Pattern')} title={t('Pattern')}
options={ options={
[{ label: t('Editable'), value: 'editable' }, { label: t('Readonly'), value: 'readonly' }, { label: t('Easy-reading'), value: 'read-pretty' }] [{ label: t('Editable'), value: 'editable' }, { label: t('Readonly'), value: 'readonly' }, { label: t('Easy-reading'), value: 'read-pretty' }]
} }
value={readOnlyMode} value={readOnlyMode}
onChange={(v) => { onChange={(v) => {
const schema = { console.log('v', v);
const schema: ISchema = {
['x-uid']: fieldSchema['x-uid'], ['x-uid']: fieldSchema['x-uid'],
}; };
switch(v) { switch(v) {
case 'readonly': { case 'readonly': {
fieldSchema['x-read-pretty'] = false; fieldSchema['x-read-pretty'] = false;
fieldSchema['x-disabled'] = true;
schema['x-read-pretty'] = false; schema['x-read-pretty'] = false;
fieldSchema['x-component-props'] = { schema['x-disabled'] = true;
...fieldSchema['x-component-props'],
readOnly: true,
}
schema['x-component-props'] = fieldSchema['x-component-props'];
field.readPretty = false; field.readPretty = false;
field.componentProps.readOnly = true; field.disabled = true;
break; break;
} }
case 'read-pretty': { case 'read-pretty': {
fieldSchema['x-read-pretty'] = true; fieldSchema['x-read-pretty'] = true;
fieldSchema['x-disabled'] = false;
schema['x-read-pretty'] = true; schema['x-read-pretty'] = true;
fieldSchema['x-component-props'] = { schema['x-disabled'] = false;
...fieldSchema['x-component-props'],
readOnly: false,
}
schema['x-component-props'] = fieldSchema['x-component-props'];
field.readPretty = true; field.readPretty = true;
field.componentProps.readOnly = false; // field.disabled = true;
break; break;
} }
default: { default: {
fieldSchema['x-read-pretty'] = false; fieldSchema['x-read-pretty'] = false;
fieldSchema['x-disabled'] = false;
schema['x-read-pretty'] = false; schema['x-read-pretty'] = false;
fieldSchema['x-component-props'] = { schema['x-disabled'] = false;
...fieldSchema['x-component-props'],
readOnly: false,
}
schema['x-component-props'] = fieldSchema['x-component-props'];
field.readPretty = false; field.readPretty = false;
field.componentProps.readOnly = false; field.disabled = false;
break; break;
} }
} }
@ -239,6 +238,7 @@ FormItem.Designer = () => {
)} )}
{collectionField?.target && ( {collectionField?.target && (
<SchemaSettings.SelectItem <SchemaSettings.SelectItem
key="title-field"
title={t('Title field')} title={t('Title field')}
options={options} options={options}
value={field?.componentProps?.fieldNames?.label} value={field?.componentProps?.fieldNames?.label}
@ -265,6 +265,7 @@ FormItem.Designer = () => {
)} )}
{collectionField && <SchemaSettings.Divider />} {collectionField && <SchemaSettings.Divider />}
<SchemaSettings.Remove <SchemaSettings.Remove
key="remove"
removeParentsIfNoChildren removeParentsIfNoChildren
confirm={{ confirm={{
title: t('Delete field') title: t('Delete field')

View File

@ -54,7 +54,7 @@ const useAssociation = (props) => {
}; };
export const InputRecordPicker: React.FC<any> = (props) => { export const InputRecordPicker: React.FC<any> = (props) => {
const { value, multiple, onChange } = props; const { value, multiple, onChange, ...others } = props;
const fieldNames = useFieldNames(props); const fieldNames = useFieldNames(props);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
@ -72,7 +72,7 @@ export const InputRecordPicker: React.FC<any> = (props) => {
return ( return (
<div> <div>
<Select <Select
size={props.size} {...others}
mode={multiple ? 'multiple' : props.mode} mode={multiple ? 'multiple' : props.mode}
fieldNames={fieldNames} fieldNames={fieldNames}
onDropdownVisibleChange={(open) => { onDropdownVisibleChange={(open) => {