From ad2a14bad2acfeda09c0cf80cb1432d062ba4616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E6=96=87=E9=9B=84?= Date: Sun, 27 Oct 2019 23:06:28 +0800 Subject: [PATCH] fix: array schema init bug --- examples/adv-interaction-expressin/index.js | 22 ++++ examples/array/index.js | 30 ++++++ examples/index.js | 27 +++-- examples/index.scss | 4 +- examples/object-and-array/index.js | 75 ++++++++++++++ examples/simple-case/index.js | 62 +----------- examples/tabs/index.js | 106 ++++++++++++++++++++ src/array-schema-form/index.js | 14 ++- src/index.js | 19 +--- src/object-schema-form/index.js | 15 ++- 10 files changed, 282 insertions(+), 92 deletions(-) create mode 100644 examples/adv-interaction-expressin/index.js create mode 100644 examples/array/index.js create mode 100644 examples/object-and-array/index.js create mode 100644 examples/tabs/index.js diff --git a/examples/adv-interaction-expressin/index.js b/examples/adv-interaction-expressin/index.js new file mode 100644 index 0000000..4fac5e1 --- /dev/null +++ b/examples/adv-interaction-expressin/index.js @@ -0,0 +1,22 @@ +export default { + type: "object", + required: ['name'], + properties: { + enable: { + title: 'Enable', + type: "boolean", + description: "Enable", + default: false + }, + email: { + title: "Email", + type: "string", + enum: ["aa@qq.com", "zz@xx.com"], + ui: { + hander: "record.enable === true && (schema.ui.hide = false)", + hide: true + } + } + + } +} \ No newline at end of file diff --git a/examples/array/index.js b/examples/array/index.js new file mode 100644 index 0000000..8983d58 --- /dev/null +++ b/examples/array/index.js @@ -0,0 +1,30 @@ +export default { + type: "array", + title: "Array", + items: { + type: "object", + advFields: ['code'], + properties: { + dataIndex: { + type: "string", + title: 'Field', + pattern: "[0-9]+" + }, + title: { + type: "string", + title: 'Title' + }, + enable: { + type: "boolean", + title: 'Enable' + }, + code: { + type: "string", + title: "Script", + ui: { + type: 'CodeEditor' + } + } + } + } +} \ No newline at end of file diff --git a/examples/index.js b/examples/index.js index 269a6a0..2c3516a 100644 --- a/examples/index.js +++ b/examples/index.js @@ -6,18 +6,23 @@ import simple from './simple-case' import {Select} from 'antd' import AceEditor from '../src/widgets/ace-editor' import './index.scss' +import advInteractionExpression from './adv-interaction-expressin' const schema = { - simple + simple, + array: require('./array').default, + tabs: require('./tabs').default, + objectAndArray: require('./object-and-array').default, + advInteractionExpression: advInteractionExpression, } - +const defaultName = 'simple' export default class App extends React.PureComponent { state = { - data: {}, - selectValue: 'simple', - jsonSchema: JSON.stringify(schema.simple,null,2) + data: schema[defaultName].type === 'object' ?{} : [], + selectValue: defaultName, + jsonSchema: JSON.stringify(schema[defaultName],null,2) }; onChange =(value)=>{ @@ -29,10 +34,12 @@ export default class App extends React.PureComponent { render(){ return
- {{ this.setState({ - selectValue: e.target.value, - jsonSchema: schema[e.target.value] + selectValue: v, + jsonSchema: JSON.stringify(schema[v],null,2), + data: schema[v].type === 'array' ? [] : {} }) }}> {Object.keys(schema).map(key=>{ @@ -54,7 +61,7 @@ export default class App extends React.PureComponent {

Form-Data

-
+

FORM

{this.renderSchema(JSON.parse(this.state.jsonSchema))}
@@ -64,7 +71,7 @@ export default class App extends React.PureComponent { renderSchema (data) { return ( - + ); } } diff --git a/examples/index.scss b/examples/index.scss index 2c8faac..51a2cd6 100644 --- a/examples/index.scss +++ b/examples/index.scss @@ -1,6 +1,8 @@ .container{ .header-box{ - + height: 40px; + line-height: 40px; + margin-bottom: 10px; } .body-box{ diff --git a/examples/object-and-array/index.js b/examples/object-and-array/index.js new file mode 100644 index 0000000..6a54833 --- /dev/null +++ b/examples/object-and-array/index.js @@ -0,0 +1,75 @@ +export default { + type: "object", + required: ['name'], + properties: { + name: { + title: 'User', + type: "string", + description: "zzzzzz", + pattern: "[0-9]+" + }, + email: { + title: "Email", + type: "string", + enum: ["aa@qq.com", "zz@xx.com"] + }, + script: { + type: "string", + title: "JsScript", + ui: { + type: 'CodeEditor' + } + }, + number: { + title: 'Number', + type: 'number', + default: 10 + }, + testObject: { + title: 'testObject', + type: 'object', + properties: { + name: { + title: 'xxxx', + type: "string", + description: "xxxxxxx" + }, + email: { + title: "yyyy", + type: "string" + }, + } + }, + xx: { + type: "array", + title: "TableConifg", + items: { + type: "object", + advFields: ['code'], + properties: { + dataIndex: { + type: "string", + title: 'Field', + pattern: "[0-9]+" + }, + title: { + type: "string", + title: 'Title' + }, + enable: { + type: "boolean", + title: 'Enable' + }, + code: { + type: "string", + title: "Script", + ui: { + type: 'CodeEditor' + } + } + } + } + }, + + } +} \ No newline at end of file diff --git a/examples/simple-case/index.js b/examples/simple-case/index.js index 33f3375..c5ecd39 100644 --- a/examples/simple-case/index.js +++ b/examples/simple-case/index.js @@ -40,67 +40,7 @@ export default { }, } }, - xx: { - type: "array", - title: "TableConifg", - items: { - type: "object", - advFields: ['code'], - properties: { - dataIndex: { - type: "string", - title: 'Field', - pattern: "[0-9]+" - }, - title: { - type: "string", - title: 'Title' - }, - enable: { - type: "boolean", - title: 'Enable' - }, - code: { - type: "string", - title: "Script", - ui: { - type: 'CodeEditor' - } - } - } - } - }, - tabTest: { - type: "array", - title: "", - categoryName: "newTab", - items: { - type: "object", - advFields: ['code'], - properties: { - dataIndex: { - type: "string", - title: 'Field', - pattern: "[0-9]+" - }, - title: { - type: "string", - title: 'Title' - }, - enable: { - type: "boolean", - title: 'Enable' - }, - code: { - type: "string", - title: "Script", - ui: { - type: 'CodeEditor' - } - } - } - } - } + } } \ No newline at end of file diff --git a/examples/tabs/index.js b/examples/tabs/index.js new file mode 100644 index 0000000..33f3375 --- /dev/null +++ b/examples/tabs/index.js @@ -0,0 +1,106 @@ +export default { + type: "object", + required: ['name'], + properties: { + name: { + title: 'User', + type: "string", + description: "zzzzzz", + pattern: "[0-9]+" + }, + email: { + title: "Email", + type: "string", + enum: ["aa@qq.com", "zz@xx.com"] + }, + script: { + type: "string", + title: "JsScript", + ui: { + type: 'CodeEditor' + } + }, + number: { + title: 'Number', + type: 'number', + default: 10 + }, + testObject: { + title: 'testObject', + type: 'object', + properties: { + name: { + title: 'xxxx', + type: "string", + description: "xxxxxxx" + }, + email: { + title: "yyyy", + type: "string" + }, + } + }, + xx: { + type: "array", + title: "TableConifg", + items: { + type: "object", + advFields: ['code'], + properties: { + dataIndex: { + type: "string", + title: 'Field', + pattern: "[0-9]+" + }, + title: { + type: "string", + title: 'Title' + }, + enable: { + type: "boolean", + title: 'Enable' + }, + code: { + type: "string", + title: "Script", + ui: { + type: 'CodeEditor' + } + } + } + } + }, + + tabTest: { + type: "array", + title: "", + categoryName: "newTab", + items: { + type: "object", + advFields: ['code'], + properties: { + dataIndex: { + type: "string", + title: 'Field', + pattern: "[0-9]+" + }, + title: { + type: "string", + title: 'Title' + }, + enable: { + type: "boolean", + title: 'Enable' + }, + code: { + type: "string", + title: "Script", + ui: { + type: 'CodeEditor' + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/array-schema-form/index.js b/src/array-schema-form/index.js index 1b04d76..4bbc961 100644 --- a/src/array-schema-form/index.js +++ b/src/array-schema-form/index.js @@ -94,6 +94,12 @@ export default class ArrayFieldForm extends React.PureComponent { modalVisible: false, fastEditModalVisible: false }; + + const {__context, dataPath, value} = this.props; + const {setValueByPath} = __context; + if(!value || !Array.isArray(value)){ + setValueByPath([...dataPath], []) + } } static propTypes = { @@ -107,7 +113,6 @@ export default class ArrayFieldForm extends React.PureComponent { static defaultProps = { dataPath: [], - value: [] } handleChange = (key, index) => e => { @@ -134,8 +139,8 @@ export default class ArrayFieldForm extends React.PureComponent { if(!data){ const {__context, dataPath} = this.props; const {setValueByPath} = __context; - const paths = [...dataPath] - setValueByPath(paths, [{}]) + const paths = [...dataPath, 0] + setValueByPath(paths, {}) } } @@ -419,6 +424,9 @@ export default class ArrayFieldForm extends React.PureComponent { render () { const {uniqueField, schema, value = []} = this.props; + if(!Array.isArray(value)){ + return null; + } const columns = this.getColumns (schema); return (
diff --git a/src/index.js b/src/index.js index 9d4a411..1f603c0 100644 --- a/src/index.js +++ b/src/index.js @@ -31,19 +31,12 @@ function setData(state, keys, value) { } -function getParentKeys(keys) { - if (keys.length === 1) return []; - let arr = [].concat(keys); - arr.splice(keys.length - 1, 1); - return arr; -} - export default class JsonSchemaForm extends React.PureComponent { constructor (props) { super (props); this.state = { store: { - value: props.value || {}, + value: props.value, validateResult: [], }, changeStore: this.changeStore, @@ -56,7 +49,7 @@ export default class JsonSchemaForm extends React.PureComponent { static propTypes = { schema: PropTypes.object, - value: PropTypes.object, + value: PropTypes.any, onChange: PropTypes.func, dataPath: PropTypes.array, onBlur: PropTypes.func, @@ -88,12 +81,8 @@ export default class JsonSchemaForm extends React.PureComponent { setValueByPath =(paths, value)=>{ this.changeStore((store=>{ - if(paths.length > 1){ - const parentPaths = getParentKeys(paths); - const data = getData(this.state.store.value, parentPaths) - if(!data || typeof data !== 'object'){ - setData(store.value, parentPaths, {}) - } + if(paths.length === 0){ + return store.value = value; } setData(store.value, paths, value) })) diff --git a/src/object-schema-form/index.js b/src/object-schema-form/index.js index e074b79..d128650 100644 --- a/src/object-schema-form/index.js +++ b/src/object-schema-form/index.js @@ -25,11 +25,19 @@ export default class _ObjectSchemaForm extends React.PureComponent{ } static defaultProps = { - value: {}, dataPath: [], schemaPath: [] } + constructor(props){ + super(props) + const {__context, dataPath} = this.props; + const {setValueByPath} = __context; + if(!this.props.value){ + setValueByPath([...dataPath], {}) + } + } + handleChange = (key)=> (e)=>{ let value = e; if ( @@ -85,7 +93,10 @@ export default class _ObjectSchemaForm extends React.PureComponent{ } render(){ - const {schema} = this.props; + const {schema, value} = this.props; + if(!value){ + return null; + } const mulitSchems = this.getMulitSchema(schema); const keys = Object.keys(mulitSchems); return