2022-12-14 21:45:43 +08:00
|
|
|
import { Field } from '@formily/core';
|
|
|
|
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
|
|
|
import {
|
|
|
|
GeneralSchemaDesigner,
|
|
|
|
SchemaSettings,
|
|
|
|
useCollection,
|
|
|
|
useCollectionManager,
|
|
|
|
useDesignable,
|
2023-01-13 10:55:04 +08:00
|
|
|
useFormBlockContext
|
2022-12-14 21:45:43 +08:00
|
|
|
} from '@nocobase/client';
|
2023-01-13 10:55:04 +08:00
|
|
|
import set from 'lodash/set';
|
2022-12-14 21:45:43 +08:00
|
|
|
import React from 'react';
|
2023-01-13 10:55:04 +08:00
|
|
|
import { useMapTranslation } from '../locale';
|
2022-12-14 21:45:43 +08:00
|
|
|
|
|
|
|
const Designer = () => {
|
|
|
|
const { getCollectionJoinField } = useCollectionManager();
|
|
|
|
const { getField } = useCollection();
|
|
|
|
const { form } = useFormBlockContext();
|
|
|
|
const field = useField<Field>();
|
|
|
|
const fieldSchema = useFieldSchema();
|
|
|
|
const { t } = useMapTranslation();
|
|
|
|
const { dn, refresh } = useDesignable();
|
|
|
|
const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
|
|
|
|
const originalTitle = collectionField?.uiSchema?.title;
|
|
|
|
const initialValue = {
|
|
|
|
title: field.title === originalTitle ? undefined : field.title,
|
|
|
|
};
|
|
|
|
if (!field.readPretty) {
|
|
|
|
initialValue['required'] = field.required;
|
|
|
|
}
|
|
|
|
|
|
|
|
let readOnlyMode = 'editable';
|
|
|
|
if (fieldSchema['x-disabled'] === true) {
|
|
|
|
readOnlyMode = 'readonly';
|
|
|
|
}
|
|
|
|
if (fieldSchema['x-read-pretty'] === true) {
|
|
|
|
readOnlyMode = 'read-pretty';
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<GeneralSchemaDesigner>
|
|
|
|
<SchemaSettings.ModalItem
|
|
|
|
key="edit-field-title"
|
|
|
|
title={t('Edit field title')}
|
|
|
|
schema={
|
|
|
|
{
|
|
|
|
type: 'object',
|
|
|
|
title: t('Edit field title'),
|
|
|
|
properties: {
|
|
|
|
title: {
|
|
|
|
title: t('Field title'),
|
|
|
|
default: field?.title,
|
|
|
|
description: `${t('Original field title: ')}${collectionField?.uiSchema?.title}`,
|
|
|
|
'x-decorator': 'FormItem',
|
|
|
|
'x-component': 'Input',
|
|
|
|
'x-component-props': {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as ISchema
|
|
|
|
}
|
|
|
|
onSubmit={({ title }) => {
|
|
|
|
if (title) {
|
|
|
|
field.title = title;
|
|
|
|
fieldSchema.title = title;
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema: {
|
|
|
|
'x-uid': fieldSchema['x-uid'],
|
|
|
|
title: fieldSchema.title,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
dn.refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{!field.readPretty && (
|
|
|
|
<SchemaSettings.ModalItem
|
|
|
|
key="edit-description"
|
|
|
|
title={t('Edit description')}
|
|
|
|
schema={
|
|
|
|
{
|
|
|
|
type: 'object',
|
|
|
|
title: t('Edit description'),
|
|
|
|
properties: {
|
|
|
|
description: {
|
|
|
|
// title: t('Description'),
|
|
|
|
default: field?.description,
|
|
|
|
'x-decorator': 'FormItem',
|
|
|
|
'x-component': 'Input.TextArea',
|
|
|
|
'x-component-props': {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as ISchema
|
|
|
|
}
|
|
|
|
onSubmit={({ description }) => {
|
|
|
|
field.description = description;
|
|
|
|
fieldSchema.description = description;
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema: {
|
|
|
|
'x-uid': fieldSchema['x-uid'],
|
|
|
|
description: fieldSchema.description,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
dn.refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{field.readPretty && (
|
|
|
|
<SchemaSettings.ModalItem
|
|
|
|
key="edit-tooltip"
|
|
|
|
title={t('Edit tooltip')}
|
|
|
|
schema={
|
|
|
|
{
|
|
|
|
type: 'object',
|
|
|
|
title: t('Edit description'),
|
|
|
|
properties: {
|
|
|
|
tooltip: {
|
|
|
|
default: fieldSchema?.['x-decorator-props']?.tooltip,
|
|
|
|
'x-decorator': 'FormItem',
|
|
|
|
'x-component': 'Input.TextArea',
|
|
|
|
'x-component-props': {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as ISchema
|
|
|
|
}
|
|
|
|
onSubmit={({ tooltip }) => {
|
|
|
|
field.decoratorProps.tooltip = tooltip;
|
|
|
|
fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
|
|
|
|
fieldSchema['x-decorator-props']['tooltip'] = tooltip;
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema: {
|
|
|
|
'x-uid': fieldSchema['x-uid'],
|
|
|
|
'x-decorator-props': fieldSchema['x-decorator-props'],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
dn.refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{!field.readPretty && (
|
|
|
|
<SchemaSettings.SwitchItem
|
|
|
|
key="required"
|
|
|
|
title={t('Required')}
|
|
|
|
checked={fieldSchema.required as boolean}
|
|
|
|
onChange={(required) => {
|
|
|
|
const schema = {
|
|
|
|
['x-uid']: fieldSchema['x-uid'],
|
|
|
|
};
|
|
|
|
field.required = required;
|
|
|
|
fieldSchema['required'] = required;
|
|
|
|
schema['required'] = required;
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema,
|
|
|
|
});
|
|
|
|
refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{form && !form?.readPretty && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && (
|
|
|
|
<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: ISchema = {
|
|
|
|
['x-uid']: fieldSchema['x-uid'],
|
|
|
|
};
|
|
|
|
|
|
|
|
switch (v) {
|
|
|
|
case 'readonly': {
|
|
|
|
fieldSchema['x-read-pretty'] = false;
|
|
|
|
fieldSchema['x-disabled'] = true;
|
|
|
|
schema['x-read-pretty'] = false;
|
|
|
|
schema['x-disabled'] = true;
|
|
|
|
field.readPretty = false;
|
|
|
|
field.disabled = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'read-pretty': {
|
|
|
|
fieldSchema['x-read-pretty'] = true;
|
|
|
|
fieldSchema['x-disabled'] = false;
|
|
|
|
schema['x-read-pretty'] = true;
|
|
|
|
schema['x-disabled'] = false;
|
|
|
|
field.readPretty = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
default: {
|
|
|
|
fieldSchema['x-read-pretty'] = false;
|
|
|
|
fieldSchema['x-disabled'] = false;
|
|
|
|
schema['x-read-pretty'] = false;
|
|
|
|
schema['x-disabled'] = false;
|
|
|
|
field.readPretty = false;
|
|
|
|
field.disabled = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema,
|
|
|
|
});
|
|
|
|
|
|
|
|
dn.refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<SchemaSettings.ModalItem
|
|
|
|
key="map-zoom"
|
|
|
|
title={t('Set default zoom level')}
|
|
|
|
schema={
|
|
|
|
{
|
|
|
|
type: 'object',
|
|
|
|
title: t('Set default zoom level'),
|
|
|
|
properties: {
|
|
|
|
zoom: {
|
|
|
|
title: t('Zoom'),
|
|
|
|
default: field.componentProps.zoom || 13,
|
|
|
|
description: t('The default zoom level of the map'),
|
|
|
|
'x-decorator': 'FormItem',
|
|
|
|
'x-component': 'InputNumber',
|
|
|
|
'x-component-props': {
|
|
|
|
precision: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as ISchema
|
|
|
|
}
|
|
|
|
onSubmit={({ zoom }) => {
|
|
|
|
if (zoom) {
|
2023-01-13 10:55:04 +08:00
|
|
|
set(fieldSchema, 'x-component-props.zoom', zoom);
|
2022-12-14 21:45:43 +08:00
|
|
|
Object.assign(field.componentProps, fieldSchema['x-component-props']);
|
|
|
|
|
|
|
|
dn.emit('patch', {
|
|
|
|
schema: {
|
|
|
|
'x-uid': fieldSchema['x-uid'],
|
|
|
|
'x-component-props': field.componentProps,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
dn.refresh();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<SchemaSettings.Remove
|
|
|
|
key="remove"
|
|
|
|
removeParentsIfNoChildren
|
|
|
|
confirm={{
|
|
|
|
title: t('Delete field'),
|
|
|
|
}}
|
|
|
|
breakRemoveOn={{
|
|
|
|
'x-component': 'Grid',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</GeneralSchemaDesigner>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Designer;
|