Browse Source

fix: 样式修改&交互优化

master
yangpei 4 years ago
parent
commit
b885fb6928
  1. 24
      packages/core/src/components/schemaForm/index.tsx
  2. 1
      packages/core/src/mods/settingBar/components/checkbox/index.tsx
  3. 7
      packages/core/src/mods/settingBar/components/json/index.less
  4. 10
      packages/core/src/mods/settingBar/components/json/index.tsx
  5. 78
      packages/core/src/mods/settingBar/components/json/json.ts

24
packages/core/src/components/form/index.tsx → 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<IProps> = (props) => {
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
};
const formLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
};
const SchemaForm: React.FC<IProps> = (props) => {
return (
<Form {...layout}>
{props.schema?.schema?.properties && Object.keys(props.schema.schema.properties).map((key: string) => {
const obj = props.schema.schema.properties[key]
<Form {...formLayout}>
{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<IProps> = (props) => {
);
};
export default MyForm
export default SchemaForm

1
packages/core/src/mods/settingBar/components/checkbox/index.tsx

@ -18,7 +18,6 @@ interface IProps {
const Checkbox: React.FC<IProps> = (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);
}

7
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;
}

10
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<IJsonProps> = (props) => {
/>}
{/* @ts-ignore */}
{isConfig && <MyForm schema={schema} />}
{isConfig && <SchemaForm schema={schema} />}
<EditModal
title={title}
@ -129,9 +129,11 @@ const EditModal: React.FC<IEditorModalProps> = (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 {

78
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": "日期范围选择"
}
}
]

Loading…
Cancel
Save