redgeoff · October 11, 2018 21:22
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>MSON: Basic Form 2</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Include babel so that we can use JSX in this example without compiling -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script src="https://unpkg.com/mson-react/dist/msonreact.js"></script>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <script type="text/babel">

      const compiler = msonreact.compiler;
      const Component = msonreact.Component;

      const definition = {
        component: 'Form',
        fields: [
          {
            name: 'heading',
            component: 'Text',
            text: '# Basic form using [MSON](https://github.com/redgeoff/mson)'
          },
          {
            name: 'firstName',
            component: 'TextField',
            label: 'First Name',
            required: true,
            block: false
          },
          {
            name: 'lastName',
            component: 'TextField',
            label: 'Last Name',
            required: true
          },
          {
            name: 'email',
            component: 'EmailField',
            label: 'Email',
            help: 'Any email address except [email protected] and [email protected]'
          },
          {
            name: 'submit',
            component: 'ButtonField',
            type: 'submit',
            label: 'Submit',
            icon: 'Save'
          },
          { name: 'reset', component: 'ButtonField', label: 'Reset', icon: 'Clear' }
        ],
        validators: [
          {
            where: {
              'fields.email.value': '[email protected]'
            },
            error: {
              field: 'email',
              error: 'must not be {{fields.email.value}}'
            }
          }
        ]
      };

      class App extends React.Component {
        state = {
          form: null
        }

        loadValues(form) {
          // Load any initial data, e.g. from an API
          form.setValues({
            firstName: 'Bob',
            lastName: 'Marley',
            email: '[email protected]'
          })
        }

        handleSubmit = () => {
          const { form } = this.state;

          // TODO: Contact some API with the data
          console.log('submitting', form.getValues())

          // Simulate response from API saying that email address is already in use and report this error
          // to the user
          if (form.get('fields.email.value') === '[email protected]') {
            form.set({ 'fields.email.err': 'already in use' });
          } else {
            // Everything was successful so redirect, show confirmation, etc...
          }
        }

        handleReset = () => {
          this.state.form.reset()
        }

        componentDidMount() {
          const form = compiler.newComponent(definition)
          this.setState({ form });

          this.loadValues(form);
          form.on('submit', this.handleSubmit)
          form.on('reset', this.handleReset)
        }

        componentWillUnmount() {
          this.state.form.destroy();
        }

        render() {
          const { form } = this.state;
          return form ? <Component component={form} /> : null;
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'));

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>MSON: Basic Form 2</title>
	</head>
	<body>
	<div id="root"></div>

	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

	<!-- Include babel so that we can use JSX in this example without compiling -->
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script src="https://unpkg.com/mson-react/dist/msonreact.js"></script>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

	<script type="text/babel">

	const compiler = msonreact.compiler;
	const Component = msonreact.Component;

	const definition = {
	component: 'Form',
	fields: [
	{
	name: 'heading',
	component: 'Text',
	text: '# Basic form using [MSON](https://github.com/redgeoff/mson)'
	},
	{
	name: 'firstName',
	component: 'TextField',
	label: 'First Name',
	required: true,
	block: false
	},
	{
	name: 'lastName',
	component: 'TextField',
	label: 'Last Name',
	required: true
	},
	{
	name: 'email',
	component: 'EmailField',
	label: 'Email',
	help: 'Any email address except [email protected] and [email protected]'
	},
	{
	name: 'submit',
	component: 'ButtonField',
	type: 'submit',
	label: 'Submit',
	icon: 'Save'
	},
	{ name: 'reset', component: 'ButtonField', label: 'Reset', icon: 'Clear' }
	],
	validators: [
	{
	where: {
	'fields.email.value': '[email protected]'
	},
	error: {
	field: 'email',
	error: 'must not be {{fields.email.value}}'
	}
	}
	]
	};

	class App extends React.Component {
	state = {
	form: null
	}

	loadValues(form) {
	// Load any initial data, e.g. from an API
	form.setValues({
	firstName: 'Bob',
	lastName: 'Marley',
	email: '[email protected]'
	})
	}

	handleSubmit = () => {
	const { form } = this.state;

	// TODO: Contact some API with the data
	console.log('submitting', form.getValues())

	// Simulate response from API saying that email address is already in use and report this error
	// to the user
	if (form.get('fields.email.value') === '[email protected]') {
	form.set({ 'fields.email.err': 'already in use' });
	} else {
	// Everything was successful so redirect, show confirmation, etc...
	}
	}

	handleReset = () => {
	this.state.form.reset()
	}

	componentDidMount() {
	const form = compiler.newComponent(definition)
	this.setState({ form });

	this.loadValues(form);
	form.on('submit', this.handleSubmit)
	form.on('reset', this.handleReset)
	}

	componentWillUnmount() {
	this.state.form.destroy();
	}

	render() {
	const { form } = this.state;
	return form ? <Component component={form} /> : null;
	}
	}

	ReactDOM.render(<App />, document.getElementById('root'));

	</script>
	</body>
	</html>