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}
两种定义方式：Component 和type
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});
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();
内置组件和类型
| type | Component | 效果 |
|---|
| item | SchemaSettingsItem | 文本 |
| itemGroup | SchemaSettingsItemGroup | 分组，同 Menu 组件的 type: 'itemGroup' |
| subMenu | SchemaSettingsSubMenu | 子菜单，同 Menu 组件的子菜单 |
| divider | SchemaSettingsDivider | 分割线，同 Menu 组件的 type: 'divider' |
| remove | SchemaSettingsRemove | 删除，用于删除一个卡片 |
| select | SchemaSettingsSelectItem | 下拉选择 |
| cascader | SchemaSettingsCascaderItem | 级联选择 |
| switch | SchemaSettingsSwitchItem | 开关 |
| popup | SchemaSettingsPopupItem | 弹出层 |
| actionModal | SchemaSettingsActionModalItem | 操作弹窗 |
| modal | SchemaSettingsModalItem | 弹窗 |
SchemaSettingsItem
文本，对应的 type 为 item。
1interface SchemaSettingsItemProps extends Omit<MenuItemProps, 'title'> {
2 title: string;
3}
核心参数为 title 和 onClick，可以在 onClick 中修改 schema。
SchemaSettingsItemGroup
分组，对应的 type 为 itemGroup。
核心参数是 title。
子菜单，对应的 type 为 subMenu。
核心参数是 title。
SchemaSettingsDivider
分割线，对应的 type 为 divider。
SchemaSettingsRemove
删除，对应的 type 为 remove。
1interface SchemaSettingsRemoveProps {
2 confirm?: ModalFuncProps;
3 removeParentsIfNoChildren?: boolean;
4 breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
5}
confirm：删除前的确认弹窗removeParentsIfNoChildren：如果删除后没有子节点了，是否删除父节点breakRemoveOn：如果删除的节点满足条件，是否中断删除
SchemaSettingsSelectItem
选择器，对应的 type 为 select。
SchemaSettingsCascaderItem
级联选择，对应的 type 为 cascader。
SchemaSettingsSwitchItem
开关，对应的 type 为 switch。
SchemaSettingsModalItem
弹窗，对应的 type 为 modal。
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
操作弹窗，对应的 type 为 actionModal。
其和 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}
