English

SchemaSettings

new SchemaSettings(options)

Create a SchemaSettings instance.

interface SchemaSettingsOptions<T = {}> {
  name: string;
  Component?: ComponentType<T>;
  componentProps?: T;
  style?: React.CSSProperties;

  items: SchemaSettingsItemType[];
}

class SchemaSettings<T = {}>{
    constructor(options: SchemaSettingsOptions<T>): SchemaSettings<T>;
    add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
    get(nestedName: string): SchemaSettingsItemType | undefined
    remove(nestedName: string): void
}

Detailed Explanation

name: Unique identifier, required
Component related
- Component: Trigger component, default is <MenuOutlined /> component
- componentProps: Component properties
- style: Component style
items: List item configuration

Example

Basic Usage

const mySchemaSettings = new SchemaSettings({
  name: 'MySchemaSettings',
  items: [
    {
      name: 'demo1', // Unique identifier
      type: 'item', // Built-in type
      componentProps: {
        title: 'DEMO1',
        onClick() {
          alert('DEMO1');
        },
      },
    },
    {
      name: 'demo2',
      Component: () => <SchemaSettings.Item title="DEMO2" onClick={() => alert('DEMO2')} />, // Directly use Component component
    },
  ],
});

Customize `Component`

const mySchemaSettings = new SchemaSettings({
  name: 'MySchemaSettings',
  Component: Button, // Custom component
  componentProps: {
    type: 'primary',
    children: 'Custom Button',
  },
  // Component: (props) => <Button type='primary' {...props}>Custom Button</Button>, // Equivalent to the above effect
  items: [
    {
      name: 'demo1',
      type: 'item',
      componentProps: {
        title: 'DEMO',
      },
    },
  ],
});

options.items Configuration Details

interface SchemaSettingsItemCommon<T = {}> {
  name: string;
  sort?: number;
  type?: string;
  Component: string | ComponentType<T>;
  useVisible?: () => boolean;
  children?: SchemaSettingsItemType[];
  useChildren?: () => SchemaSettingsItemType[];
  checkChildrenLength?: boolean;
  componentProps?: Omit<T, 'children'>;
  useComponentProps?: () => Omit<T, 'children'>;
}

Two Definition Methods: `Component` and `type`

Define through Component


const Demo = () => {
  // Finally renders `SchemaSettingsItem`
  return <SchemaSettingsItem title='Demo' />
}

const mySettings = new SchemaSettings({
  name: 'mySettings',
  items: [
    {
      name: 'a',
      Component: Demo, // Define through Component
    }
  ],
});

Define through type

Tachybase has built-in some commonly used type, for example type: 'item', equivalent to Component: SchemaSettingsItem.

For more built-in types, please refer to: Built-in Components and Types

const mySettings = new SchemaSettings({
  name: 'mySettings',
  items: [
    {
      name: 'a',
      type: 'item',
      componentProps: {
        title: 'Demo',
      },
    }
  ],
});

`children` and Dynamic Method `useChildren`

For some components, there are child list items, such as type: 'itemGroup', then we use the children property. At the same time, considering that in some scenarios children are dynamic and need to be obtained from Hooks, you can define them through useChildren.

Dynamic Show/Hide `useVisible`

Component Properties `componentProps` and Dynamic Properties `useComponentProps`

For some general components, we can define component properties through componentProps. At the same time, considering that in some scenarios component properties are dynamic and need to be obtained from Hooks, you can define them through useComponentProps.

Of course, you can also not use these two properties, directly encapsulate into a component, then define through Component.

Instance Methods

const mySchemaSettings = new SchemaSettings({
  name: 'MySchemaSettings',
  items: [
    {
      name: 'a',
      type: 'itemGroup',
      componentProps: {
        title: 'item a'
      },
      children: [
          {
              name: 'a1',
              title: 'item a1',
          }
      ],
    },
  ],
});

schemaSettings.add()

Used to add Item.

Type

class SchemaSettings {
    add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
}

Parameter Description

The first parameter is name, as a unique identifier for CRUD operations, and name supports . for splitting levels.

Example

mySchemaSetting.add('b', {
    type: 'item',
    title: 'item b',
})

mySchemaSetting.add('a.a2', {
    type: 'item',
    title: 'item a2',
})

schemaSettings.get()

Type

class SchemaSettings {
    get(nestedName: string): SchemaSettingsItemType| undefined
}

Example

const itemA = mySchemaSetting.get('a')

const itemA1 = mySchemaSetting.add('a.a1')

schemaSettings.remove()

Type

class SchemaSettings {
    remove(nestedName: string): void
}

Example

mySchemaSetting.remove('a.a1')

mySchemaSetting.remove('a')

Hooks

useSchemaSettingsRender()

Used to render SchemaSettings.

Type

function useSchemaSettingsRender(name: string, options?: SchemaSettingsOptions): {
    exists: boolean;
    render: (options?: SchemaSettingsRenderOptions) => React.ReactElement;
}

Example

const Demo = () => {
    const filedSchema = useFieldSchema();
    const { render, exists } = useSchemaSettingsRender(fieldSchema['x-settings'], fieldSchema['x-settings-props'])
    return <div>
        <div>{ render() }</div>
        <div>Can override parameters: { render({ style: { color: 'red' } }) }</div>
    </div>
}

useSchemaSettings()

Get schemaSetting context data.

Context data contains options from schemaSetting instantiation and options passed when calling useSchemaSettingsRender().

Type

interface UseSchemaSettingsResult<T> extends SchemaSettingsOptions<T> {
  dn?: Designable;
  field?: GeneralField;
  fieldSchema?: Schema;
}

function useSchemaSettings(): UseSchemaSettingsResult;

Example

const { dn } = useSchemaSettings();

useSchemaSettingsItem()

Used to get an item's data.

Type

export type SchemaSettingsItemType<T = {}> = {
  name: string;
  type?: string;
  sort?: number;
  Component?: string | ComponentType<T>;
  componentProps?: T;
  useComponentProps?: () => T;
  useVisible?: () => boolean;
  children?: SchemaSettingsItemType[];
  [index]: any;
};

function useSchemaSettingsItem(): SchemaSettingsItemType;

Example

const { name } = useSchemaSettingsItem();

Built-in Components and Types

type	Component	Effect
item	SchemaSettingsItem	Text
itemGroup	SchemaSettingsItemGroup	Group, same as Menu component's `type: 'itemGroup'`
subMenu	SchemaSettingsSubMenu	Submenu, same as Menu component's submenu
divider	SchemaSettingsDivider	Divider, same as Menu component's `type: 'divider'`
remove	SchemaSettingsRemove	Delete, used to delete a block
select	SchemaSettingsSelectItem	Dropdown select
cascader	SchemaSettingsCascaderItem	Cascade select
switch	SchemaSettingsSwitchItem	Switch
popup	SchemaSettingsPopupItem	Popup layer
actionModal	SchemaSettingsActionModalItem	Action modal
modal	SchemaSettingsModalItem	Modal

SchemaSettingsItem

Text, corresponding type is item.

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

Core parameters are title and onClick. You can modify schema in onClick.

SchemaSettingsItemGroup

Group, corresponding type is itemGroup.

Core parameter is title.

SchemaSettingsSubMenu

Submenu, corresponding type is subMenu.

Core parameter is title.

SchemaSettingsDivider

Divider, corresponding type is divider.

SchemaSettingsRemove

Delete, corresponding type is remove.

interface SchemaSettingsRemoveProps {
  confirm?: ModalFuncProps;
  removeParentsIfNoChildren?: boolean;
  breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
}

confirm: Confirmation modal before deletion
removeParentsIfNoChildren: Whether to delete parent node if there are no child nodes after deletion
breakRemoveOn: Whether to interrupt deletion if the deleted node meets the condition

SchemaSettingsSelectItem

Selector, corresponding type is select.

SchemaSettingsCascaderItem

Cascade select, corresponding type is cascader.

SchemaSettingsSwitchItem

Switch, corresponding type is switch.

SchemaSettingsModalItem

Modal, corresponding type is modal.

export interface SchemaSettingsModalItemProps {
  title: string;
  onSubmit: (values: any) => void;
  initialValues?: any;
  schema?: ISchema | (() => ISchema);
  modalTip?: string;
  components?: any;
  hidden?: boolean;
  scope?: any;
  effects?: any;
  width?: string | number;
  children?: ReactNode;
  asyncGetInitialValues?: () => Promise<any>;
  eventKey?: string;
  hide?: boolean;
}

We can define the modal's form through the schema parameter, then get the form's values in onSubmit, then modify the current schema node.

SchemaSettingsActionModalItem

Action modal, corresponding type is actionModal.

The difference from modal is that SchemaSettingsModalItem modal will lose context, while SchemaSettingsActionModalItem will retain context. Simple scenarios can use SchemaSettingsModalItem, complex scenarios can use SchemaSettingsActionModalItem.

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

Total visits times Total visitors times Total reading times. Powered by Tego Team

#SchemaSettings

#new SchemaSettings(options)

#Detailed Explanation

#Example

#Basic Usage

#Customize Component

#options.items Configuration Details

#Two Definition Methods: Component and type

#children and Dynamic Method useChildren

#Dynamic Show/Hide useVisible

#Component Properties componentProps and Dynamic Properties useComponentProps

#Instance Methods

#schemaSettings.add()

#schemaSettings.get()

#schemaSettings.remove()

#Hooks

#useSchemaSettingsRender()

#useSchemaSettings()

#useSchemaSettingsItem()

#Built-in Components and Types

#SchemaSettingsItem

#SchemaSettingsItemGroup

#SchemaSettingsSubMenu

#SchemaSettingsDivider

#SchemaSettingsRemove

#SchemaSettingsSelectItem

#SchemaSettingsCascaderItem

#SchemaSettingsSwitchItem

#SchemaSettingsModalItem

#SchemaSettingsActionModalItem