Merge branch 'issue-9'

Author: agustin107

example/src/body/Example.tsx

@@ -30,6 +30,12 @@ class Example extends React.Component<any, any> {
     },
   };
 
+  componentDidCatch() {
+    this.setState({
+      [this.state.backType]: this.state.backSource,
+    });
+  }
+
   componentWillReceiveProps = ({ data }) => {
     this.setState({
       ...data,
@@ -39,6 +45,8 @@ class Example extends React.Component<any, any> {
   onChange = type => value => {
     this.setState({
       [type]: value,
+      backSource: this.state[type],
+      backType: type,
     });
   };
 
@@ -64,7 +72,7 @@ class Example extends React.Component<any, any> {
   render() {
     const { data, classes } = this.props;
     const { title } = data;
-    const { schema, uiSchema, formData, liveSettings } = this.state;
+    const { schema, uiSchema, formData, liveSettings, validate } = this.state;
 
     return (
       <Paper className={classes.root}>
@@ -114,6 +122,7 @@ class Example extends React.Component<any, any> {
                   onChange={this.onFormChanged}
                   liveValidate={liveSettings.validate}
                   disabled={liveSettings.disabled}
+                  validate={validate}
                 >
                   <Box mt={2}>
                     <Button

example/src/body/Source.tsx

@@ -6,20 +6,25 @@ import { Controlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/mode/javascript/javascript';
-// eslint-disable-line
+
 import Valid from '@material-ui/icons/CheckCircle';
 import Invalid from '@material-ui/icons/HighlightOff';
 import { withStyles } from '@material-ui/core/styles';
 
 import sourceStyles from './editor-styles';
 
 const cmOptions = {
-  // mode: { name: 'javascript', json: true },
-  // theme: 'material',
-  smartIndent: true,
+  readOnly: false,
+  viewportMargin: Infinity,
+  mode: {
+    name: 'javascript',
+    json: true,
+    statementIndent: 2,
+  },
   lineNumbers: true,
   lineWrapping: true,
-  readOnly: false,
+  indentWithTabs: false,
+  tabSize: 2,
 };
 
 const isValid = value => {
@@ -62,6 +67,7 @@ class Source extends React.Component<any, any> {
       valid: parsed,
       source: value,
     });
+
     if (parsed && onChange) {
       onChange(parsed);
     }
@@ -71,6 +77,7 @@ class Source extends React.Component<any, any> {
     const { source, valid } = this.state;
     const { classes, title } = this.props;
     const Icon = valid ? Valid : Invalid;
+
     return (
       <div className={classes.root}>
         <div className={classNames(classes.ctr, { [classes.invalid]: !valid })}>
@@ -85,6 +92,7 @@ class Source extends React.Component<any, any> {
               value={source}
               onChange={this.onChange}
               onBeforeChange={this.onBeforeChange}
+              autoCursor={true}
               options={cmOptions}
             />
           </div>

example/src/examples/validation/index.ts

@@ -1,10 +1,12 @@
 import schema from './schema.json';
 import uiSchema from './ui-schema.json';
 import formData from './form-data.json';
+import validate from './validate';
 
-export default ({
+export default {
   title: 'Validation',
   schema,
   uiSchema,
   formData,
-});
+  validate,
+};

example/src/examples/validation/validate.ts

@@ -0,0 +1,11 @@
+import { FormValidation } from 'react-jsonschema-form';
+
+const validate = ({ pass1, pass2 }: any, errors: FormValidation) => {
+  if (pass1 !== pass2) {
+    errors.pass2.addError("Passwords don't match.");
+  }
+
+  return errors;
+};
+
+export default validate;

example/src/menu/Menu.tsx

@@ -25,6 +25,7 @@ class RawMenuAppBar extends React.Component<any, any> {
   render() {
     const { classes, onSelectMenuItem } = this.props;
     const { drawerOpen } = this.state;
+
     return (
       <AppBar position="static" className={classes.toolbar}>
         <Toolbar>

src/Theme/Theme.ts

@@ -5,12 +5,17 @@ import FieldTemplate from '../FieldTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import Widgets from '../Widgets';
 
-const Theme = {
+import { ThemeProps } from 'react-jsonschema-form';
+import { getDefaultRegistry } from 'react-jsonschema-form/lib/utils';
+
+const { fields, widgets } = getDefaultRegistry();
+
+const Theme: ThemeProps = {
   ArrayFieldTemplate,
-  fields: Fields,
+  fields: { ...fields, ...Fields },
   FieldTemplate,
   ObjectFieldTemplate,
-  widgets: Widgets,
+  widgets: { ...widgets, ...Widgets },
   ErrorList,
 };