@@ -1,6 +1,7 @@
import React, { PureComponent, Component } from "react"
import PropTypes from "prop-types"
import { List, fromJS } from "immutable"
import ImPropTypes from "react-immutable-proptypes"
//import "less/json-schema-form"
const noop = ()=> {}
@@ -11,6 +12,7 @@ const JsonSchemaPropShape = {
keyName: PropTypes.any,
fn: PropTypes.object.isRequired,
schema: PropTypes.object,
errors: ImPropTypes.list,
required: PropTypes.bool,
description: PropTypes.any
}
@@ -20,7 +22,8 @@ const JsonSchemaDefaultProps = {
onChange: noop,
schema: {},
keyName: "",
required: false
required: false,
errors: List()
}
export class JsonSchemaForm extends Component {
@@ -29,7 +32,7 @@ export class JsonSchemaForm extends Component {
static defaultProps = JsonSchemaDefaultProps
render() {
let { schema, value, onChange, getComponent, fn } = this.props
let { schema, errors, value, onChange, getComponent, fn } = this.props
if(schema.toJS)
schema = schema.toJS()
@@ -37,7 +40,7 @@ export class JsonSchemaForm extends Component {
let { type, format="" } = schema
let Comp = (format ? getComponent(`JsonSchema_${type}_${format}`) : getComponent(`JsonSchema_${type}`)) || getComponent("JsonSchema_string")
return <Comp { ...this.props } fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema}/>
return <Comp { ...this.props } errors={errors} fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema}/>
}
}
@@ -51,14 +54,15 @@ export class JsonSchema_string extends Component {
}
onEnumChange = (val) => this.props.onChange(val)
render() {
let { getComponent, value, schema, required, description } = this.props
let { getComponent, value, schema, errors, required, description } = this.props
let enumValue = schema["enum"]
let errors = schema.errors || []
errors = errors.toJS ? errors.toJS() : []
if ( enumValue ) {
const Select = getComponent("Select")
return (<Select className={ errors.length ? "invalid" : ""}
title={ errors.length ? errors : ""}
title={ errors.length ? errors : ""}
allowedValues={ enumValue }
value={ value }
allowEmptyValue={ !required }
@@ -70,14 +74,14 @@ export class JsonSchema_string extends Component {
if (schema["type"] === "file") {
return (<Input type="file"
className={ errors.length ? "invalid" : ""}
title={ errors.length ? errors : ""}
title={ errors.length ? errors : ""}
onChange={ this.onChange }
disabled={isDisabled}/>)
}
else {
return (<Input type={ schema.format === "password" ? "password" : "text" }
className={ errors.length ? "invalid" : ""}
title={ errors.length ? errors : ""}
title={ errors.length ? errors : ""}
value={value}
placeholder={description}
onChange={ this.onChange }
@@ -131,9 +135,10 @@ export class JsonSchema_array extends PureComponent {
}
render() {
let { getComponent, required, schema, fn } = this.props
let { getComponent, required, schema, errors, fn } = this.props
errors = errors.toJS ? errors.toJS() : []
let errors = schema.errors || []
let itemSchema = fn.inferSchema(schema.items)
const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -145,7 +150,7 @@ export class JsonSchema_array extends PureComponent {
if ( enumValue ) {
const Select = getComponent("Select")
return (<Select className={ errors.length ? "invalid" : ""}
title={ errors.length ? errors : ""}
title={ errors.length ? errors : ""}
multiple={ true }
value={ value }
allowedValues={ enumValue }
@@ -160,7 +165,7 @@ export class JsonSchema_array extends PureComponent {
let schema = Object.assign({}, itemSchema)
if ( errors.length ) {
let err = errors.filter((err) => err.index === i)
if (err.length) schema. errors = [ err[0].error + i ]
if (err.length) errors = [ err[0].error + i ]
}
return (
<div key={i} className="json-schema-form-item">
@@ -182,12 +187,13 @@ export class JsonSchema_boolean extends Component {
onEnumChange = (val) => this.props.onChange(val)
render() {
let { getComponent, value, schema } = this.props
let errors = schema.errors || []
let { getComponent, value, errors, schema } = this.props
errors = errors.toJS ? errors.toJS() : []
const Select = getComponent("Select")
return (<Select className={ errors.length ? "invalid" : ""}
title={ errors.length ? errors : ""}
title={ errors.length ? errors : ""}
value={ String(value) }
allowedValues={ fromJS(schema.enum || ["true", "false"]) }
allowEmptyValue={ !this.props.required }