tachybase_todo/packages/client/src/schema-component/index.md

125 lines
2.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
nav:
path: /client
group:
path: /client
---
# SchemaComponent
## Components
### SchemaComponentProvider
```tsx | pure
<SchemaComponentProvider>
<SchemaComponent schema={{}}/>
</SchemaComponentProvider>
```
### SchemaComponentOptions
提供 SchemaComponent 所需的 scope 和 components可以嵌套当 `inherit={true}` 时,继承父级的 scope 和 components。
```tsx | pure
<SchemaComponentOptions scope={{}} components={{}}>
</SchemaComponentOptions>
<SchemaComponentOptions scope={{}} components={{}}>
{/* 继承父级的 scope 和 components */}
<SchemaComponentOptions inherit scope={{}} components={{}}>
</SchemaComponentOptions>
</SchemaComponentOptions>
```
例如将 useTranslation 的 t 附加给 scope
```tsx | pure
import { useTranslation } from 'react-i18next';
function TranslationProvider(props) {
const { t } = useTranslation();
return (
<SchemaComponentOptions inherit scope={{ t }}>
{ props.children }
</SchemaComponentOptions>
);
}
```
### SchemaComponent
## Hooks
### useSchemaComponentContext()
获取 SchemaComponent 的上下文
```ts
const { refresh, reset } = useSchemaComponentContext();
```
### useDesignable()
获取当前 schema 节点设计器的 API
```ts
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);
```
几个插入的位置:
```ts
{
properties: {
// beforeBegin 在当前节点的前面插入
node1: {
properties: {
// afterBegin 在当前节点的第一个子节点前面插入
// ...
// beforeEnd 在当前节点的最后一个子节点后面
},
},
// afterEnd 在当前节点的后面
},
}
```
## Examples
<code src="./demos/demo1.tsx" />