Merge pull request #1 from mozilla-services/master

Gets fork in sync with upstream
seanmclucas · Aug 15, 2017 · 2d3cc8e · 2d3cc8e
2 parents a3d2b43 + 40fc2fd
commit 2d3cc8e
Show file tree

Hide file tree

Showing 53 changed files with 1,306 additions and 369 deletions.
diff --git a/README.md b/README.md
@@ -45,9 +45,13 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
      - [Autogenerated widget ids](#autogenerated-widget-ids)
      - [Form action buttons](#form-action-buttons)
      - [Help texts](#help-texts)
+     - [Title texts](#title-texts)
+     - [Description texts](#description-texts)
      - [Auto focus](#auto-focus)
      - [Textarea rows option](#textarea-rows-option)
      - [Placeholders](#placeholders)
+     - [Field labels](#field-labels)
+     - [HTML5 Input Types](#html5-input-types)
      - [Form attributes](#form-attributes)
   - [Advanced customization](#advanced-customization)
      - [Field template](#field-template)
@@ -209,6 +213,10 @@ If you plan on being notified everytime the form data are updated, you can pass
 
 Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.
 
+#### Form field focus events
+
+Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.
+
 ## Form customization
 
 ### The `uiSchema` object
@@ -638,6 +646,30 @@ const uiSchema = {
 
 Help texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s), but after contextualized errors, if any.
 
+### Title texts
+
+Sometimes it's convenient to change title a field; this is the purpose of the `ui:title` uiSchema directive:
+
+```js
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:widget": "password",
+  "ui:title": "Your password"
+};
+```
+
+### Description texts
+
+Sometimes it's convenient to change description a field; this is the purpose of the `ui:description` uiSchema directive:
+
+```js
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:widget": "password",
+  "ui:description": "The best password"
+};
+```
+
 ### Auto focus
 
 If you want to focus on a text input or textarea input/on a widget automatically, just set `ui:autofocus` uiSchema directive to `true`.
@@ -686,6 +718,32 @@ const uiSchema = {
 };
 ```
 
+### Field labels
+
+Field labels are rendered by default. Labels may be omitted by setting the `label` option to `false` from `ui:options` uiSchema directive.
+
+```jsx
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:options": {
+    label: false
+  }
+};
+```
+
+### HTML5 Input Types
+
+If all you need to do is change the input type (for using things like input type="tel") you can specify the `inputType` from `ui:options` uiSchema directive.
+
+```jsx
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:options": {
+    inputType: 'tel'
+  }
+};
+```
+
 ### Form attributes
 
 Form component supports the following html attributes:
@@ -767,7 +825,7 @@ function ArrayFieldTemplate(props) {
   return (
     <div>
       {props.items.map(element => element.children)}
-      {props.canAdd && <button onClick={props.onAddClick}></button>}
+      {props.canAdd && <button type="button" onClick={props.onAddClick}></button>}
     </div>
   );
 }
@@ -796,6 +854,7 @@ The following props are passed to each `ArrayFieldTemplate`:
 - `uiSchema`: The uiSchema object for this array field.
 - `title`: A string value containing the title for the array.
 - `formContext`: The `formContext` object that you passed to Form.
+- `formData`: The formData for this array.
 
 The following props are part of each element in `items`:
 
@@ -842,6 +901,13 @@ render((
 
 > Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.
 
+The following props are passed to `ErrorList`
+
+- `errors`: An array of the errors.
+- `errorSchema`: The errorSchema constructed by `Form`.
+- `schema`: The schema that was passed to `Form`.
+- `uiSchema`: The uiSchema that was passed to `Form`.
+- `formContext`: The `formContext` object that you passed to Form.
 
 ### Custom widgets and fields
 
@@ -892,6 +958,7 @@ The following props are passed to custom widget components:
 - `readonly`: `true` if the widget is read-only;
 - `onChange`: The value change event handler; call it with the new value everytime it changes;
 - `onBlur`: The input blur event handler; call it with the the widget id and value;
+- `onFocus`: The input focus event handler; call it with the the widget id and value;
 - `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).
 - `formContext`: The `formContext` object that you passed to Form.
 
@@ -1266,7 +1333,7 @@ function transformErrors(errors) {
 const schema = {
   type: "object",
   properties: {
-    onlyNumbersString: {type: "string", pattern: "\d*"},
+    onlyNumbersString: {type: "string", pattern: "^\\d*$"},
   }
 };
 
@@ -1357,7 +1424,8 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
  - Custom field template: https://jsfiddle.net/hdp1kgn6/1/
  - Multi-step wizard: https://jsfiddle.net/sn4bnw9h/1/
  - Using classNames with uiSchema: https://jsfiddle.net/gfwp25we/1/
- - Conditional fields: https://jsfiddle.net/69z2wepo/68259/
+ - Conditional fields: https://jsfiddle.net/69z2wepo/83018/
+ - Advanced conditional fields: https://jsfiddle.net/cowbellerina/zbfh96b1/
  - Use radio list for enums: https://jsfiddle.net/f2y3fq7L/2/
  - Reading file input data: https://jsfiddle.net/f9vcb6pL/1/
  - Custom errors messages with transformErrors : https://jsfiddle.net/revolunet/5r3swnr4/

diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "react-jsonschema-form",
-  "version": "0.46.0",
+  "version": "0.49.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
     "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
     "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
     "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
-    "cs-check": "prettier-check $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
+    "cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
     "cs-format": "prettier $npm_package_prettierOptions '{playground,src,test}/**/*.js' --write",
     "dist": "npm run build:lib && npm run build:dist",
     "lint": "eslint src test playground",
@@ -18,7 +18,7 @@
     "tdd": "cross-env NODE_ENV=test  mocha --compilers js:babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
     "test": " cross-env NODE_ENV=test   mocha --compilers js:babel-register --require ./test/setup-jsdom.js test/**/*_test.js"
   },
-  "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5",
+  "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi",
   "lint-staged": {
     "{playground,src,test}/**/*.js": [
       "npm run lint",
@@ -42,6 +42,7 @@
   "dependencies": {
     "jsonschema": "^1.0.2",
     "lodash.topath": "^4.5.2",
+    "prop-types": "^15.5.8",
     "setimmediate": "^1.0.5"
   },
   "devDependencies": {
@@ -72,9 +73,8 @@
     "jsdom": "^8.3.0",
     "lint-staged": "^3.3.1",
     "mocha": "^2.5.3",
-    "prettier": "^0.22.0",
-    "prettier-check": "^1.0.0",
-    "react": "^15.0.0",
+    "prettier": "^1.5.2",
+    "react": "^15.5.0",
     "react-addons-test-utils": "^15.3.2",
     "react-codemirror": "^0.2.3",
     "react-dom": "^15.3.2",

diff --git a/playground/app.js b/playground/app.js
@@ -57,70 +57,89 @@ const cmOptions = {
 };
 const themes = {
   default: {
-    stylesheet: "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
+    stylesheet:
+      "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
   },
   cerulean: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css",
   },
   cosmo: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cosmo/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cosmo/bootstrap.min.css",
   },
   cyborg: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cyborg/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cyborg/bootstrap.min.css",
     editor: "blackboard",
   },
   darkly: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.min.css",
     editor: "mbo",
   },
   flatly: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css",
     editor: "ttcn",
   },
   journal: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/journal/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/journal/bootstrap.min.css",
   },
   lumen: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/lumen/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/lumen/bootstrap.min.css",
   },
   paper: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css",
   },
   readable: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/readable/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/readable/bootstrap.min.css",
   },
   sandstone: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/sandstone/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/sandstone/bootstrap.min.css",
     editor: "solarized",
   },
   simplex: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/simplex/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/simplex/bootstrap.min.css",
     editor: "ttcn",
   },
   slate: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/slate/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/slate/bootstrap.min.css",
     editor: "monokai",
   },
   spacelab: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/spacelab/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/spacelab/bootstrap.min.css",
   },
   "solarized-dark": {
-    stylesheet: "//cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-dark.css",
+    stylesheet:
+      "//cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-dark.css",
     editor: "dracula",
   },
   "solarized-light": {
-    stylesheet: "//cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-light.css",
+    stylesheet:
+      "//cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-light.css",
     editor: "solarized",
   },
   superhero: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/superhero/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/superhero/bootstrap.min.css",
     editor: "dracula",
   },
   united: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/united/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/united/bootstrap.min.css",
   },
   yeti: {
-    stylesheet: "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/yeti/bootstrap.min.css",
+    stylesheet:
+      "//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/yeti/bootstrap.min.css",
     editor: "eclipse",
   },
 };
@@ -292,7 +311,7 @@ class CopyLink extends Component {
       <div className="input-group">
         <input
           type="text"
-          ref={input => this.input = input}
+          ref={input => (this.input = input)}
           className="form-control"
           defaultValue={shareURL}
         />
@@ -349,7 +368,8 @@ class App extends Component {
     const { ArrayFieldTemplate } = data;
     // force resetting form component instance
     this.setState({ form: false }, _ =>
-      this.setState({ ...data, form: true, ArrayFieldTemplate }));
+      this.setState({ ...data, form: true, ArrayFieldTemplate })
+    );
   };
 
   onSchemaEdited = schema => this.setState({ schema, shareURL: null });
@@ -457,6 +477,8 @@ class App extends Component {
               validate={validate}
               onBlur={(id, value) =>
                 console.log(`Touched ${id} with value ${value}`)}
+              onFocus={(id, value) =>
+                console.log(`Focused ${id} with value ${value}`)}
               transformErrors={transformErrors}
               onError={log("errors")}>
               <div className="row">

diff --git a/playground/samples/alternatives.js b/playground/samples/alternatives.js
@@ -0,0 +1,64 @@
+module.exports = {
+  schema: {
+    definitions: {
+      Color: {
+        title: "Color",
+        type: "string",
+        anyOf: [
+          {
+            type: "string",
+            enum: ["#ff0000"],
+            title: "Red",
+          },
+          {
+            type: "string",
+            enum: ["#00ff00"],
+            title: "Green",
+          },
+          {
+            type: "string",
+            enum: ["#0000ff"],
+            title: "Blue",
+          },
+        ],
+      },
+    },
+    title: "Image editor",
+    type: "object",
+    required: ["currentColor", "colorMask", "blendMode"],
+    properties: {
+      currentColor: {
+        $ref: "#/definitions/Color",
+        title: "Brush color",
+      },
+      colorMask: {
+        type: "array",
+        uniqueItems: true,
+        items: {
+          $ref: "#/definitions/Color",
+        },
+        title: "Color mask",
+      },
+      colorPalette: {
+        type: "array",
+        title: "Color palette",
+        items: {
+          $ref: "#/definitions/Color",
+        },
+      },
+      blendMode: {
+        title: "Blend mode",
+        type: "string",
+        enum: ["screen", "multiply", "overlay"],
+        enumNames: ["Screen", "Multiply", "Overlay"],
+      },
+    },
+  },
+  uiSchema: {},
+  formData: {
+    currentColor: "#00ff00",
+    colorMask: ["#0000ff"],
+    colorPalette: ["#ff0000"],
+    blendMode: "screen",
+  },
+};