SchemaComponent

Components

SchemaComponentProvider

tsx

<SchemaComponentProvider>
  <SchemaComponent schema={{}}/>
</SchemaComponentProvider>

SchemaComponentOptions

提供 SchemaComponent 所需的 scope 和 components，可以嵌套，当 inherit={true} 时，继承父级的 scope 和 components。

tsx

<SchemaComponentOptions scope={{}} components={{}}>
</SchemaComponentOptions>

<SchemaComponentOptions scope={{}} components={{}}>
  <SchemaComponentOptions inherit scope={{}} components={{}}>
  </SchemaComponentOptions>
</SchemaComponentOptions>

例如将 useTranslation 的 t 附加给 scope

tsx

import { useTranslation } from 'react-i18next';

function TranslationProvider(props) {
  const { t } = useTranslation();
  return (
    <SchemaComponentOptions inherit scope={{ t }}>
      { props.children }
    </SchemaComponentOptions>
  );
}

SchemaComponent

Hooks

useSchemaComponentContext()

获取 SchemaComponent 的上下文

const { refresh, reset } = useSchemaComponentContext();

useDesignable()

获取当前 schema 节点设计器的 API

const {
  designable,         // 是否可以配置
  patch,              // 更新当前节点配置
  remove,             // 移除当前节点
  insertAdjacent,     // 在某位置插入，四个位置：beforeBegin、afterBegin、beforeEnd、afterEnd
  insertBeforeBegin,  // 在当前节点的前面插入
  insertAfterBegin,   // 在当前节点的第一个子节点前面插入
  insertBeforeEnd,    // 在当前节点的最后一个子节点后面
  insertAfterEnd,     // 在当前节点的后面
} = useDesignable();

const schema = {
  name: uid(),
  'x-component': 'Hello',
};

// 在当前节点的前面插入
insertBeforeBegin(schema);
// 等同于
insertAdjacent('beforeBegin', schema);

// 在当前节点的第一个子节点前面插入
insertAfterBegin(schema);
// 等同于
insertAdjacent('afterBegin', schema);

// 在当前节点的最后一个子节点后面
insertBeforeEnd(schema);
// 等同于
insertAdjacent('beforeEnd', schema);

// 在当前节点的后面
insertAfterEnd(schema);
// 等同于
insertAdjacent('afterEnd', schema);

几个插入的位置：

{
  properties: {
    // beforeBegin 在当前节点的前面插入
    node1: {
      properties: {
        // afterBegin 在当前节点的第一个子节点前面插入
        // ...
        // beforeEnd 在当前节点的最后一个子节点后面
      },
    },
    // afterEnd 在当前节点的后面
  },
}

扩展的 Formily Schema 属性

x-uid 可缺失，前端无感。主要用于插件 plugin-ui-schema-storage，用于后端 schema 的增删改查
x-designer schema 设计器
x-initializer schema 初始化器
x-collection-field 用来标记 CollectionField
x-action 用来标记 Action
x-align ActionBar 里用于 action 的布局，包括 left 和 right

Examples

<code src="./demos/demo1.tsx">拖拽</code> <code src="./demos/demo2.tsx">可以切换 designable 状态</code> <code src="./demos/demo3.tsx">不可以切换 designable 状态</code> <code src="./demos/demo4.tsx">不可以切换 designable 状态</code>