From b885fb692881161b87c4af114449b51eacc183e4 Mon Sep 17 00:00:00 2001 From: yangpei <2517625275@qq.com> Date: Tue, 19 Jan 2021 18:22:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9&?= =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/{form => schemaForm}/index.tsx | 24 +++--- .../settingBar/components/checkbox/index.tsx | 1 - .../settingBar/components/json/index.less | 7 ++ .../mods/settingBar/components/json/index.tsx | 10 ++- .../mods/settingBar/components/json/json.ts | 78 ++++++++++--------- 5 files changed, 67 insertions(+), 53 deletions(-) rename packages/core/src/components/{form => schemaForm}/index.tsx (85%) create mode 100644 packages/core/src/mods/settingBar/components/json/index.less diff --git a/packages/core/src/components/form/index.tsx b/packages/core/src/components/schemaForm/index.tsx similarity index 85% rename from packages/core/src/components/form/index.tsx rename to packages/core/src/components/schemaForm/index.tsx index 9e4505f..56f21dd 100644 --- a/packages/core/src/components/form/index.tsx +++ b/packages/core/src/components/schemaForm/index.tsx @@ -12,23 +12,21 @@ interface INum { interface IProps { schema: { - schema: { - type: string, - properties: { [key: string]: any } - } + type: string, + properties: { [key: string]: any } } } -const MyForm: React.FC = (props) => { - const layout = { - labelCol: { span: 6 }, - wrapperCol: { span: 18 } - }; +const formLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 18 } +}; +const SchemaForm: React.FC = (props) => { return ( -
- {props.schema?.schema?.properties && Object.keys(props.schema.schema.properties).map((key: string) => { - const obj = props.schema.schema.properties[key] + + {props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => { + const obj = props.schema.properties[key] const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { return { label: item, value: obj.enumNames[idx] } }) : [] @@ -88,4 +86,4 @@ const MyForm: React.FC = (props) => { ); }; -export default MyForm +export default SchemaForm diff --git a/packages/core/src/mods/settingBar/components/checkbox/index.tsx b/packages/core/src/mods/settingBar/components/checkbox/index.tsx index f42d670..6fc89c7 100644 --- a/packages/core/src/mods/settingBar/components/checkbox/index.tsx +++ b/packages/core/src/mods/settingBar/components/checkbox/index.tsx @@ -18,7 +18,6 @@ interface IProps { const Checkbox: React.FC = (props) => { const { name, title, value, disabled, onValueChange } = props; const onChange = (evt: CheckboxChangeEvent): void => { - console.log(evt.target.checked); if (evt.target.checked !== value) { onValueChange(evt.target.checked); } diff --git a/packages/core/src/mods/settingBar/components/json/index.less b/packages/core/src/mods/settingBar/components/json/index.less new file mode 100644 index 0000000..ca29c6f --- /dev/null +++ b/packages/core/src/mods/settingBar/components/json/index.less @@ -0,0 +1,7 @@ +.ant-card-bordered{ + border:none; +} +.ant-card-head{ + border:none; + height:35px; +} diff --git a/packages/core/src/mods/settingBar/components/json/index.tsx b/packages/core/src/mods/settingBar/components/json/index.tsx index 0dd661c..3dfa461 100644 --- a/packages/core/src/mods/settingBar/components/json/index.tsx +++ b/packages/core/src/mods/settingBar/components/json/index.tsx @@ -4,11 +4,11 @@ import 'antd/es/modal/style'; import 'antd/es/button/style'; import 'antd/es/message/style'; import JsonView from 'react-json-view'; -import { Button, Tabs, Modal, message, Card } from 'antd'; +import { Button, Tabs, Modal, Card } from 'antd'; const { TabPane } = Tabs; import { safeParse } from '../../../../utils'; import CodeEditor from '../../../../components/codeEditor'; -import MyForm from '../../../../components/form' +import SchemaForm from '../../../../components/schemaForm' import { compData } from './json' import styles from './index.module.less'; @@ -53,7 +53,7 @@ const Json: React.FC = (props) => { />} {/* @ts-ignore */} - {isConfig && } + {isConfig && } = (props) => { if (JSON.stringify(JSON.parse(json)) === '{}') { // @ts-ignore const value = formRef.current && formRef.current.getValue() - props.changeSchema(value) + console.log(value.schema) + props.changeSchema(value.schema) setJson(value) } else { + console.log(JSON.parse(json)) props.changeSchema(JSON.parse(json)) } } else { diff --git a/packages/core/src/mods/settingBar/components/json/json.ts b/packages/core/src/mods/settingBar/components/json/json.ts index 0687b9a..eb9d9d8 100644 --- a/packages/core/src/mods/settingBar/components/json/json.ts +++ b/packages/core/src/mods/settingBar/components/json/json.ts @@ -1,35 +1,38 @@ const compData = [ { - "text": '输入框', + "text": 'Input', "name": 'input', "schema": { - "title": "输入框", - "type": "string" + "title": "Input", + "type": "string", + "description": "输入框" } }, { - "text": '编辑框', + "text": 'Textarea', "name": 'textarea', "schema": { - "title": "编辑框", + "title": "Textarea", "type": "string", - "format": "textarea" + "format": "textarea", + "description": "文本编辑框" } }, { - "text": '开关控制', + "text": 'Switch', "name": 'allBoolean', "schema": { - "title": "开关控制", + "title": "Switch", "type": "boolean", - "ui:widget": "switch" + "ui:widget": "switch", + "description": "开关控制" } }, { - "text": '下拉单选', + "text": 'Select', "name": 'select', "schema": { - "title": "下拉单选", + "title": "Select", "type": "string", "enum": [ "a", @@ -40,14 +43,15 @@ const compData = [ "早", "中", "晚" - ] + ], + "description": "下拉单选" } }, { - "text": '点击单选', - "name": 'select', + "text": 'Radio', + "name": 'radio', "schema": { - "title": "点击单选", + "title": "Radio", "type": "string", "enum": [ "a", @@ -59,15 +63,16 @@ const compData = [ "中", "晚" ], - "ui:widget": "radio" + "ui:widget": "radio", + "description": "点击单选" } }, { - "text": '下拉多选', + "text": 'MultiSelect', "name": 'multiSelect', "schema": { - "title": "下拉多选", - "description": "可以选择多项", + "title": "MultiSelect", + "description": "下拉多选", "type": "array", "items": { "type": "string" @@ -88,11 +93,11 @@ const compData = [ } }, { - "text": '点击多选', + "text": 'Checkbox', "name": 'checkbox', "schema": { - "title": "多选", - "description": "可以勾选多个", + "title": "Checkbox", + "description": "点击多选", "type": "array", "items": { "type": "string" @@ -112,30 +117,33 @@ const compData = [ } }, { - "text": '时间选择', + "text": 'TimePicker', "name": 'timeSelect', "schema": { - "title": "时间选择", + "title": "TimePicker", "type": "string", - "format": "time" + "format": "time", + "description": "时间选择" } }, { - "text": '日期范围', - "name": 'dateRangeSelect', + "text": 'DatePicker', + "name": 'dateSelect', "schema": { - "title": "日期范围", - "type": "range", - "format": "date" + "title": "DatePicker", + "type": "string", + "format": "date", + "description": "日期选择" } }, { - "text": '日期选择', - "name": 'dateSelect', + "text": 'DateRange', + "name": 'dateRangeSelect', "schema": { - "title": "日期选择", - "type": "string", - "format": "date" + "title": "DateRange", + "type": "range", + "format": "date", + "description": "日期范围选择" } } ]