* 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>
279 lines
7.7 KiB
Markdown
279 lines
7.7 KiB
Markdown
# v0.15
|
||
|
||
## 不兼容的变化
|
||
|
||
### SchemaInitializer 的注册和实现变更
|
||
|
||
#### 定义方式变更
|
||
|
||
以前 `SchemaInitializer` 支持 2 种定义方式,分别为对象和组件。例如:
|
||
|
||
```tsx
|
||
const BlockInitializers = {
|
||
title: '{{t("Add block")}}',
|
||
icon: 'PlusOutlined',
|
||
items: [
|
||
// ...
|
||
],
|
||
// ...
|
||
}
|
||
```
|
||
|
||
```tsx
|
||
const BlockInitializers = () => {
|
||
return <SchemaInitializer.Button
|
||
title={'{{t("Add block")}}'}
|
||
icon={'PlusOutlined'}
|
||
items={[
|
||
// ...
|
||
]}
|
||
// ...
|
||
/>
|
||
}
|
||
```
|
||
|
||
现在仅支持 `new SchemaInitializer()` 的实例。例如:
|
||
|
||
```tsx
|
||
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:
|
||
|
||
```diff
|
||
- 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:
|
||
|
||
原来是组件定义的方式:
|
||
|
||
```tsx
|
||
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()` 的方式:
|
||
|
||
```tsx
|
||
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 文档](https://client.docs.nocobase.com/client/schema-initializer)。
|
||
|
||
#### 实现原理变更
|
||
|
||
以前是将所有 `items` 转为 `Menu` 组件的 items JSON 对象,最后渲染成 Menu 列表。
|
||
|
||
现在默认情况下仅仅是渲染 `items` 列表项的 `Component` 组件,至于 `Component` 组件内部如何渲染取决于自身,最后也不会拼接成一个 JSON 对象。
|
||
|
||
具体说明参考 `SchemaInitializer` 的 [Nested items 示例](https://client.docs.nocobase.com/client/schema-initializer#nested-items)。
|
||
|
||
#### 列表中的组件获取参数方式变更
|
||
|
||
之前是通过 `props` 获取 `insert` 函数,现在需要通过 `useSchemaInitializer()` 获取。例如:
|
||
|
||
```diff
|
||
const FormBlockInitializer = (props) => {
|
||
- const { insert } = props;
|
||
+ const { insert } = useSchemaInitializer();
|
||
// ...
|
||
}
|
||
|
||
export const blockInitializers = new SchemaInitializer({
|
||
name: 'BlockInitializers',
|
||
items: [
|
||
{
|
||
name: 'form',
|
||
Component: FormBlockInitializer
|
||
}
|
||
]
|
||
});
|
||
```
|
||
|
||
#### 注册方式变更
|
||
|
||
以前是通过 `SchemaInitializerProvider` 进行注册。例如:
|
||
|
||
```tsx
|
||
<SchemaInitializerProvider
|
||
initializers={{ BlockInitializers }}
|
||
components={{ ManualActionDesigner }}
|
||
></SchemaInitializerProvider>
|
||
```
|
||
|
||
现在需要改为插件的方式。例如:
|
||
|
||
```tsx
|
||
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`:
|
||
|
||
```tsx
|
||
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,
|
||
});
|
||
}
|
||
```
|
||
|
||
新的方式则通过插件的方式更简洁的进行修改。例如:
|
||
|
||
```tsx
|
||
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`。例如:
|
||
|
||
```diff
|
||
- const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
|
||
+ const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
|
||
|
||
render();
|
||
render({ style: { marginLeft: 8 } })
|
||
```
|
||
|
||
|
||
更多说明可以参考 [SchemaInitializer 文档](https://client.docs.nocobase.com/client/schema-initializer)。
|