refactor: component demo

packages/core/client/src/schema-component/antd/variable/RawTextArea.tsx

@@ -9,9 +9,9 @@
 
 import React, { useRef, useState } from 'react';
 import { css } from '@emotion/css';
-import { Button, Input } from 'antd';
+import { Button, Input, CascaderProps } from 'antd';
 import { cloneDeep } from 'lodash';
-
+import type { DefaultOptionType } from 'antd/lib/cascader';
 import { VariableSelect } from './VariableSelect';
 
 // NOTE: https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210
@@ -24,8 +24,18 @@ function setNativeInputValue(input, value) {
     }),
   );
 }
-
-export function RawTextArea(props): JSX.Element {
+export type VariableRawTextAreaProps = {
+  value?: string;
+  scope?: Partial<DefaultOptionType>[] | (() => Partial<DefaultOptionType>[]);
+  onChange: (value: string, optionPath?: any[]) => void;
+  changeOnSelect?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  buttonClass?: string;
+  component: any;
+  fieldNames?: CascaderProps['fieldNames'];
+};
+export function RawTextArea(props: VariableRawTextAreaProps): JSX.Element {
   const inputRef = useRef<any>(null);
   const { changeOnSelect, component: Component = Input.TextArea, ...others } = props;
   const scope = typeof props.scope === 'function' ? props.scope() : props.scope;

packages/core/client/src/schema-component/antd/variable/TextArea.tsx

@@ -212,7 +212,6 @@ export type VariableTextAreaProps = {
   value?: string;
   scope?: Partial<DefaultOptionType>[] | (() => Partial<DefaultOptionType>[]);
   onChange: (value: string, optionPath?: any[]) => void;
-  children?: any;
   changeOnSelect?: boolean;
   disabled?: boolean;
   style?: React.CSSProperties;

packages/core/client/src/schema-component/antd/variable/demos/demo5.tsx

@@ -0,0 +1,40 @@
+import { FormItem } from '@formily/antd-v5';
+import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+import React from 'react';
+
+const scope = [
+  { title: 'v1', name: 'test-v1' },
+  { title: 'nested', name: 'nested', children: [{ title: 'v2', name: 'nested-v2' }] },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `纯文本，显示具体值`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Variable.RawTextArea',
+      'x-component-props': {
+        scope,
+        changeOnSelect: true,
+        autoSize: {
+          minRows: 10,
+        },
+        fieldNames: {
+          value: 'name',
+          label: 'title',
+        },
+        placeholder: 'https://www.nocobase.com',
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Variable, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/core/client/src/schema-component/antd/variable/index.md

@@ -25,17 +25,21 @@ import type { DefaultOptionType } from 'antd/lib/cascader';
 
 ### 自定义编辑组件
 
-自定义传入children
+自定义常量编辑器为日期选择器
 
 <code src="./demos/demo4.tsx"></code>
 
 ## `Variable.TextArea`
+
+显示变量名称
+
 ```ts
-export type VariableTextAreaProps = {
+import type { DefaultOptionType } from 'antd/lib/cascader';
+
+ type VariableTextAreaProps = {
   value?: string;
   scope?: Partial<DefaultOptionType>[] | (() => Partial<DefaultOptionType>[]);
   onChange: (value: string, optionPath?: any[]) => void;
-  children?: any;
   changeOnSelect?: boolean;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -47,6 +51,25 @@ export type VariableTextAreaProps = {
 
 <code src="./demos/demo2.tsx"></code>
 
+## `Variable.RawTextArea`
+
+```ts
+import type { DefaultOptionType } from 'antd/lib/cascader';
+type VariableRawTextAreaProps = {
+  value?: string;
+  scope?: Partial<DefaultOptionType>[] | (() => Partial<DefaultOptionType>[]);
+  onChange: (value: string, optionPath?: any[]) => void;
+  changeOnSelect?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  buttonClass?: string;
+  component: any;
+  fieldNames?: CascaderProps['fieldNames'];
+};
+
+```
+<code src="./demos/demo5.tsx"></code>
+
 ## `Variable.JSON`
 
 <code src="./demos/demo3.tsx"></code>