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}