* fix: form * refactor: schema-initializer * fix: bug * refactor: schema initializer * refactor: rename * fix: delete SchemaInitializerProvider * refactor: props `insert` to hooks `useSchemaInitializerV2` * fix: bug * refactor: delete `SchemaInitializer.Button` * refactor: delete old SchemaInitializer * fix: bug * fix: workflow * fix: docs * fix: bug * fix: bug * feat: style * fix: remove v2 * fix: visible * fix: bug * fix: item hook * feat: item hook * fix: add search DataBlockInitializer * fix: build bug * fix: style bug * fix: style bug * fix: test bug * fix: test bug * fix: rerender bug * fix: remove menu select * fix: bug * chore: add aria-label for SchemaInitializerButton * refactor: rename name to camel case * fix: menu height bug * fix: build errors * fix: build errors * fix: bug * fix: bug * fix: performance * test: add test for header * fix: sidebar is not refresh (T-2422) * feat(e2e): support to add group page and link page * chore: make sure the page is configurable when using page.goto * test: add tests for menu initializer * fix: imporve code * chore: fix build error * chore: optimize locator of menu item * refactor: rename testid for select * test: make tests passing * fix: make tests passing * chore: upgrade vitest to v0.34.6 * chore: increase timeout of e2e * feat: core * fix: revert schema initializer demos * test: menu, page tabs, page grid, table column * fix: schema button interface * feat: refactor: page tab settings * feat: page settings * fix: dumirc * fix: export CSSVariableProvider * feat: lazy render * fix: form-item * fix: general schema desinger * feat: filter form item settings * refactor: form-v2 schema settings * refactor: form-v1 schema settings * refactor: action schema settings * fix: action bug * fix: form-item bug * fix: types error * docs: schema settings doc * docs: schema settings * feat: schema setting item add name * fix: visible lazy render bug * fix: revert form item filter * fix: test bug * fix: test JSON.parse bug * fix: test bug * fix: improve styling * fix: styling * fix: cleanup * fix: token.borderRadiusSM * fix: bug * test: add tests * fix: style bug * fix: add chart performance * feat: add SchemaDesignerContext * fix: bug * fix: test bug * style: create record action style improve * fix: make test passing * chore: mack tests passing * chore: make tests passing * test: fix tests * style: style revert * fix: bug * fix: data selector * fix: fix tests * fix: fix tests * fix: delete PluginManagerContext * refactor: improve router and add SchemaComponentProvider & CSSVariableProvider to MainComponent * fix: add dn and field builtin to SchemaSettingWrapper * feat: update docs * refactor: application providers * fix: test bug * fix: fix tests * chore: make test passing * feat: update docs * chore: rename collection name * feat: update docs * chore: skip weird test * fix: blockInitializers media to otherBlocks * fix: cancel to skip test * fix: bug * test: add test * refactor: migrate to small files * test: add tests for form block settings * chore: format * fix: add chart scroll bug * refactor: action designer improve * refactor: formitem designer schemaSetting * feat: schemaSettingsManager and schemaInitializerManager addItem and removeItem * test: add tests for color field in creating block * test: add tests for email field in creating block * test: make tests passing * perf: reduce fields number * fix: sub menu bug * test: add tests basic in editing form * test: add tests basic in details form * fix: improve code * test: make tests passing * test(plugin-mock-collections): add color for enum options * refactor: improve code * fix: bug * fix: bug * refactor: convert parameters to destructured object * test: add tests choices * test: add tests media * test: add tests for datetime in creating form * feat(plugin-mock-collection): generate faker time * test: add tests for datetime in editing form * test: add tests for datetime in details form * fix: bug * feat: improve code * test: add tests for relation fields * fix: rename SchemaSettings * fix: type bug * refactor: useDesinger() * fix: bug * fix: bug * fix: build tip * fix: designableState * fix: bug * fix: designable * fix: designable * test: add tests for relation fields * test: add tests for relation fields * test: add tests for relation fields * feat: client api doc * test: add tests for relation fields * test: avoid errors * test: make tests passing * fix: bug * test: make tests passing * test: add tests for advanced fields * test: increase e2e timeout-minutes to 60 * fix: bug * fix: improve code * feat: add schema initailizer component demos * test: make tests passing * fix: schema settings demos * feat: shallowMerge & deepMerge * test: reduce number of tests * test: make tests passing * feat: updates * fix: add Initializer Internal * demos: useSchemaSettingsRender * test: make tests passing * test: make tests passing * fix: improve docs * fix: bug * chore: upgrade dumi theme * test: make tests passing * test: add tests for linkage rules * test: add test for form data templates * test: add tests for default value * test: reduce number of tests * fix: dn.deepMerge * fix: bug * fix: bug * fix: toolbar * fix: docs ssr * test: add tests for system fields * test: add tests for actions * fix: bug * test: add tests for lazy loading of variables * test: make testing more stable * fix: update docs * fix: bug --------- Co-authored-by: Rain <958414905@qq.com> Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: katherinehhh <katherine_15995@163.com>
7.7 KiB
v0.15
不兼容的变化
SchemaInitializer 的注册和实现变更
定义方式变更
以前 SchemaInitializer
支持 2 种定义方式,分别为对象和组件。例如:
const BlockInitializers = {
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
items: [
// ...
],
// ...
}
const BlockInitializers = () => {
return <SchemaInitializer.Button
title={'{{t("Add block")}}'}
icon={'PlusOutlined'}
items={[
// ...
]}
// ...
/>
}
现在仅支持 new SchemaInitializer()
的实例。例如:
const blockInitializers = new SchemaInitializer({
name: 'BlockInitializers', // 名称,和原来保持一致
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
items: [
// ...
],
// ...
});
参数变更
整体来说,new SchemaInitializer()
的参数参考了之前对象定义方式,但又有新的变更。具体如下:
- 新增
name
必填参数,用于x-initializer
的值。 - 新增
Component
参数,用于定制化渲染的按钮。默认为SchemaInitializerButton
。 - 新增
componentProps
、style
用于配置Component
的属性和样式。 - 新增
ItemsComponent
参数,用于定制化渲染的列表。默认为SchemaInitializerItems
。 - 新增
itemsComponentProps
、itemsComponentStyle
用于配置ItemsComponent
的属性和样式。 - 新增
popover
参数,用于配置是否显示popover
效果。 - 新增
useInsert
参数,用于当insert
函数需要使用 hooks 时。 - 更改 将
dropdown
参数改为了popoverProps
,使用Popover
代替了Dropdown
。 - items 参数变更
- 新增
useChildren
函数,用于动态控制子项。 - 更改
visible
参数改为了useVisible
函数,用于动态控制是否显示。 - 更改 将
component
参数改为了Component
,用于列表项的渲染。 - 更改 将
key
参数改为了name
,用于列表项的唯一标识。
- 新增
案例1:
- export const BlockInitializers = {
+ export const blockInitializers = new SchemaInitializer({
+ name: 'BlockInitializers',
'data-testid': 'add-block-button-in-page',
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
wrap: gridRowColWrap,
items: [
{
- key: 'dataBlocks',
+ name: 'data-blocks',
type: 'itemGroup',
title: '{{t("Data blocks")}}',
children: [
{
- key: 'table',
+ name: 'table',
- type: 'item', // 当有 Component 参数时,就不需要此了
title: '{{t("Table")}}',
- component: TableBlockInitializer,
+ Component: TableBlockInitializer,
},
{
key: 'form',
type: 'item',
title: '{{t("Form")}}',
component: FormBlockInitializer,
}
],
},
],
});
案例2:
原来是组件定义的方式:
export const BulkEditFormItemInitializers = (props: any) => {
const { t } = useTranslation();
const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({ readPretty: true, block: 'Form' });
return (
<SchemaInitializer.Button
data-testid="configure-fields-button-of-bulk-edit-form-item"
wrap={gridRowColWrap}
icon={'SettingOutlined'}
items={[
{
type: 'itemGroup',
title: t('Display fields'),
children: useCustomBulkEditFormItemInitializerFields(),
},
{
type: 'divider',
},
{
type: 'item',
title: t('Add text'),
component: BlockItemInitializer,
},
]}
insertPosition={insertPosition}
component={component}
title={component ? null : t('Configure fields')}
/>
);
};
现在需要改为 new SchemaInitializer()
的方式:
const bulkEditFormItemInitializers = new SchemaInitializer({
name: 'BulkEditFormItemInitializers',
'data-testid': 'configure-fields-button-of-bulk-edit-form-item',
wrap: gridRowColWrap,
icon: 'SettingOutlined',
// 原 insertPosition 和 component 是透传的,这里不用管,也是透传的
items: [
{
type: 'itemGroup',
title: t('Display fields'),
name: 'display-fields', // 记得加上 name
useChildren: useCustomBulkEditFormItemInitializerFields, // 使用到了 useChildren
},
{
type: 'divider',
},
{
title: t('Add text'),
name: 'add-text',
Component: BlockItemInitializer, // component 替换为 Component
},
]
});
关于参数的具体说明可以参考 SchemaInitializer
的类型定义,以及 SchemaInitializer 文档。
实现原理变更
以前是将所有 items
转为 Menu
组件的 items JSON 对象,最后渲染成 Menu 列表。
现在默认情况下仅仅是渲染 items
列表项的 Component
组件,至于 Component
组件内部如何渲染取决于自身,最后也不会拼接成一个 JSON 对象。
具体说明参考 SchemaInitializer
的 Nested items 示例。
列表中的组件获取参数方式变更
之前是通过 props
获取 insert
函数,现在需要通过 useSchemaInitializer()
获取。例如:
const FormBlockInitializer = (props) => {
- const { insert } = props;
+ const { insert } = useSchemaInitializer();
// ...
}
export const blockInitializers = new SchemaInitializer({
name: 'BlockInitializers',
items: [
{
name: 'form',
Component: FormBlockInitializer
}
]
});
注册方式变更
以前是通过 SchemaInitializerProvider
进行注册。例如:
<SchemaInitializerProvider
initializers={{ BlockInitializers }}
components={{ ManualActionDesigner }}
></SchemaInitializerProvider>
现在需要改为插件的方式。例如:
import { Plugin } from '@nocobase/client';
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(blockInitializers);
this.app.addComponents({ ManualActionDesigner });
}
}
修改方式变更
以前是通过 SchemaInitializerContext
获取到全部的 Initializers
然后进行增删改。例如下面代码是为了往 BlockInitializers
中的 media
下添加 Hello
:
const items = useContext<any>(SchemaInitializerContext);
const mediaItems = items.BlockInitializers.items.find((item) => item.key === 'media');
if (process.env.NODE_ENV !== 'production' && !mediaItems) {
throw new Error('media block initializer not found');
}
const children = mediaItems.children;
if (!children.find((item) => item.key === 'hello')) {
children.push({
key: 'hello',
type: 'item',
title: '{{t("Hello block")}}',
component: HelloBlockInitializer,
});
}
新的方式则通过插件的方式更简洁的进行修改。例如:
class MyPlugin extends Plugin {
async load() {
// 获取 BlockInitializers
const blockInitializers = this.app.schemaInitializerManager.get('BlockInitializers');
// 添加 Hello
blockInitializers.add('media.hello', {
title: '{{t("Hello block")}}',
Component: HelloBlockInitializer,
})
}
}
使用方式变更
之前使用 useSchemaInitializer
的方式进行渲染,现在需要改为 useSchemaInitializerRender
,并且参数需要增加 x-initializer-props
。例如:
- const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
+ const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
render();
render({ style: { marginLeft: 8 } })
更多说明可以参考 SchemaInitializer 文档。