refactor: split render method of components in attributes form

.umirc.ts

@@ -99,6 +99,7 @@ const config: IConfig = {
         path: '/drip-table-generator/functions',
         children: [
           '/drip-table-generator/functions/index.md',
+          '/drip-table-generator/functions/refs.md',
           '/drip-table-generator/functions/usage-pro.md',
           '/drip-table-generator/functions/custom.md',
           '/drip-table-generator/functions/api.md',

docs/drip-table-generator/faq.md

@@ -9,3 +9,11 @@ title: 常见问题
 
 可以，`<DripTableGenerator />` 添加 `customComponentPanel` 和 `customComponent` 属性即可。
 其中，`customComponentPanel` 传入自定义组件的属性配置等配置信息，`customComponent` 属性传入自定义组。
+
+### 2、使用时样式错乱该如何解决？
+
+首先排查一下是否未安装 `antd`、`drip-table` 和 `drip-table-driver-antd`，然后，查看一下组件是否引入了对应的样式文件。
+
+### 3、安装后运行项目报错： `ReferenceError: Buffer is not defined`，如何解决？
+
+建议查看一下是否是因为本地项目使用了 `webpack5`， `drip-table` 暂时不支持 `webpack5`，后续会出相应的迁移办法。

docs/drip-table-generator/functions/api.md

@@ -40,7 +40,7 @@ title: API
 | name             | 属性名 | `string`                               | -       | 否   |
 | required             | 属性是否必填 | `boolean`                               | `false`       | 否   |
 | ui:title             | 属性标题 | `string`                               | -       | 是   |
-| ui:type             | 属性组件类型, 默认属性组件类型包括：`input`、 `text`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `render-html`、 `custom::ArrayComponent`。当组件类型为 `custom::` 开头时可以通过`ui:externalComponent` 属性传入外部组件。 | `string`                               | -       | 是   |
+| ui:type             | 属性组件类型, 默认属性组件类型包括：`input`、 `text`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `render-html`、 `array-list`、 `color-picker`。当组件类型为 `custom::` 开头时可以通过`ui:externalComponent` 属性传入外部组件。 | `string`                               | -       | 是   |
 | ui:externalComponent             | 外部组件 | `React.ComponentClass \| React.FunctionComponent`                               | -       | 否   |
 | ui:props             | 属性组件的属性 | `Record`                               | -       | 否   |
 | type             | 属性数据类型 | `string`                               | -       | 否   |

docs/drip-table-generator/functions/custom.md

@@ -39,7 +39,7 @@ title: 定制化面板
 - 类型: `string`
 - 默认值: `无`
 
-    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `custom::ArrayComponent`。
+    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `array-list`。
 
     当组件类型为 `custom::` 开头时可以通过 `ui:externalComponent` 属性传入外部组件。
 
@@ -57,7 +57,7 @@ title: 定制化面板
 
     * 具体属性同 `antd` 组件，具体详见 `antd` 官网。
     * `code-editor` 暂无属性。
-    * `custom::ArrayComponent` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
+    * `array-list` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
 
 #### type
 - 描述: `属性数据类型`
@@ -199,7 +199,7 @@ title: 定制化面板
 - 类型: `string`
 - 默认值: `无`
 
-    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `custom::ArrayComponent`。
+    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `array-list`。
 
     当组件类型为 `custom::` 开头时可以通过 `ui:externalComponent` 属性传入外部组件。
 
@@ -217,7 +217,7 @@ title: 定制化面板
 
     * 具体属性同 `antd` 组件，具体详见 `antd` 官网。
     * `code-editor` 暂无属性。
-    * `custom::ArrayComponent` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
+    * `array-list` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
 
 #### attrSchema.type
 - 描述: `属性数据类型`

docs/drip-table-generator/functions/refs.md

@@ -0,0 +1,100 @@
+---
+order: 1
+title: Refs引用
+---
+
+# Refs引用
+
+> 引用实例，利用 `refs` 引用可以在外部主动获取 `drip-table-generator` 的状态以及配置信息。
+
+## 一、获取编辑器实例
+
+利用 `react` 的 `refs` 属性可以获取表格编辑器内部开放的状态和函数从而获取 `drip-table-generator` 状态
+
+> hook写法
+
+```js
+const generator = useRef(null);
+```
+
+> component 写法:
+```js
+const generator = React.createRef();
+
+<DripTableGenerator refs={generator}>
+```
+
+## 二、开放函数
+
+### getSchemaValue
+- 描述: `获取最新的列表配置信息`
+- 类型: `function(): DripTableSchema`
+- 返回值: `DripTableSchema`
+主动调用 `drip-table-generator` 实例的 `getSchemaValue` 函数可以从组件外部获得当前用户配置好的列表 `JSON Schema` 配置。
+
+### getDataSource
+- 描述: `获取最新的列表数据信息`
+- 类型: `function(): Record<string, unknown>[]`
+- 返回值: `Record<string, unknown>[]`
+主动调用 `drip-table-generator` 实例的 `getDataSource` 函数可以从组件外部获得当前用户配置的表格数据。
+
+
+## 三、代码演示
+
+```tsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ * hideActions: ["CSB"]
+ */
+import React from 'react';
+import { DripTableSchema } from 'drip-table';
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
+import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator';
+import 'antd/dist/antd.css';
+import 'drip-table-generator/index.css';
+
+const { Row, Col, Button, message } = DripTableDriverAntDesign.components;
+
+const Demo = () => {
+  const generator: React.MutableRefObject<DripTableGeneratorHandler | null> = React.useRef(null);
+
+  const getSchemaValue = () => {
+    const value = generator.current?.getSchemaValue();
+    const aux = document.createElement('input');
+    aux.setAttribute('value', value ? JSON.stringify(value) : '');
+    document.body.append(aux);
+    aux.select();
+    document.execCommand('copy');
+    aux.remove();
+    message.success('Schema复制成功');
+  }
+
+  const getDataSource = () => {
+    const value = generator.current?.getDataSource();
+    const aux = document.createElement('input');
+    aux.setAttribute('value', value ? JSON.stringify(value) : '');
+    document.body.append(aux);
+    aux.select();
+    document.execCommand('copy');
+    aux.remove();
+    message.success('DataSource复制成功');
+  }
+
+  return (
+    <React.Fragment>
+      <Row style={{ borderBottom: '1px solid #2190ff', padding: '8px 0' }}>
+        <Button type="primary" onClick={getSchemaValue}>获取列表配置</Button>
+        <Button style={{ marginLeft: '12px' }} type="primary" onClick={getDataSource}>获取表格数据</Button>
+      </Row>
+      <DripTableGenerator
+        ref={generator}
+        driver={DripTableDriverAntDesign}
+        dataSource={[]}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```

docs/drip-table-generator/guide/fast-start.md

@@ -11,7 +11,7 @@ title: 快速开始
 
 ### 安装依赖
 
-drip-table-generator 依赖 `antd`、`drip-table` 和 `react`，单独使用不要忘记安装～
+drip-table-generator 依赖 `antd`、`drip-table`、 `drip-table-driver-{drivername}` 和 `react`，单独使用不要忘记安装～
 
 > yarn
 
@@ -27,14 +27,18 @@ npm install --save drip-table-generator
 ### 依赖引入
 
 ```js
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
 import DripTableGenerator from 'drip-table-generator';
 import 'drip-table-generator/index.css';
 ```
 
 ### 页面引入
 
 ```js
-<DripTableGenerator />
+<DripTableGenerator
+  driver={DripTableDriverAntDesign}
+  dataSource={[]}
+/>
 ```
 
 ### 代码演示
@@ -46,11 +50,16 @@ import 'drip-table-generator/index.css';
  * hideActions: ["CSB"]
  */
 import React from 'react';
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
 import DripTableGenerator from 'drip-table-generator';
+import 'drip-table-generator/index.css';
 
 const Demo = () => {
   return (
-    <DripTableGenerator />
+    <DripTableGenerator
+      driver={DripTableDriverAntDesign}
+      dataSource={[]}
+    />
   );
 };
 

docs/drip-table-generator/preview/sample.module.less

@@ -1,5 +1,6 @@
 /* stylelint-disable selector-class-pattern */
-.__dumi-default-layout[data-route="/drip-table-generator/preview"] {
+.__dumi-default-layout[data-route="/drip-table-generator/preview"],
+.__dumi-default-layout[data-route="/demo"] {
   padding-top: 64px;
   padding-left: 0;
   padding-right: 0;

docs/drip-table-generator/preview/sample.tsx

@@ -5,13 +5,13 @@
  */
 
 import React from 'react';
-import { Button, Row } from 'antd';
 import { DripTableSchema } from 'drip-table';
 import DripTableDriverAntDesign from 'drip-table-driver-antd';
-import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator';
+import DripTableGenerator from 'drip-table-generator';
 import 'antd/dist/antd.css';
 import 'drip-table-generator/index.css';
 
+import { message } from 'antd';
 import { mockData } from '../../global-configs';
 import components from './component-settings';
 import TextComponent from './TextComponent';
@@ -51,65 +51,17 @@ const initialSchema: DripTableSchema = {
   ],
 };
 
-const Demo = (props: { showHeader: boolean }) => {
-  const generator: React.MutableRefObject<DripTableGeneratorHandler | null> = React.useRef(null);
-
-  const views = {
-    demoHeader: props.showHeader !== false,
-  };
-
-  return (
-    <React.Fragment>
-      { views.demoHeader && (
-        <Row className="sample-header-extra-container">
-          <Button className="header-button" type="primary" onClick={() => { console.log(generator.current?.getSchemaValue()); }}>获取schema</Button>
-          <Button className="header-button" type="primary" onClick={() => { console.log(generator.current?.getDataSource()); }}>获取dataSource</Button>
-        </Row>
-      ) }
-      <DripTableGenerator
-        ref={generator}
-        style={{ height: 640 }}
-        driver={DripTableDriverAntDesign}
-        schema={initialSchema}
-        dataSource={mockData.slice(0, 4)}
-        dataFields={['id', 'name', 'status', 'description', 'ext.state']}
-        onExportSchema={(schema) => { console.log(schema); }}
-        customComponents={{ custom: { TextComponent } }}
-        customComponentPanel={components}
-        customGlobalConfigPanel={[
-          {
-            name: 'bordered',
-            'ui:title': '是否展示边框',
-            'ui:type': 'switch',
-            'ui:props': {},
-            type: 'boolean',
-            default: false,
-          },
-          {
-            name: 'size',
-            'ui:title': '表格尺寸',
-            'ui:type': 'radio',
-            'ui:props': {
-              options: [
-                { label: '大号', value: 'large' },
-                { label: '中等', value: 'middle' },
-                { label: '小号', value: 'small' },
-              ],
-            },
-            type: 'string',
-            default: 'default',
-          },
-          {
-            name: 'tips',
-            'ui:title': '配置说明',
-            'ui:type': 'render-html',
-            type: 'string',
-            default: '<span style="color:red;">这是一段说明</span>',
-          },
-        ]}
-      />
-    </React.Fragment>
-  );
-};
+const Demo = () => (
+  <DripTableGenerator
+    style={{ height: 756 }}
+    driver={DripTableDriverAntDesign}
+    schema={initialSchema}
+    dataSource={mockData.slice(0, 4)}
+    dataFields={['id', 'name', 'status', 'description', 'ext.state']}
+    onExportSchema={(schema) => { message.success('已导出'); }}
+    customComponents={{ custom: { TextComponent } }}
+    customComponentPanel={components}
+  />
+);
 
 export default Demo;

packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { AutoComplete, Select } from 'antd';
+import { StringDataSchema } from 'drip-table';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+type LabeledValue = React.ComponentProps<typeof Select>['options'];
+
+export default class AutoCompleteComponent extends React.PureComponent<Props> {
+  private transform(value: string) {
+    const transform = (this.props.schema as StringDataSchema).transform;
+    if (transform) {
+      transform.forEach((transformType) => {
+        if (transformType === 'trim') {
+          value = value.trim();
+        } else if (transformType === 'toLowerCase') {
+          value = value.toLowerCase();
+        } else if (transformType === 'toUpperCase') {
+          value = value.toUpperCase();
+        }
+      });
+    }
+    return value;
+  }
+
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <AutoComplete
+        value={this.props.value as string}
+        placeholder={uiProps.placeholder as string}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        options={uiProps.options as LabeledValue}
+        onChange={(value) => {
+          const formattedValue = this.transform(value);
+          this.props.onChange?.(formattedValue);
+          if (config.validate) {
+            const res = config.validate(formattedValue);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((message) => {
+                this.props.onValidate?.(message);
+                return message;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}