fix: playground up and running

Author: vip-git

src/FieldSet/FieldSet.jsx

@@ -25,7 +25,7 @@ export const FieldSetContent = withStyles(fieldSetStyles.fieldSetContent)(RawFie
 
 // for unit testing
 export class RawFieldSet extends React.Component {
-  shouldComponentUpdate = (nextProps) => !isEqual(this.props.data, nextProps.data)
+  shouldComponentUpdate = (nextProps) => !isEqual(this.props, nextProps)
 
   render() {
     const { className, path, classes, schema = {}, hideTitle, idxKey } = this.props;

src/FormField.jsx

@@ -8,7 +8,7 @@ import styles from './form-field-styles';
 
 // exported for unit testing
 export class RawFormField extends React.Component {
-  shouldComponentUpdate = (nextProps) => !isEqual(this.props.data, nextProps.data)
+  shouldComponentUpdate = (nextProps) => !isEqual(this.props, nextProps)
 
   render() {
     const { classes, schema, data, uiSchema = {}, onChange, onKeyDown, path, ...rest } = this.props;

src/ValidationMessages.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import Alert from '@material-ui/lab/Alert';
 import { withStyles } from '@material-ui/core/styles';
 import keys from 'lodash/keys';
 import filter from 'lodash/filter';
 
 const validationStyles = {};
 
 const Validation = ({ validation }) => (
-  <div>
-    <p>{validation.message}</p>
+  <div style={{ marginBottom: 20 }}>
+    <Alert severity='error'>{validation.message}</Alert>
   </div>
 );
 

src/demo/body/Example.jsx

@@ -93,6 +93,15 @@ class Example extends React.Component {
     };
   }
 
+  UNSAFE_componentWillReceiveProps = (nextProps) => {
+    const { data: { schema, uiSchema, formData } } = nextProps;
+    this.setState({
+      schema, 
+      uiSchema, 
+      formData,
+    });
+  }
+
   onChange = (type) => (value) => {
     this.setState({ [type]: value });
   }
@@ -118,7 +127,7 @@ class Example extends React.Component {
   }
 
   render() {
-    const { data: { schema: givenSchema, uiSchema: givenUISchema, formData: givenFormData, title }, classes } = this.props;
+    const { data: { title }, classes } = this.props;
     const { schema, uiSchema, formData } = this.state;
     return (
       <Paper className={classes.root}>
@@ -132,10 +141,10 @@ class Example extends React.Component {
             onChange={this.onChange}
           />
           <div className={classes.display}>
-            <FormComponent 
-              schema={givenSchema}
-              uiSchema={givenUISchema}
-              formData={givenFormData}
+            <FormComponent
+              schema={schema}
+              uiSchema={uiSchema}
+              formData={formData}
               onCancel={this.onCancel}
               onSubmit={this.onSubmit}
               onUpload={this.onUpload}

src/demo/body/Source.jsx

@@ -29,28 +29,32 @@ class Source extends React.Component {
       valid: isValid(source),
     };
   }
+
   UNSAFE_componentWillReceiveProps = (nextProps) => {
     const source = JSON.stringify(nextProps.source, null, 2);
     this.setState({
       source,
       valid: isValid(source),
     });
   }
+
   onChange = (newValue) => {
     this.setState({ source: newValue });
   }
+
   onBeforeChange = (editor, data, value) => {
-    // const { onChange } = this.props;
-    // const parsed = isValid(value);
+    const { onChange } = this.props;
+    const parsed = isValid(editor);
 
-    // this.setState({
-    //   valid: parsed,
-    //   source: value,
-    // });
-    // if (parsed && onChange) {
-    //   onChange(parsed);
-    // }
+    this.setState({
+      valid: parsed,
+      source: editor,
+    });
+    if (parsed && onChange) {
+      onChange(parsed);
+    }
   }
+
   render() {
     const { source, valid } = this.state;
     const { classes, title } = this.props;
@@ -59,7 +63,7 @@ class Source extends React.Component {
       <div className={classes.root}>
         <div className={classNames(classes.ctr, { [classes.invalid]: !valid })}>
           <div>
-            {/* <Icon fontSize className={classes.icon} /> */}
+            <Icon fontSize={'default'} className={classes.icon} />
             <div className={classes.title}>
               <p>{title}</p>
             </div>
@@ -68,13 +72,14 @@ class Source extends React.Component {
             <AceEditor
               mode='json'
               theme='textmate'
-              value={this.state.source}
-              onChange={this.onChange}
+              value={source}
+              onChange={this.onBeforeChange}
               name='ace_editor_1'
               editorProps={{ $blockScrolling: true }}
               showPrintMargin
               showGutter
               highlightActiveLine
+              width={title === 'JSONSchema' ? '100%' : 500}
               setOptions={{
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true,

src/demo/body/editor-styles.js

@@ -27,7 +27,6 @@ export default theme => ({
   },
 
   'icon': {
-    fontSize: '80%',
     marginLeft: theme.spacing(2),
   },
   'title': {

src/fields/ConfiguredField.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
@@ -10,7 +11,7 @@ import fieldStyles from './field-styles';
 
 // for unit testing only
 export class RawConfiguredField extends React.Component {
-  shouldComponentUpdate = nextProps => this.props.data !== nextProps.data
+  shouldComponentUpdate = (nextProps) => !isEqual(this.props, nextProps)
   render() {
     const {
 			classes = {},
@@ -73,11 +74,11 @@ export class RawConfiguredField extends React.Component {
 					className={className && classes[className]}
 					value={data}
 					type={type}
-					error={hasError && true || false}
+					error={hasError && true || undefined}
 					{...componentProps}
 				/>
 				{helpText && !isCustomComponent && (
-					<FormHelperText error={hasInlineError && true || false} id={`${id}-help`}>{helpText}</FormHelperText>
+					<FormHelperText error={hasInlineError && true || undefined} id={`${id}-help`}>{helpText}</FormHelperText>
 				)}
 			</FormControl>
 		);