SchemaSettings

new SchemaSettings(options)

创建一个 SchemaSettings 实例。

1interface SchemaSettingsOptions<T = {}> {
2  name: string;
3  Component?: ComponentType<T>;
4  componentProps?: T;
5  style?: React.CSSProperties;
6
7  items: SchemaSettingsItemType[];
8}
9
10class SchemaSettings<T = {}>{
11    constructor(options: SchemaSettingsOptions<T>): SchemaSettings<T>;
12    add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
13    get(nestedName: string): SchemaSettingsItemType | undefined
14    remove(nestedName: string): void
15}

详细解释

  • name:唯一标识,必填

  • Component 相关

    • Component:触发组件,默认是 <MenuOutlined /> 组件
    • componentProps: 组件属性
    • style:组件的样式
  • items:列表项配置

示例

基础用法

1const mySchemaSettings = new SchemaSettings({
2  name: 'MySchemaSettings',
3  items: [
4    {
5      name: 'demo1', // 唯一标识
6      type: 'item', // 内置类型
7      componentProps: {
8        title: 'DEMO1',
9        onClick() {
10          alert('DEMO1');
11        },
12      },
13    },
14    {
15      name: 'demo2',
16      Component: () => <SchemaSettings.Item title="DEMO2" onClick={() => alert('DEMO2')} />, // 直接使用 Component 组件
17    },
18  ],
19});

定制化Component

1const mySchemaSettings = new SchemaSettings({
2  name: 'MySchemaSettings',
3  Component: Button, // 自定义组件
4  componentProps: {
5    type: 'primary',
6    children: '自定义按钮',
7  },
8  // Component: (props) => <Button type='primary' {...props}>自定义按钮</Button>, // 等同于上面效果
9  items: [
10    {
11      name: 'demo1',
12      type: 'item',
13      componentProps: {
14        title: 'DEMO',
15      },
16    },
17  ],
18});

options.items 配置详解

1interface SchemaSettingsItemCommon<T = {}> {
2  name: string;
3  sort?: number;
4  type?: string;
5  Component: string | ComponentType<T>;
6  useVisible?: () => boolean;
7  children?: SchemaSettingsItemType[];
8  useChildren?: () => SchemaSettingsItemType[];
9  checkChildrenLength?: boolean;
10  componentProps?: Omit<T, 'children'>;
11  useComponentProps?: () => Omit<T, 'children'>;
12}

两种定义方式:Componenttype

  • 通过 Component 定义
1const Demo = () => {
2  // 最终渲染 `SchemaSettingsItem`
3  return <SchemaSettingsItem title='Demo' />
4}
5
6const mySettings = new SchemaSettings({
7  name: 'mySettings',
8  items: [
9    {
10      name: 'a',
11      Component: Demo, // 通过 Component 定义
12    }
13  ],
14});
  • 通过 type 定义

Tachybase 内置了一些常用的 type,例如 type: 'item',相当于 Component: SchemaSettingsItem

更多内置类型,请参考:内置组件和类型

1const mySettings = new SchemaSettings({
2  name: 'mySettings',
3  items: [
4    {
5      name: 'a',
6      type: 'item',
7      componentProps: {
8        title: 'Demo',
9      },
10    }
11  ],
12});

children 和动态方式useChildren

对于某些组件而言是有子列表项的,例如 type: 'itemGroup',那么我们使用 children 属性,同时考虑到某些场景下 children 是动态的,需要从 Hooks 里面获取,那么就可以通过 useChildren 来定义。

动态显示隐藏useVisible

组件属性componentProps 和动态属性useComponentProps

对于一些通用组件,我们可以通过 componentProps 来定义组件属性,同时考虑到某些场景下组件属性是动态的,需要从 Hooks 里面获取,那么就可以通过 useComponentProps 来定义。

当然也可以不使用这两个属性,直接封装成一个组件,然后通过 Component 来定义。

实例方法

1const mySchemaSettings = new SchemaSettings({
2  name: 'MySchemaSettings',
3  items: [
4    {
5      name: 'a',
6      type: 'itemGroup',
7      componentProps: {
8        title: 'item a'
9      },
10      children: [
11          {
12              name: 'a1',
13              title: 'item a1',
14          }
15      ],
16    },
17  ],
18});

schemaSettings.add()

用于新增 Item。

  • 类型
1class SchemaSettings {
2    add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
3}
  • 参数说明

第一个参数是 name,作为唯一标识,用于增删改查,并且 name 支持 . 用于分割层级。

  • 示例
1mySchemaSetting.add('b', {
2    type: 'item',
3    title: 'item b',
4})
5
6mySchemaSetting.add('a.a2', {
7    type: 'item',
8    title: 'item a2',
9})

schemaSettings.get()

  • 类型
1class SchemaSettings {
2    get(nestedName: string): SchemaSettingsItemType| undefined
3}
  • 示例
1const itemA = mySchemaSetting.get('a')
2
3const itemA1 = mySchemaSetting.add('a.a1')

schemaSettings.remove()

  • 类型
1class SchemaSettings {
2    remove(nestedName: string): void
3}
  • 示例
1mySchemaSetting.remove('a.a1')
2
3mySchemaSetting.remove('a')

Hooks

useSchemaSettingsRender()

用于渲染 SchemaSettings。

  • 类型
1function useSchemaSettingsRender(name: string, options?: SchemaSettingsOptions): {
2    exists: boolean;
3    render: (options?: SchemaSettingsRenderOptions) => React.ReactElement;
4}
  • 示例
1const Demo = () => {
2    const filedSchema = useFieldSchema();
3    const { render, exists } = useSchemaSettingsRender(fieldSchema['x-settings'], fieldSchema['x-settings-props'])
4    return <div>
5        <div>{ render() }</div>
6        <div>可以进行参数的二次覆盖:{ render({ style: { color: 'red' } }) }</div>
7    </div>
8}

useSchemaSettings()

获取 schemaSetting 上下文数据。

上下文数据包含了 schemaSetting 实例化时的 options 以及调用 useSchemaSettingsRender() 时传入的 options

  • 类型
1interface UseSchemaSettingsResult<T> extends SchemaSettingsOptions<T> {
2  dn?: Designable;
3  field?: GeneralField;
4  fieldSchema?: Schema;
5}
6
7function useSchemaSettings(): UseSchemaSettingsResult;
  • 示例
1const { dn } = useSchemaSettings();

useSchemaSettingsItem()

用于获取一个 item 的数据。

  • 类型
1export type SchemaSettingsItemType<T = {}> = {
2  name: string;
3  type?: string;
4  sort?: number;
5  Component?: string | ComponentType<T>;
6  componentProps?: T;
7  useComponentProps?: () => T;
8  useVisible?: () => boolean;
9  children?: SchemaSettingsItemType[];
10  [index]: any;
11};
12
13function useSchemaSettingsItem(): SchemaSettingsItemType;
  • 示例
1const { name } = useSchemaSettingsItem();

内置组件和类型

typeComponent效果
itemSchemaSettingsItem文本
itemGroupSchemaSettingsItemGroup分组,同 Menu 组件的 type: 'itemGroup'
subMenuSchemaSettingsSubMenu子菜单,同 Menu 组件的子菜单
dividerSchemaSettingsDivider分割线,同 Menu 组件的 type: 'divider'
removeSchemaSettingsRemove删除,用于删除一个卡片
selectSchemaSettingsSelectItem下拉选择
cascaderSchemaSettingsCascaderItem级联选择
switchSchemaSettingsSwitchItem开关
popupSchemaSettingsPopupItem弹出层
actionModalSchemaSettingsActionModalItem操作弹窗
modalSchemaSettingsModalItem弹窗

SchemaSettingsItem

文本,对应的 typeitem

1interface SchemaSettingsItemProps extends Omit<MenuItemProps, 'title'> {
2  title: string;
3}

核心参数为 titleonClick,可以在 onClick 中修改 schema。

SchemaSettingsItemGroup

分组,对应的 typeitemGroup

核心参数是 title

SchemaSettingsSubMenu

子菜单,对应的 typesubMenu

核心参数是 title

SchemaSettingsDivider

分割线,对应的 typedivider

SchemaSettingsRemove

删除,对应的 typeremove

1interface SchemaSettingsRemoveProps {
2  confirm?: ModalFuncProps;
3  removeParentsIfNoChildren?: boolean;
4  breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
5}
  • confirm:删除前的确认弹窗
  • removeParentsIfNoChildren:如果删除后没有子节点了,是否删除父节点
  • breakRemoveOn:如果删除的节点满足条件,是否中断删除

SchemaSettingsSelectItem

选择器,对应的 typeselect

SchemaSettingsCascaderItem

级联选择,对应的 typecascader

SchemaSettingsSwitchItem

开关,对应的 typeswitch

SchemaSettingsModalItem

弹窗,对应的 typemodal

1export interface SchemaSettingsModalItemProps {
2  title: string;
3  onSubmit: (values: any) => void;
4  initialValues?: any;
5  schema?: ISchema | (() => ISchema);
6  modalTip?: string;
7  components?: any;
8  hidden?: boolean;
9  scope?: any;
10  effects?: any;
11  width?: string | number;
12  children?: ReactNode;
13  asyncGetInitialValues?: () => Promise<any>;
14  eventKey?: string;
15  hide?: boolean;
16}

我们可以通过 schema 参数来定义弹窗的表单,然后在 onSubmit 中获取表单的值,然后修改当前 schema 节点。

SchemaSettingsActionModalItem

操作弹窗,对应的 typeactionModal

其和 modal 的区别是,SchemaSettingsModalItem 弹窗会丢失上下文,而 SchemaSettingsActionModalItem 会保留上下文,简单场景下可以使用 SchemaSettingsModalItem,复杂场景下可以使用 SchemaSettingsActionModalItem

1export interface SchemaSettingsActionModalItemProps extends SchemaSettingsModalItemProps, Omit<SchemaSettingsItemProps, 'onSubmit' | 'onClick'> {
2  uid?: string;
3  initialSchema?: ISchema;
4  schema?: ISchema;
5  beforeOpen?: () => void;
6  maskClosable?: boolean;
7}