├── .npmignore
├── test
    ├── mocha.opts
    ├── .eslintrc
    ├── setup-jsdom.js
    ├── test_utils.js
    ├── const_test.js
    ├── NullField_test.js
    ├── DescriptionField_test.js
    ├── TitleField_test.js
    ├── FieldTemplate_test.js
    ├── ObjectFieldTemplate_test.js
    ├── FormContext_test.js
    ├── performance_test.js
    ├── withTheme_test.js
    └── ArrayFieldTemplate_test.js
├── netlify.toml
├── .editorconfig
├── src
    ├── index.js
    ├── components
    │   ├── IconButton.js
    │   ├── widgets
    │   │   ├── URLWidget.js
    │   │   ├── EmailWidget.js
    │   │   ├── PasswordWidget.js
    │   │   ├── TextWidget.js
    │   │   ├── DateWidget.js
    │   │   ├── UpDownWidget.js
    │   │   ├── HiddenWidget.js
    │   │   ├── RangeWidget.js
    │   │   ├── AltDateTimeWidget.js
    │   │   ├── ColorWidget.js
    │   │   ├── index.js
    │   │   ├── TextareaWidget.js
    │   │   ├── DateTimeWidget.js
    │   │   ├── RadioWidget.js
    │   │   ├── CheckboxWidget.js
    │   │   ├── BaseInput.js
    │   │   ├── CheckboxesWidget.js
    │   │   ├── FileWidget.js
    │   │   ├── SelectWidget.js
    │   │   └── AltDateWidget.js
    │   ├── fields
    │   │   ├── NullField.js
    │   │   ├── TitleField.js
    │   │   ├── DescriptionField.js
    │   │   ├── index.js
    │   │   ├── UnsupportedField.js
    │   │   ├── StringField.js
    │   │   ├── BooleanField.js
    │   │   ├── NumberField.js
    │   │   ├── MultiSchemaField.js
    │   │   └── ObjectField.js
    │   ├── AddButton.js
    │   └── ErrorList.js
    ├── withTheme.js
    ├── types.js
    └── validate.js
├── playground
    ├── samples
    │   ├── single.js
    │   ├── custom.js
    │   ├── oneOf.js
    │   ├── files.js
    │   ├── null.js
    │   ├── additionalProperties.js
    │   ├── errors.js
    │   ├── ordering.js
    │   ├── large.js
    │   ├── validation.js
    │   ├── anyOf.js
    │   ├── date.js
    │   ├── numbers.js
    │   ├── references.js
    │   ├── simple.js
    │   ├── customArray.js
    │   ├── index.js
    │   ├── customObject.js
    │   ├── nested.js
    │   ├── nullable.js
    │   ├── alternatives.js
    │   ├── propertyDependencies.js
    │   ├── arrays.js
    │   ├── widgets.js
    │   └── schemaDependencies.js
    ├── index.html
    └── index.prod.html
├── README.md
├── .travis.yml
├── .babelrc
├── mkdocs.yml
├── PULL_REQUEST_TEMPLATE.md
├── CODE_OF_CONDUCT.md
├── types
    ├── README.md
    ├── LICENSE
    └── index.d.ts
├── ISSUE_TEMPLATE.md
├── devServer.js
├── .eslintrc
├── webpack.config.dev.js
├── docs
    ├── definitions.md
    ├── theme-customization.md
    ├── dependencies.md
    └── validation.md
├── webpack.config.dist.js
├── webpack.config.prod.js
├── .gitignore
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | 


--------------------------------------------------------------------------------
/test/mocha.opts:
--------------------------------------------------------------------------------
1 | --timeout 5000
2 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [context.deploy-preview.environment]
2 |   SHOW_NETLIFY_BADGE = "true"


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | 
3 | indent_style = space
4 | indent_size = 2
5 | charset = utf-8
6 | insert_final_newline = true
7 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Form from "./components/Form";
2 | import withTheme from "./withTheme";
3 | 
4 | export { withTheme };
5 | export default Form;
6 | 


--------------------------------------------------------------------------------
/playground/samples/single.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   schema: {
3 |     title: "A single-field form",
4 |     type: "string",
5 |   },
6 |   formData: "initial value",
7 |   uiSchema: {},
8 | };
9 | 


--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true,
 4 |   },
 5 |   "globals": {
 6 |     d: true
 7 |   },
 8 |   "rules": {
 9 |     "no-unused-vars": [
10 |       2,
11 |       {
12 |         "varsIgnorePattern": "^d$"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | DEPRECATION NOTICE
2 | ==================
3 | 
4 | This project is no longer maintained. Current versions of [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) now include a Bootstrap 4 theme. It is recommended that you switch to that instead.
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language:
 3 | - node_js
 4 | node_js:
 5 | - "6"
 6 | - "7"
 7 | - "8"
 8 | - "9"
 9 | - "10"
10 | - "11"
11 | - "12"
12 | env:
13 | - ACTION=test
14 | - ACTION="run lint"
15 | - ACTION="run cs-check"
16 | - ACTION="run dist"
17 | script:
18 | - npm $ACTION
19 | 


--------------------------------------------------------------------------------
/src/components/IconButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function IconButton(props) {
 4 |   const { type = "default", icon, className, ...otherProps } = props;
 5 |   return (
 6 |     <button
 7 |       type="button"
 8 |       className={`btn btn-${type} ${className}`}
 9 |       {...otherProps}>
10 |       <i className={`fas fa-${icon}`} />
11 |     </button>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/widgets/URLWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function URLWidget(props) {
 5 |   const { BaseInput } = props.registry.widgets;
 6 |   return <BaseInput type="url" {...props} />;
 7 | }
 8 | 
 9 | if (process.env.NODE_ENV !== "production") {
10 |   URLWidget.propTypes = {
11 |     value: PropTypes.string,
12 |   };
13 | }
14 | 
15 | export default URLWidget;
16 | 


--------------------------------------------------------------------------------
/src/components/widgets/EmailWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function EmailWidget(props) {
 5 |   const { BaseInput } = props.registry.widgets;
 6 |   return <BaseInput type="email" {...props} />;
 7 | }
 8 | 
 9 | if (process.env.NODE_ENV !== "production") {
10 |   EmailWidget.propTypes = {
11 |     value: PropTypes.string,
12 |   };
13 | }
14 | 
15 | export default EmailWidget;
16 | 


--------------------------------------------------------------------------------
/src/components/widgets/PasswordWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function PasswordWidget(props) {
 5 |   const { BaseInput } = props.registry.widgets;
 6 |   return <BaseInput type="password" {...props} />;
 7 | }
 8 | 
 9 | if (process.env.NODE_ENV !== "production") {
10 |   PasswordWidget.propTypes = {
11 |     value: PropTypes.string,
12 |   };
13 | }
14 | 
15 | export default PasswordWidget;
16 | 


--------------------------------------------------------------------------------
/playground/samples/custom.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A localisation form",
 4 |     type: "object",
 5 |     required: ["lat", "lon"],
 6 |     properties: {
 7 |       lat: {
 8 |         type: "number",
 9 |       },
10 |       lon: {
11 |         type: "number",
12 |       },
13 |     },
14 |   },
15 |   uiSchema: {
16 |     "ui:field": "geo",
17 |   },
18 |   formData: {
19 |     lat: 0,
20 |     lon: 0,
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/src/components/widgets/TextWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function TextWidget(props) {
 5 |   const { BaseInput } = props.registry.widgets;
 6 |   return <BaseInput {...props} />;
 7 | }
 8 | 
 9 | if (process.env.NODE_ENV !== "production") {
10 |   TextWidget.propTypes = {
11 |     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
12 |     id: PropTypes.string,
13 |   };
14 | }
15 | 
16 | export default TextWidget;
17 | 


--------------------------------------------------------------------------------
/src/components/fields/NullField.js:
--------------------------------------------------------------------------------
 1 | import { Component } from "react";
 2 | import * as types from "../../types";
 3 | 
 4 | class NullField extends Component {
 5 |   componentDidMount() {
 6 |     if (this.props.formData === undefined) {
 7 |       this.props.onChange(null);
 8 |     }
 9 |   }
10 | 
11 |   render() {
12 |     return null;
13 |   }
14 | }
15 | 
16 | if (process.env.NODE_ENV !== "production") {
17 |   NullField.propTypes = types.fieldProps;
18 | }
19 | 
20 | export default NullField;
21 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/preset-react",
 4 |     "@babel/preset-env"
 5 |   ],
 6 |   "plugins": [
 7 |     "@babel/plugin-proposal-object-rest-spread",
 8 |     "@babel/plugin-proposal-class-properties",
 9 |     [
10 |       "@babel/plugin-transform-runtime",
11 |       {
12 |         "corejs": 2
13 |       }
14 |     ]
15 |   ],
16 |   "env": {
17 |     "development": {
18 |       "plugins": [
19 |         "@babel/plugin-transform-react-jsx"
20 |       ]
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/playground/samples/oneOf.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     type: "object",
 4 |     oneOf: [
 5 |       {
 6 |         properties: {
 7 |           lorem: {
 8 |             type: "string",
 9 |           },
10 |         },
11 |         required: ["lorem"],
12 |       },
13 |       {
14 |         properties: {
15 |           ipsum: {
16 |             type: "string",
17 |           },
18 |         },
19 |         required: ["ipsum"],
20 |       },
21 |     ],
22 |   },
23 |   formData: {},
24 | };
25 | 


--------------------------------------------------------------------------------
/playground/samples/files.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "Files",
 4 |     type: "object",
 5 |     properties: {
 6 |       file: {
 7 |         type: "string",
 8 |         format: "data-url",
 9 |         title: "Single file",
10 |       },
11 |       files: {
12 |         type: "array",
13 |         title: "Multiple files",
14 |         items: {
15 |           type: "string",
16 |           format: "data-url",
17 |         },
18 |       },
19 |     },
20 |   },
21 |   uiSchema: {},
22 |   formData: {},
23 | };
24 | 


--------------------------------------------------------------------------------
/mkdocs.yml:
--------------------------------------------------------------------------------
 1 | site_name: react-jsonschema-form documentation
 2 | docs_dir: docs
 3 | theme: readthedocs
 4 | 
 5 | nav:
 6 |   - Introduction: index.md
 7 |   - Advanced Customization: advanced-customization.md
 8 |   - Definitions: definitions.md
 9 |   - Dependencies: dependencies.md
10 |   - Form Customization: form-customization.md
11 |   - Theme Customization: theme-customization.md
12 |   - Validation: validation.md
13 |   - Playground: https://mozilla-services.github.io/react-jsonschema-form/
14 | 
15 | markdown_extensions:
16 |   - toc:
17 |       permalink: true
18 | 


--------------------------------------------------------------------------------
/src/components/AddButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import IconButton from "./IconButton";
 3 | 
 4 | export default function AddButton({ className, onClick, disabled }) {
 5 |   return (
 6 |     <div className="row">
 7 |       <p className={`col-3 offset-9 text-right ${className}`}>
 8 |         <IconButton
 9 |           type="info"
10 |           icon="plus"
11 |           className="btn-add col-12"
12 |           tabIndex="0"
13 |           onClick={onClick}
14 |           disabled={disabled}
15 |         />
16 |       </p>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/ErrorList.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function ErrorList(props) {
 4 |   const { errors } = props;
 5 |   return (
 6 |     <div className="card errors">
 7 |       <div className="card-header text-white bg-danger">Errors</div>
 8 |       <ul className="list-group">
 9 |         {errors.map((error, i) => {
10 |           return (
11 |             <li key={i} className="list-group-item text-danger">
12 |               {error.stack}
13 |             </li>
14 |           );
15 |         })}
16 |       </ul>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/widgets/DateWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function DateWidget(props) {
 5 |   const {
 6 |     onChange,
 7 |     registry: {
 8 |       widgets: { BaseInput },
 9 |     },
10 |   } = props;
11 |   return (
12 |     <BaseInput
13 |       type="date"
14 |       {...props}
15 |       onChange={value => onChange(value || undefined)}
16 |     />
17 |   );
18 | }
19 | 
20 | if (process.env.NODE_ENV !== "production") {
21 |   DateWidget.propTypes = {
22 |     value: PropTypes.string,
23 |   };
24 | }
25 | 
26 | export default DateWidget;
27 | 


--------------------------------------------------------------------------------
/src/components/widgets/UpDownWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | import { rangeSpec } from "../../utils";
 5 | 
 6 | function UpDownWidget(props) {
 7 |   const {
 8 |     registry: {
 9 |       widgets: { BaseInput },
10 |     },
11 |   } = props;
12 |   return <BaseInput type="number" {...props} {...rangeSpec(props.schema)} />;
13 | }
14 | 
15 | if (process.env.NODE_ENV !== "production") {
16 |   UpDownWidget.propTypes = {
17 |     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
18 |   };
19 | }
20 | 
21 | export default UpDownWidget;
22 | 


--------------------------------------------------------------------------------
/test/setup-jsdom.js:
--------------------------------------------------------------------------------
 1 | var jsdom = require("jsdom");
 2 | 
 3 | // Setup the jsdom environment
 4 | // @see https://github.com/facebook/react/issues/5046
 5 | if (!global.hasOwnProperty("window")) {
 6 |   global.document = jsdom.jsdom("<!doctype html><html><body></body></html>");
 7 |   global.window = document.defaultView;
 8 |   global.navigator = global.window.navigator;
 9 |   global.File = global.window.File;
10 | }
11 | 
12 | // atob
13 | global.atob = require("atob");
14 | 
15 | // HTML debugging helper
16 | global.d = function d(node) {
17 |   console.log(require("html").prettyPrint(node.outerHTML, { indent_size: 2 }));
18 | };
19 | 


--------------------------------------------------------------------------------
/src/components/widgets/HiddenWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function HiddenWidget({ id, value }) {
 5 |   return (
 6 |     <input
 7 |       type="hidden"
 8 |       id={id}
 9 |       value={typeof value === "undefined" ? "" : value}
10 |     />
11 |   );
12 | }
13 | 
14 | if (process.env.NODE_ENV !== "production") {
15 |   HiddenWidget.propTypes = {
16 |     id: PropTypes.string.isRequired,
17 |     value: PropTypes.oneOfType([
18 |       PropTypes.string,
19 |       PropTypes.number,
20 |       PropTypes.bool,
21 |     ]),
22 |   };
23 | }
24 | 
25 | export default HiddenWidget;
26 | 


--------------------------------------------------------------------------------
/src/components/fields/TitleField.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | const REQUIRED_FIELD_SYMBOL = "*";
 5 | 
 6 | function TitleField(props) {
 7 |   const { id, title, required } = props;
 8 |   return (
 9 |     <legend id={id}>
10 |       {title}
11 |       {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
12 |     </legend>
13 |   );
14 | }
15 | 
16 | if (process.env.NODE_ENV !== "production") {
17 |   TitleField.propTypes = {
18 |     id: PropTypes.string,
19 |     title: PropTypes.string,
20 |     required: PropTypes.bool,
21 |   };
22 | }
23 | 
24 | export default TitleField;
25 | 


--------------------------------------------------------------------------------
/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ### Reasons for making this change
 2 | 
 3 | [Please describe them here]
 4 | 
 5 | If this is related to existing tickets, include links to them as well.
 6 | 
 7 | ### Checklist
 8 | 
 9 | * [ ] **I'm updating documentation**
10 |   - [ ] I've [checked the rendering](https://react-jsonschema-form.readthedocs.io/en/latest/#contributing) of the Markdown text I've added
11 | * [ ] **I'm adding or updating code**
12 |   - [ ] I've added and/or updated tests
13 |   - [ ] I've updated [docs](https://react-jsonschema-form.readthedocs.io/) if needed
14 | * [ ] **I'm adding a new feature**
15 |   - [ ] I've updated the playground with an example use of the feature
16 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>react-jsonschema-form playground</title>
 8 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 9 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
10 |   <!-- <link rel="stylesheet" href="./bootstrap.css"> -->
11 | </head>
12 | <body>
13 |   <div id="app"></div>
14 |   <script src="/static/bundle.js"></script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/playground/index.prod.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>react-jsonschema-form playground</title>
 8 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 9 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
10 |   <!-- <link rel="stylesheet" href="./bootstrap.css"> -->
11 |   <link rel="stylesheet" href="./styles.css">
12 | </head>
13 | <body>
14 |   <div id="app"></div>
15 |   <script src="./bundle.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/playground/samples/null.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "Null field example",
 4 |     description: "A short form with a null field",
 5 |     type: "object",
 6 |     required: ["firstName"],
 7 |     properties: {
 8 |       helpText: {
 9 |         title: "A null field",
10 |         description:
11 |           "Null fields like this are great for adding extra information",
12 |         type: "null",
13 |       },
14 |       firstName: {
15 |         type: "string",
16 |         title: "A regular string field",
17 |         default: "Chuck",
18 |       },
19 |     },
20 |   },
21 |   uiSchema: {
22 |     firstName: {
23 |       "ui:autofocus": true,
24 |       "ui:emptyValue": "",
25 |     },
26 |   },
27 |   formData: {},
28 | };
29 | 


--------------------------------------------------------------------------------
/src/components/widgets/RangeWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | import { rangeSpec } from "../../utils";
 5 | 
 6 | function RangeWidget(props) {
 7 |   const {
 8 |     schema,
 9 |     value,
10 |     registry: {
11 |       widgets: { BaseInput },
12 |     },
13 |   } = props;
14 |   return (
15 |     <div className="field-range-wrapper">
16 |       <BaseInput type="range" {...props} {...rangeSpec(schema)} />
17 |       <span className="range-view">{value}</span>
18 |     </div>
19 |   );
20 | }
21 | 
22 | if (process.env.NODE_ENV !== "production") {
23 |   RangeWidget.propTypes = {
24 |     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
25 |   };
26 | }
27 | 
28 | export default RangeWidget;
29 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Community Participation Guidelines
 2 | 
 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
 4 | For more details, please read the
 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
 6 | 
 7 | ## How to Report
 8 | For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
 9 | 
10 | <!--
11 | ## Project Specific Etiquette
12 | 
13 | In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
14 | Please update for your project.
15 | -->
16 | 


--------------------------------------------------------------------------------
/src/withTheme.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import PropTypes from "prop-types";
 3 | import Form from "./";
 4 | 
 5 | function withTheme(themeProps) {
 6 |   return class extends Component {
 7 |     render() {
 8 |       let { fields, widgets, ...directProps } = this.props;
 9 |       fields = { ...themeProps.fields, ...fields };
10 |       widgets = { ...themeProps.widgets, ...widgets };
11 |       return (
12 |         <Form
13 |           {...themeProps}
14 |           {...directProps}
15 |           fields={fields}
16 |           widgets={widgets}
17 |         />
18 |       );
19 |     }
20 |   };
21 | }
22 | 
23 | withTheme.propTypes = {
24 |   widgets: PropTypes.object,
25 |   fields: PropTypes.object,
26 | };
27 | 
28 | export default withTheme;
29 | 


--------------------------------------------------------------------------------
/src/components/widgets/AltDateTimeWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import AltDateWidget from "./AltDateWidget";
 4 | 
 5 | function AltDateTimeWidget(props) {
 6 |   const { AltDateWidget } = props.registry.widgets;
 7 |   return <AltDateWidget time {...props} />;
 8 | }
 9 | 
10 | if (process.env.NODE_ENV !== "production") {
11 |   AltDateTimeWidget.propTypes = {
12 |     schema: PropTypes.object.isRequired,
13 |     id: PropTypes.string.isRequired,
14 |     value: PropTypes.string,
15 |     required: PropTypes.bool,
16 |     onChange: PropTypes.func,
17 |     options: PropTypes.object,
18 |   };
19 | }
20 | 
21 | AltDateTimeWidget.defaultProps = {
22 |   ...AltDateWidget.defaultProps,
23 |   time: true,
24 | };
25 | 
26 | export default AltDateTimeWidget;
27 | 


--------------------------------------------------------------------------------
/src/components/widgets/ColorWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function ColorWidget(props) {
 5 |   const {
 6 |     disabled,
 7 |     readonly,
 8 |     registry: {
 9 |       widgets: { BaseInput },
10 |     },
11 |   } = props;
12 |   return <BaseInput type="color" {...props} disabled={disabled || readonly} />;
13 | }
14 | 
15 | if (process.env.NODE_ENV !== "production") {
16 |   ColorWidget.propTypes = {
17 |     schema: PropTypes.object.isRequired,
18 |     id: PropTypes.string.isRequired,
19 |     value: PropTypes.string,
20 |     required: PropTypes.bool,
21 |     disabled: PropTypes.bool,
22 |     readonly: PropTypes.bool,
23 |     autofocus: PropTypes.bool,
24 |     onChange: PropTypes.func,
25 |   };
26 | }
27 | 
28 | export default ColorWidget;
29 | 


--------------------------------------------------------------------------------
/playground/samples/additionalProperties.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A customizable registration form",
 4 |     description: "A simple form with additional properties example.",
 5 |     type: "object",
 6 |     required: ["firstName", "lastName"],
 7 |     additionalProperties: {
 8 |       type: "string",
 9 |     },
10 |     properties: {
11 |       firstName: {
12 |         type: "string",
13 |         title: "First name",
14 |       },
15 |       lastName: {
16 |         type: "string",
17 |         title: "Last name",
18 |       },
19 |     },
20 |   },
21 |   uiSchema: {
22 |     firstName: {
23 |       "ui:autofocus": true,
24 |       "ui:emptyValue": "",
25 |     },
26 |   },
27 |   formData: {
28 |     firstName: "Chuck",
29 |     lastName: "Norris",
30 |     assKickCount: "infinity",
31 |   },
32 | };
33 | 


--------------------------------------------------------------------------------
/src/components/fields/DescriptionField.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function DescriptionField(props) {
 5 |   const { id, description } = props;
 6 |   if (!description) {
 7 |     return null;
 8 |   }
 9 |   if (typeof description === "string") {
10 |     return (
11 |       <p id={id} className="field-description">
12 |         {description}
13 |       </p>
14 |     );
15 |   } else {
16 |     return (
17 |       <div id={id} className="field-description">
18 |         {description}
19 |       </div>
20 |     );
21 |   }
22 | }
23 | 
24 | if (process.env.NODE_ENV !== "production") {
25 |   DescriptionField.propTypes = {
26 |     id: PropTypes.string,
27 |     description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
28 |   };
29 | }
30 | 
31 | export default DescriptionField;
32 | 


--------------------------------------------------------------------------------
/src/components/fields/index.js:
--------------------------------------------------------------------------------
 1 | import ArrayField from "./ArrayField";
 2 | import BooleanField from "./BooleanField";
 3 | import DescriptionField from "./DescriptionField";
 4 | import MultiSchemaField from "./MultiSchemaField";
 5 | import NumberField from "./NumberField";
 6 | import ObjectField from "./ObjectField";
 7 | import SchemaField from "./SchemaField";
 8 | import StringField from "./StringField";
 9 | import TitleField from "./TitleField";
10 | import NullField from "./NullField";
11 | import UnsupportedField from "./UnsupportedField";
12 | 
13 | export default {
14 |   AnyOfField: MultiSchemaField,
15 |   ArrayField,
16 |   BooleanField,
17 |   DescriptionField,
18 |   NumberField,
19 |   ObjectField,
20 |   OneOfField: MultiSchemaField,
21 |   SchemaField,
22 |   StringField,
23 |   TitleField,
24 |   NullField,
25 |   UnsupportedField,
26 | };
27 | 


--------------------------------------------------------------------------------
/types/README.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | > `npm install --save @types/react-jsonschema-form`
 3 | 
 4 | # Summary
 5 | This package contains type definitions for react-jsonschema-form (https://github.com/mozilla-services/react-jsonschema-form).
 6 | 
 7 | # Details
 8 | Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-jsonschema-form
 9 | 
10 | Additional Details
11 |  * Last updated: Thu, 29 Nov 2018 23:46:25 GMT
12 |  * Dependencies: react, json-schema
13 |  * Global values: none
14 | 
15 | # Credits
16 | These definitions were written by Dan Fox <https://github.com/iamdanfox>, Ivan Jiang <https://github.com/iplus26>, Philippe Bourdages <https://github.com/phbou72>, Lucian Buzzo <https://github.com/LucianBuzzo>, Sylvain Thénault <https://github.com/sthenault>, Sebastian Busch <https://github.com/sbusch>.
17 | 


--------------------------------------------------------------------------------
/src/components/fields/UnsupportedField.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function UnsupportedField({ schema, idSchema, reason }) {
 5 |   return (
 6 |     <div className="unsupported-field">
 7 |       <p>
 8 |         Unsupported field schema
 9 |         {idSchema && idSchema.$id && (
10 |           <span>
11 |             {" for"} field <code>{idSchema.$id}</code>
12 |           </span>
13 |         )}
14 |         {reason && <em>: {reason}</em>}.
15 |       </p>
16 |       {schema && <pre>{JSON.stringify(schema, null, 2)}</pre>}
17 |     </div>
18 |   );
19 | }
20 | 
21 | if (process.env.NODE_ENV !== "production") {
22 |   UnsupportedField.propTypes = {
23 |     schema: PropTypes.object.isRequired,
24 |     idSchema: PropTypes.object,
25 |     reason: PropTypes.string,
26 |   };
27 | }
28 | 
29 | export default UnsupportedField;
30 | 


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ### Prerequisites
 2 | 
 3 | - [ ] I have read the [documentation](https://react-jsonschema-form.readthedocs.io/);
 4 | - [ ] In the case of a bug report, I understand that providing a [SSCCE](http://sscce.org/) example is tremendously useful to the maintainers.
 5 | - [ ] Ideally, I'm providing a [sample JSFiddle](https://jsfiddle.net/n1k0/f2y3fq7L/6/) or a [shared playground link](https://mozilla-services.github.io/react-jsonschema-form/) demonstrating the issue.
 6 | 
 7 | ### Description
 8 | 
 9 | [Description of the bug or feature]
10 | 
11 | ### Steps to Reproduce
12 | 
13 | 1. [First Step]
14 | 2. [Second Step]
15 | 3. [and so on...]
16 | 
17 | #### Expected behavior
18 | 
19 | [What you expected to happen]
20 | 
21 | #### Actual behavior
22 | 
23 | [What actually happened]
24 | 
25 | ### Version
26 | 
27 | You can usually get this information in your `package.json` or in the file URL if you're using the unpkg one.
28 | 


--------------------------------------------------------------------------------
/test/test_utils.js:
--------------------------------------------------------------------------------
 1 | /* Utils for tests. */
 2 | 
 3 | import React from "react";
 4 | import sinon from "sinon";
 5 | import { renderIntoDocument } from "react-dom/test-utils";
 6 | import { findDOMNode, render } from "react-dom";
 7 | 
 8 | import Form from "../src";
 9 | 
10 | export function createComponent(Component, props) {
11 |   const comp = renderIntoDocument(<Component {...props} />);
12 |   const node = findDOMNode(comp);
13 |   return { comp, node };
14 | }
15 | 
16 | export function createFormComponent(props) {
17 |   return createComponent(Form, { ...props, safeRenderCompletion: true });
18 | }
19 | 
20 | export function createSandbox() {
21 |   const sandbox = sinon.sandbox.create();
22 |   // Ensure we catch any React warning and mark them as test failures.
23 |   sandbox.stub(console, "error", error => {
24 |     throw new Error(error);
25 |   });
26 |   return sandbox;
27 | }
28 | 
29 | export function setProps(comp, newProps) {
30 |   const node = findDOMNode(comp);
31 |   render(React.createElement(comp.constructor, newProps), node.parentNode);
32 | }
33 | 


--------------------------------------------------------------------------------
/playground/samples/errors.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "Contextualized errors",
 4 |     type: "object",
 5 |     properties: {
 6 |       firstName: {
 7 |         type: "string",
 8 |         title: "First name",
 9 |         minLength: 8,
10 |         pattern: "\\d+",
11 |       },
12 |       active: {
13 |         type: "boolean",
14 |         title: "Active",
15 |       },
16 |       skills: {
17 |         type: "array",
18 |         items: {
19 |           type: "string",
20 |           minLength: 5,
21 |         },
22 |       },
23 |       multipleChoicesList: {
24 |         type: "array",
25 |         title: "Pick max two items",
26 |         uniqueItems: true,
27 |         maxItems: 2,
28 |         items: {
29 |           type: "string",
30 |           enum: ["foo", "bar", "fuzz"],
31 |         },
32 |       },
33 |     },
34 |   },
35 |   uiSchema: {},
36 |   formData: {
37 |     firstName: "Chuck",
38 |     active: "wrong",
39 |     skills: ["karate", "budo", "aikido"],
40 |     multipleChoicesList: ["foo", "bar", "fuzz"],
41 |   },
42 | };
43 | 


--------------------------------------------------------------------------------
/devServer.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const express = require("express");
 3 | const webpack = require("webpack");
 4 | 
 5 | const server = process.env.RJSF_DEV_SERVER || "localhost:8080";
 6 | const splitServer = server.split(":");
 7 | const host = splitServer[0];
 8 | const port = splitServer[1];
 9 | const env = "dev";
10 | 
11 | const webpackConfig = require("./webpack.config." + env);
12 | const compiler = webpack(webpackConfig);
13 | const app = express();
14 | 
15 | app.use(require("webpack-dev-middleware")(compiler, {
16 |   publicPath: webpackConfig.output.publicPath,
17 |   noInfo: true
18 | }));
19 | 
20 | app.use(require("webpack-hot-middleware")(compiler));
21 | 
22 | app.get("/favicon.ico", function(req, res) {
23 |   res.status(204).end();
24 | });
25 | 
26 | app.get("/", function(req, res) {
27 |   res.sendFile(path.join(__dirname, "playground", "index.html"));
28 | });
29 | 
30 | app.listen(port, host, function(err) {
31 |   if (err) {
32 |     console.log(err);
33 |     return;
34 |   }
35 | 
36 |   console.log(`Listening at http://${server}`);
37 | });
38 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "parser": "babel-eslint",
 3 |     "rules": {
 4 |         "react/jsx-uses-react": 2,
 5 |         "react/jsx-uses-vars": 2,
 6 |         "react/react-in-jsx-scope": 2,
 7 |         "react/jsx-tag-spacing": [1, {
 8 |           "beforeSelfClosing": "always"
 9 |         }],
10 |         "curly": [2],
11 |         "linebreak-style": [2, "unix"],
12 |         "semi": [2, "always"],
13 |         "comma-dangle": [0],
14 |         "no-unused-vars": [2, {
15 |           "vars": "all",
16 |           "args": "none",
17 |           "ignoreRestSiblings": true
18 |         }],
19 |         "no-console": [0],
20 |         "object-curly-spacing": [2, "always"],
21 |         "keyword-spacing": ["error"]
22 |     },
23 |     "env": {
24 |         "es6": true,
25 |         "browser": true,
26 |         "node": true
27 |     },
28 |     "extends": "eslint:recommended",
29 |     "ecmaFeatures": {
30 |         "modules": true,
31 |         "jsx": true,
32 |         "experimentalObjectRestSpread": true
33 |     },
34 |     "plugins": [
35 |         "jsx-a11y",
36 |         "react"
37 |     ]
38 | }
39 | 


--------------------------------------------------------------------------------
/playground/samples/ordering.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A registration form",
 4 |     type: "object",
 5 |     required: ["firstName", "lastName"],
 6 |     properties: {
 7 |       password: {
 8 |         type: "string",
 9 |         title: "Password",
10 |       },
11 |       lastName: {
12 |         type: "string",
13 |         title: "Last name",
14 |       },
15 |       bio: {
16 |         type: "string",
17 |         title: "Bio",
18 |       },
19 |       firstName: {
20 |         type: "string",
21 |         title: "First name",
22 |       },
23 |       age: {
24 |         type: "integer",
25 |         title: "Age",
26 |       },
27 |     },
28 |   },
29 |   uiSchema: {
30 |     "ui:order": ["firstName", "lastName", "*", "password"],
31 |     age: {
32 |       "ui:widget": "updown",
33 |     },
34 |     bio: {
35 |       "ui:widget": "textarea",
36 |     },
37 |     password: {
38 |       "ui:widget": "password",
39 |     },
40 |   },
41 |   formData: {
42 |     firstName: "Chuck",
43 |     lastName: "Norris",
44 |     age: 75,
45 |     bio: "Roundhouse kicking asses since 1940",
46 |     password: "noneed",
47 |   },
48 | };
49 | 


--------------------------------------------------------------------------------
/playground/samples/large.js:
--------------------------------------------------------------------------------
 1 | function largeEnum(n) {
 2 |   const list = [];
 3 |   for (let i = 0; i < n; i++) {
 4 |     list.push("option #" + i);
 5 |   }
 6 |   return list;
 7 | }
 8 | 
 9 | module.exports = {
10 |   schema: {
11 |     definitions: {
12 |       largeEnum: { type: "string", enum: largeEnum(100) },
13 |     },
14 |     title: "A rather large form",
15 |     type: "object",
16 |     properties: {
17 |       string: {
18 |         type: "string",
19 |         title: "Some string",
20 |       },
21 |       choice1: { $ref: "#/definitions/largeEnum" },
22 |       choice2: { $ref: "#/definitions/largeEnum" },
23 |       choice3: { $ref: "#/definitions/largeEnum" },
24 |       choice4: { $ref: "#/definitions/largeEnum" },
25 |       choice5: { $ref: "#/definitions/largeEnum" },
26 |       choice6: { $ref: "#/definitions/largeEnum" },
27 |       choice7: { $ref: "#/definitions/largeEnum" },
28 |       choice8: { $ref: "#/definitions/largeEnum" },
29 |       choice9: { $ref: "#/definitions/largeEnum" },
30 |       choice10: { $ref: "#/definitions/largeEnum" },
31 |     },
32 |   },
33 |   uiSchema: {
34 |     choice1: {
35 |       "ui:placeholder": "Choose one",
36 |     },
37 |   },
38 |   formData: {},
39 | };
40 | 


--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require("webpack");
 3 | 
 4 | module.exports = {
 5 |   mode: "development",
 6 |   devtool: "source-map",
 7 |   entry: [
 8 |     "webpack-hot-middleware/client?reload=true",
 9 |     "./playground/app"
10 |   ],
11 |   output: {
12 |     path: path.join(__dirname, "build"),
13 |     filename: "bundle.js",
14 |     publicPath: "/static/"
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |   ],
19 |   module: {
20 |     rules: [
21 |       {
22 |         test: /\.jsx?$/,
23 |         use: [
24 |           "babel-loader",
25 |         ],
26 |         include: [
27 |           path.join(__dirname, "src"),
28 |           path.join(__dirname, "playground"),
29 |           path.join(__dirname, "node_modules", "codemirror", "mode", "javascript"),
30 |         ]
31 |       },
32 |       {
33 |         test: /\.css$/,
34 |         use: [
35 |           "style-loader",
36 |           "css-loader",
37 |         ],
38 |         include: [
39 |           path.join(__dirname, "css"),
40 |           path.join(__dirname, "playground"),
41 |           path.join(__dirname, "node_modules"),
42 |         ],
43 |       },
44 |     ]
45 |   }
46 | };
47 | 


--------------------------------------------------------------------------------
/src/types.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | export const registry = PropTypes.shape({
 4 |   ArrayFieldTemplate: PropTypes.func,
 5 |   FieldTemplate: PropTypes.func,
 6 |   ObjectFieldTemplate: PropTypes.func,
 7 |   definitions: PropTypes.object.isRequired,
 8 |   fields: PropTypes.objectOf(PropTypes.func).isRequired,
 9 |   formContext: PropTypes.object.isRequired,
10 |   widgets: PropTypes.objectOf(
11 |     PropTypes.oneOfType([PropTypes.func, PropTypes.object])
12 |   ).isRequired,
13 | });
14 | 
15 | export const fieldProps = {
16 |   autofocus: PropTypes.bool,
17 |   disabled: PropTypes.bool,
18 |   errorSchema: PropTypes.object,
19 |   formData: PropTypes.any,
20 |   idSchema: PropTypes.object,
21 |   onBlur: PropTypes.func,
22 |   onChange: PropTypes.func.isRequired,
23 |   onFocus: PropTypes.func,
24 |   rawErrors: PropTypes.arrayOf(PropTypes.string),
25 |   readonly: PropTypes.bool,
26 |   registry: registry.isRequired,
27 |   required: PropTypes.bool,
28 |   schema: PropTypes.object.isRequired,
29 |   uiSchema: PropTypes.shape({
30 |     "ui:options": PropTypes.shape({
31 |       addable: PropTypes.bool,
32 |       orderable: PropTypes.bool,
33 |       removable: PropTypes.bool,
34 |     }),
35 |   }),
36 | };
37 | 


--------------------------------------------------------------------------------
/docs/definitions.md:
--------------------------------------------------------------------------------
 1 | ## Schema definitions and references
 2 | 
 3 | This library partially supports [inline schema definition dereferencing]( http://json-schema.org/latest/json-schema-core.html#rfc.section.7.2.3), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:
 4 | 
 5 | ```json
 6 | {
 7 |   "definitions": {
 8 |     "address": {
 9 |       "type": "object",
10 |       "properties": {
11 |         "street_address": { "type": "string" },
12 |         "city":           { "type": "string" },
13 |         "state":          { "type": "string" }
14 |       },
15 |       "required": ["street_address", "city", "state"]
16 |     }
17 |   },
18 |   "type": "object",
19 |   "properties": {
20 |     "billing_address": { "$ref": "#/definitions/address" },
21 |     "shipping_address": { "$ref": "#/definitions/address" }
22 |   }
23 | }
24 | ```
25 | 
26 | *(Sample schema courtesy of the [Space Telescope Science Institute](http://spacetelescope.github.io/understanding-json-schema/structuring.html))*
27 | 
28 | Note that it only supports local definition referencing; we do not plan on fetching foreign schemas over HTTP anytime soon. Basically, you can only reference a definition from the very schema object defining it.
29 | 
30 | 


--------------------------------------------------------------------------------
/types/LICENSE:
--------------------------------------------------------------------------------
 1 |     MIT License
 2 | 
 3 |     Copyright (c) Microsoft Corporation. All rights reserved.
 4 | 
 5 |     Permission is hereby granted, free of charge, to any person obtaining a copy
 6 |     of this software and associated documentation files (the "Software"), to deal
 7 |     in the Software without restriction, including without limitation the rights
 8 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 |     copies of the Software, and to permit persons to whom the Software is
10 |     furnished to do so, subject to the following conditions:
11 | 
12 |     The above copyright notice and this permission notice shall be included in all
13 |     copies or substantial portions of the Software.
14 | 
15 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 |     SOFTWARE
22 | 


--------------------------------------------------------------------------------
/webpack.config.dist.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require("webpack");
 3 | 
 4 | module.exports = {
 5 |   mode: "production",
 6 |   cache: true,
 7 |   context: __dirname + "/src",
 8 |   entry: "./index.js",
 9 |   output: {
10 |     path: path.join(__dirname, "dist"),
11 |     publicPath: "/dist/",
12 |     filename: "react-jsonschema-form.js",
13 |     library: "JSONSchemaForm",
14 |     libraryTarget: "umd"
15 |   },
16 |   plugins: [
17 |     new webpack.DefinePlugin({
18 |       "process.env": {
19 |         NODE_ENV: JSON.stringify("production")
20 |       }
21 |     })
22 |   ],
23 |   devtool: "source-map",
24 |   externals: {
25 |     react: {
26 |       root: "React",
27 |       commonjs: "react",
28 |       commonjs2: "react",
29 |       amd: "react"
30 |     },
31 |     'react-dom': {
32 |       root: "ReactDOM",
33 |       commonjs2: 'react-dom',
34 |       commonjs: 'react-dom',
35 |       amd: 'react-dom',
36 |       umd: 'react-dom',
37 |     }
38 |   },
39 |   module: {
40 |     rules: [
41 |       {
42 |         test: /\.js$/,
43 |         use: [
44 |           "babel-loader",
45 |         ],
46 |         exclude: [
47 |           path.join(__dirname, "node_modules", "core-js"),
48 |           path.join(__dirname, "node_modules", "babel-runtime"),
49 |         ],
50 |       },
51 |     ]
52 |   }
53 | };
54 | 


--------------------------------------------------------------------------------
/playground/samples/validation.js:
--------------------------------------------------------------------------------
 1 | function validate({ pass1, pass2 }, errors) {
 2 |   if (pass1 !== pass2) {
 3 |     errors.pass2.addError("Passwords don't match.");
 4 |   }
 5 |   return errors;
 6 | }
 7 | 
 8 | function transformErrors(errors) {
 9 |   return errors.map(error => {
10 |     if (error.name === "minimum" && error.property === "instance.age") {
11 |       return Object.assign({}, error, {
12 |         message: "You need to be 18 because of some legal thing",
13 |       });
14 |     }
15 |     return error;
16 |   });
17 | }
18 | 
19 | export default {
20 |   schema: {
21 |     title: "Custom validation",
22 |     description:
23 |       "This form defines custom validation rules checking that the two passwords match.",
24 |     type: "object",
25 |     properties: {
26 |       pass1: {
27 |         title: "Password",
28 |         type: "string",
29 |         minLength: 3,
30 |       },
31 |       pass2: {
32 |         title: "Repeat password",
33 |         type: "string",
34 |         minLength: 3,
35 |       },
36 |       age: {
37 |         title: "Age",
38 |         type: "number",
39 |         minimum: 18,
40 |       },
41 |     },
42 |   },
43 |   uiSchema: {
44 |     pass1: { "ui:widget": "password" },
45 |     pass2: { "ui:widget": "password" },
46 |   },
47 |   formData: {},
48 |   validate,
49 |   transformErrors,
50 | };
51 | 


--------------------------------------------------------------------------------
/src/components/widgets/index.js:
--------------------------------------------------------------------------------
 1 | import AltDateWidget from "./AltDateWidget";
 2 | import AltDateTimeWidget from "./AltDateTimeWidget";
 3 | import BaseInput from "./BaseInput";
 4 | import CheckboxWidget from "./CheckboxWidget";
 5 | import CheckboxesWidget from "./CheckboxesWidget";
 6 | import ColorWidget from "./ColorWidget";
 7 | import DateWidget from "./DateWidget";
 8 | import DateTimeWidget from "./DateTimeWidget";
 9 | import EmailWidget from "./EmailWidget";
10 | import FileWidget from "./FileWidget";
11 | import HiddenWidget from "./HiddenWidget";
12 | import PasswordWidget from "./PasswordWidget";
13 | import RadioWidget from "./RadioWidget";
14 | import RangeWidget from "./RangeWidget";
15 | import SelectWidget from "./SelectWidget";
16 | import TextareaWidget from "./TextareaWidget";
17 | import TextWidget from "./TextWidget";
18 | import URLWidget from "./URLWidget";
19 | import UpDownWidget from "./UpDownWidget";
20 | 
21 | export default {
22 |   BaseInput,
23 |   PasswordWidget,
24 |   RadioWidget,
25 |   UpDownWidget,
26 |   RangeWidget,
27 |   SelectWidget,
28 |   TextWidget,
29 |   DateWidget,
30 |   DateTimeWidget,
31 |   AltDateWidget,
32 |   AltDateTimeWidget,
33 |   EmailWidget,
34 |   URLWidget,
35 |   TextareaWidget,
36 |   HiddenWidget,
37 |   ColorWidget,
38 |   FileWidget,
39 |   CheckboxWidget,
40 |   CheckboxesWidget,
41 | };
42 | 


--------------------------------------------------------------------------------
/playground/samples/anyOf.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     type: "object",
 4 |     properties: {
 5 |       age: {
 6 |         type: "integer",
 7 |         title: "Age",
 8 |       },
 9 |       items: {
10 |         type: "array",
11 |         items: {
12 |           type: "object",
13 |           anyOf: [
14 |             {
15 |               properties: {
16 |                 foo: {
17 |                   type: "string",
18 |                 },
19 |               },
20 |             },
21 |             {
22 |               properties: {
23 |                 bar: {
24 |                   type: "string",
25 |                 },
26 |               },
27 |             },
28 |           ],
29 |         },
30 |       },
31 |     },
32 |     anyOf: [
33 |       {
34 |         title: "First method of identification",
35 |         properties: {
36 |           firstName: {
37 |             type: "string",
38 |             title: "First name",
39 |             default: "Chuck",
40 |           },
41 |           lastName: {
42 |             type: "string",
43 |             title: "Last name",
44 |           },
45 |         },
46 |       },
47 |       {
48 |         title: "Second method of identification",
49 |         properties: {
50 |           idCode: {
51 |             type: "string",
52 |             title: "ID code",
53 |           },
54 |         },
55 |       },
56 |     ],
57 |   },
58 |   formData: {},
59 | };
60 | 


--------------------------------------------------------------------------------
/playground/samples/date.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "Date and time widgets",
 4 |     type: "object",
 5 |     properties: {
 6 |       native: {
 7 |         title: "Native",
 8 |         description:
 9 |           "May not work on some browsers, notably Firefox Desktop and IE.",
10 |         type: "object",
11 |         properties: {
12 |           datetime: {
13 |             type: "string",
14 |             format: "date-time",
15 |           },
16 |           date: {
17 |             type: "string",
18 |             format: "date",
19 |           },
20 |         },
21 |       },
22 |       alternative: {
23 |         title: "Alternative",
24 |         description: "These work on most platforms.",
25 |         type: "object",
26 |         properties: {
27 |           "alt-datetime": {
28 |             type: "string",
29 |             format: "date-time",
30 |           },
31 |           "alt-date": {
32 |             type: "string",
33 |             format: "date",
34 |           },
35 |         },
36 |       },
37 |     },
38 |   },
39 |   uiSchema: {
40 |     alternative: {
41 |       "alt-datetime": {
42 |         "ui:widget": "alt-datetime",
43 |         "ui:options": {
44 |           yearsRange: [1980, 2030],
45 |         },
46 |       },
47 |       "alt-date": {
48 |         "ui:widget": "alt-date",
49 |         "ui:options": {
50 |           yearsRange: [1980, 2030],
51 |         },
52 |       },
53 |     },
54 |   },
55 |   formData: {},
56 | };
57 | 


--------------------------------------------------------------------------------
/playground/samples/numbers.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     type: "object",
 4 |     title: "Number fields & widgets",
 5 |     properties: {
 6 |       number: {
 7 |         title: "Number",
 8 |         type: "number",
 9 |       },
10 |       integer: {
11 |         title: "Integer",
12 |         type: "integer",
13 |       },
14 |       numberEnum: {
15 |         type: "number",
16 |         title: "Number enum",
17 |         enum: [1, 2, 3],
18 |       },
19 |       numberEnumRadio: {
20 |         type: "number",
21 |         title: "Number enum",
22 |         enum: [1, 2, 3],
23 |       },
24 |       integerRange: {
25 |         title: "Integer range",
26 |         type: "integer",
27 |         minimum: 42,
28 |         maximum: 100,
29 |       },
30 |       integerRangeSteps: {
31 |         title: "Integer range (by 10)",
32 |         type: "integer",
33 |         minimum: 50,
34 |         maximum: 100,
35 |         multipleOf: 10,
36 |       },
37 |     },
38 |   },
39 |   uiSchema: {
40 |     integer: {
41 |       "ui:widget": "updown",
42 |     },
43 |     numberEnumRadio: {
44 |       "ui:widget": "radio",
45 |       "ui:options": {
46 |         inline: true,
47 |       },
48 |     },
49 |     integerRange: {
50 |       "ui:widget": "range",
51 |     },
52 |     integerRangeSteps: {
53 |       "ui:widget": "range",
54 |     },
55 |   },
56 |   formData: {
57 |     number: 3.14,
58 |     integer: 42,
59 |     numberEnum: 2,
60 |     integerRange: 42,
61 |     integerRangeSteps: 80,
62 |   },
63 | };
64 | 


--------------------------------------------------------------------------------
/test/const_test.js:
--------------------------------------------------------------------------------
 1 | import { expect } from "chai";
 2 | 
 3 | import { createFormComponent, createSandbox } from "./test_utils";
 4 | 
 5 | describe("const", () => {
 6 |   let sandbox;
 7 | 
 8 |   beforeEach(() => {
 9 |     sandbox = createSandbox();
10 |   });
11 | 
12 |   afterEach(() => {
13 |     sandbox.restore();
14 |   });
15 | 
16 |   it("should render a schema that uses const with a string value", () => {
17 |     const schema = {
18 |       type: "object",
19 |       properties: {
20 |         foo: { const: "bar" },
21 |       },
22 |     };
23 | 
24 |     const { node } = createFormComponent({
25 |       schema,
26 |     });
27 | 
28 |     expect(node.querySelector("input#root_foo")).not.eql(null);
29 |   });
30 | 
31 |   it("should render a schema that uses const with a number value", () => {
32 |     const schema = {
33 |       type: "object",
34 |       properties: {
35 |         foo: { const: 123 },
36 |       },
37 |     };
38 | 
39 |     const { node } = createFormComponent({
40 |       schema,
41 |     });
42 | 
43 |     expect(node.querySelector("input#root_foo")).not.eql(null);
44 |   });
45 | 
46 |   it("should render a schema that uses const with a boolean value", () => {
47 |     const schema = {
48 |       type: "object",
49 |       properties: {
50 |         foo: { const: true },
51 |       },
52 |     };
53 | 
54 |     const { node } = createFormComponent({
55 |       schema,
56 |     });
57 | 
58 |     expect(node.querySelector("input#root_foo[type='checkbox']")).not.eql(null);
59 |   });
60 | });
61 | 


--------------------------------------------------------------------------------
/test/NullField_test.js:
--------------------------------------------------------------------------------
 1 | import { expect } from "chai";
 2 | 
 3 | import { createFormComponent, createSandbox } from "./test_utils";
 4 | 
 5 | describe("NullField", () => {
 6 |   let sandbox;
 7 | 
 8 |   beforeEach(() => {
 9 |     sandbox = createSandbox();
10 |   });
11 | 
12 |   afterEach(() => {
13 |     sandbox.restore();
14 |   });
15 | 
16 |   describe("No widget", () => {
17 |     it("should render a null field", () => {
18 |       const { node } = createFormComponent({
19 |         schema: {
20 |           type: "null",
21 |         },
22 |       });
23 | 
24 |       expect(node.querySelectorAll(".field")).to.have.length.of(1);
25 |     });
26 | 
27 |     it("should render a null field with a label", () => {
28 |       const { node } = createFormComponent({
29 |         schema: {
30 |           type: "null",
31 |           title: "foo",
32 |         },
33 |       });
34 | 
35 |       expect(node.querySelector(".field label").textContent).eql("foo");
36 |     });
37 | 
38 |     it("should assign a default value", () => {
39 |       const { comp } = createFormComponent({
40 |         schema: {
41 |           type: "null",
42 |           default: null,
43 |         },
44 |       });
45 | 
46 |       expect(comp.state.formData).eql(null);
47 |     });
48 | 
49 |     it("should not overwrite existing data", () => {
50 |       const { comp } = createFormComponent({
51 |         schema: {
52 |           type: "null",
53 |         },
54 |         formData: 3,
55 |       });
56 | 
57 |       expect(comp.state.formData).eql(3);
58 |     });
59 |   });
60 | });
61 | 


--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | var webpack = require("webpack");
 3 | var MiniCssExtractPlugin = require("mini-css-extract-plugin");
 4 | 
 5 | module.exports = {
 6 |   mode: "production",
 7 |   entry: "./playground/app",
 8 |   output: {
 9 |     path: path.join(__dirname, "build"),
10 |     filename: "bundle.js",
11 |     publicPath: "/static/"
12 |   },
13 |   plugins: [
14 |     new MiniCssExtractPlugin({filename: "styles.css", allChunks: true}),
15 |     new webpack.DefinePlugin({
16 |       "process.env": {
17 |         NODE_ENV: JSON.stringify("production"),
18 |         SHOW_NETLIFY_BADGE: JSON.stringify(process.env.SHOW_NETLIFY_BADGE)
19 |       }
20 |     })
21 |   ],
22 |   resolve: {
23 |     extensions: [".js", ".jsx", ".css"]
24 |   },
25 |   module: {
26 |     rules: [
27 |       {
28 |         test: /\.jsx?$/,
29 |         use: [
30 |           "babel-loader",
31 |         ],
32 |         include: [
33 |           path.join(__dirname, "src"),
34 |           path.join(__dirname, "playground"),
35 |           path.join(__dirname, "node_modules", "codemirror", "mode", "javascript"),
36 |         ],
37 |       },
38 |       {
39 |         test: /\.css$/,
40 |         use: [
41 |           {
42 |             loader: MiniCssExtractPlugin.loader,
43 |           },
44 |           "css-loader",
45 |         ],
46 |         include: [
47 |           path.join(__dirname, "css"),
48 |           path.join(__dirname, "playground"),
49 |           path.join(__dirname, "node_modules"),
50 |         ],
51 |       }
52 |     ]
53 |   }
54 | };
55 | 


--------------------------------------------------------------------------------
/playground/samples/references.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     definitions: {
 4 |       address: {
 5 |         type: "object",
 6 |         properties: {
 7 |           street_address: { type: "string" },
 8 |           city: { type: "string" },
 9 |           state: { type: "string" },
10 |         },
11 |         required: ["street_address", "city", "state"],
12 |       },
13 |       node: {
14 |         type: "object",
15 |         properties: {
16 |           name: { type: "string" },
17 |           children: {
18 |             type: "array",
19 |             items: {
20 |               $ref: "#/definitions/node",
21 |             },
22 |           },
23 |         },
24 |       },
25 |     },
26 |     type: "object",
27 |     properties: {
28 |       billing_address: {
29 |         title: "Billing address",
30 |         $ref: "#/definitions/address",
31 |       },
32 |       shipping_address: {
33 |         title: "Shipping address",
34 |         $ref: "#/definitions/address",
35 |       },
36 |       tree: {
37 |         title: "Recursive references",
38 |         $ref: "#/definitions/node",
39 |       },
40 |     },
41 |   },
42 |   uiSchema: {
43 |     "ui:order": ["shipping_address", "billing_address", "tree"],
44 |   },
45 |   formData: {
46 |     billing_address: {
47 |       street_address: "21, Jump Street",
48 |       city: "Babel",
49 |       state: "Neverland",
50 |     },
51 |     shipping_address: {
52 |       street_address: "221B, Baker Street",
53 |       city: "London",
54 |       state: "N/A",
55 |     },
56 |     tree: {
57 |       name: "root",
58 |       children: [{ name: "leaf" }],
59 |     },
60 |   },
61 | };
62 | 


--------------------------------------------------------------------------------
/test/DescriptionField_test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { expect } from "chai";
 3 | 
 4 | import DescriptionField from "../src/components/fields/DescriptionField";
 5 | import { createSandbox, createComponent } from "./test_utils";
 6 | 
 7 | describe("DescriptionField", () => {
 8 |   let sandbox;
 9 | 
10 |   beforeEach(() => {
11 |     sandbox = createSandbox();
12 |   });
13 | 
14 |   afterEach(() => {
15 |     sandbox.restore();
16 |   });
17 | 
18 |   // For some reason, stateless components needs to be wrapped into a stateful
19 |   // one to be rendered into the document.
20 |   class DescriptionFieldWrapper extends React.Component {
21 |     constructor(props) {
22 |       super(props);
23 |     }
24 |     render() {
25 |       return <DescriptionField {...this.props} />;
26 |     }
27 |   }
28 | 
29 |   it("should return a div for a custom component", () => {
30 |     const props = {
31 |       description: <em>description</em>,
32 |     };
33 |     const { node } = createComponent(DescriptionFieldWrapper, props);
34 | 
35 |     expect(node.tagName).to.equal("DIV");
36 |   });
37 | 
38 |   it("should return a p for a description text", () => {
39 |     const props = {
40 |       description: "description",
41 |     };
42 |     const { node } = createComponent(DescriptionFieldWrapper, props);
43 | 
44 |     expect(node.tagName).to.equal("P");
45 |   });
46 | 
47 |   it("should have the expected id", () => {
48 |     const props = {
49 |       description: "Field description",
50 |       id: "sample_id",
51 |     };
52 |     const { node } = createComponent(DescriptionFieldWrapper, props);
53 | 
54 |     expect(node.id).to.equal("sample_id");
55 |   });
56 | });
57 | 


--------------------------------------------------------------------------------
/playground/samples/simple.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A registration form",
 4 |     description: "A simple form example.",
 5 |     type: "object",
 6 |     required: ["firstName", "lastName"],
 7 |     properties: {
 8 |       firstName: {
 9 |         type: "string",
10 |         title: "First name",
11 |         default: "Chuck",
12 |       },
13 |       lastName: {
14 |         type: "string",
15 |         title: "Last name",
16 |       },
17 |       age: {
18 |         type: "integer",
19 |         title: "Age",
20 |       },
21 |       bio: {
22 |         type: "string",
23 |         title: "Bio",
24 |       },
25 |       password: {
26 |         type: "string",
27 |         title: "Password",
28 |         minLength: 3,
29 |       },
30 |       telephone: {
31 |         type: "string",
32 |         title: "Telephone",
33 |         minLength: 10,
34 |       },
35 |     },
36 |   },
37 |   uiSchema: {
38 |     firstName: {
39 |       "ui:autofocus": true,
40 |       "ui:emptyValue": "",
41 |     },
42 |     age: {
43 |       "ui:widget": "updown",
44 |       "ui:title": "Age of person",
45 |       "ui:description": "(earthian year)",
46 |     },
47 |     bio: {
48 |       "ui:widget": "textarea",
49 |     },
50 |     password: {
51 |       "ui:widget": "password",
52 |       "ui:help": "Hint: Make it strong!",
53 |     },
54 |     date: {
55 |       "ui:widget": "alt-datetime",
56 |     },
57 |     telephone: {
58 |       "ui:options": {
59 |         inputType: "tel",
60 |       },
61 |     },
62 |   },
63 |   formData: {
64 |     lastName: "Norris",
65 |     age: 75,
66 |     bio: "Roundhouse kicking asses since 1940",
67 |     password: "noneed",
68 |   },
69 | };
70 | 


--------------------------------------------------------------------------------
/playground/samples/customArray.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function ArrayFieldTemplate(props) {
 4 |   return (
 5 |     <div className={props.className}>
 6 |       {props.items &&
 7 |         props.items.map(element => (
 8 |           <div key={element.key} className={element.className}>
 9 |             <div>{element.children}</div>
10 |             {element.hasMoveDown && (
11 |               <button
12 |                 onClick={element.onReorderClick(
13 |                   element.index,
14 |                   element.index + 1
15 |                 )}>
16 |                 Down
17 |               </button>
18 |             )}
19 |             {element.hasMoveUp && (
20 |               <button
21 |                 onClick={element.onReorderClick(
22 |                   element.index,
23 |                   element.index - 1
24 |                 )}>
25 |                 Up
26 |               </button>
27 |             )}
28 |             <button onClick={element.onDropIndexClick(element.index)}>
29 |               Delete
30 |             </button>
31 |             <hr />
32 |           </div>
33 |         ))}
34 | 
35 |       {props.canAdd && (
36 |         <div className="row">
37 |           <p className="col-xs-3 col-xs-offset-9 array-item-add text-right">
38 |             <button onClick={props.onAddClick} type="button">
39 |               Custom +
40 |             </button>
41 |           </p>
42 |         </div>
43 |       )}
44 |     </div>
45 |   );
46 | }
47 | 
48 | export default {
49 |   schema: {
50 |     title: "Custom array of strings",
51 |     type: "array",
52 |     items: {
53 |       type: "string",
54 |     },
55 |   },
56 |   formData: ["react", "jsonschema", "form"],
57 |   ArrayFieldTemplate,
58 | };
59 | 


--------------------------------------------------------------------------------
/playground/samples/index.js:
--------------------------------------------------------------------------------
 1 | import arrays from "./arrays";
 2 | import anyOf from "./anyOf";
 3 | import oneOf from "./oneOf";
 4 | import nested from "./nested";
 5 | import numbers from "./numbers";
 6 | import simple from "./simple";
 7 | import widgets from "./widgets";
 8 | import ordering from "./ordering";
 9 | import references from "./references";
10 | import custom from "./custom";
11 | import errors from "./errors";
12 | import large from "./large";
13 | import date from "./date";
14 | import validation from "./validation";
15 | import files from "./files";
16 | import single from "./single";
17 | import customArray from "./customArray";
18 | import customObject from "./customObject";
19 | import alternatives from "./alternatives";
20 | import propertyDependencies from "./propertyDependencies";
21 | import schemaDependencies from "./schemaDependencies";
22 | import additionalProperties from "./additionalProperties";
23 | import nullable from "./nullable";
24 | import nullField from "./null";
25 | 
26 | export const samples = {
27 |   Simple: simple,
28 |   Nested: nested,
29 |   Arrays: arrays,
30 |   Numbers: numbers,
31 |   Widgets: widgets,
32 |   Ordering: ordering,
33 |   References: references,
34 |   Custom: custom,
35 |   Errors: errors,
36 |   Large: large,
37 |   "Date & time": date,
38 |   Validation: validation,
39 |   Files: files,
40 |   Single: single,
41 |   "Custom Array": customArray,
42 |   "Custom Object": customObject,
43 |   Alternatives: alternatives,
44 |   "Property dependencies": propertyDependencies,
45 |   "Schema dependencies": schemaDependencies,
46 |   "Additional Properties": additionalProperties,
47 |   "Any Of": anyOf,
48 |   "One Of": oneOf,
49 |   "Null fields": nullField,
50 |   Nullable: nullable,
51 | };
52 | 


--------------------------------------------------------------------------------
/playground/samples/customObject.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function ObjectFieldTemplate({ TitleField, properties, title, description }) {
 4 |   return (
 5 |     <div>
 6 |       <TitleField title={title} />
 7 |       <div className="row">
 8 |         {properties.map(prop => (
 9 |           <div
10 |             className="col-lg-2 col-md-4 col-sm-6 col-xs-12"
11 |             key={prop.content.key}>
12 |             {prop.content}
13 |           </div>
14 |         ))}
15 |       </div>
16 |       {description}
17 |     </div>
18 |   );
19 | }
20 | 
21 | export default {
22 |   schema: {
23 |     title: "A registration form",
24 |     description:
25 |       "This is the same as the simple form, but it is rendered as a bootstrap grid. Try shrinking the browser window to see it in action.",
26 |     type: "object",
27 |     required: ["firstName", "lastName"],
28 |     properties: {
29 |       firstName: {
30 |         type: "string",
31 |         title: "First name",
32 |       },
33 |       lastName: {
34 |         type: "string",
35 |         title: "Last name",
36 |       },
37 |       age: {
38 |         type: "integer",
39 |         title: "Age",
40 |       },
41 |       bio: {
42 |         type: "string",
43 |         title: "Bio",
44 |       },
45 |       password: {
46 |         type: "string",
47 |         title: "Password",
48 |         minLength: 3,
49 |       },
50 |       telephone: {
51 |         type: "string",
52 |         title: "Telephone",
53 |         minLength: 10,
54 |       },
55 |     },
56 |   },
57 |   formData: {
58 |     firstName: "Chuck",
59 |     lastName: "Norris",
60 |     age: 75,
61 |     bio: "Roundhouse kicking asses since 1940",
62 |     password: "noneed",
63 |   },
64 |   ObjectFieldTemplate,
65 | };
66 | 


--------------------------------------------------------------------------------
/playground/samples/nested.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A list of tasks",
 4 |     type: "object",
 5 |     required: ["title"],
 6 |     properties: {
 7 |       title: {
 8 |         type: "string",
 9 |         title: "Task list title",
10 |       },
11 |       tasks: {
12 |         type: "array",
13 |         title: "Tasks",
14 |         items: {
15 |           type: "object",
16 |           required: ["title"],
17 |           properties: {
18 |             title: {
19 |               type: "string",
20 |               title: "Title",
21 |               description: "A sample title",
22 |             },
23 |             details: {
24 |               type: "string",
25 |               title: "Task details",
26 |               description: "Enter the task details",
27 |             },
28 |             done: {
29 |               type: "boolean",
30 |               title: "Done?",
31 |               default: false,
32 |             },
33 |           },
34 |         },
35 |       },
36 |     },
37 |   },
38 |   uiSchema: {
39 |     tasks: {
40 |       items: {
41 |         details: {
42 |           "ui:widget": "textarea",
43 |         },
44 |       },
45 |     },
46 |   },
47 |   formData: {
48 |     title: "My current tasks",
49 |     tasks: [
50 |       {
51 |         title: "My first task",
52 |         details:
53 |           "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
54 |         done: true,
55 |       },
56 |       {
57 |         title: "My second task",
58 |         details:
59 |           "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
60 |         done: false,
61 |       },
62 |     ],
63 |   },
64 | };
65 | 


--------------------------------------------------------------------------------
/src/components/widgets/TextareaWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function TextareaWidget(props) {
 5 |   const {
 6 |     id,
 7 |     options,
 8 |     placeholder,
 9 |     value,
10 |     required,
11 |     disabled,
12 |     readonly,
13 |     autofocus,
14 |     onChange,
15 |     onBlur,
16 |     onFocus,
17 |   } = props;
18 |   const _onChange = ({ target: { value } }) => {
19 |     return onChange(value === "" ? options.emptyValue : value);
20 |   };
21 |   return (
22 |     <textarea
23 |       id={id}
24 |       className="form-control"
25 |       value={typeof value === "undefined" ? "" : value}
26 |       placeholder={placeholder}
27 |       required={required}
28 |       disabled={disabled}
29 |       readOnly={readonly}
30 |       autoFocus={autofocus}
31 |       rows={options.rows}
32 |       onBlur={onBlur && (event => onBlur(id, event.target.value))}
33 |       onFocus={onFocus && (event => onFocus(id, event.target.value))}
34 |       onChange={_onChange}
35 |     />
36 |   );
37 | }
38 | 
39 | TextareaWidget.defaultProps = {
40 |   autofocus: false,
41 |   options: {},
42 | };
43 | 
44 | if (process.env.NODE_ENV !== "production") {
45 |   TextareaWidget.propTypes = {
46 |     schema: PropTypes.object.isRequired,
47 |     id: PropTypes.string.isRequired,
48 |     placeholder: PropTypes.string,
49 |     options: PropTypes.shape({
50 |       rows: PropTypes.number,
51 |     }),
52 |     value: PropTypes.string,
53 |     required: PropTypes.bool,
54 |     disabled: PropTypes.bool,
55 |     readonly: PropTypes.bool,
56 |     autofocus: PropTypes.bool,
57 |     onChange: PropTypes.func,
58 |     onBlur: PropTypes.func,
59 |     onFocus: PropTypes.func,
60 |   };
61 | }
62 | 
63 | export default TextareaWidget;
64 | 


--------------------------------------------------------------------------------
/src/components/widgets/DateTimeWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import { pad } from "../../utils";
 4 | 
 5 | export function utcToLocal(jsonDate) {
 6 |   if (!jsonDate) {
 7 |     return "";
 8 |   }
 9 | 
10 |   // required format of `"yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS"
11 |   // https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type%3Ddatetime-local)
12 |   // > should be a _valid local date and time string_ (not GMT)
13 | 
14 |   // Note - date constructor passed local ISO-8601 does not correctly
15 |   // change time to UTC in node pre-8
16 |   const date = new Date(jsonDate);
17 | 
18 |   const yyyy = pad(date.getFullYear(), 4);
19 |   const MM = pad(date.getMonth() + 1, 2);
20 |   const dd = pad(date.getDate(), 2);
21 |   const hh = pad(date.getHours(), 2);
22 |   const mm = pad(date.getMinutes(), 2);
23 |   const ss = pad(date.getSeconds(), 2);
24 |   const SSS = pad(date.getMilliseconds(), 3);
25 | 
26 |   return `${yyyy}-${MM}-${dd}T${hh}:${mm}:${ss}.${SSS}`;
27 | }
28 | 
29 | export function localToUTC(dateString) {
30 |   if (dateString) {
31 |     return new Date(dateString).toJSON();
32 |   }
33 | }
34 | 
35 | function DateTimeWidget(props) {
36 |   const {
37 |     value,
38 |     onChange,
39 |     registry: {
40 |       widgets: { BaseInput },
41 |     },
42 |   } = props;
43 |   return (
44 |     <BaseInput
45 |       type="datetime-local"
46 |       {...props}
47 |       value={utcToLocal(value)}
48 |       onChange={value => onChange(localToUTC(value))}
49 |     />
50 |   );
51 | }
52 | 
53 | if (process.env.NODE_ENV !== "production") {
54 |   DateTimeWidget.propTypes = {
55 |     value: PropTypes.string,
56 |   };
57 | }
58 | 
59 | export default DateTimeWidget;
60 | 


--------------------------------------------------------------------------------
/playground/samples/nullable.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "A registration form (nullable)",
 4 |     description: "A simple form example using nullable types",
 5 |     type: "object",
 6 |     required: ["firstName", "lastName"],
 7 |     properties: {
 8 |       firstName: {
 9 |         type: "string",
10 |         title: "First name",
11 |         default: "Chuck",
12 |       },
13 |       lastName: {
14 |         type: "string",
15 |         title: "Last name",
16 |       },
17 |       age: {
18 |         type: ["integer", "null"],
19 |         title: "Age",
20 |       },
21 |       bio: {
22 |         type: ["string", "null"],
23 |         title: "Bio",
24 |       },
25 |       password: {
26 |         type: "string",
27 |         title: "Password",
28 |         minLength: 3,
29 |       },
30 |       telephone: {
31 |         type: "string",
32 |         title: "Telephone",
33 |         minLength: 10,
34 |       },
35 |     },
36 |   },
37 |   uiSchema: {
38 |     firstName: {
39 |       "ui:autofocus": true,
40 |       "ui:emptyValue": "",
41 |     },
42 |     age: {
43 |       "ui:widget": "updown",
44 |       "ui:title": "Age of person",
45 |       "ui:description": "(earthian year)",
46 |       "ui:emptyValue": null,
47 |     },
48 |     bio: {
49 |       "ui:widget": "textarea",
50 |       "ui:placeholder":
51 |         "Leaving this field empty will cause formData property to be `null`",
52 |       "ui:emptyValue": null,
53 |     },
54 |     password: {
55 |       "ui:widget": "password",
56 |       "ui:help": "Hint: Make it strong!",
57 |     },
58 |     date: {
59 |       "ui:widget": "alt-datetime",
60 |     },
61 |     telephone: {
62 |       "ui:options": {
63 |         inputType: "tel",
64 |       },
65 |     },
66 |   },
67 |   formData: {
68 |     lastName: "Norris",
69 |     age: 75,
70 |     bio: null,
71 |     password: "noneed",
72 |   },
73 | };
74 | 


--------------------------------------------------------------------------------
/src/components/fields/StringField.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as types from "../../types";
 3 | 
 4 | import {
 5 |   getWidget,
 6 |   getUiOptions,
 7 |   isSelect,
 8 |   optionsList,
 9 |   getDefaultRegistry,
10 |   hasWidget,
11 | } from "../../utils";
12 | 
13 | function StringField(props) {
14 |   const {
15 |     schema,
16 |     name,
17 |     uiSchema,
18 |     idSchema,
19 |     formData,
20 |     required,
21 |     disabled,
22 |     readonly,
23 |     autofocus,
24 |     onChange,
25 |     onBlur,
26 |     onFocus,
27 |     registry = getDefaultRegistry(),
28 |     rawErrors,
29 |   } = props;
30 |   const { title, format } = schema;
31 |   const { widgets, formContext } = registry;
32 |   const enumOptions = isSelect(schema) && optionsList(schema);
33 |   let defaultWidget = enumOptions ? "select" : "text";
34 |   if (format && hasWidget(schema, format, widgets)) {
35 |     defaultWidget = format;
36 |   }
37 |   const { widget = defaultWidget, placeholder = "", ...options } = getUiOptions(
38 |     uiSchema
39 |   );
40 |   const Widget = getWidget(schema, widget, widgets);
41 |   return (
42 |     <Widget
43 |       options={{ ...options, enumOptions }}
44 |       schema={schema}
45 |       id={idSchema && idSchema.$id}
46 |       label={title === undefined ? name : title}
47 |       value={formData}
48 |       onChange={onChange}
49 |       onBlur={onBlur}
50 |       onFocus={onFocus}
51 |       required={required}
52 |       disabled={disabled}
53 |       readonly={readonly}
54 |       formContext={formContext}
55 |       autofocus={autofocus}
56 |       registry={registry}
57 |       placeholder={placeholder}
58 |       rawErrors={rawErrors}
59 |     />
60 |   );
61 | }
62 | 
63 | if (process.env.NODE_ENV !== "production") {
64 |   StringField.propTypes = types.fieldProps;
65 | }
66 | 
67 | StringField.defaultProps = {
68 |   uiSchema: {},
69 |   disabled: false,
70 |   readonly: false,
71 |   autofocus: false,
72 | };
73 | 
74 | export default StringField;
75 | 


--------------------------------------------------------------------------------
/test/TitleField_test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { expect } from "chai";
 3 | 
 4 | import TitleField from "../src/components/fields/TitleField";
 5 | import { createSandbox, createComponent } from "./test_utils";
 6 | 
 7 | describe("TitleField", () => {
 8 |   let sandbox;
 9 | 
10 |   beforeEach(() => {
11 |     sandbox = createSandbox();
12 |   });
13 | 
14 |   afterEach(() => {
15 |     sandbox.restore();
16 |   });
17 | 
18 |   // For some reason, stateless components needs to be wrapped into a stateful
19 |   // one to be rendered into the document.
20 |   class TitleFieldWrapper extends React.Component {
21 |     constructor(props) {
22 |       super(props);
23 |     }
24 |     render() {
25 |       return <TitleField {...this.props} />;
26 |     }
27 |   }
28 | 
29 |   it("should return a legend", () => {
30 |     const props = {
31 |       title: "Field title",
32 |       required: true,
33 |     };
34 |     const { node } = createComponent(TitleFieldWrapper, props);
35 | 
36 |     expect(node.tagName).to.equal("LEGEND");
37 |   });
38 | 
39 |   it("should have the expected id", () => {
40 |     const props = {
41 |       title: "Field title",
42 |       required: true,
43 |       id: "sample_id",
44 |     };
45 |     const { node } = createComponent(TitleFieldWrapper, props);
46 | 
47 |     expect(node.id).to.equal("sample_id");
48 |   });
49 | 
50 |   it("should include only title, when field is not required", () => {
51 |     const props = {
52 |       title: "Field title",
53 |       required: false,
54 |     };
55 |     const { node } = createComponent(TitleFieldWrapper, props);
56 | 
57 |     expect(node.textContent).to.equal(props.title);
58 |   });
59 | 
60 |   it("should add an asterisk to the title, when field is required", () => {
61 |     const props = {
62 |       title: "Field title",
63 |       required: true,
64 |     };
65 |     const { node } = createComponent(TitleFieldWrapper, props);
66 | 
67 |     expect(node.textContent).to.equal(props.title + "*");
68 | 
69 |     expect(node.querySelector("span.required").textContent).to.equal("*");
70 |   });
71 | });
72 | 


--------------------------------------------------------------------------------
/src/components/fields/BooleanField.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as types from "../../types";
 3 | 
 4 | import {
 5 |   getWidget,
 6 |   getUiOptions,
 7 |   optionsList,
 8 |   getDefaultRegistry,
 9 | } from "../../utils";
10 | 
11 | function BooleanField(props) {
12 |   const {
13 |     schema,
14 |     name,
15 |     uiSchema,
16 |     idSchema,
17 |     formData,
18 |     registry = getDefaultRegistry(),
19 |     required,
20 |     disabled,
21 |     readonly,
22 |     autofocus,
23 |     onChange,
24 |     onFocus,
25 |     onBlur,
26 |     rawErrors,
27 |   } = props;
28 |   const { title } = schema;
29 |   const { widgets, formContext } = registry;
30 |   const { widget = "checkbox", ...options } = getUiOptions(uiSchema);
31 |   const Widget = getWidget(schema, widget, widgets);
32 | 
33 |   let enumOptions;
34 | 
35 |   if (Array.isArray(schema.oneOf)) {
36 |     enumOptions = optionsList({
37 |       oneOf: schema.oneOf.map(option => ({
38 |         ...option,
39 |         title: option.title || (option.const === true ? "yes" : "no"),
40 |       })),
41 |     });
42 |   } else {
43 |     enumOptions = optionsList({
44 |       enum: schema.enum || [true, false],
45 |       enumNames:
46 |         schema.enumNames ||
47 |         (schema.enum && schema.enum[0] === false
48 |           ? ["no", "yes"]
49 |           : ["yes", "no"]),
50 |     });
51 |   }
52 | 
53 |   return (
54 |     <Widget
55 |       options={{ ...options, enumOptions }}
56 |       schema={schema}
57 |       id={idSchema && idSchema.$id}
58 |       onChange={onChange}
59 |       onFocus={onFocus}
60 |       onBlur={onBlur}
61 |       label={title === undefined ? name : title}
62 |       value={formData}
63 |       required={required}
64 |       disabled={disabled}
65 |       readonly={readonly}
66 |       registry={registry}
67 |       formContext={formContext}
68 |       autofocus={autofocus}
69 |       rawErrors={rawErrors}
70 |     />
71 |   );
72 | }
73 | 
74 | if (process.env.NODE_ENV !== "production") {
75 |   BooleanField.propTypes = types.fieldProps;
76 | }
77 | 
78 | BooleanField.defaultProps = {
79 |   uiSchema: {},
80 |   disabled: false,
81 |   readonly: false,
82 |   autofocus: false,
83 | };
84 | 
85 | export default BooleanField;
86 | 


--------------------------------------------------------------------------------
/playground/samples/alternatives.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     definitions: {
 4 |       Color: {
 5 |         title: "Color",
 6 |         type: "string",
 7 |         anyOf: [
 8 |           {
 9 |             type: "string",
10 |             enum: ["#ff0000"],
11 |             title: "Red",
12 |           },
13 |           {
14 |             type: "string",
15 |             enum: ["#00ff00"],
16 |             title: "Green",
17 |           },
18 |           {
19 |             type: "string",
20 |             enum: ["#0000ff"],
21 |             title: "Blue",
22 |           },
23 |         ],
24 |       },
25 |       Toggle: {
26 |         title: "Toggle",
27 |         type: "boolean",
28 |         oneOf: [
29 |           {
30 |             title: "Enable",
31 |             const: true,
32 |           },
33 |           {
34 |             title: "Disable",
35 |             const: false,
36 |           },
37 |         ],
38 |       },
39 |     },
40 |     title: "Image editor",
41 |     type: "object",
42 |     required: ["currentColor", "colorMask", "blendMode"],
43 |     properties: {
44 |       currentColor: {
45 |         $ref: "#/definitions/Color",
46 |         title: "Brush color",
47 |       },
48 |       colorMask: {
49 |         type: "array",
50 |         uniqueItems: true,
51 |         items: {
52 |           $ref: "#/definitions/Color",
53 |         },
54 |         title: "Color mask",
55 |       },
56 |       toggleMask: {
57 |         title: "Apply color mask",
58 |         $ref: "#/definitions/Toggle",
59 |       },
60 |       colorPalette: {
61 |         type: "array",
62 |         title: "Color palette",
63 |         items: {
64 |           $ref: "#/definitions/Color",
65 |         },
66 |       },
67 |       blendMode: {
68 |         title: "Blend mode",
69 |         type: "string",
70 |         enum: ["screen", "multiply", "overlay"],
71 |         enumNames: ["Screen", "Multiply", "Overlay"],
72 |       },
73 |     },
74 |   },
75 |   uiSchema: {
76 |     blendMode: {
77 |       "ui:enumDisabled": ["multiply"],
78 |     },
79 |     toggleMask: {
80 |       "ui:widget": "radio",
81 |     },
82 |   },
83 |   formData: {
84 |     currentColor: "#00ff00",
85 |     colorMask: ["#0000ff"],
86 |     colorPalette: ["#ff0000"],
87 |     blendMode: "screen",
88 |   },
89 | };
90 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Created by https://www.gitignore.io/api/osx,node,linux,windows
  2 | # Edit at https://www.gitignore.io/?templates=osx,node,linux,windows
  3 | 
  4 | ### Linux ###
  5 | *~
  6 | 
  7 | # temporary files which can be created if a process still has a handle open of a deleted file
  8 | .fuse_hidden*
  9 | 
 10 | # KDE directory preferences
 11 | .directory
 12 | 
 13 | # Linux trash folder which might appear on any partition or disk
 14 | .Trash-*
 15 | 
 16 | # .nfs files are created when an open file is removed but is still being accessed
 17 | .nfs*
 18 | 
 19 | ### Node ###
 20 | # Logs
 21 | logs
 22 | *.log
 23 | npm-debug.log*
 24 | yarn-debug.log*
 25 | yarn-error.log*
 26 | 
 27 | # Runtime data
 28 | pids
 29 | *.pid
 30 | *.seed
 31 | *.pid.lock
 32 | 
 33 | # Coverage directory used by tools like istanbul
 34 | coverage
 35 | 
 36 | # nyc test coverage
 37 | .nyc_output
 38 | 
 39 | # Dependency directories
 40 | node_modules/
 41 | 
 42 | # Optional npm cache directory
 43 | .npm
 44 | 
 45 | # Optional eslint cache
 46 | .eslintcache
 47 | 
 48 | # Optional REPL history
 49 | .node_repl_history
 50 | 
 51 | # Output of 'npm pack'
 52 | *.tgz
 53 | 
 54 | # Yarn Integrity file
 55 | .yarn-integrity
 56 | 
 57 | # dotenv environment variables file
 58 | .env
 59 | .env.test
 60 | 
 61 | ### OSX ###
 62 | # General
 63 | .DS_Store
 64 | .AppleDouble
 65 | .LSOverride
 66 | 
 67 | # Icon must end with two \r
 68 | Icon
 69 | 
 70 | # Thumbnails
 71 | ._*
 72 | 
 73 | # Files that might appear in the root of a volume
 74 | .DocumentRevisions-V100
 75 | .fseventsd
 76 | .Spotlight-V100
 77 | .TemporaryItems
 78 | .Trashes
 79 | .VolumeIcon.icns
 80 | .com.apple.timemachine.donotpresent
 81 | 
 82 | # Directories potentially created on remote AFP share
 83 | .AppleDB
 84 | .AppleDesktop
 85 | Network Trash Folder
 86 | Temporary Items
 87 | .apdisk
 88 | 
 89 | ### Windows ###
 90 | # Windows thumbnail cache files
 91 | Thumbs.db
 92 | ehthumbs.db
 93 | ehthumbs_vista.db
 94 | 
 95 | # Dump file
 96 | *.stackdump
 97 | 
 98 | # Folder config file
 99 | [Dd]esktop.ini
100 | 
101 | # Recycle Bin used on file shares
102 | $RECYCLE.BIN/
103 | 
104 | # Windows Installer files
105 | *.cab
106 | *.msi
107 | *.msix
108 | *.msm
109 | *.msp
110 | 
111 | # Windows shortcuts
112 | *.lnk
113 | 
114 | # End of https://www.gitignore.io/api/osx,node,linux,windows
115 | 
116 | # Package specific files
117 | 
118 | build
119 | _build
120 | site
121 | dist
122 | lib
123 | yarn.lock
124 | 
125 | # IDE
126 | .vscode
127 | 
128 | # Code coverage
129 | coverage
130 | .nyc_output
131 | 


--------------------------------------------------------------------------------
/playground/samples/propertyDependencies.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   schema: {
 3 |     title: "Property dependencies",
 4 |     description: "These samples are best viewed without live validation.",
 5 |     type: "object",
 6 |     properties: {
 7 |       unidirectional: {
 8 |         title: "Unidirectional",
 9 |         src:
10 |           "https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies",
11 |         type: "object",
12 |         properties: {
13 |           name: {
14 |             type: "string",
15 |           },
16 |           credit_card: {
17 |             type: "number",
18 |           },
19 |           billing_address: {
20 |             type: "string",
21 |           },
22 |         },
23 |         required: ["name"],
24 |         dependencies: {
25 |           credit_card: ["billing_address"],
26 |         },
27 |       },
28 |       bidirectional: {
29 |         title: "Bidirectional",
30 |         src:
31 |           "https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies",
32 |         description:
33 |           "Dependencies are not bidirectional, you can, of course, define the bidirectional dependencies explicitly.",
34 |         type: "object",
35 |         properties: {
36 |           name: {
37 |             type: "string",
38 |           },
39 |           credit_card: {
40 |             type: "number",
41 |           },
42 |           billing_address: {
43 |             type: "string",
44 |           },
45 |         },
46 |         required: ["name"],
47 |         dependencies: {
48 |           credit_card: ["billing_address"],
49 |           billing_address: ["credit_card"],
50 |         },
51 |       },
52 |     },
53 |   },
54 |   uiSchema: {
55 |     unidirectional: {
56 |       credit_card: {
57 |         "ui:help":
58 |           "If you enter anything here then billing_address will become required.",
59 |       },
60 |       billing_address: {
61 |         "ui:help":
62 |           "It’s okay to have a billing address without a credit card number.",
63 |       },
64 |     },
65 |     bidirectional: {
66 |       credit_card: {
67 |         "ui:help":
68 |           "If you enter anything here then billing_address will become required.",
69 |       },
70 |       billing_address: {
71 |         "ui:help":
72 |           "If you enter anything here then credit_card will become required.",
73 |       },
74 |     },
75 |   },
76 |   formData: {
77 |     unidirectional: {
78 |       name: "Tim",
79 |     },
80 |     bidirectional: {
81 |       name: "Jill",
82 |     },
83 |   },
84 | };
85 | 


--------------------------------------------------------------------------------
/src/components/widgets/RadioWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function RadioWidget(props) {
 5 |   const {
 6 |     options,
 7 |     value,
 8 |     required,
 9 |     disabled,
10 |     readonly,
11 |     autofocus,
12 |     onBlur,
13 |     onFocus,
14 |     onChange,
15 |     id,
16 |   } = props;
17 |   // Generating a unique field name to identify this set of radio buttons
18 |   const name = Math.random().toString();
19 |   const { enumOptions, enumDisabled, inline } = options;
20 |   // checked={checked} has been moved above name={name}, As mentioned in #349;
21 |   // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
22 |   return (
23 |     <div className="field-radio-group" id={id}>
24 |       {enumOptions.map((option, i) => {
25 |         const checked = option.value === value;
26 |         const itemDisabled =
27 |           enumDisabled && enumDisabled.indexOf(option.value) != -1;
28 |         const disabledCls =
29 |           disabled || itemDisabled || readonly ? "disabled" : "";
30 |         const radio = (
31 |           <input
32 |             className="form-check-input"
33 |             type="radio"
34 |             checked={checked}
35 |             name={name}
36 |             required={required}
37 |             value={option.value}
38 |             disabled={disabled || itemDisabled || readonly}
39 |             autoFocus={autofocus && i === 0}
40 |             onChange={_ => onChange(option.value)}
41 |             onBlur={onBlur && (event => onBlur(id, event.target.value))}
42 |             onFocus={onFocus && (event => onFocus(id, event.target.value))}
43 |           />
44 |         );
45 | 
46 |         return inline ? (
47 |           <div key={i} className={`form-check-inline ${disabledCls}`}>
48 |             {radio}
49 |             <label className="form-check-label" htmlFor={i}>
50 |               {option.label}
51 |             </label>
52 |           </div>
53 |         ) : (
54 |           <div key={i} className={`form-check ${disabledCls}`}>
55 |             {radio}
56 |             <label className="form-check-label" htmlFor={i}>
57 |               {option.label}
58 |             </label>
59 |           </div>
60 |         );
61 |       })}
62 |     </div>
63 |   );
64 | }
65 | 
66 | RadioWidget.defaultProps = {
67 |   autofocus: false,
68 | };
69 | 
70 | if (process.env.NODE_ENV !== "production") {
71 |   RadioWidget.propTypes = {
72 |     schema: PropTypes.object.isRequired,
73 |     id: PropTypes.string.isRequired,
74 |     options: PropTypes.shape({
75 |       enumOptions: PropTypes.array,
76 |       inline: PropTypes.bool,
77 |     }).isRequired,
78 |     value: PropTypes.any,
79 |     required: PropTypes.bool,
80 |     disabled: PropTypes.bool,
81 |     readonly: PropTypes.bool,
82 |     autofocus: PropTypes.bool,
83 |     onChange: PropTypes.func,
84 |   };
85 | }
86 | export default RadioWidget;
87 | 


--------------------------------------------------------------------------------
/src/components/widgets/CheckboxWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import DescriptionField from "../fields/DescriptionField.js";
 4 | 
 5 | // Check to see if a schema specifies that a value must be true
 6 | function schemaRequiresTrueValue(schema) {
 7 |   // Check if const is a truthy value
 8 |   if (schema.const) {
 9 |     return true;
10 |   }
11 | 
12 |   // Check if an enum has a single value of true
13 |   if (schema.enum && schema.enum.length === 1 && schema.enum[0] === true) {
14 |     return true;
15 |   }
16 | 
17 |   // If anyOf has a single value, evaluate the subschema
18 |   if (schema.anyOf && schema.anyOf.length === 1) {
19 |     return schemaRequiresTrueValue(schema.anyOf[0]);
20 |   }
21 | 
22 |   // If oneOf has a single value, evaluate the subschema
23 |   if (schema.oneOf && schema.oneOf.length === 1) {
24 |     return schemaRequiresTrueValue(schema.oneOf[0]);
25 |   }
26 | 
27 |   // Evaluate each subschema in allOf, to see if one of them requires a true
28 |   // value
29 |   if (schema.allOf) {
30 |     return schema.allOf.some(schemaRequiresTrueValue);
31 |   }
32 | }
33 | 
34 | function CheckboxWidget(props) {
35 |   const {
36 |     schema,
37 |     id,
38 |     value,
39 |     disabled,
40 |     readonly,
41 |     label,
42 |     autofocus,
43 |     onBlur,
44 |     onFocus,
45 |     onChange,
46 |   } = props;
47 | 
48 |   // Because an unchecked checkbox will cause html5 validation to fail, only add
49 |   // the "required" attribute if the field value must be "true", due to the
50 |   // "const" or "enum" keywords
51 |   const required = schemaRequiresTrueValue(schema);
52 | 
53 |   return (
54 |     <div className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
55 |       {schema.description && (
56 |         <DescriptionField description={schema.description} />
57 |       )}
58 | 
59 |       <div className="form-check">
60 |         <input
61 |           className="form-check-input"
62 |           type="checkbox"
63 |           id={id}
64 |           checked={typeof value === "undefined" ? false : value}
65 |           required={required}
66 |           disabled={disabled || readonly}
67 |           autoFocus={autofocus}
68 |           onChange={event => onChange(event.target.checked)}
69 |           onBlur={onBlur && (event => onBlur(id, event.target.checked))}
70 |           onFocus={onFocus && (event => onFocus(id, event.target.checked))}
71 |         />
72 |         <label className="form-check-label" htmlFor="defaultCheck1">
73 |           {label}
74 |         </label>
75 |       </div>
76 |     </div>
77 |   );
78 | }
79 | 
80 | CheckboxWidget.defaultProps = {
81 |   autofocus: false,
82 | };
83 | 
84 | if (process.env.NODE_ENV !== "production") {
85 |   CheckboxWidget.propTypes = {
86 |     schema: PropTypes.object.isRequired,
87 |     id: PropTypes.string.isRequired,
88 |     value: PropTypes.bool,
89 |     required: PropTypes.bool,
90 |     disabled: PropTypes.bool,
91 |     readonly: PropTypes.bool,
92 |     autofocus: PropTypes.bool,
93 |     onChange: PropTypes.func,
94 |   };
95 | }
96 | 
97 | export default CheckboxWidget;
98 | 


--------------------------------------------------------------------------------
/src/components/widgets/BaseInput.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | function BaseInput(props) {
  5 |   // Note: since React 15.2.0 we can't forward unknown element attributes, so we
  6 |   // exclude the "options" and "schema" ones here.
  7 |   if (!props.id) {
  8 |     console.log("No id for", props);
  9 |     throw new Error(`no id for props ${JSON.stringify(props)}`);
 10 |   }
 11 |   const {
 12 |     value,
 13 |     readonly,
 14 |     disabled,
 15 |     autofocus,
 16 |     onBlur,
 17 |     onFocus,
 18 |     options,
 19 |     schema,
 20 |     formContext,
 21 |     registry,
 22 |     rawErrors,
 23 |     ...inputProps
 24 |   } = props;
 25 | 
 26 |   // If options.inputType is set use that as the input type
 27 |   if (options.inputType) {
 28 |     inputProps.type = options.inputType;
 29 |   } else if (!inputProps.type) {
 30 |     // If the schema is of type number or integer, set the input type to number
 31 |     if (schema.type === "number") {
 32 |       inputProps.type = "number";
 33 |       // Setting step to 'any' fixes a bug in Safari where decimals are not
 34 |       // allowed in number inputs
 35 |       inputProps.step = "any";
 36 |     } else if (schema.type === "integer") {
 37 |       inputProps.type = "number";
 38 |       // Since this is integer, you always want to step up or down in multiples
 39 |       // of 1
 40 |       inputProps.step = "1";
 41 |     } else {
 42 |       inputProps.type = "text";
 43 |     }
 44 |   }
 45 | 
 46 |   // If multipleOf is defined, use this as the step value. This mainly improves
 47 |   // the experience for keyboard users (who can use the up/down KB arrows).
 48 |   if (schema.multipleOf) {
 49 |     inputProps.step = schema.multipleOf;
 50 |   }
 51 | 
 52 |   if (typeof schema.minimum !== "undefined") {
 53 |     inputProps.min = schema.minimum;
 54 |   }
 55 | 
 56 |   if (typeof schema.maximum !== "undefined") {
 57 |     inputProps.max = schema.maximum;
 58 |   }
 59 | 
 60 |   const _onChange = ({ target: { value } }) => {
 61 |     return props.onChange(value === "" ? options.emptyValue : value);
 62 |   };
 63 | 
 64 |   return (
 65 |     <input
 66 |       className="form-control"
 67 |       readOnly={readonly}
 68 |       disabled={disabled}
 69 |       autoFocus={autofocus}
 70 |       value={value == null ? "" : value}
 71 |       {...inputProps}
 72 |       onChange={_onChange}
 73 |       onBlur={onBlur && (event => onBlur(inputProps.id, event.target.value))}
 74 |       onFocus={onFocus && (event => onFocus(inputProps.id, event.target.value))}
 75 |     />
 76 |   );
 77 | }
 78 | 
 79 | BaseInput.defaultProps = {
 80 |   required: false,
 81 |   disabled: false,
 82 |   readonly: false,
 83 |   autofocus: false,
 84 | };
 85 | 
 86 | if (process.env.NODE_ENV !== "production") {
 87 |   BaseInput.propTypes = {
 88 |     id: PropTypes.string.isRequired,
 89 |     placeholder: PropTypes.string,
 90 |     value: PropTypes.any,
 91 |     required: PropTypes.bool,
 92 |     disabled: PropTypes.bool,
 93 |     readonly: PropTypes.bool,
 94 |     autofocus: PropTypes.bool,
 95 |     onChange: PropTypes.func,
 96 |     onBlur: PropTypes.func,
 97 |     onFocus: PropTypes.func,
 98 |   };
 99 | }
100 | 
101 | export default BaseInput;
102 | 


--------------------------------------------------------------------------------
/test/FieldTemplate_test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { expect } from "chai";
 4 | import { createFormComponent, createSandbox } from "./test_utils";
 5 | 
 6 | describe("FieldTemplate", () => {
 7 |   let sandbox;
 8 | 
 9 |   beforeEach(() => {
10 |     sandbox = createSandbox();
11 |   });
12 | 
13 |   afterEach(() => {
14 |     sandbox.restore();
15 |   });
16 | 
17 |   describe("Custom FieldTemplate for disabled property", () => {
18 |     function FieldTemplate(props) {
19 |       return <div className={props.disabled ? "disabled" : "foo"} />;
20 |     }
21 | 
22 |     describe("with template globally configured", () => {
23 |       it("should render with disabled when ui:disabled is truthy", () => {
24 |         const { node } = createFormComponent({
25 |           schema: { type: "string" },
26 |           uiSchema: { "ui:disabled": true },
27 |           FieldTemplate,
28 |         });
29 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
30 |       });
31 | 
32 |       it("should render with disabled when ui:disabled is falsey", () => {
33 |         const { node } = createFormComponent({
34 |           schema: { type: "string" },
35 |           uiSchema: { "ui:disabled": false },
36 |           FieldTemplate,
37 |         });
38 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
39 |       });
40 |     });
41 |     describe("with template configured in ui:FieldTemplate", () => {
42 |       it("should render with disabled when ui:disabled is truthy", () => {
43 |         const { node } = createFormComponent({
44 |           schema: { type: "string" },
45 |           uiSchema: { "ui:disabled": true, "ui:FieldTemplate": FieldTemplate },
46 |         });
47 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
48 |       });
49 | 
50 |       it("should render with disabled when ui:disabled is falsey", () => {
51 |         const { node } = createFormComponent({
52 |           schema: { type: "string" },
53 |           uiSchema: { "ui:disabled": false, "ui:FieldTemplate": FieldTemplate },
54 |         });
55 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
56 |       });
57 |     });
58 |     describe("with template configured globally being overriden in ui:FieldTemplate", () => {
59 |       it("should render with disabled when ui:disabled is truthy", () => {
60 |         const { node } = createFormComponent({
61 |           schema: { type: "string" },
62 |           uiSchema: { "ui:disabled": true, "ui:FieldTemplate": FieldTemplate },
63 |           // Empty field template to prove that overides work
64 |           FieldTemplate: () => <div />,
65 |         });
66 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
67 |       });
68 | 
69 |       it("should render with disabled when ui:disabled is falsey", () => {
70 |         const { node } = createFormComponent({
71 |           schema: { type: "string" },
72 |           uiSchema: { "ui:disabled": false, "ui:FieldTemplate": FieldTemplate },
73 |           // Empty field template to prove that overides work
74 |           FieldTemplate: () => <div />,
75 |         });
76 |         expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
77 |       });
78 |     });
79 |   });
80 | });
81 | 


--------------------------------------------------------------------------------
/src/components/widgets/CheckboxesWidget.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | function selectValue(value, selected, all) {
 5 |   const at = all.indexOf(value);
 6 |   const updated = selected.slice(0, at).concat(value, selected.slice(at));
 7 |   // As inserting values at predefined index positions doesn't work with empty
 8 |   // arrays, we need to reorder the updated selection to match the initial order
 9 |   return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
10 | }
11 | 
12 | function deselectValue(value, selected) {
13 |   return selected.filter(v => v !== value);
14 | }
15 | 
16 | function CheckboxesWidget(props) {
17 |   const { id, disabled, options, value, autofocus, readonly, onChange } = props;
18 |   const { enumOptions, enumDisabled, inline } = options;
19 |   return (
20 |     <div className="checkboxes" id={id}>
21 |       {enumOptions.map((option, index) => {
22 |         const checkboxId = `${id}_${index}`;
23 |         const checked = value.indexOf(option.value) !== -1;
24 |         const itemDisabled =
25 |           enumDisabled && enumDisabled.indexOf(option.value) != -1;
26 |         const disabledCls =
27 |           disabled || itemDisabled || readonly ? "disabled" : "";
28 |         const checkbox = (
29 |           <input
30 |             className="form-check-input"
31 |             type="checkbox"
32 |             id={checkboxId}
33 |             checked={checked}
34 |             disabled={disabled || itemDisabled || readonly}
35 |             autoFocus={autofocus && index === 0}
36 |             onChange={event => {
37 |               const all = enumOptions.map(({ value }) => value);
38 |               if (event.target.checked) {
39 |                 onChange(selectValue(option.value, value, all));
40 |               } else {
41 |                 onChange(deselectValue(option.value, value));
42 |               }
43 |             }}
44 |           />
45 |         );
46 |         return inline ? (
47 |           <div className={`form-check-inline ${disabledCls}`} key={checkboxId}>
48 |             {checkbox}
49 |             <label className="form-check-label" htmlFor={checkboxId}>
50 |               {option.label}
51 |             </label>
52 |           </div>
53 |         ) : (
54 |           <div className={`form-check ${disabledCls}`} key={checkboxId}>
55 |             {checkbox}
56 |             <label className="form-check-label" htmlFor={checkboxId}>
57 |               {option.label}
58 |             </label>
59 |           </div>
60 |         );
61 |       })}
62 |     </div>
63 |   );
64 | }
65 | 
66 | CheckboxesWidget.defaultProps = {
67 |   autofocus: false,
68 |   options: {
69 |     inline: false,
70 |   },
71 | };
72 | 
73 | if (process.env.NODE_ENV !== "production") {
74 |   CheckboxesWidget.propTypes = {
75 |     schema: PropTypes.object.isRequired,
76 |     id: PropTypes.string.isRequired,
77 |     options: PropTypes.shape({
78 |       enumOptions: PropTypes.array,
79 |       inline: PropTypes.bool,
80 |     }).isRequired,
81 |     value: PropTypes.any,
82 |     required: PropTypes.bool,
83 |     readonly: PropTypes.bool,
84 |     disabled: PropTypes.bool,
85 |     multiple: PropTypes.bool,
86 |     autofocus: PropTypes.bool,
87 |     onChange: PropTypes.func,
88 |   };
89 | }
90 | 
91 | export default CheckboxesWidget;
92 | 


--------------------------------------------------------------------------------
/src/components/widgets/FileWidget.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | import { dataURItoBlob, shouldRender } from "../../utils";
  5 | 
  6 | function addNameToDataURL(dataURL, name) {
  7 |   return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
  8 | }
  9 | 
 10 | function processFile(file) {
 11 |   const { name, size, type } = file;
 12 |   return new Promise((resolve, reject) => {
 13 |     const reader = new window.FileReader();
 14 |     reader.onerror = reject;
 15 |     reader.onload = event => {
 16 |       resolve({
 17 |         dataURL: addNameToDataURL(event.target.result, name),
 18 |         name,
 19 |         size,
 20 |         type,
 21 |       });
 22 |     };
 23 |     reader.readAsDataURL(file);
 24 |   });
 25 | }
 26 | 
 27 | function processFiles(files) {
 28 |   return Promise.all([].map.call(files, processFile));
 29 | }
 30 | 
 31 | function FilesInfo(props) {
 32 |   const { filesInfo } = props;
 33 |   if (filesInfo.length === 0) {
 34 |     return null;
 35 |   }
 36 |   return (
 37 |     <ul className="file-info">
 38 |       {filesInfo.map((fileInfo, key) => {
 39 |         const { name, size, type } = fileInfo;
 40 |         return (
 41 |           <li key={key}>
 42 |             <strong>{name}</strong> ({type}, {size} bytes)
 43 |           </li>
 44 |         );
 45 |       })}
 46 |     </ul>
 47 |   );
 48 | }
 49 | 
 50 | function extractFileInfo(dataURLs) {
 51 |   return dataURLs
 52 |     .filter(dataURL => typeof dataURL !== "undefined")
 53 |     .map(dataURL => {
 54 |       const { blob, name } = dataURItoBlob(dataURL);
 55 |       return {
 56 |         name: name,
 57 |         size: blob.size,
 58 |         type: blob.type,
 59 |       };
 60 |     });
 61 | }
 62 | 
 63 | class FileWidget extends Component {
 64 |   constructor(props) {
 65 |     super(props);
 66 |     const { value } = props;
 67 |     const values = Array.isArray(value) ? value : [value];
 68 |     this.state = { values, filesInfo: extractFileInfo(values) };
 69 |   }
 70 | 
 71 |   shouldComponentUpdate(nextProps, nextState) {
 72 |     return shouldRender(this, nextProps, nextState);
 73 |   }
 74 | 
 75 |   onChange = event => {
 76 |     const { multiple, onChange } = this.props;
 77 |     processFiles(event.target.files).then(filesInfo => {
 78 |       const state = {
 79 |         values: filesInfo.map(fileInfo => fileInfo.dataURL),
 80 |         filesInfo,
 81 |       };
 82 |       this.setState(state, () => {
 83 |         if (multiple) {
 84 |           onChange(state.values);
 85 |         } else {
 86 |           onChange(state.values[0]);
 87 |         }
 88 |       });
 89 |     });
 90 |   };
 91 | 
 92 |   render() {
 93 |     const { multiple, id, readonly, disabled, autofocus } = this.props;
 94 |     const { filesInfo } = this.state;
 95 |     return (
 96 |       <div>
 97 |         <p>
 98 |           <input
 99 |             ref={ref => (this.inputRef = ref)}
100 |             id={id}
101 |             type="file"
102 |             disabled={readonly || disabled}
103 |             onChange={this.onChange}
104 |             defaultValue=""
105 |             autoFocus={autofocus}
106 |             multiple={multiple}
107 |           />
108 |         </p>
109 |         <FilesInfo filesInfo={filesInfo} />
110 |       </div>
111 |     );
112 |   }
113 | }
114 | 
115 | FileWidget.defaultProps = {
116 |   autofocus: false,
117 | };
118 | 
119 | if (process.env.NODE_ENV !== "production") {
120 |   FileWidget.propTypes = {
121 |     multiple: PropTypes.bool,
122 |     value: PropTypes.oneOfType([
123 |       PropTypes.string,
124 |       PropTypes.arrayOf(PropTypes.string),
125 |     ]),
126 |     autofocus: PropTypes.bool,
127 |   };
128 | }
129 | 
130 | export default FileWidget;
131 | 


--------------------------------------------------------------------------------
/test/ObjectFieldTemplate_test.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from "react";
  2 | 
  3 | import { expect } from "chai";
  4 | import { createFormComponent, createSandbox } from "./test_utils";
  5 | 
  6 | describe("ObjectFieldTemplate", () => {
  7 |   let sandbox;
  8 | 
  9 |   const formData = { foo: "bar", bar: "foo" };
 10 | 
 11 |   beforeEach(() => {
 12 |     sandbox = createSandbox();
 13 |   });
 14 | 
 15 |   afterEach(() => {
 16 |     sandbox.restore();
 17 |   });
 18 | 
 19 |   class ObjectFieldTemplate extends PureComponent {
 20 |     render() {
 21 |       const {
 22 |         TitleField,
 23 |         DescriptionField,
 24 |         properties,
 25 |         title,
 26 |         description,
 27 |       } = this.props;
 28 |       return (
 29 |         <div className="root">
 30 |           <TitleField title={title} />
 31 |           <DescriptionField description={description} />
 32 |           <div>
 33 |             {properties.map(({ content }, index) => (
 34 |               <div key={index} className="property">
 35 |                 {content}
 36 |               </div>
 37 |             ))}
 38 |           </div>
 39 |         </div>
 40 |       );
 41 |     }
 42 |   }
 43 | 
 44 |   const TitleField = () => <div className="title-field" />;
 45 |   const DescriptionField = ({ description }) =>
 46 |     description ? <div className="description-field" /> : null;
 47 | 
 48 |   let node;
 49 |   describe("with template globally configured", () => {
 50 |     node = createFormComponent({
 51 |       schema: {
 52 |         type: "object",
 53 |         properties: { foo: { type: "string" }, bar: { type: "string" } },
 54 |       },
 55 |       uiSchema: { "ui:description": "foobar" },
 56 |       formData,
 57 |       ObjectFieldTemplate,
 58 |       fields: {
 59 |         TitleField,
 60 |         DescriptionField,
 61 |       },
 62 |     }).node;
 63 |     sharedIts();
 64 |   });
 65 |   describe("with template configured in ui:ObjectFieldTemplate", () => {
 66 |     node = createFormComponent({
 67 |       schema: {
 68 |         type: "object",
 69 |         properties: { foo: { type: "string" }, bar: { type: "string" } },
 70 |       },
 71 |       uiSchema: {
 72 |         "ui:description": "foobar",
 73 |         "ui:ObjectFieldTemplate": ObjectFieldTemplate,
 74 |       },
 75 |       formData,
 76 |       fields: {
 77 |         TitleField,
 78 |         DescriptionField,
 79 |       },
 80 |     }).node;
 81 |     sharedIts();
 82 |   });
 83 |   describe("with template configured globally overridden by ui:ObjectFieldTemplate", () => {
 84 |     node = createFormComponent({
 85 |       schema: {
 86 |         type: "object",
 87 |         properties: { foo: { type: "string" }, bar: { type: "string" } },
 88 |       },
 89 |       uiSchema: {
 90 |         "ui:description": "foobar",
 91 |         "ui:ObjectFieldTemplate": ObjectFieldTemplate,
 92 |       },
 93 |       formData,
 94 |       ObjectFieldTemplate: () => <div />, // Empty object field template, proof that it's overridden
 95 |       fields: {
 96 |         TitleField,
 97 |         DescriptionField,
 98 |       },
 99 |     }).node;
100 |     sharedIts();
101 |   });
102 | 
103 |   function sharedIts() {
104 |     it("should render one root element", () => {
105 |       expect(node.querySelectorAll(".root")).to.have.length.of(1);
106 |     });
107 | 
108 |     it("should render one title", () => {
109 |       expect(node.querySelectorAll(".title-field")).to.have.length.of(1);
110 |     });
111 | 
112 |     it("should render one description", () => {
113 |       expect(node.querySelectorAll(".description-field")).to.have.length.of(1);
114 |     });
115 | 
116 |     it("should render two property containers", () => {
117 |       expect(node.querySelectorAll(".property")).to.have.length.of(2);
118 |     });
119 |   }
120 | });
121 | 


--------------------------------------------------------------------------------
/src/components/fields/NumberField.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | import * as types from "../../types";
  4 | import { asNumber } from "../../utils";
  5 | 
  6 | // Matches a string that ends in a . character, optionally followed by a sequence of
  7 | // digits followed by any number of 0 characters up until the end of the line.
  8 | // Ensuring that there is at least one prefixed character is important so that
  9 | // you don't incorrectly match against "0".
 10 | const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
 11 | 
 12 | // This is used for trimming the trailing 0 and . characters without affecting
 13 | // the rest of the string. Its possible to use one RegEx with groups for this
 14 | // functionality, but it is fairly complex compared to simply defining two
 15 | // different matchers.
 16 | const trailingCharMatcher = /[0.]0*$/;
 17 | 
 18 | /**
 19 |  * The NumberField class has some special handling for dealing with trailing
 20 |  * decimal points and/or zeroes. This logic is designed to allow trailing values
 21 |  * to be visible in the input element, but not be represented in the
 22 |  * corresponding form data.
 23 |  *
 24 |  * The algorithm is as follows:
 25 |  *
 26 |  * 1. When the input value changes the value is cached in the component state
 27 |  *
 28 |  * 2. The value is then normalized, removing trailing decimal points and zeros,
 29 |  *    then passed to the "onChange" callback
 30 |  *
 31 |  * 3. When the component is rendered, the formData value is checked against the
 32 |  *    value cached in the state. If it matches the cached value, the cached
 33 |  *    value is passed to the input instead of the formData value
 34 |  */
 35 | class NumberField extends React.Component {
 36 |   constructor(props) {
 37 |     super(props);
 38 | 
 39 |     this.state = {
 40 |       lastValue: props.value,
 41 |     };
 42 |   }
 43 | 
 44 |   handleChange = value => {
 45 |     // Cache the original value in component state
 46 |     this.setState({ lastValue: value });
 47 | 
 48 |     // Normalize decimals that don't start with a zero character in advance so
 49 |     // that the rest of the normalization logic is simpler
 50 |     if (`${value}`.charAt(0) === ".") {
 51 |       value = `0${value}`;
 52 |     }
 53 | 
 54 |     // Check that the value is a string (this can happen if the widget used is a
 55 |     // <select>, due to an enum declaration etc) then, if the value ends in a
 56 |     // trailing decimal point or multiple zeroes, strip the trailing values
 57 |     let processed =
 58 |       typeof value === "string" && value.match(trailingCharMatcherWithPrefix)
 59 |         ? asNumber(value.replace(trailingCharMatcher, ""))
 60 |         : asNumber(value);
 61 | 
 62 |     this.props.onChange(processed);
 63 |   };
 64 | 
 65 |   render() {
 66 |     const { StringField } = this.props.registry.fields;
 67 |     const { formData, ...props } = this.props;
 68 |     const { lastValue } = this.state;
 69 | 
 70 |     let value = formData;
 71 | 
 72 |     if (typeof lastValue === "string" && value) {
 73 |       // Construct a regular expression that checks for a string that consists
 74 |       // of the formData value suffixed with zero or one '.' characters and zero
 75 |       // or more '0' characters
 76 |       const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
 77 | 
 78 |       // If the cached "lastValue" is a match, use that instead of the formData
 79 |       // value to prevent the input value from changing in the UI
 80 |       if (lastValue.match(re)) {
 81 |         value = lastValue;
 82 |       }
 83 |     }
 84 | 
 85 |     return (
 86 |       <StringField {...props} formData={value} onChange={this.handleChange} />
 87 |     );
 88 |   }
 89 | }
 90 | 
 91 | if (process.env.NODE_ENV !== "production") {
 92 |   NumberField.propTypes = types.fieldProps;
 93 | }
 94 | 
 95 | NumberField.defaultProps = {
 96 |   uiSchema: {},
 97 | };
 98 | 
 99 | export default NumberField;
100 | 


--------------------------------------------------------------------------------
/src/components/widgets/SelectWidget.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | import { asNumber, guessType } from "../../utils";
  5 | 
  6 | const nums = new Set(["number", "integer"]);
  7 | 
  8 | /**
  9 |  * This is a silly limitation in the DOM where option change event values are
 10 |  * always retrieved as strings.
 11 |  */
 12 | function processValue(schema, value) {
 13 |   // "enum" is a reserved word, so only "type" and "items" can be destructured
 14 |   const { type, items } = schema;
 15 |   if (value === "") {
 16 |     return undefined;
 17 |   } else if (type === "array" && items && nums.has(items.type)) {
 18 |     return value.map(asNumber);
 19 |   } else if (type === "boolean") {
 20 |     return value === "true";
 21 |   } else if (type === "number") {
 22 |     return asNumber(value);
 23 |   }
 24 | 
 25 |   // If type is undefined, but an enum is present, try and infer the type from
 26 |   // the enum values
 27 |   if (schema.enum) {
 28 |     if (schema.enum.every(x => guessType(x) === "number")) {
 29 |       return asNumber(value);
 30 |     } else if (schema.enum.every(x => guessType(x) === "boolean")) {
 31 |       return value === "true";
 32 |     }
 33 |   }
 34 | 
 35 |   return value;
 36 | }
 37 | 
 38 | function getValue(event, multiple) {
 39 |   if (multiple) {
 40 |     return [].slice
 41 |       .call(event.target.options)
 42 |       .filter(o => o.selected)
 43 |       .map(o => o.value);
 44 |   } else {
 45 |     return event.target.value;
 46 |   }
 47 | }
 48 | 
 49 | function SelectWidget(props) {
 50 |   const {
 51 |     schema,
 52 |     id,
 53 |     options,
 54 |     value,
 55 |     required,
 56 |     disabled,
 57 |     readonly,
 58 |     multiple,
 59 |     autofocus,
 60 |     onChange,
 61 |     onBlur,
 62 |     onFocus,
 63 |     placeholder,
 64 |   } = props;
 65 |   const { enumOptions, enumDisabled } = options;
 66 |   const emptyValue = multiple ? [] : "";
 67 |   return (
 68 |     <select
 69 |       id={id}
 70 |       multiple={multiple}
 71 |       className="form-control"
 72 |       value={typeof value === "undefined" ? emptyValue : value}
 73 |       required={required}
 74 |       disabled={disabled || readonly}
 75 |       autoFocus={autofocus}
 76 |       onBlur={
 77 |         onBlur &&
 78 |         (event => {
 79 |           const newValue = getValue(event, multiple);
 80 |           onBlur(id, processValue(schema, newValue));
 81 |         })
 82 |       }
 83 |       onFocus={
 84 |         onFocus &&
 85 |         (event => {
 86 |           const newValue = getValue(event, multiple);
 87 |           onFocus(id, processValue(schema, newValue));
 88 |         })
 89 |       }
 90 |       onChange={event => {
 91 |         const newValue = getValue(event, multiple);
 92 |         onChange(processValue(schema, newValue));
 93 |       }}>
 94 |       {!multiple && schema.default === undefined && (
 95 |         <option value="">{placeholder}</option>
 96 |       )}
 97 |       {enumOptions.map(({ value, label }, i) => {
 98 |         const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
 99 |         return (
100 |           <option key={i} value={value} disabled={disabled}>
101 |             {label}
102 |           </option>
103 |         );
104 |       })}
105 |     </select>
106 |   );
107 | }
108 | 
109 | SelectWidget.defaultProps = {
110 |   autofocus: false,
111 | };
112 | 
113 | if (process.env.NODE_ENV !== "production") {
114 |   SelectWidget.propTypes = {
115 |     schema: PropTypes.object.isRequired,
116 |     id: PropTypes.string.isRequired,
117 |     options: PropTypes.shape({
118 |       enumOptions: PropTypes.array,
119 |     }).isRequired,
120 |     value: PropTypes.any,
121 |     required: PropTypes.bool,
122 |     disabled: PropTypes.bool,
123 |     readonly: PropTypes.bool,
124 |     multiple: PropTypes.bool,
125 |     autofocus: PropTypes.bool,
126 |     onChange: PropTypes.func,
127 |     onBlur: PropTypes.func,
128 |     onFocus: PropTypes.func,
129 |   };
130 | }
131 | 
132 | export default SelectWidget;
133 | 


--------------------------------------------------------------------------------
/docs/theme-customization.md:
--------------------------------------------------------------------------------
 1 | ## Customizing with other frameworks
 2 | 
 3 | ### withTheme Higher-Order Component
 4 | The `withTheme` component provides an easy way to extend the functionality of react-jsonschema-form by passing in a theme object that defines custom/overridden widgets and fields, as well as any of the other possible properties of the standard rjsf `Form` component. This theme-defining object is passed as the only parameter to the HOC (`withTheme(ThemeObj)`), and the HOC will return a themed-component which you use instead of the standard `Form` component.
 5 | 
 6 | ### Usage
 7 | 
 8 | ```jsx
 9 | import React, { Component } from 'react';
10 | import { withTheme } from 'react-jsonschema-form';
11 | import Bootstrap4Theme from 'react-jsonschema-form-theme-bs4';
12 | 
13 | const ThemedForm = withTheme(Bootstrap4Theme); 
14 | class Demo extends Component {
15 |     render() {
16 |         return <ThemedForm schema={{...}} uiSchema={{...}} />
17 |     }
18 | }
19 | ```
20 | 
21 | ### Theme object properties
22 | The Theme object consists of the same properties as the rjsf `Form` component (such as **widgets** and **fields**). The themed-Form component merges together any theme-specific **widgets** and **fields** with the default **widgets** and **fields**. For instance, providing a single widget in **widgets** will merge this widget with all the default widgets of the rjsf `Form` component, but overrides the default if the theme's widget's name matches the default widget's name. Thus, for each default widget or field not specified/overridden, the themed-form will rely on the defaults from the rjsf `Form`. Note that you are not required to pass in either custom **widgets** or **fields** when using the custom-themed HOC component; you can make the essentially redefine the default Form by simply doing `const Form = withTheme({});`.
23 | 
24 | #### Widgets and fields 
25 | **widgets** and **fields** should be in the same format as shown [here](/advanced-customization/#custom-widgets-and-fields).
26 | 
27 | Example theme with custom widget:
28 | ```jsx
29 | const MyCustomWidget = (props) => {
30 |   return (
31 |     <input type="text"
32 |       className="custom"
33 |       value={props.value}
34 |       required={props.required}
35 |       onChange={(event) => props.onChange(event.target.value)} />
36 |   );
37 | };
38 | 
39 | const myWidgets = {
40 |   myCustomWidget: MyCustomWidget
41 | };
42 | 
43 | const ThemeObject = {widgets: myWidgets};
44 | export default ThemeObject;
45 | ```
46 | 
47 | The above can be similarly done for **fields**.
48 | 
49 | #### Templates
50 | Each template should be passed directly into the theme object just as you would into the rjsf Form component. Here is an example of how to use a custom [ArrayFieldTemplate](/advanced-customization/#array-field-template) and [ErrorListTemplate](/advanced-customization/#error-list-template) in the theme object:
51 | ```jsx
52 | function MyArrayFieldTemplate(props) {
53 |   return (
54 |     <div>
55 |       {props.items.map(element => element.children)}
56 |       {props.canAdd && <button type="button" onClick={props.onAddClick}></button>}
57 |     </div>
58 |   );
59 | }
60 | 
61 | function MyErrorListTemplate(props) {
62 |   const {errors} = props;
63 |   return (
64 |     <ul>
65 |       {errors.map(error => (
66 |           <li key={error.stack}>
67 |             {error.stack}
68 |           </li>
69 |         ))}
70 |     </ul>
71 |   );
72 | }
73 | 
74 | const ThemeObject = {
75 |     ArrayFieldTemplate: MyArrayFieldTemplate, 
76 |     ErrorList: MyErrorListTemplate,
77 |     widgets: myWidgets
78 | };
79 | 
80 | export default ThemeObject;
81 | ```
82 | 
83 | ### Overriding other Form props
84 | Just as the theme can override **widgets**, **fields**, any of the field templates, and set default values to properties like **showErrorList**, you can do the same with the instance of the withTheme() Form component.
85 | ```jsx
86 | const ThemeObject = {
87 |     ArrayFieldTemplate: MyArrayFieldTemplate, 
88 |     fields: myFields,
89 |     showErrorList: false,
90 |     widgets: myWidgets
91 | };
92 | ```
93 | 
94 | Thus, the user has higher priority than the withTheme HOC, and the theme has higher priority than the default values of the rjsf Form component (**User** > **Theme** > **Defaults**).
95 | 


--------------------------------------------------------------------------------
/test/FormContext_test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { expect } from "chai";
  3 | 
  4 | import { createFormComponent, createSandbox } from "./test_utils";
  5 | 
  6 | describe("FormContext", () => {
  7 |   let sandbox;
  8 | 
  9 |   beforeEach(() => {
 10 |     sandbox = createSandbox();
 11 |   });
 12 | 
 13 |   afterEach(() => {
 14 |     sandbox.restore();
 15 |   });
 16 | 
 17 |   const schema = { type: "string" };
 18 | 
 19 |   const formContext = { foo: "bar" };
 20 | 
 21 |   const CustomComponent = function(props) {
 22 |     return <div id={props.formContext.foo} />;
 23 |   };
 24 | 
 25 |   it("should be passed to Form", () => {
 26 |     const { comp } = createFormComponent({
 27 |       schema: schema,
 28 |       formContext,
 29 |     });
 30 |     expect(comp.props.formContext).eq(formContext);
 31 |   });
 32 | 
 33 |   it("should be passed to custom field", () => {
 34 |     const fields = { custom: CustomComponent };
 35 | 
 36 |     const { node } = createFormComponent({
 37 |       schema: schema,
 38 |       uiSchema: { "ui:field": "custom" },
 39 |       fields,
 40 |       formContext,
 41 |     });
 42 | 
 43 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
 44 |   });
 45 | 
 46 |   it("should be passed to custom widget", () => {
 47 |     const widgets = { custom: CustomComponent };
 48 | 
 49 |     const { node } = createFormComponent({
 50 |       schema: { type: "string" },
 51 |       uiSchema: { "ui:widget": "custom" },
 52 |       widgets,
 53 |       formContext,
 54 |     });
 55 | 
 56 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
 57 |   });
 58 | 
 59 |   it("should be passed to TemplateField", () => {
 60 |     function CustomTemplateField({ formContext }) {
 61 |       return <div id={formContext.foo} />;
 62 |     }
 63 | 
 64 |     const { node } = createFormComponent({
 65 |       schema: {
 66 |         type: "object",
 67 |         properties: {
 68 |           prop: {
 69 |             type: "string",
 70 |           },
 71 |         },
 72 |       },
 73 |       FieldTemplate: CustomTemplateField,
 74 |       formContext,
 75 |     });
 76 | 
 77 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
 78 |   });
 79 | 
 80 |   it("should be passed to ArrayTemplateField", () => {
 81 |     function CustomArrayTemplateField({ formContext }) {
 82 |       return <div id={formContext.foo} />;
 83 |     }
 84 | 
 85 |     const { node } = createFormComponent({
 86 |       schema: {
 87 |         type: "array",
 88 |         items: {
 89 |           type: "string",
 90 |         },
 91 |       },
 92 |       ArrayFieldTemplate: CustomArrayTemplateField,
 93 |       formContext,
 94 |     });
 95 | 
 96 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
 97 |   });
 98 | 
 99 |   it("should be passed to custom TitleField", () => {
100 |     const fields = { TitleField: CustomComponent };
101 | 
102 |     const { node } = createFormComponent({
103 |       schema: {
104 |         type: "object",
105 |         title: "A title",
106 |         properties: {
107 |           prop: {
108 |             type: "string",
109 |           },
110 |         },
111 |       },
112 |       fields,
113 |       formContext,
114 |     });
115 | 
116 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
117 |   });
118 | 
119 |   it("should be passed to custom DescriptionField", () => {
120 |     const fields = { DescriptionField: CustomComponent };
121 | 
122 |     const { node } = createFormComponent({
123 |       schema: { type: "string", description: "A description" },
124 |       fields,
125 |       formContext,
126 |     });
127 | 
128 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
129 |   });
130 | 
131 |   it("should be passed to multiselect", () => {
132 |     const widgets = { SelectWidget: CustomComponent };
133 |     const { node } = createFormComponent({
134 |       schema: {
135 |         type: "array",
136 |         items: {
137 |           type: "string",
138 |           enum: ["foo"],
139 |           enumNames: ["bar"],
140 |         },
141 |         uniqueItems: true,
142 |       },
143 |       widgets,
144 |       formContext,
145 |     });
146 | 
147 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
148 |   });
149 | 
150 |   it("should be passed to files array", () => {
151 |     const widgets = { FileWidget: CustomComponent };
152 |     const { node } = createFormComponent({
153 |       schema: {
154 |         type: "array",
155 |         items: {
156 |           type: "string",
157 |           format: "data-url",
158 |         },
159 |       },
160 |       widgets,
161 |       formContext,
162 |     });
163 | 
164 |     expect(node.querySelector("#" + formContext.foo)).to.exist;
165 |   });
166 | });
167 | 


--------------------------------------------------------------------------------
/docs/dependencies.md:
--------------------------------------------------------------------------------
  1 | ## Property dependencies
  2 | 
  3 | This library supports conditionally making fields required based on the presence of other fields.
  4 | 
  5 | ### Unidirectional
  6 | 
  7 | In the following example the `billing_address` field will be required if `credit_card` is defined.
  8 | 
  9 | ```json
 10 | {
 11 |   "type": "object",
 12 | 
 13 |   "properties": {
 14 |     "name": { "type": "string" },
 15 |     "credit_card": { "type": "number" },
 16 |     "billing_address": { "type": "string" }
 17 |   },
 18 | 
 19 |   "required": ["name"],
 20 | 
 21 |   "dependencies": {
 22 |     "credit_card": ["billing_address"]
 23 |   }
 24 | }
 25 | ```
 26 | 
 27 | ### Bidirectional
 28 | 
 29 | In the following example the `billing_address` field will be required if `credit_card` is defined and the `credit_card`
 30 | field will be required if `billing_address` is defined making them both required if either is defined.
 31 | 
 32 | ```json
 33 | {
 34 |   "type": "object",
 35 | 
 36 |   "properties": {
 37 |     "name": { "type": "string" },
 38 |     "credit_card": { "type": "number" },
 39 |     "billing_address": { "type": "string" }
 40 |   },
 41 | 
 42 |   "required": ["name"],
 43 | 
 44 |   "dependencies": {
 45 |     "credit_card": ["billing_address"],
 46 |     "billing_address": ["credit_card"]
 47 |   }
 48 | }
 49 | ```
 50 | 
 51 | *(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#property-dependencies))*
 52 | 
 53 | ## Schema dependencies
 54 | 
 55 | This library also supports modifying portions of a schema based on form data.
 56 | 
 57 | ### Conditional
 58 | 
 59 | ```json
 60 | {
 61 |   "type": "object",
 62 | 
 63 |   "properties": {
 64 |     "name": { "type": "string" },
 65 |     "credit_card": { "type": "number" }
 66 |   },
 67 | 
 68 |   "required": ["name"],
 69 | 
 70 |   "dependencies": {
 71 |     "credit_card": {
 72 |       "properties": {
 73 |         "billing_address": { "type": "string" }
 74 |       },
 75 |       "required": ["billing_address"]
 76 |     }
 77 |   }
 78 | }
 79 | ```
 80 | 
 81 | In this example the `billing_address` field will be displayed in the form if `credit_card` is defined.
 82 | 
 83 | *(Sample schemas courtesy of the [Space Telescope Science Institute](https://spacetelescope.github.io/understanding-json-schema/reference/object.html#schema-dependencies))*
 84 | 
 85 | ### Dynamic
 86 | 
 87 | The JSON Schema standard says that the dependency is triggered if the property is present. However, sometimes it's useful to have more sophisticated rules guiding the application of the dependency. For example, maybe you have three possible values for a field, and each one should lead to adding a different question. For this, we support a very restricted use of the `oneOf` keyword.
 88 | 
 89 | ```json
 90 | {
 91 |   "title": "Person",
 92 |   "type": "object",
 93 |   "properties": {
 94 |     "Do you have any pets?": {
 95 |       "type": "string",
 96 |       "enum": [
 97 |         "No",
 98 |         "Yes: One",
 99 |         "Yes: More than one"
100 |       ],
101 |       "default": "No"
102 |     }
103 |   },
104 |   "required": [
105 |     "Do you have any pets?"
106 |   ],
107 |   "dependencies": {
108 |     "Do you have any pets?": {
109 |       "oneOf": [
110 |         {
111 |           "properties": {
112 |             "Do you have any pets?": {
113 |               "enum": [
114 |                 "No"
115 |               ]
116 |             }
117 |           }
118 |         },
119 |         {
120 |           "properties": {
121 |             "Do you have any pets?": {
122 |               "enum": [
123 |                 "Yes: One"
124 |               ]
125 |             },
126 |             "How old is your pet?": {
127 |               "type": "number"
128 |             }
129 |           },
130 |           "required": [
131 |             "How old is your pet?"
132 |           ]
133 |         },
134 |         {
135 |           "properties": {
136 |             "Do you have any pets?": {
137 |               "enum": [
138 |                 "Yes: More than one"
139 |               ]
140 |             },
141 |             "Do you want to get rid of any?": {
142 |               "type": "boolean"
143 |             }
144 |           },
145 |           "required": [
146 |             "Do you want to get rid of any?"
147 |           ]
148 |         }
149 |       ]
150 |     }
151 |   }
152 | }
153 | ```
154 | 
155 | In this example the user is prompted with different follow-up questions dynamically based on their answer to the first question.
156 | 
157 | In these examples, the "Do you have any pets?" question is validated against the corresponding property in each schema in the `oneOf` array. If exactly one matches, the rest of that schema is merged with the existing schema.
158 | 


--------------------------------------------------------------------------------
/test/performance_test.js:
--------------------------------------------------------------------------------
  1 | import sinon from "sinon";
  2 | import React from "react";
  3 | import { scryRenderedComponentsWithType } from "react-dom/test-utils";
  4 | import { getDefaultRegistry } from "../src/utils";
  5 | import SchemaField from "../src/components/fields/SchemaField";
  6 | import {
  7 |   createComponent,
  8 |   createFormComponent,
  9 |   createSandbox,
 10 |   setProps,
 11 | } from "./test_utils";
 12 | 
 13 | describe("Rendering performance optimizations", () => {
 14 |   var sandbox;
 15 | 
 16 |   beforeEach(() => {
 17 |     sandbox = createSandbox();
 18 |   });
 19 | 
 20 |   afterEach(() => {
 21 |     sandbox.restore();
 22 |   });
 23 | 
 24 |   describe("Form", () => {
 25 |     it("should not render if next props are equivalent", () => {
 26 |       const schema = { type: "string" };
 27 |       const uiSchema = {};
 28 | 
 29 |       const { comp } = createFormComponent({ schema, uiSchema });
 30 |       sandbox.stub(comp, "render").returns(<div />);
 31 | 
 32 |       comp.componentWillReceiveProps({ schema });
 33 | 
 34 |       sinon.assert.notCalled(comp.render);
 35 |     });
 36 | 
 37 |     it("should not render if next formData are equivalent", () => {
 38 |       const schema = { type: "string" };
 39 |       const formData = "foo";
 40 | 
 41 |       const { comp } = createFormComponent({ schema, formData });
 42 |       sandbox.stub(comp, "render").returns(<div />);
 43 | 
 44 |       comp.componentWillReceiveProps({ formData });
 45 | 
 46 |       sinon.assert.notCalled(comp.render);
 47 |     });
 48 | 
 49 |     it("should only render changed object properties", () => {
 50 |       const schema = {
 51 |         type: "object",
 52 |         properties: {
 53 |           const: { type: "string" },
 54 |           var: { type: "string" },
 55 |         },
 56 |       };
 57 | 
 58 |       const { comp } = createFormComponent({
 59 |         schema,
 60 |         formData: { const: "0", var: "0" },
 61 |       });
 62 | 
 63 |       const fields = scryRenderedComponentsWithType(comp, SchemaField).reduce(
 64 |         (fields, fieldComp) => {
 65 |           sandbox.stub(fieldComp, "render").returns(<div />);
 66 |           fields[fieldComp.props.idSchema.$id] = fieldComp;
 67 |           return fields;
 68 |         }
 69 |       );
 70 | 
 71 |       setProps(comp, { schema, formData: { const: "0", var: "1" } });
 72 | 
 73 |       sinon.assert.notCalled(fields.root_const.render);
 74 |       sinon.assert.calledOnce(fields.root_var.render);
 75 |     });
 76 | 
 77 |     it("should only render changed array items", () => {
 78 |       const schema = {
 79 |         type: "array",
 80 |         items: { type: "string" },
 81 |       };
 82 | 
 83 |       const { comp } = createFormComponent({
 84 |         schema,
 85 |         formData: ["const", "var0"],
 86 |       });
 87 | 
 88 |       const fields = scryRenderedComponentsWithType(comp, SchemaField).reduce(
 89 |         (fields, fieldComp) => {
 90 |           sandbox.stub(fieldComp, "render").returns(<div />);
 91 |           fields[fieldComp.props.idSchema.$id] = fieldComp;
 92 |           return fields;
 93 |         }
 94 |       );
 95 | 
 96 |       setProps(comp, { schema, formData: ["const", "var1"] });
 97 | 
 98 |       sinon.assert.notCalled(fields.root_0.render);
 99 |       sinon.assert.calledOnce(fields.root_1.render);
100 |     });
101 |   });
102 | 
103 |   describe("SchemaField", () => {
104 |     const onChange = () => {};
105 |     const onBlur = () => {};
106 |     const onFocus = () => {};
107 |     const registry = getDefaultRegistry();
108 |     const uiSchema = {};
109 |     const schema = {
110 |       type: "object",
111 |       properties: {
112 |         foo: { type: "string" },
113 |       },
114 |     };
115 |     const idSchema = { $id: "root", foo: { $id: "root_plop" } };
116 | 
117 |     it("should not render if next props are equivalent", () => {
118 |       const props = {
119 |         registry,
120 |         schema,
121 |         uiSchema,
122 |         onChange,
123 |         idSchema,
124 |         onBlur,
125 |         onFocus,
126 |       };
127 | 
128 |       const { comp } = createComponent(SchemaField, props);
129 |       sandbox.stub(comp, "render").returns(<div />);
130 | 
131 |       setProps(comp, props);
132 | 
133 |       sinon.assert.notCalled(comp.render);
134 |     });
135 | 
136 |     it("should not render if next formData are equivalent", () => {
137 |       const props = {
138 |         registry,
139 |         schema,
140 |         formData: { foo: "blah" },
141 |         onChange,
142 |         idSchema,
143 |         onBlur,
144 |       };
145 | 
146 |       const { comp } = createComponent(SchemaField, props);
147 |       sandbox.stub(comp, "render").returns(<div />);
148 | 
149 |       setProps(comp, { ...props, formData: { foo: "blah" } });
150 | 
151 |       sinon.assert.notCalled(comp.render);
152 |     });
153 |   });
154 | });
155 | 


--------------------------------------------------------------------------------
/playground/samples/arrays.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   schema: {
  3 |     definitions: {
  4 |       Thing: {
  5 |         type: "object",
  6 |         properties: {
  7 |           name: {
  8 |             type: "string",
  9 |             default: "Default name",
 10 |           },
 11 |         },
 12 |       },
 13 |     },
 14 |     type: "object",
 15 |     properties: {
 16 |       listOfStrings: {
 17 |         type: "array",
 18 |         title: "A list of strings",
 19 |         items: {
 20 |           type: "string",
 21 |           default: "bazinga",
 22 |         },
 23 |       },
 24 |       multipleChoicesList: {
 25 |         type: "array",
 26 |         title: "A multiple choices list",
 27 |         items: {
 28 |           type: "string",
 29 |           enum: ["foo", "bar", "fuzz", "qux"],
 30 |         },
 31 |         uniqueItems: true,
 32 |       },
 33 |       fixedItemsList: {
 34 |         type: "array",
 35 |         title: "A list of fixed items",
 36 |         items: [
 37 |           {
 38 |             title: "A string value",
 39 |             type: "string",
 40 |             default: "lorem ipsum",
 41 |           },
 42 |           {
 43 |             title: "a boolean value",
 44 |             type: "boolean",
 45 |           },
 46 |         ],
 47 |         additionalItems: {
 48 |           title: "Additional item",
 49 |           type: "number",
 50 |         },
 51 |       },
 52 |       minItemsList: {
 53 |         type: "array",
 54 |         title: "A list with a minimal number of items",
 55 |         minItems: 3,
 56 |         items: {
 57 |           $ref: "#/definitions/Thing",
 58 |         },
 59 |       },
 60 |       defaultsAndMinItems: {
 61 |         type: "array",
 62 |         title: "List and item level defaults",
 63 |         minItems: 5,
 64 |         default: ["carp", "trout", "bream"],
 65 |         items: {
 66 |           type: "string",
 67 |           default: "unidentified",
 68 |         },
 69 |       },
 70 |       nestedList: {
 71 |         type: "array",
 72 |         title: "Nested list",
 73 |         items: {
 74 |           type: "array",
 75 |           title: "Inner list",
 76 |           items: {
 77 |             type: "string",
 78 |             default: "lorem ipsum",
 79 |           },
 80 |         },
 81 |       },
 82 |       unorderable: {
 83 |         title: "Unorderable items",
 84 |         type: "array",
 85 |         items: {
 86 |           type: "string",
 87 |           default: "lorem ipsum",
 88 |         },
 89 |       },
 90 |       unremovable: {
 91 |         title: "Unremovable items",
 92 |         type: "array",
 93 |         items: {
 94 |           type: "string",
 95 |           default: "lorem ipsum",
 96 |         },
 97 |       },
 98 |       noToolbar: {
 99 |         title: "No add, remove and order buttons",
100 |         type: "array",
101 |         items: {
102 |           type: "string",
103 |           default: "lorem ipsum",
104 |         },
105 |       },
106 |       fixedNoToolbar: {
107 |         title: "Fixed array without buttons",
108 |         type: "array",
109 |         items: [
110 |           {
111 |             title: "A number",
112 |             type: "number",
113 |             default: 42,
114 |           },
115 |           {
116 |             title: "A boolean",
117 |             type: "boolean",
118 |             default: false,
119 |           },
120 |         ],
121 |         additionalItems: {
122 |           title: "A string",
123 |           type: "string",
124 |           default: "lorem ipsum",
125 |         },
126 |       },
127 |     },
128 |   },
129 |   uiSchema: {
130 |     listOfStrings: {
131 |       items: { "ui:emptyValue": "" },
132 |     },
133 |     multipleChoicesList: {
134 |       "ui:widget": "checkboxes",
135 |     },
136 |     fixedItemsList: {
137 |       items: [{ "ui:widget": "textarea" }, { "ui:widget": "select" }],
138 |       additionalItems: {
139 |         "ui:widget": "updown",
140 |       },
141 |     },
142 |     unorderable: {
143 |       "ui:options": {
144 |         orderable: false,
145 |       },
146 |     },
147 |     unremovable: {
148 |       "ui:options": {
149 |         removable: false,
150 |       },
151 |     },
152 |     noToolbar: {
153 |       "ui:options": {
154 |         addable: false,
155 |         orderable: false,
156 |         removable: false,
157 |       },
158 |     },
159 |     fixedNoToolbar: {
160 |       "ui:options": {
161 |         addable: false,
162 |         orderable: false,
163 |         removable: false,
164 |       },
165 |     },
166 |   },
167 |   formData: {
168 |     listOfStrings: ["foo", "bar"],
169 |     multipleChoicesList: ["foo", "bar"],
170 |     fixedItemsList: ["Some text", true, 123],
171 |     nestedList: [["lorem", "ipsum"], ["dolor"]],
172 |     unorderable: ["one", "two"],
173 |     unremovable: ["one", "two"],
174 |     noToolbar: ["one", "two"],
175 |     fixedNoToolbar: [42, true, "additional item one", "additional item two"],
176 |   },
177 | };
178 | 


--------------------------------------------------------------------------------
/playground/samples/widgets.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | export default {
  4 |   schema: {
  5 |     title: "Widgets",
  6 |     type: "object",
  7 |     properties: {
  8 |       stringFormats: {
  9 |         type: "object",
 10 |         title: "String formats",
 11 |         properties: {
 12 |           email: {
 13 |             type: "string",
 14 |             format: "email",
 15 |           },
 16 |           uri: {
 17 |             type: "string",
 18 |             format: "uri",
 19 |           },
 20 |         },
 21 |       },
 22 |       boolean: {
 23 |         type: "object",
 24 |         title: "Boolean field",
 25 |         properties: {
 26 |           default: {
 27 |             type: "boolean",
 28 |             title: "checkbox (default)",
 29 |             description: "This is the checkbox-description",
 30 |           },
 31 |           radio: {
 32 |             type: "boolean",
 33 |             title: "radio buttons",
 34 |             description: "This is the radio-description",
 35 |           },
 36 |           select: {
 37 |             type: "boolean",
 38 |             title: "select box",
 39 |             description: "This is the select-description",
 40 |           },
 41 |         },
 42 |       },
 43 |       string: {
 44 |         type: "object",
 45 |         title: "String field",
 46 |         properties: {
 47 |           default: {
 48 |             type: "string",
 49 |             title: "text input (default)",
 50 |           },
 51 |           textarea: {
 52 |             type: "string",
 53 |             title: "textarea",
 54 |           },
 55 |           color: {
 56 |             type: "string",
 57 |             title: "color picker",
 58 |             default: "#151ce6",
 59 |           },
 60 |         },
 61 |       },
 62 |       secret: {
 63 |         type: "string",
 64 |         default: "I'm a hidden string.",
 65 |       },
 66 |       disabled: {
 67 |         type: "string",
 68 |         title: "A disabled field",
 69 |         default: "I am disabled.",
 70 |       },
 71 |       readonly: {
 72 |         type: "string",
 73 |         title: "A readonly field",
 74 |         default: "I am read-only.",
 75 |       },
 76 |       readonly2: {
 77 |         type: "string",
 78 |         title: "Another readonly field",
 79 |         default: "I am also read-only.",
 80 |         readOnly: true,
 81 |       },
 82 |       widgetOptions: {
 83 |         title: "Custom widget with options",
 84 |         type: "string",
 85 |         default: "I am yellow",
 86 |       },
 87 |       selectWidgetOptions: {
 88 |         title: "Custom select widget with options",
 89 |         type: "string",
 90 |         enum: ["foo", "bar"],
 91 |         enumNames: ["Foo", "Bar"],
 92 |       },
 93 |     },
 94 |   },
 95 |   uiSchema: {
 96 |     boolean: {
 97 |       radio: {
 98 |         "ui:widget": "radio",
 99 |       },
100 |       select: {
101 |         "ui:widget": "select",
102 |       },
103 |     },
104 |     string: {
105 |       textarea: {
106 |         "ui:widget": "textarea",
107 |         "ui:options": {
108 |           rows: 5,
109 |         },
110 |       },
111 |       color: {
112 |         "ui:widget": "color",
113 |       },
114 |     },
115 |     secret: {
116 |       "ui:widget": "hidden",
117 |     },
118 |     disabled: {
119 |       "ui:disabled": true,
120 |     },
121 |     readonly: {
122 |       "ui:readonly": true,
123 |     },
124 |     widgetOptions: {
125 |       "ui:widget": ({ value, onChange, options }) => {
126 |         const { backgroundColor } = options;
127 |         return (
128 |           <input
129 |             className="form-control"
130 |             onChange={event => onChange(event.target.value)}
131 |             style={{ backgroundColor }}
132 |             value={value}
133 |           />
134 |         );
135 |       },
136 |       "ui:options": {
137 |         backgroundColor: "yellow",
138 |       },
139 |     },
140 |     selectWidgetOptions: {
141 |       "ui:widget": ({ value, onChange, options }) => {
142 |         const { enumOptions, backgroundColor } = options;
143 |         return (
144 |           <select
145 |             className="form-control"
146 |             style={{ backgroundColor }}
147 |             value={value}
148 |             onChange={event => onChange(event.target.value)}>
149 |             {enumOptions.map(({ label, value }, i) => {
150 |               return (
151 |                 <option key={i} value={value}>
152 |                   {label}
153 |                 </option>
154 |               );
155 |             })}
156 |           </select>
157 |         );
158 |       },
159 |       "ui:options": {
160 |         backgroundColor: "pink",
161 |       },
162 |     },
163 |   },
164 |   formData: {
165 |     stringFormats: {
166 |       email: "chuck@norris.net",
167 |       uri: "http://chucknorris.com/",
168 |     },
169 |     boolean: {
170 |       default: true,
171 |       radio: true,
172 |       select: true,
173 |     },
174 |     string: {
175 |       default: "Hello...",
176 |       textarea: "... World",
177 |     },
178 |     secret: "I'm a hidden string.",
179 |   },
180 | };
181 | 


--------------------------------------------------------------------------------
/playground/samples/schemaDependencies.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   schema: {
  3 |     title: "Schema dependencies",
  4 |     description: "These samples are best viewed without live validation.",
  5 |     type: "object",
  6 |     properties: {
  7 |       simple: {
  8 |         src:
  9 |           "https://spacetelescope.github.io/understanding-json-schema/reference/object.html#dependencies",
 10 |         title: "Simple",
 11 |         type: "object",
 12 |         properties: {
 13 |           name: {
 14 |             type: "string",
 15 |           },
 16 |           credit_card: {
 17 |             type: "number",
 18 |           },
 19 |         },
 20 |         required: ["name"],
 21 |         dependencies: {
 22 |           credit_card: {
 23 |             properties: {
 24 |               billing_address: {
 25 |                 type: "string",
 26 |               },
 27 |             },
 28 |             required: ["billing_address"],
 29 |           },
 30 |         },
 31 |       },
 32 |       conditional: {
 33 |         title: "Conditional",
 34 |         $ref: "#/definitions/person",
 35 |       },
 36 |       arrayOfConditionals: {
 37 |         title: "Array of conditionals",
 38 |         type: "array",
 39 |         items: {
 40 |           $ref: "#/definitions/person",
 41 |         },
 42 |       },
 43 |       fixedArrayOfConditionals: {
 44 |         title: "Fixed array of conditionals",
 45 |         type: "array",
 46 |         items: [
 47 |           {
 48 |             title: "Primary person",
 49 |             $ref: "#/definitions/person",
 50 |           },
 51 |         ],
 52 |         additionalItems: {
 53 |           title: "Additional person",
 54 |           $ref: "#/definitions/person",
 55 |         },
 56 |       },
 57 |     },
 58 |     definitions: {
 59 |       person: {
 60 |         title: "Person",
 61 |         type: "object",
 62 |         properties: {
 63 |           "Do you have any pets?": {
 64 |             type: "string",
 65 |             enum: ["No", "Yes: One", "Yes: More than one"],
 66 |             default: "No",
 67 |           },
 68 |         },
 69 |         required: ["Do you have any pets?"],
 70 |         dependencies: {
 71 |           "Do you have any pets?": {
 72 |             oneOf: [
 73 |               {
 74 |                 properties: {
 75 |                   "Do you have any pets?": {
 76 |                     enum: ["No"],
 77 |                   },
 78 |                 },
 79 |               },
 80 |               {
 81 |                 properties: {
 82 |                   "Do you have any pets?": {
 83 |                     enum: ["Yes: One"],
 84 |                   },
 85 |                   "How old is your pet?": {
 86 |                     type: "number",
 87 |                   },
 88 |                 },
 89 |                 required: ["How old is your pet?"],
 90 |               },
 91 |               {
 92 |                 properties: {
 93 |                   "Do you have any pets?": {
 94 |                     enum: ["Yes: More than one"],
 95 |                   },
 96 |                   "Do you want to get rid of any?": {
 97 |                     type: "boolean",
 98 |                   },
 99 |                 },
100 |                 required: ["Do you want to get rid of any?"],
101 |               },
102 |             ],
103 |           },
104 |         },
105 |       },
106 |     },
107 |   },
108 |   uiSchema: {
109 |     simple: {
110 |       credit_card: {
111 |         "ui:help":
112 |           "If you enter anything here then billing_address will be dynamically added to the form.",
113 |       },
114 |     },
115 |     conditional: {
116 |       "Do you want to get rid of any?": {
117 |         "ui:widget": "radio",
118 |       },
119 |     },
120 |     arrayOfConditionals: {
121 |       items: {
122 |         "Do you want to get rid of any?": {
123 |           "ui:widget": "radio",
124 |         },
125 |       },
126 |     },
127 |     fixedArrayOfConditionals: {
128 |       items: {
129 |         "Do you want to get rid of any?": {
130 |           "ui:widget": "radio",
131 |         },
132 |       },
133 |       additionalItems: {
134 |         "Do you want to get rid of any?": {
135 |           "ui:widget": "radio",
136 |         },
137 |       },
138 |     },
139 |   },
140 |   formData: {
141 |     simple: {
142 |       name: "Randy",
143 |     },
144 |     conditional: {
145 |       "Do you have any pets?": "No",
146 |     },
147 |     arrayOfConditionals: [
148 |       {
149 |         "Do you have any pets?": "Yes: One",
150 |         "How old is your pet?": 6,
151 |       },
152 |       {
153 |         "Do you have any pets?": "Yes: More than one",
154 |         "Do you want to get rid of any?": false,
155 |       },
156 |     ],
157 |     fixedArrayOfConditionals: [
158 |       {
159 |         "Do you have any pets?": "No",
160 |       },
161 |       {
162 |         "Do you have any pets?": "Yes: One",
163 |         "How old is your pet?": 6,
164 |       },
165 |       {
166 |         "Do you have any pets?": "Yes: More than one",
167 |         "Do you want to get rid of any?": true,
168 |       },
169 |     ],
170 |   },
171 | };
172 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-jsonschema-form-bs4",
  3 |   "version": "1.7.1",
  4 |   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
  5 |   "scripts": {
  6 |     "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
  7 |     "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js",
  8 |     "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js && cp playground/index.prod.html build/index.html",
  9 |     "cs-check": "prettier -l $npm_package_prettierOptions \"{playground,src,test}/**/*.js\"",
 10 |     "cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 \"{playground,src,test}/**/*.js\" --write",
 11 |     "dist": "npm run build:lib && npm run build:dist",
 12 |     "lint": "eslint src test playground",
 13 |     "prepare": "npm run dist",
 14 |     "precommit": "lint-staged",
 15 |     "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
 16 |     "publish-to-npm": "npm run dist && npm publish",
 17 |     "preversion": "npm run build:playground && npm run dist && npm run cs-check && npm run lint",
 18 |     "start": "node devServer.js",
 19 |     "tdd": "cross-env NODE_ENV=test mocha --require @babel/register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
 20 |     "test": "cross-env NODE_ENV=test mocha --require @babel/register --require ./test/setup-jsdom.js test/**/*_test.js",
 21 |     "test-coverage": "cross-env NODE_ENV=test nyc --reporter=lcov mocha --require @babel/register --require ./test/setup-jsdom.js test/**/*_test.js",
 22 |     "test-debug": "cross-env NODE_ENV=test mocha --require @babel/register --require ./test/setup-jsdom.js --debug-brk --inspect test/Form_test.js"
 23 |   },
 24 |   "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
 25 |   "lint-staged": {
 26 |     "{playground,src,test}/**/*.js": [
 27 |       "npm run lint",
 28 |       "npm run cs-format",
 29 |       "git add"
 30 |     ]
 31 |   },
 32 |   "main": "lib/index.js",
 33 |   "types": "types/index.d.ts",
 34 |   "files": [
 35 |     "dist",
 36 |     "lib",
 37 |     "types"
 38 |   ],
 39 |   "engineStrict": false,
 40 |   "engines": {
 41 |     "npm": ">=2.14.7",
 42 |     "node": ">=6"
 43 |   },
 44 |   "peerDependencies": {
 45 |     "react": ">=15"
 46 |   },
 47 |   "dependencies": {
 48 |     "@types/json-schema": "*",
 49 |     "@types/react": "*",
 50 |     "@babel/runtime-corejs2": "^7.4.5",
 51 |     "ajv": "^6.7.0",
 52 |     "core-js": "^2.5.7",
 53 |     "lodash.get": "^4.4.2",
 54 |     "lodash.pick": "^4.4.0",
 55 |     "lodash.topath": "^4.5.2",
 56 |     "prop-types": "^15.5.8",
 57 |     "react-is": "^16.8.4",
 58 |     "react-lifecycles-compat": "^3.0.4",
 59 |     "shortid": "^2.2.14"
 60 |   },
 61 |   "devDependencies": {
 62 |     "@babel/cli": "^7.4.4",
 63 |     "@babel/core": "^7.4.5",
 64 |     "@babel/plugin-proposal-class-properties": "^7.4.4",
 65 |     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
 66 |     "@babel/plugin-transform-react-jsx": "^7.3.0",
 67 |     "@babel/plugin-transform-runtime": "^7.4.4",
 68 |     "@babel/preset-env": "^7.4.5",
 69 |     "@babel/preset-react": "^7.0.0",
 70 |     "@babel/register": "^7.4.4",
 71 |     "atob": "^2.0.3",
 72 |     "babel-eslint": "^10.0.1",
 73 |     "babel-loader": "^8.0.6",
 74 |     "chai": "^3.3.0",
 75 |     "codemirror": "^5.30.0",
 76 |     "create-react-ref": "^0.1.0",
 77 |     "cross-env": "^2.0.1",
 78 |     "css-loader": "^0.23.1",
 79 |     "eslint": "^4.9.0",
 80 |     "eslint-config-react-app": "^2.0.1",
 81 |     "eslint-plugin-flowtype": "^2.39.1",
 82 |     "eslint-plugin-import": "^2.7.0",
 83 |     "eslint-plugin-jsx-a11y": "^5.1.1",
 84 |     "eslint-plugin-react": "^7.4.0",
 85 |     "estraverse": "^4.2.0",
 86 |     "estraverse-fb": "^1.3.1",
 87 |     "express": "^4.14.0",
 88 |     "gh-pages": "^0.11.0",
 89 |     "html": "^1.0.0",
 90 |     "husky": "^0.13.2",
 91 |     "jsdom": "^8.3.0",
 92 |     "json-loader": "^0.5.7",
 93 |     "lint-staged": "^3.3.1",
 94 |     "mini-css-extract-plugin": "^0.4.3",
 95 |     "mocha": "^5.2.0",
 96 |     "nyc": "^13.2.0",
 97 |     "prettier": "^1.15.1",
 98 |     "react": "^15.5.0",
 99 |     "react-codemirror2": "^4.1.0",
100 |     "react-dom": "^15.3.2",
101 |     "react-portal": "^4.2.0",
102 |     "react-transform-catch-errors": "^1.0.0",
103 |     "react-transform-hmr": "^1.0.1",
104 |     "redbox-react": "^1.3.3",
105 |     "rimraf": "^2.5.4",
106 |     "sinon": "^1.17.6",
107 |     "style-loader": "^0.13.1",
108 |     "webpack": "^4.20.2",
109 |     "webpack-cli": "^3.1.2",
110 |     "webpack-dev-middleware": "^3.4.0",
111 |     "webpack-hot-middleware": "^2.13.2"
112 |   },
113 |   "directories": {
114 |     "test": "test"
115 |   },
116 |   "repository": {
117 |     "type": "git",
118 |     "url": "git+https://github.com/peterkelly/react-jsonschema-form-bs4.git"
119 |   },
120 |   "author": "Peter Kelly <peter@pmkelly.net>",
121 |   "keywords": [
122 |     "react",
123 |     "form",
124 |     "json-schema"
125 |   ],
126 |   "license": "Apache-2.0",
127 |   "homepage": "https://github.com/peterkelly/react-jsonschema-form-bs4#readme"
128 | }
129 | 


--------------------------------------------------------------------------------
/src/components/fields/MultiSchemaField.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import * as types from "../../types";
  4 | import {
  5 |   getUiOptions,
  6 |   getWidget,
  7 |   guessType,
  8 |   retrieveSchema,
  9 |   getDefaultFormState,
 10 |   getMatchingOption,
 11 | } from "../../utils";
 12 | 
 13 | class AnyOfField extends Component {
 14 |   constructor(props) {
 15 |     super(props);
 16 | 
 17 |     const { formData, options } = this.props;
 18 | 
 19 |     this.state = {
 20 |       selectedOption: this.getMatchingOption(formData, options),
 21 |     };
 22 |   }
 23 | 
 24 |   componentWillReceiveProps(nextProps) {
 25 |     const matchingOption = this.getMatchingOption(
 26 |       nextProps.formData,
 27 |       nextProps.options
 28 |     );
 29 | 
 30 |     if (matchingOption === this.state.selectedOption) {
 31 |       return;
 32 |     }
 33 | 
 34 |     this.setState({ selectedOption: matchingOption });
 35 |   }
 36 | 
 37 |   getMatchingOption(formData, options) {
 38 |     const { definitions } = this.props.registry;
 39 | 
 40 |     let option = getMatchingOption(formData, options, definitions);
 41 |     if (option !== 0) {
 42 |       return option;
 43 |     }
 44 |     // If the form data matches none of the options, use the currently selected
 45 |     // option, assuming it's available; otherwise use the first option
 46 |     return this && this.state ? this.state.selectedOption : 0;
 47 |   }
 48 | 
 49 |   onOptionChange = option => {
 50 |     const selectedOption = parseInt(option, 10);
 51 |     const { formData, onChange, options, registry } = this.props;
 52 |     const { definitions } = registry;
 53 |     const newOption = retrieveSchema(
 54 |       options[selectedOption],
 55 |       definitions,
 56 |       formData
 57 |     );
 58 | 
 59 |     // If the new option is of type object and the current data is an object,
 60 |     // discard properties added using the old option.
 61 |     let newFormData = undefined;
 62 |     if (
 63 |       guessType(formData) === "object" &&
 64 |       (newOption.type === "object" || newOption.properties)
 65 |     ) {
 66 |       newFormData = Object.assign({}, formData);
 67 | 
 68 |       const optionsToDiscard = options.slice();
 69 |       optionsToDiscard.splice(selectedOption, 1);
 70 | 
 71 |       // Discard any data added using other options
 72 |       for (const option of optionsToDiscard) {
 73 |         if (option.properties) {
 74 |           for (const key in option.properties) {
 75 |             if (newFormData.hasOwnProperty(key)) {
 76 |               delete newFormData[key];
 77 |             }
 78 |           }
 79 |         }
 80 |       }
 81 |     }
 82 |     // Call getDefaultFormState to make sure defaults are populated on change.
 83 |     onChange(
 84 |       getDefaultFormState(options[selectedOption], newFormData, definitions)
 85 |     );
 86 | 
 87 |     this.setState({
 88 |       selectedOption: parseInt(option, 10),
 89 |     });
 90 |   };
 91 | 
 92 |   render() {
 93 |     const {
 94 |       baseType,
 95 |       disabled,
 96 |       errorSchema,
 97 |       formData,
 98 |       idPrefix,
 99 |       idSchema,
100 |       onBlur,
101 |       onChange,
102 |       onFocus,
103 |       options,
104 |       registry,
105 |       safeRenderCompletion,
106 |       uiSchema,
107 |     } = this.props;
108 | 
109 |     const _SchemaField = registry.fields.SchemaField;
110 |     const { widgets } = registry;
111 |     const { selectedOption } = this.state;
112 |     const { widget = "select", ...uiOptions } = getUiOptions(uiSchema);
113 |     const Widget = getWidget({ type: "number" }, widget, widgets);
114 | 
115 |     const option = options[selectedOption] || null;
116 |     let optionSchema;
117 | 
118 |     if (option) {
119 |       // If the subschema doesn't declare a type, infer the type from the
120 |       // parent schema
121 |       optionSchema = option.type
122 |         ? option
123 |         : Object.assign({}, option, { type: baseType });
124 |     }
125 | 
126 |     const enumOptions = options.map((option, index) => ({
127 |       label: option.title || `Option ${index + 1}`,
128 |       value: index,
129 |     }));
130 | 
131 |     return (
132 |       <div className="panel panel-default panel-body">
133 |         <div className="form-group">
134 |           <Widget
135 |             id={`${idSchema.$id}_anyof_select`}
136 |             schema={{ type: "number", default: 0 }}
137 |             onChange={this.onOptionChange}
138 |             onBlur={onBlur}
139 |             onFocus={onFocus}
140 |             value={selectedOption}
141 |             options={{ enumOptions }}
142 |             {...uiOptions}
143 |           />
144 |         </div>
145 | 
146 |         {option !== null && (
147 |           <_SchemaField
148 |             schema={optionSchema}
149 |             uiSchema={uiSchema}
150 |             errorSchema={errorSchema}
151 |             idSchema={idSchema}
152 |             idPrefix={idPrefix}
153 |             formData={formData}
154 |             onChange={onChange}
155 |             onBlur={onBlur}
156 |             onFocus={onFocus}
157 |             registry={registry}
158 |             safeRenderCompletion={safeRenderCompletion}
159 |             disabled={disabled}
160 |           />
161 |         )}
162 |       </div>
163 |     );
164 |   }
165 | }
166 | 
167 | AnyOfField.defaultProps = {
168 |   disabled: false,
169 |   errorSchema: {},
170 |   idSchema: {},
171 |   uiSchema: {},
172 | };
173 | 
174 | if (process.env.NODE_ENV !== "production") {
175 |   AnyOfField.propTypes = {
176 |     options: PropTypes.arrayOf(PropTypes.object).isRequired,
177 |     baseType: PropTypes.string,
178 |     uiSchema: PropTypes.object,
179 |     idSchema: PropTypes.object,
180 |     formData: PropTypes.any,
181 |     errorSchema: PropTypes.object,
182 |     registry: types.registry.isRequired,
183 |   };
184 | }
185 | 
186 | export default AnyOfField;
187 | 


--------------------------------------------------------------------------------
/src/components/widgets/AltDateWidget.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | import { shouldRender, parseDateString, toDateString, pad } from "../../utils";
  5 | 
  6 | function rangeOptions(start, stop) {
  7 |   let options = [];
  8 |   for (let i = start; i <= stop; i++) {
  9 |     options.push({ value: i, label: pad(i, 2) });
 10 |   }
 11 |   return options;
 12 | }
 13 | 
 14 | function readyForChange(state) {
 15 |   return Object.keys(state).every(key => state[key] !== -1);
 16 | }
 17 | 
 18 | function DateElement(props) {
 19 |   const {
 20 |     type,
 21 |     range,
 22 |     value,
 23 |     select,
 24 |     rootId,
 25 |     disabled,
 26 |     readonly,
 27 |     autofocus,
 28 |     registry,
 29 |     onBlur,
 30 |   } = props;
 31 |   const id = rootId + "_" + type;
 32 |   const { SelectWidget } = registry.widgets;
 33 |   return (
 34 |     <SelectWidget
 35 |       schema={{ type: "integer" }}
 36 |       id={id}
 37 |       className="form-control"
 38 |       options={{ enumOptions: rangeOptions(range[0], range[1]) }}
 39 |       placeholder={type}
 40 |       value={value}
 41 |       disabled={disabled}
 42 |       readonly={readonly}
 43 |       autofocus={autofocus}
 44 |       onChange={value => select(type, value)}
 45 |       onBlur={onBlur}
 46 |     />
 47 |   );
 48 | }
 49 | 
 50 | class AltDateWidget extends Component {
 51 |   static defaultProps = {
 52 |     time: false,
 53 |     disabled: false,
 54 |     readonly: false,
 55 |     autofocus: false,
 56 |     options: {
 57 |       yearsRange: [1900, new Date().getFullYear() + 2],
 58 |     },
 59 |   };
 60 | 
 61 |   constructor(props) {
 62 |     super(props);
 63 |     this.state = parseDateString(props.value, props.time);
 64 |   }
 65 | 
 66 |   componentWillReceiveProps(nextProps) {
 67 |     this.setState(parseDateString(nextProps.value, nextProps.time));
 68 |   }
 69 | 
 70 |   shouldComponentUpdate(nextProps, nextState) {
 71 |     return shouldRender(this, nextProps, nextState);
 72 |   }
 73 | 
 74 |   onChange = (property, value) => {
 75 |     this.setState(
 76 |       { [property]: typeof value === "undefined" ? -1 : value },
 77 |       () => {
 78 |         // Only propagate to parent state if we have a complete date{time}
 79 |         if (readyForChange(this.state)) {
 80 |           this.props.onChange(toDateString(this.state, this.props.time));
 81 |         }
 82 |       }
 83 |     );
 84 |   };
 85 | 
 86 |   setNow = event => {
 87 |     event.preventDefault();
 88 |     const { time, disabled, readonly, onChange } = this.props;
 89 |     if (disabled || readonly) {
 90 |       return;
 91 |     }
 92 |     const nowDateObj = parseDateString(new Date().toJSON(), time);
 93 |     this.setState(nowDateObj, () => onChange(toDateString(this.state, time)));
 94 |   };
 95 | 
 96 |   clear = event => {
 97 |     event.preventDefault();
 98 |     const { time, disabled, readonly, onChange } = this.props;
 99 |     if (disabled || readonly) {
100 |       return;
101 |     }
102 |     this.setState(parseDateString("", time), () => onChange(undefined));
103 |   };
104 | 
105 |   get dateElementProps() {
106 |     const { time, options } = this.props;
107 |     const { year, month, day, hour, minute, second } = this.state;
108 |     const data = [
109 |       {
110 |         type: "year",
111 |         range: options.yearsRange,
112 |         value: year,
113 |       },
114 |       { type: "month", range: [1, 12], value: month },
115 |       { type: "day", range: [1, 31], value: day },
116 |     ];
117 |     if (time) {
118 |       data.push(
119 |         { type: "hour", range: [0, 23], value: hour },
120 |         { type: "minute", range: [0, 59], value: minute },
121 |         { type: "second", range: [0, 59], value: second }
122 |       );
123 |     }
124 |     return data;
125 |   }
126 | 
127 |   render() {
128 |     const {
129 |       id,
130 |       disabled,
131 |       readonly,
132 |       autofocus,
133 |       registry,
134 |       onBlur,
135 |       options,
136 |     } = this.props;
137 |     return (
138 |       <ul className="list-inline">
139 |         {this.dateElementProps.map((elemProps, i) => (
140 |           <li key={i} className="list-inline-item">
141 |             <DateElement
142 |               rootId={id}
143 |               select={this.onChange}
144 |               {...elemProps}
145 |               disabled={disabled}
146 |               readonly={readonly}
147 |               registry={registry}
148 |               onBlur={onBlur}
149 |               autofocus={autofocus && i === 0}
150 |             />
151 |           </li>
152 |         ))}
153 |         {(options.hideNowButton !== "undefined"
154 |           ? !options.hideNowButton
155 |           : true) && (
156 |           <li className="list-inline-item">
157 |             <a href="#" className="btn btn-info btn-now" onClick={this.setNow}>
158 |               Now
159 |             </a>
160 |           </li>
161 |         )}
162 |         {(options.hideClearButton !== "undefined"
163 |           ? !options.hideClearButton
164 |           : true) && (
165 |           <li className="list-inline-item">
166 |             <a
167 |               href="#"
168 |               className="btn btn-warning btn-clear"
169 |               onClick={this.clear}>
170 |               Clear
171 |             </a>
172 |           </li>
173 |         )}
174 |       </ul>
175 |     );
176 |   }
177 | }
178 | 
179 | if (process.env.NODE_ENV !== "production") {
180 |   AltDateWidget.propTypes = {
181 |     schema: PropTypes.object.isRequired,
182 |     id: PropTypes.string.isRequired,
183 |     value: PropTypes.string,
184 |     required: PropTypes.bool,
185 |     disabled: PropTypes.bool,
186 |     readonly: PropTypes.bool,
187 |     autofocus: PropTypes.bool,
188 |     onChange: PropTypes.func,
189 |     onBlur: PropTypes.func,
190 |     time: PropTypes.bool,
191 |     options: PropTypes.object,
192 |   };
193 | }
194 | 
195 | export default AltDateWidget;
196 | 


--------------------------------------------------------------------------------
/test/withTheme_test.js:
--------------------------------------------------------------------------------
  1 | import { expect } from "chai";
  2 | import React from "react";
  3 | 
  4 | import { withTheme } from "../src";
  5 | import { createComponent, createSandbox } from "./test_utils";
  6 | 
  7 | describe("withTheme", () => {
  8 |   let sandbox;
  9 | 
 10 |   beforeEach(() => {
 11 |     sandbox = createSandbox();
 12 |   });
 13 | 
 14 |   afterEach(() => {
 15 |     sandbox.restore();
 16 |   });
 17 | 
 18 |   describe("With fields", () => {
 19 |     it("should use the withTheme field", () => {
 20 |       const fields = {
 21 |         StringField() {
 22 |           return <div className="string-field" />;
 23 |         },
 24 |       };
 25 |       const schema = {
 26 |         type: "object",
 27 |         properties: {
 28 |           fieldA: {
 29 |             type: "string",
 30 |           },
 31 |           fieldB: {
 32 |             type: "string",
 33 |           },
 34 |         },
 35 |       };
 36 |       const uiSchema = {};
 37 |       let { node } = createComponent(withTheme({ fields }), {
 38 |         schema,
 39 |         uiSchema,
 40 |       });
 41 |       expect(node.querySelectorAll(".string-field")).to.have.length.of(2);
 42 |     });
 43 | 
 44 |     it("should use withTheme field and the user defined field", () => {
 45 |       const themeFields = {
 46 |         StringField() {
 47 |           return <div className="string-field" />;
 48 |         },
 49 |       };
 50 |       const userFields = {
 51 |         NumberField() {
 52 |           return <div className="number-field" />;
 53 |         },
 54 |       };
 55 |       const schema = {
 56 |         type: "object",
 57 |         properties: {
 58 |           fieldA: {
 59 |             type: "string",
 60 |           },
 61 |           fieldB: {
 62 |             type: "number",
 63 |           },
 64 |         },
 65 |       };
 66 |       const uiSchema = {};
 67 |       let { node } = createComponent(withTheme({ fields: themeFields }), {
 68 |         schema,
 69 |         uiSchema,
 70 |         fields: userFields,
 71 |       });
 72 |       expect(node.querySelectorAll(".string-field")).to.have.length.of(1);
 73 |       expect(node.querySelectorAll(".number-field")).to.have.length.of(1);
 74 |     });
 75 | 
 76 |     it("should use only the user defined field", () => {
 77 |       const themeFields = {
 78 |         StringField() {
 79 |           return <div className="string-field" />;
 80 |         },
 81 |       };
 82 |       const userFields = {
 83 |         StringField() {
 84 |           return <div className="form-control" />;
 85 |         },
 86 |       };
 87 |       const schema = {
 88 |         type: "object",
 89 |         properties: {
 90 |           fieldA: {
 91 |             type: "string",
 92 |           },
 93 |           fieldB: {
 94 |             type: "string",
 95 |           },
 96 |         },
 97 |       };
 98 |       const uiSchema = {};
 99 |       let { node } = createComponent(withTheme({ fields: themeFields }), {
100 |         schema,
101 |         uiSchema,
102 |         fields: userFields,
103 |       });
104 |       expect(node.querySelectorAll(".string-field")).to.have.length.of(0);
105 |       expect(node.querySelectorAll(".form-control")).to.have.length.of(2);
106 |     });
107 |   });
108 | 
109 |   describe("With widgets", () => {
110 |     it("should use the withTheme widget", () => {
111 |       const widgets = {
112 |         TextWidget: () => <div id="test" />,
113 |       };
114 |       const schema = {
115 |         type: "string",
116 |       };
117 |       const uiSchema = {};
118 |       let { node } = createComponent(withTheme({ widgets }), {
119 |         schema,
120 |         uiSchema,
121 |       });
122 |       expect(node.querySelectorAll("#test")).to.have.length.of(1);
123 |     });
124 | 
125 |     it("should use the withTheme widget as well as user defined widget", () => {
126 |       const themeWidgets = {
127 |         TextWidget: () => <div id="test-theme-widget" />,
128 |       };
129 |       const userWidgets = {
130 |         DateWidget: () => <div id="test-user-widget" />,
131 |       };
132 |       const schema = {
133 |         type: "object",
134 |         properties: {
135 |           fieldA: {
136 |             type: "string",
137 |           },
138 |           fieldB: {
139 |             format: "date",
140 |             type: "string",
141 |           },
142 |         },
143 |       };
144 |       const uiSchema = {};
145 |       let { node } = createComponent(withTheme({ widgets: themeWidgets }), {
146 |         schema,
147 |         uiSchema,
148 |         widgets: userWidgets,
149 |       });
150 |       expect(node.querySelectorAll("#test-theme-widget")).to.have.length.of(1);
151 |       expect(node.querySelectorAll("#test-user-widget")).to.have.length.of(1);
152 |     });
153 | 
154 |     it("should use only the user defined widget", () => {
155 |       const themeWidgets = {
156 |         TextWidget: () => <div id="test-theme-widget" />,
157 |       };
158 |       const userWidgets = {
159 |         TextWidget: () => <div id="test-user-widget" />,
160 |       };
161 |       const schema = {
162 |         type: "object",
163 |         properties: {
164 |           fieldA: {
165 |             type: "string",
166 |           },
167 |         },
168 |       };
169 |       const uiSchema = {};
170 |       let { node } = createComponent(withTheme({ widgets: themeWidgets }), {
171 |         schema,
172 |         uiSchema,
173 |         widgets: userWidgets,
174 |       });
175 |       expect(node.querySelectorAll("#test-theme-widget")).to.have.length.of(0);
176 |       expect(node.querySelectorAll("#test-user-widget")).to.have.length.of(1);
177 |     });
178 |   });
179 | 
180 |   describe("With templates", () => {
181 |     it("should use the withTheme template", () => {
182 |       const themeTemplates = {
183 |         FieldTemplate() {
184 |           return <div className="with-theme-field-template" />;
185 |         },
186 |       };
187 |       const schema = {
188 |         type: "object",
189 |         properties: {
190 |           fieldA: {
191 |             type: "string",
192 |           },
193 |           fieldB: {
194 |             type: "string",
195 |           },
196 |         },
197 |       };
198 |       const uiSchema = {};
199 |       let { node } = createComponent(withTheme({ ...themeTemplates }), {
200 |         schema,
201 |         uiSchema,
202 |       });
203 |       expect(
204 |         node.querySelectorAll(".with-theme-field-template")
205 |       ).to.have.length.of(1);
206 |     });
207 | 
208 |     it("should use only the user defined template", () => {
209 |       const themeTemplates = {
210 |         FieldTemplate() {
211 |           return <div className="with-theme-field-template" />;
212 |         },
213 |       };
214 |       const userTemplates = {
215 |         FieldTemplate() {
216 |           return <div className="user-field-template" />;
217 |         },
218 |       };
219 | 
220 |       const schema = {
221 |         type: "object",
222 |         properties: { foo: { type: "string" }, bar: { type: "string" } },
223 |       };
224 |       let { node } = createComponent(withTheme({ ...themeTemplates }), {
225 |         schema,
226 |         ...userTemplates,
227 |       });
228 |       expect(
229 |         node.querySelectorAll(".with-theme-field-template")
230 |       ).to.have.length.of(0);
231 |       expect(node.querySelectorAll(".user-field-template")).to.have.length.of(
232 |         1
233 |       );
234 |     });
235 |   });
236 | });
237 | 


--------------------------------------------------------------------------------
/docs/validation.md:
--------------------------------------------------------------------------------
  1 | ## Form data validation
  2 | 
  3 | ### Live validation
  4 | 
  5 | By default, form data are only validated when the form is submitted or when a new `formData` prop is passed to the `Form` component.
  6 | 
  7 | You can enable live form data validation by passing a `liveValidate` prop to the `Form` component, and set it to `true`. Then, everytime a value changes within the form data tree (eg. the user entering a character in a field), a validation operation is performed, and the validation results are reflected into the form state.
  8 | 
  9 | Be warned that this is an expensive strategy, with possibly strong impact on performances.
 10 | 
 11 | To disable validation entirely, you can set Form's `noValidate` prop to `true`.
 12 | 
 13 | ### HTML5 Validation
 14 | 
 15 | By default, required field errors will cause the browser to display its standard HTML5 `required` attribute error messages and prevent form submission. If you would like to turn this off, you can set Form's `noHtml5Validate` prop to `true`, which will set `noValidate` on the `form` element.
 16 | 
 17 | ### Custom validation
 18 | 
 19 | Form data is always validated against the JSON schema.
 20 | 
 21 | But it is possible to define your own custom validation rules. This is especially useful when the validation depends on several interdependent fields.
 22 | 
 23 | ```js
 24 | function validate(formData, errors) {
 25 |   if (formData.pass1 !== formData.pass2) {
 26 |     errors.pass2.addError("Passwords don't match");
 27 |   }
 28 |   return errors;
 29 | }
 30 | 
 31 | const schema = {
 32 |   type: "object",
 33 |   properties: {
 34 |     pass1: {type: "string", minLength: 3},
 35 |     pass2: {type: "string", minLength: 3},
 36 |   }
 37 | };
 38 | 
 39 | render((
 40 |   <Form schema={schema}
 41 |         validate={validate} />
 42 | ), document.getElementById("app"));
 43 | ```
 44 | 
 45 | > Notes:
 46 | > - The `validate()` function must **always** return the `errors` object
 47 | >   received as second argument.
 48 | > - The `validate()` function is called **after** the JSON schema validation.
 49 | 
 50 | ### Custom string formats
 51 | 
 52 | [Pre-defined semantic formats](https://json-schema.org/latest/json-schema-validation.html#rfc.section.7) are limited. react-jsonschema-form adds two formats, `color` and `data-url`, to support certain [alternative widgets](form-customization.md#alternative-widgets). You can add formats of your own through the `customFormats` prop to your `Form` component:
 53 | 
 54 | ```jsx
 55 | const schema = {
 56 |   phoneNumber: {
 57 |     type: 'string',
 58 |     format: 'phone-us'
 59 |   }
 60 | };
 61 | 
 62 | const customFormats = {
 63 |   'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/
 64 | };
 65 | 
 66 | render((
 67 |   <Form schema={schema} 
 68 |         customFormats={customFormats}/>
 69 | ), document.getElementById("app"));
 70 | ```
 71 | 
 72 | Format values can be anything AJV’s [`addFormat` method](https://github.com/epoberezkin/ajv#addformatstring-name-stringregexpfunctionobject-format---ajv) accepts.
 73 | 
 74 | ### Custom schema validation
 75 | 
 76 | To have your schemas validated against any other meta schema than draft-07 (the current version of [JSON Schema](http://json-schema.org/)), make sure your schema has a `$schema` attribute that enables the validator to use the correct meta schema. For example:
 77 | 
 78 | ```json
 79 | {
 80 |   "$schema": "http://json-schema.org/draft-04/schema#",
 81 |   ...
 82 | }
 83 | ```
 84 | 
 85 | Note that react-jsonschema-form only supports the latest version of JSON Schema, draft-07, by default. To support additional meta schemas pass them through the `additionalMetaSchemas` prop to your `Form` component:
 86 | 
 87 | ```jsx
 88 | const additionalMetaSchemas = require("ajv/lib/refs/json-schema-draft-04.json");
 89 | 
 90 | render((
 91 |   <Form schema={schema} 
 92 |         additionalMetaSchemas={[additionalMetaSchemas]}/>
 93 | ), document.getElementById("app"));
 94 | ```
 95 | 
 96 | In this example `schema` passed as props to `Form` component can be validated against draft-07 (default) and by draft-04 (added), depending on the value of `$schema` attribute.
 97 | 
 98 | `additionalMetaSchemas` also accepts more than one meta schema:
 99 | 
100 | ```jsx
101 | render((
102 |   <Form schema={schema} 
103 |         additionalMetaSchemas={[metaSchema1, metaSchema2]} />
104 | ), document.getElementById("app"));
105 | ```
106 | 
107 | ### Custom error messages
108 | 
109 | Validation error messages are provided by the JSON Schema validation by default. If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.
110 | 
111 | ```js
112 | function transformErrors(errors) {
113 |   return errors.map(error => {
114 |     if (error.name === "pattern") {
115 |       error.message = "Only digits are allowed"
116 |     }
117 |     return error;
118 |   });
119 | }
120 | 
121 | const schema = {
122 |   type: "object",
123 |   properties: {
124 |     onlyNumbersString: {type: "string", pattern: "^\\d*$"},
125 |   }
126 | };
127 | 
128 | render((
129 |   <Form schema={schema}
130 |         transformErrors={transformErrors} />
131 | ), document.getElementById("app"));
132 | ```
133 | 
134 | > Notes:
135 | > - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.
136 | 
137 | Each element in the `errors` list passed to `transformErrors` has the following properties:
138 | 
139 | - `name`: name of the error, for example, "required" or "minLength"
140 | - `message`: message, for example, "is a required property" or "should NOT be shorter than 3 characters"
141 | - `params`: an object with the error params returned by ajv ([see doc](https://github.com/epoberezkin/ajv#error-parameters) for more info).
142 | - `property`: a string in Javascript property accessor notation to the data path of the field with the error. For example, `.name` or `['first-name']`.
143 | - `stack`: full error name, for example ".name is a required property".
144 | - `schemaPath`: JSON pointer to the schema of the keyword that failed validation. For example, `#/fields/firstName/required`. (Note: this may sometimes be wrong due to a [https://github.com/epoberezkin/ajv/issues/512](bug in ajv)).
145 | 
146 | ### Error List Display
147 | 
148 | To disable rendering of the error list at the top of the form, you can set the `showErrorList` prop to `false`. Doing so will still validate the form, but only the inline display will show.
149 | 
150 | ```js
151 | render((
152 |   <Form schema={schema}
153 |         showErrorList={false} />
154 | ), document.getElementById("app"));
155 | ```
156 | 
157 | > Note: you can also use your own [ErrorList](advanced-customization.md#error-list-template)
158 | 
159 | ### The case of empty strings
160 | 
161 | When a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `undefined`.
162 | 
163 | One consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `undefined`, not an empty string.
164 | 
165 | If you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.
166 | 


--------------------------------------------------------------------------------
/src/validate.js:
--------------------------------------------------------------------------------
  1 | import toPath from "lodash.topath";
  2 | import Ajv from "ajv";
  3 | let ajv = createAjvInstance();
  4 | import { deepEquals } from "./utils";
  5 | 
  6 | let formerCustomFormats = null;
  7 | let formerMetaSchema = null;
  8 | 
  9 | import { isObject, mergeObjects } from "./utils";
 10 | 
 11 | function createAjvInstance() {
 12 |   const ajv = new Ajv({
 13 |     errorDataPath: "property",
 14 |     allErrors: true,
 15 |     multipleOfPrecision: 8,
 16 |     schemaId: "auto",
 17 |     unknownFormats: "ignore",
 18 |   });
 19 | 
 20 |   // add custom formats
 21 |   ajv.addFormat(
 22 |     "data-url",
 23 |     /^data:([a-z]+\/[a-z0-9-+.]+)?;(?:name=(.*);)?base64,(.*)$/
 24 |   );
 25 |   ajv.addFormat(
 26 |     "color",
 27 |     /^(#?([0-9A-Fa-f]{3}){1,2}\b|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\)))$/
 28 |   );
 29 |   return ajv;
 30 | }
 31 | 
 32 | function toErrorSchema(errors) {
 33 |   // Transforms a ajv validation errors list:
 34 |   // [
 35 |   //   {property: ".level1.level2[2].level3", message: "err a"},
 36 |   //   {property: ".level1.level2[2].level3", message: "err b"},
 37 |   //   {property: ".level1.level2[4].level3", message: "err b"},
 38 |   // ]
 39 |   // Into an error tree:
 40 |   // {
 41 |   //   level1: {
 42 |   //     level2: {
 43 |   //       2: {level3: {errors: ["err a", "err b"]}},
 44 |   //       4: {level3: {errors: ["err b"]}},
 45 |   //     }
 46 |   //   }
 47 |   // };
 48 |   if (!errors.length) {
 49 |     return {};
 50 |   }
 51 |   return errors.reduce((errorSchema, error) => {
 52 |     const { property, message } = error;
 53 |     const path = toPath(property);
 54 |     let parent = errorSchema;
 55 | 
 56 |     // If the property is at the root (.level1) then toPath creates
 57 |     // an empty array element at the first index. Remove it.
 58 |     if (path.length > 0 && path[0] === "") {
 59 |       path.splice(0, 1);
 60 |     }
 61 | 
 62 |     for (const segment of path.slice(0)) {
 63 |       if (!(segment in parent)) {
 64 |         parent[segment] = {};
 65 |       }
 66 |       parent = parent[segment];
 67 |     }
 68 | 
 69 |     if (Array.isArray(parent.__errors)) {
 70 |       // We store the list of errors for this node in a property named __errors
 71 |       // to avoid name collision with a possible sub schema field named
 72 |       // "errors" (see `validate.createErrorHandler`).
 73 |       parent.__errors = parent.__errors.concat(message);
 74 |     } else {
 75 |       if (message) {
 76 |         parent.__errors = [message];
 77 |       }
 78 |     }
 79 |     return errorSchema;
 80 |   }, {});
 81 | }
 82 | 
 83 | export function toErrorList(errorSchema, fieldName = "root") {
 84 |   // XXX: We should transform fieldName as a full field path string.
 85 |   let errorList = [];
 86 |   if ("__errors" in errorSchema) {
 87 |     errorList = errorList.concat(
 88 |       errorSchema.__errors.map(stack => {
 89 |         return {
 90 |           stack: `${fieldName}: ${stack}`,
 91 |         };
 92 |       })
 93 |     );
 94 |   }
 95 |   return Object.keys(errorSchema).reduce((acc, key) => {
 96 |     if (key !== "__errors") {
 97 |       acc = acc.concat(toErrorList(errorSchema[key], key));
 98 |     }
 99 |     return acc;
100 |   }, errorList);
101 | }
102 | 
103 | function createErrorHandler(formData) {
104 |   const handler = {
105 |     // We store the list of errors for this node in a property named __errors
106 |     // to avoid name collision with a possible sub schema field named
107 |     // "errors" (see `utils.toErrorSchema`).
108 |     __errors: [],
109 |     addError(message) {
110 |       this.__errors.push(message);
111 |     },
112 |   };
113 |   if (isObject(formData)) {
114 |     return Object.keys(formData).reduce((acc, key) => {
115 |       return { ...acc, [key]: createErrorHandler(formData[key]) };
116 |     }, handler);
117 |   }
118 |   if (Array.isArray(formData)) {
119 |     return formData.reduce((acc, value, key) => {
120 |       return { ...acc, [key]: createErrorHandler(value) };
121 |     }, handler);
122 |   }
123 |   return handler;
124 | }
125 | 
126 | function unwrapErrorHandler(errorHandler) {
127 |   return Object.keys(errorHandler).reduce((acc, key) => {
128 |     if (key === "addError") {
129 |       return acc;
130 |     } else if (key === "__errors") {
131 |       return { ...acc, [key]: errorHandler[key] };
132 |     }
133 |     return { ...acc, [key]: unwrapErrorHandler(errorHandler[key]) };
134 |   }, {});
135 | }
136 | 
137 | /**
138 |  * Transforming the error output from ajv to format used by jsonschema.
139 |  * At some point, components should be updated to support ajv.
140 |  */
141 | function transformAjvErrors(errors = []) {
142 |   if (errors === null) {
143 |     return [];
144 |   }
145 | 
146 |   return errors.map(e => {
147 |     const { dataPath, keyword, message, params, schemaPath } = e;
148 |     let property = `${dataPath}`;
149 | 
150 |     // put data in expected format
151 |     return {
152 |       name: keyword,
153 |       property,
154 |       message,
155 |       params, // specific to ajv
156 |       stack: `${property} ${message}`.trim(),
157 |       schemaPath,
158 |     };
159 |   });
160 | }
161 | 
162 | /**
163 |  * This function processes the formData with a user `validate` contributed
164 |  * function, which receives the form data and an `errorHandler` object that
165 |  * will be used to add custom validation errors for each field.
166 |  */
167 | export default function validateFormData(
168 |   formData,
169 |   schema,
170 |   customValidate,
171 |   transformErrors,
172 |   additionalMetaSchemas = [],
173 |   customFormats = {}
174 | ) {
175 |   const newMetaSchemas = !deepEquals(formerMetaSchema, additionalMetaSchemas);
176 |   const newFormats = !deepEquals(formerCustomFormats, customFormats);
177 | 
178 |   if (newMetaSchemas || newFormats) {
179 |     ajv = createAjvInstance();
180 |   }
181 | 
182 |   // add more schemas to validate against
183 |   if (
184 |     additionalMetaSchemas &&
185 |     newMetaSchemas &&
186 |     Array.isArray(additionalMetaSchemas)
187 |   ) {
188 |     ajv.addMetaSchema(additionalMetaSchemas);
189 |     formerMetaSchema = additionalMetaSchemas;
190 |   }
191 | 
192 |   // add more custom formats to validate against
193 |   if (customFormats && newFormats && isObject(customFormats)) {
194 |     Object.keys(customFormats).forEach(formatName => {
195 |       ajv.addFormat(formatName, customFormats[formatName]);
196 |     });
197 | 
198 |     formerCustomFormats = customFormats;
199 |   }
200 | 
201 |   let validationError = null;
202 |   try {
203 |     ajv.validate(schema, formData);
204 |   } catch (err) {
205 |     validationError = err;
206 |   }
207 | 
208 |   let errors = transformAjvErrors(ajv.errors);
209 |   // Clear errors to prevent persistent errors, see #1104
210 | 
211 |   ajv.errors = null;
212 | 
213 |   const noProperMetaSchema =
214 |     validationError &&
215 |     validationError.message &&
216 |     typeof validationError.message === "string" &&
217 |     validationError.message.includes("no schema with key or ref ");
218 | 
219 |   if (noProperMetaSchema) {
220 |     errors = [
221 |       ...errors,
222 |       {
223 |         stack: validationError.message,
224 |       },
225 |     ];
226 |   }
227 |   if (typeof transformErrors === "function") {
228 |     errors = transformErrors(errors);
229 |   }
230 | 
231 |   let errorSchema = toErrorSchema(errors);
232 | 
233 |   if (noProperMetaSchema) {
234 |     errorSchema = {
235 |       ...errorSchema,
236 |       ...{
237 |         $schema: {
238 |           __errors: [validationError.message],
239 |         },
240 |       },
241 |     };
242 |   }
243 | 
244 |   if (typeof customValidate !== "function") {
245 |     return { errors, errorSchema };
246 |   }
247 | 
248 |   const errorHandler = customValidate(formData, createErrorHandler(formData));
249 |   const userErrorSchema = unwrapErrorHandler(errorHandler);
250 |   const newErrorSchema = mergeObjects(errorSchema, userErrorSchema, true);
251 |   // XXX: The errors list produced is not fully compliant with the format
252 |   // exposed by the jsonschema lib, which contains full field paths and other
253 |   // properties.
254 |   const newErrors = toErrorList(newErrorSchema);
255 | 
256 |   return {
257 |     errors: newErrors,
258 |     errorSchema: newErrorSchema,
259 |   };
260 | }
261 | 
262 | /**
263 |  * Validates data against a schema, returning true if the data is valid, or
264 |  * false otherwise. If the schema is invalid, then this function will return
265 |  * false.
266 |  */
267 | export function isValid(schema, data) {
268 |   try {
269 |     return ajv.validate(schema, data);
270 |   } catch (e) {
271 |     return false;
272 |   }
273 | }
274 | 


--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
  1 | // Type definitions for react-jsonschema-form 1.3
  2 | // Project: https://github.com/mozilla-services/react-jsonschema-form
  3 | // Definitions by: Dan Fox <https://github.com/iamdanfox>
  4 | //                 Ivan Jiang <https://github.com/iplus26>
  5 | //                 Philippe Bourdages <https://github.com/phbou72>
  6 | //                 Lucian Buzzo <https://github.com/LucianBuzzo>
  7 | //                 Sylvain Thénault <https://github.com/sthenault>
  8 | //                 Sebastian Busch <https://github.com/sbusch>
  9 | //                 Mehdi Lahlou <https://github.com/medfreeman>
 10 | //                 Saad Tazi <https://github.com/saadtazi>
 11 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 12 | // TypeScript Version: 2.8
 13 | 
 14 | 
 15 | declare module "react-jsonschema-form-bs4" {
 16 |   import * as React from "react";
 17 |   import { JSONSchema6 } from "json-schema";
 18 | 
 19 |   type ErrorSchema = {
 20 |       [k: string]: ErrorSchema
 21 |   };
 22 | 
 23 |   export interface FormProps<T> {
 24 |       schema: JSONSchema6;
 25 |       disabled?: boolean;
 26 |       uiSchema?: UiSchema;
 27 |       formData?: T;
 28 |       formContext?: any;
 29 |       widgets?: { [name: string]: Widget };
 30 |       fields?: { [name: string]: Field };
 31 |       noValidate?: boolean;
 32 |       noHtml5Validate?: boolean;
 33 |       showErrorList?: boolean;
 34 |       ErrorList?: React.StatelessComponent<ErrorListProps>;
 35 |       validate?: (formData: T, errors: FormValidation) => FormValidation;
 36 |       onChange?: (e: IChangeEvent<T>, es?: ErrorSchema) => any;
 37 |       onError?: (e: any) => any;
 38 |       onSubmit?: (e: ISubmitEvent<T>) => any;
 39 |       liveValidate?: boolean;
 40 |       FieldTemplate?: React.StatelessComponent<FieldTemplateProps>;
 41 |       ArrayFieldTemplate?: React.StatelessComponent<ArrayFieldTemplateProps>;
 42 |       ObjectFieldTemplate?: React.StatelessComponent<
 43 |           ObjectFieldTemplateProps
 44 |       >;
 45 |       safeRenderCompletion?: boolean;
 46 |       transformErrors?: (errors: AjvError[]) => AjvError[];
 47 |       idPrefix?: string;
 48 | 
 49 |       // HTML Attributes
 50 |       id?: string;
 51 |       className?: string;
 52 |       name?: string;
 53 |       method?: string;
 54 |       target?: string;
 55 |       action?: string;
 56 |       autocomplete?: string;
 57 |       enctype?: string;
 58 |       acceptcharset?: string;
 59 |   }
 60 | 
 61 |   export default class Form<T> extends React.Component<FormProps<T>> {}
 62 | 
 63 |   export type UiSchema = {
 64 |       "ui:field"?: Field | string;
 65 |       "ui:widget"?: Widget | string;
 66 |       "ui:options"?: object;
 67 |       "ui:order"?: string[];
 68 |       [name: string]: any;
 69 |   };
 70 | 
 71 |   export type FieldId = {
 72 |       $id: string;
 73 |   };
 74 | 
 75 |   export type IdSchema = FieldId & {
 76 |       [key: string]: FieldId;
 77 |   };
 78 | 
 79 |   export interface WidgetProps extends Pick<
 80 |       React.HTMLAttributes<HTMLElement>,
 81 |       Exclude<
 82 |           keyof React.HTMLAttributes<HTMLElement>,
 83 |           "onBlur"|"onFocus">
 84 |   > {
 85 |       id: string;
 86 |       schema: JSONSchema6;
 87 |       value: any;
 88 |       required: boolean;
 89 |       disabled: boolean;
 90 |       readonly: boolean;
 91 |       autofocus: boolean;
 92 |       onChange: (value: any) => void;
 93 |       options: object;
 94 |       formContext: any;
 95 |       onBlur: (id: string, value: boolean | number | string | null) => void;
 96 |       onFocus: (id: string, value: boolean | number | string | null) => void;
 97 |       label: string;
 98 |   }
 99 | 
100 |   export type Widget =
101 |       | React.StatelessComponent<WidgetProps>
102 |       | React.ComponentClass<WidgetProps>;
103 | 
104 |   export interface FieldProps<T = any> extends React.HTMLAttributes<HTMLElement> {
105 |       schema: JSONSchema6;
106 |       uiSchema: UiSchema;
107 |       idSchema: IdSchema;
108 |       formData: T;
109 |       errorSchema: ErrorSchema;
110 |       onChange: (e: IChangeEvent<T> | any, es?: ErrorSchema) => any;
111 |       registry: {
112 |           fields: { [name: string]: Field };
113 |           widgets: { [name: string]: Widget };
114 |           definitions: object;
115 |           formContext: any;
116 |       };
117 |       formContext: any;
118 |       autofocus: boolean;
119 |       disabled: boolean;
120 |       readonly: boolean;
121 |       required: boolean;
122 |       name: string;
123 |       [prop: string]: any;
124 |   }
125 | 
126 |   export type Field =
127 |       | React.StatelessComponent<FieldProps>
128 |       | React.ComponentClass<FieldProps>;
129 | 
130 |   export type FieldTemplateProps = {
131 |       id: string;
132 |       classNames: string;
133 |       label: string;
134 |       description: React.ReactElement;
135 |       rawDescription: string;
136 |       children: React.ReactElement;
137 |       errors: React.ReactElement;
138 |       rawErrors: string[];
139 |       help: React.ReactElement;
140 |       rawHelp: string;
141 |       hidden: boolean;
142 |       required: boolean;
143 |       readonly: boolean;
144 |       disabled: boolean;
145 |       displayLabel: boolean;
146 |       fields: Field[];
147 |       schema: JSONSchema6;
148 |       uiSchema: UiSchema;
149 |       formContext: any;
150 |   };
151 | 
152 |   export type ArrayFieldTemplateProps = {
153 |       DescriptionField: React.StatelessComponent<{ id: string, description: string | React.ReactElement }>;
154 |       TitleField: React.StatelessComponent<{ id: string, title: string, required: boolean }>;
155 |       canAdd: boolean;
156 |       className: string;
157 |       disabled: boolean;
158 |       idSchema: IdSchema;
159 |       items: {
160 |           children: React.ReactElement;
161 |           className: string;
162 |           disabled: boolean;
163 |           hasMoveDown: boolean;
164 |           hasMoveUp: boolean;
165 |           hasRemove: boolean;
166 |           hasToolbar: boolean;
167 |           index: number;
168 |           onDropIndexClick: (index: number) => (event: any) => void;
169 |           onReorderClick: (
170 |               index: number,
171 |               newIndex: number
172 |           ) => (event: any) => void;
173 |           readonly: boolean;
174 |       }[];
175 |       onAddClick: (event: any) => (event: any) => void;
176 |       readonly: boolean;
177 |       required: boolean;
178 |       schema: JSONSchema6;
179 |       uiSchema: UiSchema;
180 |       title: string;
181 |       formContext: any;
182 |       formData: any;
183 |   };
184 | 
185 |   export type ObjectFieldTemplateProps = {
186 |       DescriptionField: React.StatelessComponent<{ id: string, description: string | React.ReactElement }>;
187 |       TitleField: React.StatelessComponent<{ id: string, title: string, required: boolean }>;
188 |       title: string;
189 |       description: string;
190 |       properties: {
191 |           content: React.ReactElement;
192 |           name: string;
193 |           disabled: boolean;
194 |           readonly: boolean;
195 |       }[];
196 |       required: boolean;
197 |       schema: JSONSchema6;
198 |       uiSchema: UiSchema;
199 |       idSchema: IdSchema;
200 |       formData: any;
201 |       formContext: any;
202 |   };
203 | 
204 |   export type AjvError = {
205 |       message: string;
206 |       name: string;
207 |       params: any;
208 |       property: string;
209 |       stack: string;
210 |   };
211 | 
212 |   export type ErrorListProps = {
213 |       errorSchema: FormValidation;
214 |       errors: AjvError[];
215 |       formContext: any;
216 |       schema: JSONSchema6;
217 |       uiSchema: UiSchema;
218 |   };
219 | 
220 |   export interface IChangeEvent<T = any> {
221 |       edit: boolean;
222 |       formData: T;
223 |       errors: AjvError[];
224 |       errorSchema: FormValidation;
225 |       idSchema: IdSchema;
226 |       schema: JSONSchema6;
227 |       uiSchema: UiSchema;
228 |       status?: string;
229 |   }
230 | 
231 |   export type ISubmitEvent<T> = IChangeEvent<T>;
232 | 
233 |   export type FieldError = string;
234 | 
235 |   type FieldValidation = {
236 |       __errors: FieldError[];
237 |       addError: (message: string) => void;
238 |   };
239 | 
240 |   type FormValidation = FieldValidation & {
241 |       [fieldName: string]: FieldValidation;
242 |   };
243 | 
244 |   type FormSubmit<T> = {
245 |       formData: T;
246 |   };
247 | }
248 | 
249 | declare module "react-jsonschema-form-bs4/lib/utils" {
250 |   import { JSONSchema6, JSONSchema6Definition } from "json-schema";
251 |   import { FieldProps } from "react-jsonschema-form-bs4";
252 | 
253 |   export interface IRangeSpec {
254 |       min?: number;
255 |       max?: number;
256 |       step?: number;
257 |   }
258 | 
259 |   export function rangeSpec(schema: JSONSchema6): IRangeSpec;
260 | 
261 |   export function resolveSchema(
262 |       schema: JSONSchema6Definition,
263 |       definitions: FieldProps["registry"]["definitions"],
264 |       formData: object
265 |     ): JSONSchema6;
266 | }
267 | 
268 | declare module "react-jsonschema-form-bs4/lib/validate" {
269 |   import { JSONSchema6Definition } from "json-schema";
270 |   import { AjvError } from "react-jsonschema-form-bs4";
271 | 
272 |   export default function validateFormData<T>(
273 |       formData: T,
274 |       schema: JSONSchema6Definition
275 |   ): AjvError[];
276 | }
277 | 


--------------------------------------------------------------------------------
/src/components/fields/ObjectField.js:
--------------------------------------------------------------------------------
  1 | import AddButton from "../AddButton";
  2 | import React, { Component } from "react";
  3 | import * as types from "../../types";
  4 | 
  5 | import {
  6 |   orderProperties,
  7 |   retrieveSchema,
  8 |   getDefaultRegistry,
  9 |   getUiOptions,
 10 |   ADDITIONAL_PROPERTY_FLAG,
 11 | } from "../../utils";
 12 | 
 13 | function DefaultObjectFieldTemplate(props) {
 14 |   const canExpand = function canExpand() {
 15 |     const { formData, schema, uiSchema } = props;
 16 |     if (!schema.additionalProperties) {
 17 |       return false;
 18 |     }
 19 |     const { expandable } = getUiOptions(uiSchema);
 20 |     if (expandable === false) {
 21 |       return expandable;
 22 |     }
 23 |     // if ui:options.expandable was not explicitly set to false, we can add
 24 |     // another property if we have not exceeded maxProperties yet
 25 |     if (schema.maxProperties !== undefined) {
 26 |       return Object.keys(formData).length < schema.maxProperties;
 27 |     }
 28 |     return true;
 29 |   };
 30 | 
 31 |   const { TitleField, DescriptionField } = props;
 32 |   return (
 33 |     <fieldset id={props.idSchema.$id}>
 34 |       {(props.uiSchema["ui:title"] || props.title) && (
 35 |         <TitleField
 36 |           id={`${props.idSchema.$id}__title`}
 37 |           title={props.title || props.uiSchema["ui:title"]}
 38 |           required={props.required}
 39 |           formContext={props.formContext}
 40 |         />
 41 |       )}
 42 |       {props.description && (
 43 |         <DescriptionField
 44 |           id={`${props.idSchema.$id}__description`}
 45 |           description={props.description}
 46 |           formContext={props.formContext}
 47 |         />
 48 |       )}
 49 |       {props.properties.map(prop => prop.content)}
 50 |       {canExpand() && (
 51 |         <AddButton
 52 |           className="object-property-expand"
 53 |           onClick={props.onAddClick(props.schema)}
 54 |           disabled={props.disabled || props.readonly}
 55 |         />
 56 |       )}
 57 |     </fieldset>
 58 |   );
 59 | }
 60 | 
 61 | class ObjectField extends Component {
 62 |   static defaultProps = {
 63 |     uiSchema: {},
 64 |     formData: {},
 65 |     errorSchema: {},
 66 |     idSchema: {},
 67 |     required: false,
 68 |     disabled: false,
 69 |     readonly: false,
 70 |   };
 71 | 
 72 |   state = {
 73 |     additionalProperties: {},
 74 |   };
 75 | 
 76 |   isRequired(name) {
 77 |     const schema = this.props.schema;
 78 |     return (
 79 |       Array.isArray(schema.required) && schema.required.indexOf(name) !== -1
 80 |     );
 81 |   }
 82 | 
 83 |   onPropertyChange = (name, addedByAdditionalProperties = false) => {
 84 |     return (value, errorSchema) => {
 85 |       if (!value && addedByAdditionalProperties) {
 86 |         // Don't set value = undefined for fields added by
 87 |         // additionalProperties. Doing so removes them from the
 88 |         // formData, which causes them to completely disappear
 89 |         // (including the input field for the property name). Unlike
 90 |         // fields which are "mandated" by the schema, these fields can
 91 |         // be set to undefined by clicking a "delete field" button, so
 92 |         // set empty values to the empty string.
 93 |         value = "";
 94 |       }
 95 |       const newFormData = { ...this.props.formData, [name]: value };
 96 |       this.props.onChange(
 97 |         newFormData,
 98 |         errorSchema &&
 99 |           this.props.errorSchema && {
100 |             ...this.props.errorSchema,
101 |             [name]: errorSchema,
102 |           }
103 |       );
104 |     };
105 |   };
106 | 
107 |   onDropPropertyClick = key => {
108 |     return event => {
109 |       event.preventDefault();
110 |       const { onChange, formData } = this.props;
111 |       const copiedFormData = { ...formData };
112 |       delete copiedFormData[key];
113 |       onChange(copiedFormData);
114 |     };
115 |   };
116 | 
117 |   getAvailableKey = (preferredKey, formData) => {
118 |     var index = 0;
119 |     var newKey = preferredKey;
120 |     while (formData.hasOwnProperty(newKey)) {
121 |       newKey = `${preferredKey}-${++index}`;
122 |     }
123 |     return newKey;
124 |   };
125 | 
126 |   onKeyChange = oldValue => {
127 |     return (value, errorSchema) => {
128 |       if (oldValue === value) {
129 |         return;
130 |       }
131 |       value = this.getAvailableKey(value, this.props.formData);
132 |       const newFormData = { ...this.props.formData };
133 |       const newKeys = { [oldValue]: value };
134 |       const keyValues = Object.keys(newFormData).map(key => {
135 |         const newKey = newKeys[key] || key;
136 |         return { [newKey]: newFormData[key] };
137 |       });
138 |       const renamedObj = Object.assign({}, ...keyValues);
139 |       this.props.onChange(
140 |         renamedObj,
141 |         errorSchema &&
142 |           this.props.errorSchema && {
143 |             ...this.props.errorSchema,
144 |             [value]: errorSchema,
145 |           }
146 |       );
147 |     };
148 |   };
149 | 
150 |   getDefaultValue(type) {
151 |     switch (type) {
152 |       case "string":
153 |         return "New Value";
154 |       case "array":
155 |         return [];
156 |       case "boolean":
157 |         return false;
158 |       case "null":
159 |         return null;
160 |       case "number":
161 |         return 0;
162 |       case "object":
163 |         return {};
164 |       default:
165 |         // We don't have a datatype for some reason (perhaps additionalProperties was true)
166 |         return "New Value";
167 |     }
168 |   }
169 | 
170 |   handleAddClick = schema => () => {
171 |     const type = schema.additionalProperties.type;
172 |     const newFormData = { ...this.props.formData };
173 |     newFormData[
174 |       this.getAvailableKey("newKey", newFormData)
175 |     ] = this.getDefaultValue(type);
176 |     this.props.onChange(newFormData);
177 |   };
178 | 
179 |   render() {
180 |     const {
181 |       uiSchema,
182 |       formData,
183 |       errorSchema,
184 |       idSchema,
185 |       name,
186 |       required,
187 |       disabled,
188 |       readonly,
189 |       idPrefix,
190 |       onBlur,
191 |       onFocus,
192 |       registry = getDefaultRegistry(),
193 |     } = this.props;
194 |     const { definitions, fields, formContext } = registry;
195 |     const { SchemaField, TitleField, DescriptionField } = fields;
196 |     const schema = retrieveSchema(this.props.schema, definitions, formData);
197 |     const title = schema.title === undefined ? name : schema.title;
198 |     const description = uiSchema["ui:description"] || schema.description;
199 |     let orderedProperties;
200 |     try {
201 |       const properties = Object.keys(schema.properties || {});
202 |       orderedProperties = orderProperties(properties, uiSchema["ui:order"]);
203 |     } catch (err) {
204 |       return (
205 |         <div>
206 |           <p className="config-error" style={{ color: "red" }}>
207 |             Invalid {name || "root"} object field configuration:
208 |             <em>{err.message}</em>.
209 |           </p>
210 |           <pre>{JSON.stringify(schema)}</pre>
211 |         </div>
212 |       );
213 |     }
214 | 
215 |     const Template =
216 |       uiSchema["ui:ObjectFieldTemplate"] ||
217 |       registry.ObjectFieldTemplate ||
218 |       DefaultObjectFieldTemplate;
219 | 
220 |     const templateProps = {
221 |       title: uiSchema["ui:title"] || title,
222 |       description,
223 |       TitleField,
224 |       DescriptionField,
225 |       properties: orderedProperties.map(name => {
226 |         const addedByAdditionalProperties = schema.properties[
227 |           name
228 |         ].hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
229 |         return {
230 |           content: (
231 |             <SchemaField
232 |               key={name}
233 |               name={name}
234 |               required={this.isRequired(name)}
235 |               schema={schema.properties[name]}
236 |               uiSchema={
237 |                 addedByAdditionalProperties
238 |                   ? uiSchema.additionalProperties
239 |                   : uiSchema[name]
240 |               }
241 |               errorSchema={errorSchema[name]}
242 |               idSchema={idSchema[name]}
243 |               idPrefix={idPrefix}
244 |               formData={(formData || {})[name]}
245 |               onKeyChange={this.onKeyChange(name)}
246 |               onChange={this.onPropertyChange(
247 |                 name,
248 |                 addedByAdditionalProperties
249 |               )}
250 |               onBlur={onBlur}
251 |               onFocus={onFocus}
252 |               registry={registry}
253 |               disabled={disabled}
254 |               readonly={readonly}
255 |               onDropPropertyClick={this.onDropPropertyClick}
256 |             />
257 |           ),
258 |           name,
259 |           readonly,
260 |           disabled,
261 |           required,
262 |         };
263 |       }),
264 |       readonly,
265 |       disabled,
266 |       required,
267 |       idSchema,
268 |       uiSchema,
269 |       schema,
270 |       formData,
271 |       formContext,
272 |     };
273 |     return <Template {...templateProps} onAddClick={this.handleAddClick} />;
274 |   }
275 | }
276 | 
277 | if (process.env.NODE_ENV !== "production") {
278 |   ObjectField.propTypes = types.fieldProps;
279 | }
280 | 
281 | export default ObjectField;
282 | 


--------------------------------------------------------------------------------
/test/ArrayFieldTemplate_test.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from "react";
  2 | import { expect } from "chai";
  3 | import { createFormComponent, createSandbox } from "./test_utils";
  4 | 
  5 | describe("ArrayFieldTemplate", () => {
  6 |   let sandbox;
  7 | 
  8 |   const formData = ["one", "two", "three"];
  9 | 
 10 |   beforeEach(() => {
 11 |     sandbox = createSandbox();
 12 |   });
 13 | 
 14 |   afterEach(() => {
 15 |     sandbox.restore();
 16 |   });
 17 | 
 18 |   describe("Custom ArrayFieldTemplate of string array", () => {
 19 |     function ArrayFieldTemplate(props) {
 20 |       return (
 21 |         <div className={props.uiSchema.classNames}>
 22 |           {props.canAdd && <button className="custom-array-add" />}
 23 |           {props.items.map(element => {
 24 |             return (
 25 |               <div className="custom-array-item" key={element.index}>
 26 |                 {element.hasMoveUp && (
 27 |                   <button className="custom-array-item-move-up" />
 28 |                 )}
 29 |                 {element.hasMoveDown && (
 30 |                   <button className="custom-array-item-move-down" />
 31 |                 )}
 32 | 
 33 |                 {element.children}
 34 |               </div>
 35 |             );
 36 |           })}
 37 |         </div>
 38 |       );
 39 |     }
 40 | 
 41 |     describe("Stateful ArrayFieldTemplate", () => {
 42 |       class ArrayFieldTemplate extends PureComponent {
 43 |         render() {
 44 |           return (
 45 |             <div className="field-content">
 46 |               {this.props.items.map((item, i) => (
 47 |                 <div key={i}>item.children</div>
 48 |               ))}
 49 |             </div>
 50 |           );
 51 |         }
 52 |       }
 53 | 
 54 |       describe("with template globally configured", () => {
 55 |         it("should render a stateful custom component", () => {
 56 |           const { node } = createFormComponent({
 57 |             schema: { type: "array", items: { type: "string" } },
 58 |             formData,
 59 |             ArrayFieldTemplate,
 60 |           });
 61 | 
 62 |           expect(
 63 |             node.querySelectorAll(".field-array .field-content div")
 64 |           ).to.have.length.of(3);
 65 |         });
 66 |       });
 67 |       describe("with template configured in ui:ArrayFieldTemplate", () => {
 68 |         it("should render a stateful custom component", () => {
 69 |           const { node } = createFormComponent({
 70 |             schema: { type: "array", items: { type: "string" } },
 71 |             formData,
 72 |             uiSchema: {
 73 |               "ui:ArrayFieldTemplate": ArrayFieldTemplate,
 74 |             },
 75 |           });
 76 | 
 77 |           expect(
 78 |             node.querySelectorAll(".field-array .field-content div")
 79 |           ).to.have.length.of(3);
 80 |         });
 81 |       });
 82 |       describe("with template configured globally being overriden in ui:ArrayFieldTemplate", () => {
 83 |         it("should render a stateful custom component", () => {
 84 |           const { node } = createFormComponent({
 85 |             schema: { type: "array", items: { type: "string" } },
 86 |             formData,
 87 |             uiSchema: {
 88 |               "ui:ArrayFieldTemplate": ArrayFieldTemplate,
 89 |             },
 90 |             // Empty field template for proof that we're doing overrides
 91 |             ArrayFieldTemplate: () => <div />,
 92 |           });
 93 | 
 94 |           expect(
 95 |             node.querySelectorAll(".field-array .field-content div")
 96 |           ).to.have.length.of(3);
 97 |         });
 98 |       });
 99 |     });
100 | 
101 |     describe("not fixed items", () => {
102 |       const schema = {
103 |         type: "array",
104 |         title: "my list",
105 |         description: "my description",
106 |         items: { type: "string" },
107 |       };
108 | 
109 |       let node;
110 | 
111 |       describe("with template globally configured", () => {
112 |         const uiSchema = {
113 |           classNames: "custom-array",
114 |         };
115 | 
116 |         beforeEach(() => {
117 |           node = createFormComponent({
118 |             ArrayFieldTemplate,
119 |             formData,
120 |             schema,
121 |             uiSchema,
122 |           }).node;
123 |         });
124 | 
125 |         sharedIts();
126 |       });
127 |       describe("with template configured in ui:ArrayFieldTemplate", () => {
128 |         const uiSchema = {
129 |           classNames: "custom-array",
130 |           "ui:ArrayFieldTemplate": ArrayFieldTemplate,
131 |         };
132 | 
133 |         beforeEach(() => {
134 |           node = createFormComponent({
135 |             formData,
136 |             schema,
137 |             uiSchema,
138 |           }).node;
139 |         });
140 |         sharedIts();
141 |       });
142 |       describe("with template configured globally being overriden in ui:ArrayFieldTemplate", () => {
143 |         const uiSchema = {
144 |           classNames: "custom-array",
145 |           "ui:ArrayFieldTemplate": ArrayFieldTemplate,
146 |         };
147 | 
148 |         beforeEach(() => {
149 |           node = createFormComponent({
150 |             formData,
151 |             schema,
152 |             uiSchema,
153 |             // Empty field template for proof that we're doing overrides
154 |             ArrayFieldTemplate: () => <div />,
155 |           }).node;
156 |         });
157 |         sharedIts();
158 |       });
159 |       function sharedIts() {
160 |         it("should render one root element for the array", () => {
161 |           expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
162 |         });
163 | 
164 |         it("should render one add button", () => {
165 |           expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(
166 |             1
167 |           );
168 |         });
169 | 
170 |         it("should render one child for each array item", () => {
171 |           expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
172 |             formData.length
173 |           );
174 |         });
175 | 
176 |         it("should render text input for each array item", () => {
177 |           expect(
178 |             node.querySelectorAll(".custom-array-item .field input[type=text]")
179 |           ).to.have.length.of(formData.length);
180 |         });
181 | 
182 |         it("should render move up button for all but one array items", () => {
183 |           expect(
184 |             node.querySelectorAll(".custom-array-item-move-up")
185 |           ).to.have.length.of(formData.length - 1);
186 |         });
187 | 
188 |         it("should render move down button for all but one array items", () => {
189 |           expect(
190 |             node.querySelectorAll(".custom-array-item-move-down")
191 |           ).to.have.length.of(formData.length - 1);
192 |         });
193 |       }
194 |     });
195 | 
196 |     describe("fixed items", () => {
197 |       const schema = {
198 |         type: "array",
199 |         title: "my list",
200 |         description: "my description",
201 |         items: [{ type: "string" }, { type: "string" }, { type: "string" }],
202 |       };
203 | 
204 |       let node;
205 | 
206 |       describe("with template globally configured", () => {
207 |         const uiSchema = {
208 |           classNames: "custom-array",
209 |         };
210 |         beforeEach(() => {
211 |           node = createFormComponent({
212 |             formData,
213 |             schema,
214 |             uiSchema,
215 |             ArrayFieldTemplate,
216 |           }).node;
217 |         });
218 |         sharedIts();
219 |       });
220 | 
221 |       describe("with template configured in ui:ArrayFieldTemplate", () => {
222 |         const uiSchema = {
223 |           classNames: "custom-array",
224 |           "ui:ArrayFieldTemplate": ArrayFieldTemplate,
225 |         };
226 |         beforeEach(() => {
227 |           node = createFormComponent({
228 |             formData,
229 |             schema,
230 |             uiSchema,
231 |           }).node;
232 |         });
233 |         sharedIts();
234 |       });
235 |       describe("with template configured globally being overriden in ui:ArrayFieldTemplate", () => {
236 |         const uiSchema = {
237 |           classNames: "custom-array",
238 |           "ui:ArrayFieldTemplate": ArrayFieldTemplate,
239 |         };
240 |         beforeEach(() => {
241 |           node = createFormComponent({
242 |             formData,
243 |             schema,
244 |             uiSchema,
245 |             // Empty field template for proof that we're doing overrides
246 |             ArrayFieldTemplate: () => <div />,
247 |           }).node;
248 |         });
249 |         sharedIts();
250 |       });
251 |       function sharedIts() {
252 |         it("should render one root element for the array", () => {
253 |           expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
254 |         });
255 | 
256 |         it("should not render an add button", () => {
257 |           expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(
258 |             0
259 |           );
260 |         });
261 | 
262 |         it("should render one child for each array item", () => {
263 |           expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
264 |             formData.length
265 |           );
266 |         });
267 | 
268 |         it("should render text input for each array item", () => {
269 |           expect(
270 |             node.querySelectorAll(".custom-array-item .field input[type=text]")
271 |           ).to.have.length.of(formData.length);
272 |         });
273 | 
274 |         it("should not render any move up buttons", () => {
275 |           expect(
276 |             node.querySelectorAll(".custom-array-item-move-up")
277 |           ).to.have.length.of(0);
278 |         });
279 | 
280 |         it("should not render any move down buttons", () => {
281 |           expect(
282 |             node.querySelectorAll(".custom-array-item-move-down")
283 |           ).to.have.length.of(0);
284 |         });
285 |       }
286 |     });
287 |   });
288 | 
289 |   describe("Stateful ArrayFieldTemplate", () => {
290 |     class ArrayFieldTemplate extends PureComponent {
291 |       render() {
292 |         return (
293 |           <div className="field-content">
294 |             {this.props.items.map((item, i) => (
295 |               <div key={i}>item.children</div>
296 |             ))}
297 |           </div>
298 |         );
299 |       }
300 |     }
301 | 
302 |     it("should render a stateful custom component", () => {
303 |       const { node } = createFormComponent({
304 |         schema: { type: "array", items: { type: "string" } },
305 |         formData,
306 |         ArrayFieldTemplate,
307 |       });
308 |       expect(
309 |         node.querySelectorAll(".field-array .field-content div")
310 |       ).to.have.length.of(3);
311 |     });
312 |   });
313 | 
314 |   describe("pass right props to ArrayFieldTemplate", () => {
315 |     it("should pass registry prop", () => {
316 |       const ArrayFieldTemplate = ({ registry }) => {
317 |         if (!registry) {
318 |           throw "Error";
319 |         }
320 |         return null;
321 |       };
322 |       createFormComponent({
323 |         schema: { type: "array", items: { type: "string" } },
324 |         formData,
325 |         ArrayFieldTemplate,
326 |       });
327 |     });
328 |   });
329 | });
330 | 


--------------------------------------------------------------------------------