tachybase_todo/packages/plugins/@nocobase/plugin-iframe-block/src/client/schemaSettings.ts
Zeke Zhang 51de34251a
refactor(SchemaInitializers): unify naming style (#3604)
* refactor(SchemaSettings): unify naming style

* refactor(SchemaInitializers): unify naming stle

* refactor: replace CreateFormBlockInitializers to blockInitializers:createForm

* refactor: replace to blockInitializers:customizeCreateForm

* refactor: replace block intializers name

* refactor: replace action initializers name

* refactor: replace field initializers name

* style: fix hover style for column action (T-3297)

* refactor: revert some codes

* chore: update comment

* chore: replace iframeBlockSchemaSettings to blockSettings:iframe

* chore: delete pro-packages

* feat: add CompatibleSchemaInitializer

* test: add unit tests

* chore: add @internal for CompatibleSchemaInitializer

* chore: block

* chore: field

* chore: ations

* fix: build

* chore: typo

* fix: fix unit tests

* test: fix e2e

* chore: remove igone

* refactor: page:addBlock

* refactor: popup:addNew:addBlock

* fix: fix max call stack

* refactor: popup:addRecord:addBlock

* refactor: remove blockInitializers:recordForm

* refactor: popup:tableSelector:addBlock

* refactor: popup:view:addBlock

* refactor: popup:bulkEdit:addBlock & charts:addBlock

* refactor: mobilePage:addBlock

* refactor: popup:snapshot:addBlock

* refactor: popup:workflowManual:configureUserInterface:addBlock

* fix: avoid crashing

* chore: optimize

* refactor: popup:common:addBlock

* refactor: workflowManual:popup:configureUserInterface:addBlock

* refactor: details:configureFields

* refactor: form:configureFields

* refactor: table:configureColumns

* refactor: filterForm:configureFields

* refactor: associationFilterInitializer

* refactor: assignFieldValuesForm:configureFields

* refactor: bulkEditForm:configureFields

* refactor: auditLogsTable:configureColumns

* refactor: chartFilterForm:configureFields

* refactor: kanban:configureItemFields

* refactor: workflowManual:customForm:configureFields

* refactor: detailsWithPaging:configureActions

* refactor: details:configureActions

* refactor: createForm:configureActions

* refactor: editForm:configureActions

* refactor: gridCard:configureActions

* refactor: gridCard:configureItemActions

* refactor: list:configureActions

* refactor: list:configureItemActions

* refactor: table:configureItemActions

* refactor: table:configureActions

* refactor: filterForm:configureActions

* refactor: subTable:configureActions

* refactor: bulkEditForm:configureActions

* refactor: auditLogsTable:configureItemActions

* refactor: auditLogsTable:configureActions

* refactor: calendar:configureActions

* refactor: chartFilterForm:configureActions

* refactor: gantt:configureActions

* refactor: kanban:configureActions

* refactor: map:configureActions

* refactor: workflowManual:form:configureActions

* feat: use 'createForm:configureActions' in page

* feat: use 'details:configureActions' in Calendar

* feat: register deleteEvent initializer in calendar plugin

* fix: fix delete event action

* test: fix e2e

* test: fix e2e

* chore: only run workflow's e2e

* Revert "chore: only run workflow's e2e"

This reverts commit 9e5b4af41e40e8d616007a5ab97291fb2370d88a.

* fix: use isInitializersSame to fix some case
2024-03-14 14:13:11 +08:00

290 lines
8.9 KiB
TypeScript

import { ISchema, useField, useFieldSchema } from '@formily/react';
import { uid } from '@formily/shared';
import { SchemaSettings, useAPIClient, useDesignable } from '@nocobase/client';
import { useTranslation } from 'react-i18next';
/**
* @deprecated
*/
export const iframeBlockSchemaSettings_deprecated = new SchemaSettings({
name: 'iframeBlockSchemaSettings',
items: [
{
name: 'EditIframe',
type: 'modal',
useComponentProps() {
const field = useField();
const fieldSchema = useFieldSchema();
const { t } = useTranslation();
const { dn } = useDesignable();
const api = useAPIClient();
const { mode, url, htmlId, height = '60vh' } = fieldSchema['x-component-props'] || {};
const saveHtml = async (html: string) => {
const options = {
values: { html },
};
if (htmlId) {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').update?.({ ...options, filterByTk: htmlId });
return data?.data?.[0] || { id: htmlId };
} else {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').create?.(options);
return data?.data;
}
};
const submitHandler = async ({ mode, url, html, height }) => {
const componentProps = fieldSchema['x-component-props'] || {};
componentProps['mode'] = mode;
componentProps['height'] = height;
componentProps['url'] = url;
if (mode === 'html') {
const data = await saveHtml(html);
componentProps['htmlId'] = data.id;
}
fieldSchema['x-component-props'] = componentProps;
field.componentProps = { ...componentProps };
field.data = { v: uid() };
dn.emit('patch', {
schema: {
'x-uid': fieldSchema['x-uid'],
'x-component-props': componentProps,
},
});
};
return {
title: t('Edit iframe'),
asyncGetInitialValues: async () => {
const values = {
mode,
url,
height,
};
if (htmlId) {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').get?.({ filterByTk: htmlId });
values['html'] = data?.data?.html || '';
}
return values;
},
schema: {
type: 'object',
title: t('Edit iframe'),
properties: {
mode: {
title: '{{t("Mode")}}',
'x-component': 'Radio.Group',
'x-decorator': 'FormItem',
required: true,
default: 'url',
enum: [
{ value: 'url', label: t('URL') },
{ value: 'html', label: t('html') },
],
},
url: {
title: t('URL'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
'x-reactions': {
dependencies: ['mode'],
fulfill: {
state: {
hidden: '{{$deps[0] === "html"}}',
},
},
},
},
html: {
title: t('html'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
required: true,
'x-reactions': {
dependencies: ['mode'],
fulfill: {
state: {
hidden: '{{$deps[0] === "url"}}',
},
},
},
},
height: {
title: t('Height'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
},
},
} as ISchema,
onSubmit: submitHandler,
};
},
},
{
name: 'divider',
type: 'divider',
},
{
name: 'delete',
type: 'remove',
useComponentProps() {
return {
removeParentsIfNoChildren: true,
breakRemoveOn: {
'x-component': 'Grid',
},
};
},
},
],
});
export const iframeBlockSchemaSettings = new SchemaSettings({
name: 'blockSettings:iframe',
items: [
{
name: 'EditIframe',
type: 'modal',
useComponentProps() {
const field = useField();
const fieldSchema = useFieldSchema();
const { t } = useTranslation();
const { dn } = useDesignable();
const api = useAPIClient();
const { mode, url, htmlId, height = '60vh' } = fieldSchema['x-component-props'] || {};
const saveHtml = async (html: string) => {
const options = {
values: { html },
};
if (htmlId) {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').update?.({ ...options, filterByTk: htmlId });
return data?.data?.[0] || { id: htmlId };
} else {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').create?.(options);
return data?.data;
}
};
const submitHandler = async ({ mode, url, html, height }) => {
const componentProps = fieldSchema['x-component-props'] || {};
componentProps['mode'] = mode;
componentProps['height'] = height;
componentProps['url'] = url;
if (mode === 'html') {
const data = await saveHtml(html);
componentProps['htmlId'] = data.id;
}
fieldSchema['x-component-props'] = componentProps;
field.componentProps = { ...componentProps };
field.data = { v: uid() };
dn.emit('patch', {
schema: {
'x-uid': fieldSchema['x-uid'],
'x-component-props': componentProps,
},
});
};
return {
title: t('Edit iframe'),
asyncGetInitialValues: async () => {
const values = {
mode,
url,
height,
};
if (htmlId) {
// eslint-disable-next-line no-unsafe-optional-chaining
const { data } = await api.resource('iframeHtml').get?.({ filterByTk: htmlId });
values['html'] = data?.data?.html || '';
}
return values;
},
schema: {
type: 'object',
title: t('Edit iframe'),
properties: {
mode: {
title: '{{t("Mode")}}',
'x-component': 'Radio.Group',
'x-decorator': 'FormItem',
required: true,
default: 'url',
enum: [
{ value: 'url', label: t('URL') },
{ value: 'html', label: t('html') },
],
},
url: {
title: t('URL'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
'x-reactions': {
dependencies: ['mode'],
fulfill: {
state: {
hidden: '{{$deps[0] === "html"}}',
},
},
},
},
html: {
title: t('html'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
required: true,
'x-reactions': {
dependencies: ['mode'],
fulfill: {
state: {
hidden: '{{$deps[0] === "url"}}',
},
},
},
},
height: {
title: t('Height'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
},
},
} as ISchema,
onSubmit: submitHandler,
};
},
},
{
name: 'divider',
type: 'divider',
},
{
name: 'delete',
type: 'remove',
useComponentProps() {
return {
removeParentsIfNoChildren: true,
breakRemoveOn: {
'x-component': 'Grid',
},
};
},
},
],
});