Skip to content
This repository was archived by the owner on Jul 23, 2021. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
6f2cb33
Fix #221: No validating but updating errorSchema base on array operat…
knilink Mar 3, 2017
878613a
Fix comparing
knilink Mar 3, 2017
c5a69af
Directly update errorSchema in onChange
knilink Mar 3, 2017
775bd59
Typo fix (#737)
ojab Nov 9, 2017
a8b77b9
Make form submission example clearer (#736)
wasabigeek Nov 9, 2017
fdc5566
Update prettier to v1.8.2 (#756)
glasserc Nov 9, 2017
f4583f9
fix: Pass `disabled` prop to `FieldTemplate`. (#741)
theengineear Nov 9, 2017
281e026
Fix issue #747 (#748)
faassen Nov 9, 2017
9aaaf48
66 enum no type (#668)
penx Jan 10, 2018
7654b24
Fix onAddClick signature in ArrayFieldTemplate (#775)
baransu Jan 10, 2018
3a58b6a
fix typo in css code (#799)
epicfaace Jan 10, 2018
d4b34a1
README: fix code snippet (#785)
Ore4444 Jan 10, 2018
3e86b2a
Generating idSchema based on dependency changes Fix #778 , Fix #803
redixhumayun Jan 11, 2018
51d403a
Add idPrefix option (Fix #796) (#806)
edi9999 Jan 13, 2018
c2b9103
Make .editorconfig valid (#807)
edi9999 Jan 13, 2018
c06be31
typo (#811)
epicfaace Jan 18, 2018
1411dbe
Add span and class to label required symbol (#765)
ttbarnes Jan 19, 2018
5391d23
a priori should be italicized for readibility (#825)
SlashBin Jan 26, 2018
2a07603
Merge branch 'error-schema-array' of git://github.com/knilink/react-j…
glasserc Jan 26, 2018
a398bcf
Merge branch 'knilink-error-schema-array'
glasserc Jan 26, 2018
f0d718e
pass raw errors to field widgets (#826)
llamamoray Feb 7, 2018
158fd64
Bump 1.0.1
glasserc Feb 7, 2018
b77e490
Move to the 3.x series of react-codemirror2 (#857)
glasserc Mar 5, 2018
47c07db
Pass formContext to ArrayFieldTemplate when rendering fixed array (#858)
olzraiti Mar 7, 2018
68a0212
handle errors to correctly display schema errors in form (#864)
llamamoray Mar 9, 2018
0ac3dec
Bump version 1.0.2
glasserc Mar 9, 2018
52b3d50
Link to official JSON Schema site (#873)
Relequestual Apr 5, 2018
494d82d
Updated README to mention the support from JSON Schema compliant drop…
r4j4h Apr 5, 2018
0baafa6
Add passing of raw errors to ArrayField template and components (#876)
llamamoray Apr 5, 2018
17ed8ff
Fixed multiplicative errors on schema dependencies (#884)
Apr 6, 2018
e4378c2
Add idPrefix option (#883)
edi9999 Apr 10, 2018
5b24c39
Fix warning on FileWidget (#842)
lauriii Apr 12, 2018
e1866f7
Update prettier and fix files (#892)
edi9999 Apr 12, 2018
7b6b3b5
Bump 1.0.3
glasserc Apr 12, 2018
afb72c7
Merge tag 'v1.0.3' into update-from-mozilla
jnorris-carecloud Jun 29, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
[*]

indent_style = space
indent_size = 2
charset = utf-8
Expand Down
102 changes: 86 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ yarn dev
yarn dev:watch
```

### Dist and publish
### Dist

```sh
yarn build
```

### Publish

```sh
yarn release
```

## Live Playground

A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) from the original repository, is hosted on gh-pages.
Expand All @@ -46,6 +52,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) f
- [Form error event handler](#form-error-event-handler)
- [Form data changes](#form-data-changes)
- [Form field blur events](#form-field-blur-events)
- [Form field focus events](#form-field-focus-events)
- [Form customization](#form-customization)
- [The uiSchema object](#the-uischema-object)
- [Alternative widgets](#alternative-widgets)
Expand All @@ -66,7 +73,8 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) f
- [removable option](#removable-option)
- [Custom CSS class names](#custom-css-class-names)
- [Custom labels for enum fields](#custom-labels-for-enum-fields)
- [Disabled enum fields](#disabled-attribute-for-enum-fields)
- [Alternative JSON-Schema compliant approach](#alternative-json-schema-compliant-approach)
- [Disabled attribute for enum fields](#disabled-attribute-for-enum-fields)
- [Multiple choices list](#multiple-choices-list)
- [Autogenerated widget ids](#autogenerated-widget-ids)
- [Form action buttons](#form-action-buttons)
Expand All @@ -84,11 +92,12 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) f
- [Array Field Template](#array-field-template)
- [Object Field Template](#object-field-template)
- [Error List template](#error-list-template)
- [Id prefix](#id-prefix)
- [Custom widgets and fields](#custom-widgets-and-fields)
- [Custom widget components](#custom-widget-components)
- [Custom component registration](#custom-component-registration)
- [Custom widget options](#custom-widget-options)
- [Customizing widgets' text input](#customizing-widgets-text-input)
- [Customizing widgets text input](#customizing-widgets-text-input)
- [Custom field components](#custom-field-components)
- [Field props](#field-props)
- [The registry object](#the-registry-object)
Expand All @@ -108,26 +117,29 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) f
- [Styling your forms](#styling-your-forms)
- [Schema definitions and references](#schema-definitions-and-references)
- [Property dependencies](#property-dependencies)
- [Unidirectional](#unidirectional)
- [Bidirectional](#bidirectional)
- [Schema dependencies](#schema-depdencies)
- [Conditional](#conditional)
- [Dynamic](#dynamic)
- [Unidirectional](#unidirectional)
- [Bidirectional](#bidirectional)
- [Schema dependencies](#schema-dependencies)
- [Conditional](#conditional)
- [Dynamic](#dynamic)
- [JSON Schema supporting status](#json-schema-supporting-status)
- [Tips and tricks](#tips-and-tricks)
- [Contributing](#contributing)
- [Coding style](#coding-style)
- [Development server](#development-server)
- [Tests](#tests)
- [TDD](#tdd)
- [Releasing](#releasing)
- [FAQ](#faq)
- [Q: Does rjsf support oneOf, anyOf, multiple types in an array, etc.?](#q-does-rjsf-support-oneof-anyof-multiple-types-in-an-array-etc)
- [Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?](#q-will-react-jsonschema-form-support-material-ant-design-foundation-or-some-other-specific-widget-library-or-frontend-style)
- [License](#license)

---

## Philosophy

react-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). It is a major component in the [kinto-admin](https://github.com/Kinto/kinto-admin/). If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have a priori knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.
react-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). It is a major component in the [kinto-admin](https://github.com/Kinto/kinto-admin/). If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have _a priori_ knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.

react-jsonschema-form validates that the data conforms to the given schema, but doesn't prevent the user from inputing data that doesn't fit (for example, stripping non-numbers from a number field, or not letting the user add values to an array that is already "full".

Expand Down Expand Up @@ -225,7 +237,7 @@ WARNING: If you have situations where your parent component can re-render, make
You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after:

```js
const onSubmit = ({formData}) => console.log("yay I'm valid!");
const onSubmit = ({formData}) => console.log("Data submitted: ", formData);

render((
<Form schema={schema}
Expand Down Expand Up @@ -583,9 +595,54 @@ This will be rendered using a select box that way:

Note that string representations of numbers will be cast back and reflected as actual numbers into form state.

#### Alternative JSON-Schema compliant approach

The JSON Schema team concluded an alternative approach instead of enumNames and react-jsonschema-form supports it as well.

```js
const schema = {
"type": "number",
"anyOf": [
{
"type": "number",
"title": "one",
"enum": [
1
]
},
{
"type": "number",
"title": "two",
"enum": [
2
]
},
{
"type": "number",
"title": "three",
"enum": [
3
]
}
]
};
```

As above this will be rendered using a select box as so:

```html
<select>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
```

A live example of both approaches side-by-side can be found in the **Alternatives** playground preset.

### Disabled attribute for `enum` fields

This library supports the 'disbaled' attribute for `enum` options.Enum disabled allows disabling options for 'enum' fields.This attribute can be added as a part of uiSchema.
This library supports the 'disabled' attribute for `enum` options. Enum disabled allows disabling options for 'enum' fields.This attribute can be added as a part of uiSchema.

```js
const schema = {
Expand Down Expand Up @@ -873,6 +930,7 @@ The following props are passed to a custom field template component:
- `hidden`: A boolean value stating if the field should be hidden.
- `required`: A boolean value stating if the field is required.
- `readonly`: A boolean value stating if the field is read-only.
- `disabled`: A boolean value stating if the field is disabled.
- `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.
- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.
- `schema`: The schema object for this field.
Expand Down Expand Up @@ -913,7 +971,7 @@ The following props are passed to each `ArrayFieldTemplate`:
- `disabled`: A boolean value stating if the array is disabled.
- `idSchema`: Object
- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.
- `onAddClick: (event) => (event) => void`: Returns a function that adds a new item to the array.
- `onAddClick: (event) => void`: A function that adds a new item to the array.
- `readonly`: A boolean value stating if the array is read-only.
- `required`: A boolean value stating if the array is required.
- `schema`: The schema object for this array.
Expand Down Expand Up @@ -1020,6 +1078,19 @@ The following props are passed to `ErrorList`
- `uiSchema`: The uiSchema that was passed to `Form`.
- `formContext`: The `formContext` object that you passed to Form.

### Id prefix

To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).

```jsx
render((
<Form schema={schema}
idPrefix={"rjsf_prefix"}/>,
), document.getElementById("app"));
```

This will render `<input id="rjsf_prefix_key">` instead of `<input id="root_key">`

### Custom widgets and fields

The API allows to specify your own custom *widget* and *field* components:
Expand Down Expand Up @@ -1149,7 +1220,7 @@ render((

> Note: Since v0.41.0, the `ui:widget` object API, where a widget and options were specified with `"ui:widget": {component, options}` shape, is deprecated. It will be removed in a future release.

#### Customizing widgets' text input
#### Customizing widgets text input

All the widgets that render a text input use the `BaseInput` component internally. If you need to customize all text inputs without customizing all widgets individially, you can provide a `BaseInput` component in the `widgets` property of `Form` (see [Custom component registration](#custom-component-registration).

Expand Down Expand Up @@ -1251,7 +1322,6 @@ i.glyphicon { display: none; }
.array-item-move-up::after { content: 'Move Up'; }
.array-item-move-down::after { content: 'Move Down'; }
.array-item-remove::after { content: 'Remove'; }
}
```

### Custom SchemaField
Expand Down Expand Up @@ -1695,7 +1765,7 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.
* `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `"type": ["string", "array"]`
Nobody yet has come up with a PR that adds this feature with a simple and easy-to-understand UX.
You can use `oneOf` with [schema dependencies](#schema-depdencies) to dynamically add schema properties based on input data but this feature does not bring general support for `oneOf` elsewhere in a schema.
You can use `oneOf` with [schema dependencies](#schema-dependencies) to dynamically add schema properties based on input data but this feature does not bring general support for `oneOf` elsewhere in a schema.

## Tips and tricks

Expand Down Expand Up @@ -1767,7 +1837,7 @@ $ git push --tags origin

### Q: Does rjsf support `oneOf`, `anyOf`, multiple types in an array, etc.?

A: Not yet (except for a special case where you can use `oneOf` in [schema dependencies](#schema-depdencies)), but perhaps you will be the person whose PR will finally add the feature in a way that gets merged. For inspiration, see [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).
A: Not yet (except for a special case where you can use `oneOf` in [schema dependencies](#schema-dependencies)), but perhaps you will be the person whose PR will finally add the feature in a way that gets merged. For inspiration, see [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).

### Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?

Expand Down
12 changes: 8 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@carecloud/react-jsonschema-form",
"version": "0.29.0",
"version": "1.0.0",
"description": "A simple React component capable of building HTML forms out of a JSON schema.",
"scripts": {
"dev": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
Expand All @@ -13,6 +13,9 @@
"prettier": "prettier --write",
"prettier:all": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
"publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
"release": "yarn build && npm publish",
"preversion": "npm run build:playground && npm run dist && npm run build:readme && npm run cs-check && npm run lint",
"start": "node devServer.js",
"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"
},
Expand Down Expand Up @@ -86,10 +89,11 @@
"json-loader": "^0.5.7",
"lint-staged": "^3.3.1",
"mocha": "^2.5.3",
"prettier": "^1.7.2",
"prettier": "^1.12.0",
"react-addons-test-utils": "^15.3.2",
"react-codemirror2": "^2.0.2",
"react-dom": "16.2.0",
"react-codemirror2": "^4.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.3",
Expand Down
19 changes: 14 additions & 5 deletions playground/app.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { render } from 'react-dom';
import CodeMirror from 'react-codemirror2';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/javascript/javascript';

import { shouldRender } from '../src/utils';
Expand Down Expand Up @@ -193,6 +193,7 @@ class Editor extends Component {
<CodeMirror
value={this.state.code}
onChange={this.onCodeChange}
autoCursor={false}
options={Object.assign({}, cmOptions, { theme })}
/>
</div>
Expand Down Expand Up @@ -355,7 +356,9 @@ class App extends Component {

onShare = () => {
const { formData, schema, uiSchema } = this.state;
const { location: { origin, pathname } } = document;
const {
location: { origin, pathname },
} = document;
try {
const hash = btoa(JSON.stringify({ formData, schema, uiSchema }));
this.setState({ shareURL: `${origin}${pathname}#${hash}` });
Expand Down Expand Up @@ -435,11 +438,17 @@ class App extends Component {
uiSchema={uiSchema}
formData={formData}
onChange={this.onFormDataChange}
onSubmit={({ formData }) => console.log('submitted formData', formData)}
onSubmit={({ formData }) =>
console.log("submitted formData", formData)
}
fields={{ geo: GeoPosition }}
validate={validate}
onBlur={(id, value) => console.log(`Touched ${id} with value ${value}`)}
onFocus={(id, value) => console.log(`Focused ${id} with value ${value}`)}
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">
Expand Down
Loading