Advanced conditional fields example

Advanced conditional fields example for React JSON Schema Form.

by Jarkko Asgård

HTML

<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div id="main"></div>
</div>

Babel + JSX

// Advanced conditional fields example
// 
// Control the visibility of any field by adding a "condition" property to the
// field's UI Schema. The condition should evaluate to either true or false
// based on the current value(s) of other field(s), e.g. someField=someValue.
// The evaluation is done dynamically upon any change in the form data.
//
// Supported conditions in this example are:
//   foo=bar
//   foo!=bar
//   foo=bar,baz
//   foo!=bar,baz
//   foo=bar&&bar=foo
//   foo=bar||bar=foo
//
//   ...and some permutations of these.
//
// Please note that complex conditions do not work, e.g.
// foo=bar||bar=foo&&baz=bar
//

const originalSchema = {
	title: 'Location',
  type: 'object',
  properties: {
    location: {
      type: 'string',
      title: 'Where do you live?',
      enum: ['us', 'nordic', 'other'],
      enumNames: ['US', 'Nordic country', 'Other']
    },
    state: {
      type: 'string',
      title: 'State',
      enum: ['AL', 'AK', 'AZ'],
      enumNames: ['Alabama', 'Alaska', 'Arizona']
    },
    nordicCountry: {
      type: 'string',
      title: 'Country',
      enum: ['de', 'fi', 'is', 'no', 'sv'],
      enumNames: ['Denmark', 'Finland', 'Iceland', 'Norway', 'Sweden']
    },
    region: {
    	type: 'string',
      title: 'Region'
    },
    country: {
      type: 'string',
      title: 'Country'
    },
    city: {
      type: 'string',
      title: 'City'
    }
  }
};
const originalUISchema = {
  'ui:order': ['location', 'state', 'nordicCountry', 'country', 'region', 'city'],
  location: {
    'ui:widget': 'radio',
    'ui:options': {
    	inline: true
    },
    classNames: 'col-xs-12'
  },
  state: {
  	// Show state options only if "US" was selected
    condition: 'location=us',
    classNames: 'col-xs-6'
  },
  nordicCountry: {
    // Show list of Nordic countries if "Nordic country" was selected
    condition: 'location=nordic',
    'ui:widget': 'radio',
    classNames: 'col-xs-6'
  },
  country: {
    // Show regular text field...