{
+ public render() {
+ const uiProps = this.props.schema['ui:props'] || {};
+
+ return (
+
+ { this.props.onChange?.(value || ''); }}
+ onValidate={(markers) => {
+ const errorMessages = markers.map(item => item.message).join('\n');
+ this.props.onValidate?.(errorMessages);
+ }}
+ />
+
+ );
+ }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.module.css b/packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.module.css
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.module.css
rename to packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.module.css
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.tsx
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.tsx
rename to packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.tsx
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/index.ts b/packages/drip-table-generator/src/components/CustomForm/components/index.ts
index bbfe9f109..24ba3fe1b 100644
--- a/packages/drip-table-generator/src/components/CustomForm/components/index.ts
+++ b/packages/drip-table-generator/src/components/CustomForm/components/index.ts
@@ -5,10 +5,30 @@
* @modifier : helloqian12138 (johnhello12138@163.com)
* @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
*/
-import ArrayComponent from './ArrayComponent';
-import ColorPicker from './ColorPicker';
+import ArrayComponent from './array-list';
+import ColorPicker from './color-picker';
+import InputComponent from './input';
+import AutoComplete from './auto-complete';
+import TextComponent from './text';
+import Checkbox from './checkbox';
+import RadioComponent from './radio';
+import SwitchComponent from './switch';
+import SelectComponent from './select';
+import InputNumberComponent from './number';
+import CascadeComponent from './cascade';
+import CodeEditorComponent from './code-editor';
export default {
- ArrayComponent,
- ColorPicker,
+ input: InputComponent,
+ text: TextComponent,
+ number: InputNumberComponent,
+ checkbox: Checkbox,
+ radio: RadioComponent,
+ switch: SwitchComponent,
+ select: SelectComponent,
+ cascade: CascadeComponent,
+ 'code-editor': CodeEditorComponent,
+ 'auto-complete': AutoComplete,
+ 'array-list': ArrayComponent,
+ 'color-picker': ColorPicker,
};
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx
new file mode 100644
index 000000000..4c2e221d8
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * 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 { Input } 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;
+}
+
+export default class InputComponent extends React.PureComponent {
+ 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 (
+ {
+ const value = this.transform(e.target.value);
+ this.props.onChange?.(value);
+ if (config.validate) {
+ const res = config.validate(value);
+ (res instanceof Promise ? res : Promise.resolve(res))
+ .then((msg) => {
+ this.props.onValidate?.(msg);
+ return msg;
+ })
+ .catch((error) => { throw error; });
+ }
+ }}
+ />
+ );
+ }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx
new file mode 100644
index 000000000..ff085bd97
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 { InputNumber } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+ schema: DTGComponentPropertySchema;
+ value?: number;
+ onChange?: (value: number) => void;
+ onValidate?: (errorMessage: string) => void;
+}
+
+export default class InputNumberComponent extends React.PureComponent {
+ public render() {
+ const config = this.props.schema;
+ const uiProps = this.props.schema['ui:props'] || {};
+
+ return (
+
+ {...uiProps}
+ max={uiProps.max as number}
+ min={uiProps.min as number}
+ precision={uiProps.precision as number}
+ value={this.props.value}
+ placeholder={uiProps.placeholder as string}
+ disabled={uiProps.disabled as boolean}
+ style={{ width: 420, ...uiProps.style }}
+ onChange={(value) => {
+ this.props.onChange?.(value);
+ if (config.validate) {
+ const res = config.validate(value);
+ (res instanceof Promise ? res : Promise.resolve(res))
+ .then((msg) => {
+ this.props.onValidate?.(msg);
+ return msg;
+ })
+ .catch((error) => { throw error; });
+ }
+ }}
+ />
+ );
+ }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx
new file mode 100644
index 000000000..f7b7a925c
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx
@@ -0,0 +1,59 @@
+/**
+ * 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 { Popover, Radio } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { DTGComponentPropertySchema } from '@/typing';
+import { filterAttributes } from '@/utils';
+
+const RadioGroup = Radio.Group;
+
+ type RadioGroupProps = React.ComponentProps;
+ type RadioValueType = RadioGroupProps['value'];
+ type RadioOptionType = NonNullable[number] & { description?: string };
+
+interface Props {
+ schema: DTGComponentPropertySchema;
+ value?: RadioValueType;
+ onChange?: (value: RadioValueType) => void;
+ onValidate?: (errorMessage: string) => void;
+}
+
+export default class RadioComponent extends React.PureComponent {
+ public render() {
+ const config = this.props.schema;
+ const uiProps = this.props.schema['ui:props'] || {};
+
+ return (
+ {
+ this.props.onChange?.(e.target.value);
+ }}
+ >
+ { (uiProps.options as RadioOptionType[])?.map((option, i) => {
+ if (typeof option === 'string') {
+ option = { label: option, value: option };
+ }
+ return (
+
+ { option.label }
+ { option.description && (
+
+
+
+ ) }
+
+ );
+ }) }
+
+ );
+ }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx
new file mode 100644
index 000000000..c692884a9
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx
@@ -0,0 +1,52 @@
+/**
+ * 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 { Select } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+type SelectProps = React.ComponentProps;
+type SelectValueType = SelectProps['value'];
+type SelectOptionType = NonNullable[number];
+
+interface Props {
+ schema: DTGComponentPropertySchema;
+ value?: SelectValueType;
+ onChange?: (value: SelectValueType) => void;
+ onValidate?: (errorMessage: string) => void;
+}
+
+export default class SelectComponent extends React.PureComponent {
+ private get formattedValue() {
+ const uiProps = this.props.schema['ui:props'] || {};
+ if ((uiProps.mode === 'multiple' || uiProps.mode === 'tags') && !Array.isArray(this.props.value)) {
+ return this.props.value ? [this.props.value] : [];
+ }
+ return this.props.value;
+ }
+
+ public render() {
+ const config = this.props.schema;
+ const uiProps = this.props.schema['ui:props'] || {};
+
+ return (
+