docs(client): add variable docs (#1556)
This commit is contained in:
		
							parent
							
								
									1c2711920a
								
							
						
					
					
						commit
						243f9e2448
					
				@ -0,0 +1,42 @@
 | 
				
			|||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * title: Variable.Input
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					import { FormItem } from '@formily/antd';
 | 
				
			||||||
 | 
					import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 | 
				
			||||||
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const scope = [
 | 
				
			||||||
 | 
					  { label: 'v1', value: 'v1' },
 | 
				
			||||||
 | 
					  { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
 | 
				
			||||||
 | 
					];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const schema = {
 | 
				
			||||||
 | 
					  type: 'object',
 | 
				
			||||||
 | 
					  properties: {
 | 
				
			||||||
 | 
					    input: {
 | 
				
			||||||
 | 
					      type: 'string',
 | 
				
			||||||
 | 
					      title: `替换模式`,
 | 
				
			||||||
 | 
					      'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					      'x-component': 'Variable.Input',
 | 
				
			||||||
 | 
					      'x-component-props': {
 | 
				
			||||||
 | 
					        scope,
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					      // 'x-reactions': {
 | 
				
			||||||
 | 
					      //   target: 'read',
 | 
				
			||||||
 | 
					      //   fulfill: {
 | 
				
			||||||
 | 
					      //     state: {
 | 
				
			||||||
 | 
					      //       value: '{{$self.value}}',
 | 
				
			||||||
 | 
					      //     },
 | 
				
			||||||
 | 
					      //   },
 | 
				
			||||||
 | 
					      // },
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default () => {
 | 
				
			||||||
 | 
					  return (
 | 
				
			||||||
 | 
					    <SchemaComponentProvider components={{ Variable, FormItem }}>
 | 
				
			||||||
 | 
					      <SchemaComponent schema={schema} />
 | 
				
			||||||
 | 
					    </SchemaComponentProvider>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
@ -0,0 +1,42 @@
 | 
				
			|||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * title: Variable.Input
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					 import { FormItem } from '@formily/antd';
 | 
				
			||||||
 | 
					 import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 | 
				
			||||||
 | 
					 import React from 'react';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 const scope = [
 | 
				
			||||||
 | 
					   { label: 'v1', value: 'v1' },
 | 
				
			||||||
 | 
					   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
 | 
				
			||||||
 | 
					 ];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 const schema = {
 | 
				
			||||||
 | 
					   type: 'object',
 | 
				
			||||||
 | 
					   properties: {
 | 
				
			||||||
 | 
					     input: {
 | 
				
			||||||
 | 
					       type: 'string',
 | 
				
			||||||
 | 
					       title: `表达式模式`,
 | 
				
			||||||
 | 
					       'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					       'x-component': 'Variable.TextArea',
 | 
				
			||||||
 | 
					       'x-component-props': {
 | 
				
			||||||
 | 
					         scope,
 | 
				
			||||||
 | 
					       },
 | 
				
			||||||
 | 
					       // 'x-reactions': {
 | 
				
			||||||
 | 
					       //   target: 'read',
 | 
				
			||||||
 | 
					       //   fulfill: {
 | 
				
			||||||
 | 
					       //     state: {
 | 
				
			||||||
 | 
					       //       value: '{{$self.value}}',
 | 
				
			||||||
 | 
					       //     },
 | 
				
			||||||
 | 
					       //   },
 | 
				
			||||||
 | 
					       // },
 | 
				
			||||||
 | 
					     },
 | 
				
			||||||
 | 
					   },
 | 
				
			||||||
 | 
					 };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 export default () => {
 | 
				
			||||||
 | 
					   return (
 | 
				
			||||||
 | 
					     <SchemaComponentProvider components={{ Variable, FormItem }}>
 | 
				
			||||||
 | 
					       <SchemaComponent schema={schema} />
 | 
				
			||||||
 | 
					     </SchemaComponentProvider>
 | 
				
			||||||
 | 
					   );
 | 
				
			||||||
 | 
					 };
 | 
				
			||||||
@ -0,0 +1,42 @@
 | 
				
			|||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * title: Variable.Input
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					 import { FormItem } from '@formily/antd';
 | 
				
			||||||
 | 
					 import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
 | 
				
			||||||
 | 
					 import React from 'react';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 const scope = [
 | 
				
			||||||
 | 
					   { label: 'v1', value: 'v1' },
 | 
				
			||||||
 | 
					   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
 | 
				
			||||||
 | 
					 ];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 const schema = {
 | 
				
			||||||
 | 
					   type: 'object',
 | 
				
			||||||
 | 
					   properties: {
 | 
				
			||||||
 | 
					     input: {
 | 
				
			||||||
 | 
					       type: 'string',
 | 
				
			||||||
 | 
					       title: `JSON 模式`,
 | 
				
			||||||
 | 
					       'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					       'x-component': 'Variable.JSON',
 | 
				
			||||||
 | 
					       'x-component-props': {
 | 
				
			||||||
 | 
					         scope,
 | 
				
			||||||
 | 
					       },
 | 
				
			||||||
 | 
					       // 'x-reactions': {
 | 
				
			||||||
 | 
					       //   target: 'read',
 | 
				
			||||||
 | 
					       //   fulfill: {
 | 
				
			||||||
 | 
					       //     state: {
 | 
				
			||||||
 | 
					       //       value: '{{$self.value}}',
 | 
				
			||||||
 | 
					       //     },
 | 
				
			||||||
 | 
					       //   },
 | 
				
			||||||
 | 
					       // },
 | 
				
			||||||
 | 
					     },
 | 
				
			||||||
 | 
					   },
 | 
				
			||||||
 | 
					 };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 export default () => {
 | 
				
			||||||
 | 
					   return (
 | 
				
			||||||
 | 
					     <SchemaComponentProvider components={{ Variable, FormItem }}>
 | 
				
			||||||
 | 
					       <SchemaComponent schema={schema} />
 | 
				
			||||||
 | 
					     </SchemaComponentProvider>
 | 
				
			||||||
 | 
					   );
 | 
				
			||||||
 | 
					 };
 | 
				
			||||||
@ -0,0 +1,22 @@
 | 
				
			|||||||
 | 
					---
 | 
				
			||||||
 | 
					nav:
 | 
				
			||||||
 | 
					  path: /client
 | 
				
			||||||
 | 
					group:
 | 
				
			||||||
 | 
					  path: /schema-components
 | 
				
			||||||
 | 
					---
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# Variable
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Examples
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### `Variable.Input`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<code src="./demos/demo1.tsx" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### `Variable.TextArea`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<code src="./demos/demo2.tsx" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### `Variable.JSON`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<code src="./demos/demo3.tsx" />
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user