Add idPrefix option (rjsf-team#883)

Author: edi9999

README.md

@@ -22,6 +22,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [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)
@@ -42,7 +43,8 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [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)
@@ -60,11 +62,12 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [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)
@@ -84,19 +87,22 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Styling your forms](#styling-your-forms)
  - [Schema definitions and references](#schema-definitions-and-references)
  - [Property dependencies](#property-dependencies)
- - [Unidirectional](#unidirectional)
- - [Bidirectional](#bidirectional)
+  - [Unidirectional](#unidirectional)
+  - [Bidirectional](#bidirectional)
  - [Schema dependencies](#schema-dependencies)
- - [Conditional](#conditional)
- - [Dynamic](#dynamic)
+  - [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)
 
 ---
@@ -1184,7 +1190,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).
 

package.json

@@ -8,17 +8,18 @@
  "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 -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
- "cs-format": "prettier $npm_package_prettierOptions '{playground,src,test}/**/*.js' --write",
+ "cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 '{playground,src,test}/**/*.js' --write",
  "dist": "npm run build:lib && npm run build:dist",
  "lint": "eslint src test playground",
  "precommit": "lint-staged",
  "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
  "publish-to-npm": "npm run build:readme && npm run dist && 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"
  },
- "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi",
+ "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
  "lint-staged": {
  "{playground,src,test}/**/*.js": [
  "npm run lint",

src/components/Form.js

@@ -175,6 +175,7 @@ export default class Form extends Component {
  children,
  safeRenderCompletion,
  id,
+ idPrefix,
  className,
  name,
  method,
@@ -209,6 +210,7 @@ export default class Form extends Component {
  uiSchema={uiSchema}
  errorSchema={errorSchema}
  idSchema={idSchema}
+ idPrefix={idPrefix}
  formData={formData}
  onChange={this.onChange}
  onBlur={this.onBlur}

src/components/fields/ArrayField.js

@@ -64,7 +64,10 @@ function DefaultArrayItem(props) {
  <div className="col-xs-3 array-item-toolbox">
  <div
  className="btn-group"
- style={{ display: "flex", justifyContent: "space-around" }}>
+ style={{
+ display: "flex",
+ justifyContent: "space-around",
+ }}>
  {(props.hasMoveUp || props.hasMoveDown) && (
  <IconBtn
  icon="arrow-up"

src/components/fields/ObjectField.js

@@ -73,6 +73,7 @@ class ObjectField extends Component {
  required,
  disabled,
  readonly,
+ idPrefix,
  onBlur,
  onFocus,
  registry = getDefaultRegistry(),
@@ -117,6 +118,7 @@ class ObjectField extends Component {
  uiSchema={uiSchema[name]}
  errorSchema={errorSchema[name]}
  idSchema={idSchema[name]}
+ idPrefix={idPrefix}
  formData={formData[name]}
  onChange={this.onPropertyChange(name)}
  onBlur={onBlur}

src/components/fields/SchemaField.js

@@ -4,7 +4,9 @@ import PropTypes from "prop-types";
 import {
  isMultiSelect,
  retrieveSchema,
+ toIdSchema,
  getDefaultRegistry,
+ mergeObjects,
  getUiOptions,
  isFilesArray,
  deepEquals,
@@ -153,7 +155,7 @@ function SchemaFieldRender(props) {
  uiSchema,
  formData,
  errorSchema,
- idSchema,
+ idPrefix,
  name,
  required,
  registry = getDefaultRegistry(),
@@ -164,7 +166,12 @@ function SchemaFieldRender(props) {
  formContext,
  FieldTemplate = DefaultTemplate,
  } = registry;
+ let idSchema = props.idSchema;
  const schema = retrieveSchema(props.schema, definitions, formData);
+ idSchema = mergeObjects(
+ toIdSchema(schema, null, definitions, formData, idPrefix),
+ idSchema
+ );
  const FieldComponent = getFieldComponent(schema, uiSchema, idSchema, fields);
  const { DescriptionField } = fields;
  const disabled = Boolean(props.disabled || uiSchema["ui:disabled"]);
@@ -199,6 +206,7 @@ function SchemaFieldRender(props) {
  const field = (
  <FieldComponent
  {...props}
+ idSchema={idSchema}
  schema={schema}
  uiSchema={{ ...uiSchema, classNames: undefined }}
  disabled={disabled}

src/components/widgets/BaseInput.js

@@ -4,6 +4,10 @@ import PropTypes from "prop-types";
 function BaseInput(props) {
  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
  // exclude the "options" and "schema" ones here.
+ if (!props.id) {
+ console.log("No id for", props);
+ throw new Error(`no id for props ${JSON.stringify(props)}`);
+ }
  const {
  value,
  readonly,

test/ArrayField_test.js

@@ -435,7 +435,10 @@ describe("ArrayField", () => {
  },
  },
  };
- let form = createFormComponent({ schema: complexSchema, formData: {} });
+ let form = createFormComponent({
+ schema: complexSchema,
+ formData: {},
+ });
  let inputs = form.node.querySelectorAll("input[type=text]");
  expect(inputs[0].value).eql("Default name");
  expect(inputs[1].value).eql("Default name");
@@ -726,7 +729,10 @@ describe("ArrayField", () => {
  });
 
  it("should handle a change event", () => {
- const { comp, node } = createFormComponent({ schema, uiSchema });
+ const { comp, node } = createFormComponent({
+ schema,
+ uiSchema,
+ });
 
  Simulate.change(node.querySelectorAll("[type=checkbox]")[0], {
  target: { checked: true },
@@ -1058,7 +1064,10 @@ describe("ArrayField", () => {
  });
 
  it("should fill fields with data", () => {
- const { node } = createFormComponent({ schema, formData: ["foo", 42] });
+ const { node } = createFormComponent({
+ schema,
+ formData: ["foo", 42],
+ });
  const strInput = node.querySelector(
  "fieldset .field-string input[type=text]"
  );

test/Form_test.js

@@ -68,6 +68,85 @@ describe("Form", () => {
  });
  });
 
+ describe("Changing idPrefix", function() {
+ it("should work with simple example", function() {
+ const schema = {
+ type: "object",
+ title: "root object",
+ required: ["foo"],
+ properties: {
+ count: {
+ type: "number",
+ },
+ },
+ };
+ const comp = renderIntoDocument(<Form schema={schema} idPrefix="rjsf" />);
+ const node = findDOMNode(comp);
+ const inputs = node.querySelectorAll("input");
+ const ids = [];
+ for (var i = 0, len = inputs.length; i < len; i++) {
+ const input = inputs[i];
+ ids.push(input.getAttribute("id"));
+ }
+ expect(ids).to.eql(["rjsf_count"]);
+ });
+
+ it("should work with oneOf", function() {
+ const schema = {
+ $schema: "http://json-schema.org/draft-06/schema#",
+ type: "object",
+ properties: {
+ connector: {
+ type: "string",
+ enum: ["aws", "gcp"],
+ title: "Provider",
+ default: "aws",
+ },
+ },
+ dependencies: {
+ connector: {
+ oneOf: [
+ {
+ type: "object",
+ properties: {
+ connector: {
+ type: "string",
+ enum: ["aws"],
+ },
+ key_aws: {
+ type: "string",
+ },
+ },
+ },
+ {
+ type: "object",
+ properties: {
+ connector: {
+ type: "string",
+ enum: ["gcp"],
+ },
+ key_gcp: {
+ type: "string",
+ },
+ },
+ },
+ ],
+ },
+ },
+ };
+
+ const comp = renderIntoDocument(<Form schema={schema} idPrefix="rjsf" />);
+ const node = findDOMNode(comp);
+ const inputs = node.querySelectorAll("input");
+ const ids = [];
+ for (var i = 0, len = inputs.length; i < len; i++) {
+ const input = inputs[i];
+ ids.push(input.getAttribute("id"));
+ }
+ expect(ids).to.eql(["rjsf_key_aws"]);
+ });
+ });
+
  describe("Custom field template", () => {
  const schema = {
  type: "object",
@@ -592,7 +671,11 @@ describe("Form", () => {
  foo: "",
  };
  const onChange = sandbox.spy();
- const { node } = createFormComponent({ schema, formData, onChange });
+ const { node } = createFormComponent({
+ schema,
+ formData,
+ onChange,
+ });
 
  Simulate.change(node.querySelector("[type=text]"), {
  target: { value: "new" },
@@ -835,7 +918,10 @@ describe("Form", () => {
  });
 
  it("should denote the new error in the field", () => {
- const { node } = createFormComponent({ schema, liveValidate: true });
+ const { node } = createFormComponent({
+ schema,
+ liveValidate: true,
+ });
 
  Simulate.change(node.querySelector("input[type=text]"), {
  target: { value: "short" },
@@ -1056,7 +1142,9 @@ describe("Form", () => {
  const { comp } = createFormComponent(formProps);
 
  expect(comp.state.errorSchema).eql({
- 1: { __errors: ["should NOT be shorter than 4 characters"] },
+ 1: {
+ __errors: ["should NOT be shorter than 4 characters"],
+ },
  });
  });
 
@@ -1108,8 +1196,12 @@ describe("Form", () => {
 
  expect(comp.state.errorSchema).eql({
  level1: {
- 1: { __errors: ["should NOT be shorter than 4 characters"] },
- 3: { __errors: ["should NOT be shorter than 4 characters"] },
+ 1: {
+ __errors: ["should NOT be shorter than 4 characters"],
+ },
+ 3: {
+ __errors: ["should NOT be shorter than 4 characters"],
+ },
  },
  });
  });
@@ -1158,10 +1250,14 @@ describe("Form", () => {
  expect(comp.state.errorSchema).eql({
  outer: {
  0: {
- 1: { __errors: ["should NOT be shorter than 4 characters"] },
+ 1: {
+ __errors: ["should NOT be shorter than 4 characters"],
+ },
  },
  1: {
- 0: { __errors: ["should NOT be shorter than 4 characters"] },
+ 0: {
+ __errors: ["should NOT be shorter than 4 characters"],
+ },
  },
  },
  });

test/NumberField_test.js

@@ -51,7 +51,9 @@ describe("NumberField", () => {
  });
 
  it("should default state value to undefined", () => {
- const { comp } = createFormComponent({ schema: { type: "number" } });
+ const { comp } = createFormComponent({
+ schema: { type: "number" },
+ });
 
  expect(comp.state.formData).eql(undefined);
  });