Fix field pattern (#520)
* fix: field pattern * fix: remove console.log
This commit is contained in:
parent
19987c5846
commit
88dc2db0f2
@ -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;
|
||||||
|
@ -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')
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user