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 { interface IProps {
schema: { schema: {
schema: { type: string,
type: string, properties: { [key: string]: any }
properties: { [key: string]: any }
}
} }
} }
const MyForm: React.FC<IProps> = (props) => { const formLayout = {
const layout = { labelCol: { span: 6 },
labelCol: { span: 6 }, wrapperCol: { span: 18 }
wrapperCol: { span: 18 } };
};
const SchemaForm: React.FC<IProps> = (props) => {
return ( return (
<Form {...layout}> <Form {...formLayout}>
{props.schema?.schema?.properties && Object.keys(props.schema.schema.properties).map((key: string) => { {props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => {
const obj = props.schema.schema.properties[key] const obj = props.schema.properties[key]
const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => {
return { label: item, value: obj.enumNames[idx] } 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 Checkbox: React.FC<IProps> = (props) => {
const { name, title, value, disabled, onValueChange } = props; const { name, title, value, disabled, onValueChange } = props;
const onChange = (evt: CheckboxChangeEvent): void => { const onChange = (evt: CheckboxChangeEvent): void => {
console.log(evt.target.checked);
if (evt.target.checked !== value) { if (evt.target.checked !== value) {
onValueChange(evt.target.checked); 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/button/style';
import 'antd/es/message/style'; import 'antd/es/message/style';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { Button, Tabs, Modal, message, Card } from 'antd'; import { Button, Tabs, Modal, Card } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import { safeParse } from '../../../../utils'; import { safeParse } from '../../../../utils';
import CodeEditor from '../../../../components/codeEditor'; import CodeEditor from '../../../../components/codeEditor';
import MyForm from '../../../../components/form' import SchemaForm from '../../../../components/schemaForm'
import { compData } from './json' import { compData } from './json'
import styles from './index.module.less'; import styles from './index.module.less';
@ -53,7 +53,7 @@ const Json: React.FC<IJsonProps> = (props) => {
/>} />}
{/* @ts-ignore */} {/* @ts-ignore */}
{isConfig && <MyForm schema={schema} />} {isConfig && <SchemaForm schema={schema} />}
<EditModal <EditModal
title={title} title={title}
@ -129,9 +129,11 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
if (JSON.stringify(JSON.parse(json)) === '{}') { if (JSON.stringify(JSON.parse(json)) === '{}') {
// @ts-ignore // @ts-ignore
const value = formRef.current && formRef.current.getValue() const value = formRef.current && formRef.current.getValue()
props.changeSchema(value) console.log(value.schema)
props.changeSchema(value.schema)
setJson(value) setJson(value)
} else { } else {
console.log(JSON.parse(json))
props.changeSchema(JSON.parse(json)) props.changeSchema(JSON.parse(json))
} }
} else { } else {

78
packages/core/src/mods/settingBar/components/json/json.ts

@ -1,35 +1,38 @@
const compData = [ const compData = [
{ {
"text": '输入框', "text": 'Input',
"name": 'input', "name": 'input',
"schema": { "schema": {
"title": "输入框", "title": "Input",
"type": "string" "type": "string",
"description": "输入框"
} }
}, },
{ {
"text": '编辑框', "text": 'Textarea',
"name": 'textarea', "name": 'textarea',
"schema": { "schema": {
"title": "编辑框", "title": "Textarea",
"type": "string", "type": "string",
"format": "textarea" "format": "textarea",
"description": "文本编辑框"
} }
}, },
{ {
"text": '开关控制', "text": 'Switch',
"name": 'allBoolean', "name": 'allBoolean',
"schema": { "schema": {
"title": "开关控制", "title": "Switch",
"type": "boolean", "type": "boolean",
"ui:widget": "switch" "ui:widget": "switch",
"description": "开关控制"
} }
}, },
{ {
"text": '下拉单选', "text": 'Select',
"name": 'select', "name": 'select',
"schema": { "schema": {
"title": "下拉单选", "title": "Select",
"type": "string", "type": "string",
"enum": [ "enum": [
"a", "a",
@ -40,14 +43,15 @@ const compData = [
"早", "早",
"中", "中",
"晚" "晚"
] ],
"description": "下拉单选"
} }
}, },
{ {
"text": '点击单选', "text": 'Radio',
"name": 'select', "name": 'radio',
"schema": { "schema": {
"title": "点击单选", "title": "Radio",
"type": "string", "type": "string",
"enum": [ "enum": [
"a", "a",
@ -59,15 +63,16 @@ const compData = [
"中", "中",
"晚" "晚"
], ],
"ui:widget": "radio" "ui:widget": "radio",
"description": "点击单选"
} }
}, },
{ {
"text": '下拉多选', "text": 'MultiSelect',
"name": 'multiSelect', "name": 'multiSelect',
"schema": { "schema": {
"title": "下拉多选", "title": "MultiSelect",
"description": "可以选择多项", "description": "下拉多选",
"type": "array", "type": "array",
"items": { "items": {
"type": "string" "type": "string"
@ -88,11 +93,11 @@ const compData = [
} }
}, },
{ {
"text": '点击多选', "text": 'Checkbox',
"name": 'checkbox', "name": 'checkbox',
"schema": { "schema": {
"title": "多选", "title": "Checkbox",
"description": "可以勾选多个", "description": "点击多选",
"type": "array", "type": "array",
"items": { "items": {
"type": "string" "type": "string"
@ -112,30 +117,33 @@ const compData = [
} }
}, },
{ {
"text": '时间选择', "text": 'TimePicker',
"name": 'timeSelect', "name": 'timeSelect',
"schema": { "schema": {
"title": "时间选择", "title": "TimePicker",
"type": "string", "type": "string",
"format": "time" "format": "time",
"description": "时间选择"
} }
}, },
{ {
"text": '日期范围', "text": 'DatePicker',
"name": 'dateRangeSelect', "name": 'dateSelect',
"schema": { "schema": {
"title": "日期范围", "title": "DatePicker",
"type": "range", "type": "string",
"format": "date" "format": "date",
"description": "日期选择"
} }
}, },
{ {
"text": '日期选择', "text": 'DateRange',
"name": 'dateSelect', "name": 'dateRangeSelect',
"schema": { "schema": {
"title": "日期选择", "title": "DateRange",
"type": "string", "type": "range",
"format": "date" "format": "date",
"description": "日期范围选择"
} }
} }
] ]

Loading…
Cancel
Save