* refactor(doc): change to new structure * docs: add database docs * docs: add collection docs * docs: add db field examples * docs(api): fix filename and menu path * docs: add database docs * docs: add db operators doc * docs: add resourcer menu * docs: add resourcer docs * docs: fix api docs * docs: refactor api menu structure * feat: update docs (#830) * feat: updates * feat: update docs * chore: ignore docs from ci Co-authored-by: Junyi <mytharcher@users.noreply.github.com> Co-authored-by: mytharcher <mytharcher@gmail.com> * docs: add database methods docs * docs: add missed api * docs: fix api docs * feat: update development docs (#833) * feat: update development docs * feat: update docs * feat: update docs * docs: add first plugin example (#834) * feat: update docs * feat: update docs * docs: fix typo Co-authored-by: chenos <chenlinxh@gmail.com>
		
			
				
	
	
		
			145 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			145 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # 邻近位置插入
 | ||
| 
 | ||
| 与 DOM 的 [insert adjacent](https://dom.spec.whatwg.org/#insert-adjacent) 概念相似,Schema 也提供了 `dn.insertAdjacent()` 方法用于解决邻近位置的插入问题。
 | ||
| 
 | ||
| ## 邻近位置
 | ||
| 
 | ||
| ```ts
 | ||
| {
 | ||
|   properties: {
 | ||
|     // beforeBegin 在当前节点的前面插入
 | ||
|     node1: {
 | ||
|       properties: {
 | ||
|         // afterBegin 在当前节点的第一个子节点前面插入
 | ||
|         // ...
 | ||
|         // beforeEnd 在当前节点的最后一个子节点后面
 | ||
|       },
 | ||
|     },
 | ||
|     // afterEnd 在当前节点的后面
 | ||
|   },
 | ||
| }
 | ||
| ```
 | ||
| 
 | ||
| ## useDesignable()
 | ||
| 
 | ||
| 获取当前 schema 节点设计器的 API
 | ||
| 
 | ||
| ```ts
 | ||
| const {
 | ||
|   designable,         // 是否可以配置
 | ||
|   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);
 | ||
| ```
 | ||
| 
 | ||
| 示例
 | ||
| 
 | ||
| ```tsx
 | ||
| import React from 'react';
 | ||
| import { SchemaComponentProvider, SchemaComponent, useDesignable } from '@nocobase/client';
 | ||
| import { observer, Schema, useFieldSchema } from '@formily/react';
 | ||
| import { Button, Space } from 'antd';
 | ||
| import { uid } from '@formily/shared';
 | ||
| 
 | ||
| const Hello = observer((props) => {
 | ||
|   const { insertAdjacent } = useDesignable();
 | ||
|   const fieldSchema = useFieldSchema();
 | ||
|   return (
 | ||
|     <div>
 | ||
|       <h1>{fieldSchema.name}</h1>
 | ||
|       <Space>
 | ||
|         <Button
 | ||
|           onClick={() => {
 | ||
|             insertAdjacent('beforeBegin', {
 | ||
|               'x-component': 'Hello',
 | ||
|             });
 | ||
|           }}
 | ||
|         >
 | ||
|           before begin
 | ||
|         </Button>
 | ||
|         <Button
 | ||
|           onClick={() => {
 | ||
|             insertAdjacent('afterBegin', {
 | ||
|               'x-component': 'Hello',
 | ||
|             });
 | ||
|           }}
 | ||
|         >
 | ||
|           after begin
 | ||
|         </Button>
 | ||
|         <Button
 | ||
|           onClick={() => {
 | ||
|             insertAdjacent('beforeEnd', {
 | ||
|               'x-component': 'Hello',
 | ||
|             });
 | ||
|           }}
 | ||
|         >
 | ||
|           before end
 | ||
|         </Button>
 | ||
|         <Button
 | ||
|           onClick={() => {
 | ||
|             insertAdjacent('afterEnd', {
 | ||
|               'x-component': 'Hello',
 | ||
|             });
 | ||
|           }}
 | ||
|         >
 | ||
|           after end
 | ||
|         </Button>
 | ||
|       </Space>
 | ||
|       <div style={{ margin: 50 }}>{props.children}</div>
 | ||
|     </div>
 | ||
|   );
 | ||
| });
 | ||
| 
 | ||
| const Page = observer((props) => {
 | ||
|   return <div>{props.children}</div>;
 | ||
| });
 | ||
| 
 | ||
| export default () => {
 | ||
|   return (
 | ||
|     <SchemaComponentProvider components={{ Page, Hello }}>
 | ||
|       <SchemaComponent
 | ||
|         schema={{
 | ||
|           type: 'void',
 | ||
|           name: 'page',
 | ||
|           'x-component': 'Page',
 | ||
|           properties: {
 | ||
|             hello1: {
 | ||
|               type: 'void',
 | ||
|               'x-component': 'Hello',
 | ||
|             },
 | ||
|           },
 | ||
|         }}
 | ||
|       />
 | ||
|     </SchemaComponentProvider>
 | ||
|   );
 | ||
| }
 | ||
| ```
 |