tachybase_todo/docs/zh-CN/welcome/release/v15-changelog.md
jack zhang bf1a19426a
refactor: new schema initializer and schema settings (#2802)
* 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>
2023-12-04 14:56:46 +08:00

7.7 KiB
Raw Blame History

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
  • 新增 componentPropsstyle 用于配置 Component 的属性和样式。
  • 新增 ItemsComponent 参数,用于定制化渲染的列表。默认为 SchemaInitializerItems
  • 新增 itemsComponentPropsitemsComponentStyle 用于配置 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 对象。

具体说明参考 SchemaInitializerNested 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 文档