From 81d2eceaa98122a4e9d61d6f0ef3d3b6148fa132 Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Sat, 19 Dec 2015 21:43:22 +0100 Subject: [PATCH 1/7] Separated fields and widgets. --- .../CheckboxWidget}/default.js | 0 fixtures/widgets/RadioWidget/default.js | 8 +++++ src/components/Form.js | 2 +- src/components/{ => fields}/ArrayField.js | 2 +- src/components/{ => fields}/BooleanField.js | 2 +- src/components/{ => fields}/Field.js | 0 src/components/{ => fields}/ObjectField.js | 0 src/components/{ => fields}/SchemaField.js | 0 src/components/{ => fields}/StringField.js | 4 +-- .../{ => fields}/UnsupportedField.js | 0 .../CheckboxWidget.js} | 4 +-- src/components/widgets/RadioWidget.js | 31 +++++++++++++++++++ .../SelectWidget.js} | 4 +-- .../{TextField.js => widgets/TextWidget.js} | 4 +-- 14 files changed, 50 insertions(+), 11 deletions(-) rename fixtures/{CheckboxField => widgets/CheckboxWidget}/default.js (100%) create mode 100644 fixtures/widgets/RadioWidget/default.js rename src/components/{ => fields}/ArrayField.js (98%) rename src/components/{ => fields}/BooleanField.js (88%) rename src/components/{ => fields}/Field.js (100%) rename src/components/{ => fields}/ObjectField.js (100%) rename src/components/{ => fields}/SchemaField.js (100%) rename src/components/{ => fields}/StringField.js (80%) rename src/components/{ => fields}/UnsupportedField.js (100%) rename src/components/{CheckboxField.js => widgets/CheckboxWidget.js} (84%) create mode 100644 src/components/widgets/RadioWidget.js rename src/components/{SelectField.js => widgets/SelectWidget.js} (85%) rename src/components/{TextField.js => widgets/TextWidget.js} (84%) diff --git a/fixtures/CheckboxField/default.js b/fixtures/widgets/CheckboxWidget/default.js similarity index 100% rename from fixtures/CheckboxField/default.js rename to fixtures/widgets/CheckboxWidget/default.js diff --git a/fixtures/widgets/RadioWidget/default.js b/fixtures/widgets/RadioWidget/default.js new file mode 100644 index 0000000000..0fc39d2275 --- /dev/null +++ b/fixtures/widgets/RadioWidget/default.js @@ -0,0 +1,8 @@ +module.exports = { + schema: { + type: "string", + title: "foo", + default: "b" + }, + options: ["a", "b"] +}; diff --git a/src/components/Form.js b/src/components/Form.js index 02ea83f296..ff899bd4be 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -1,7 +1,7 @@ import React from "react"; import { Validator } from "jsonschema"; -import SchemaField from "./SchemaField"; +import SchemaField from "./fields/SchemaField"; import ErrorList from "./ErrorList"; diff --git a/src/components/ArrayField.js b/src/components/fields/ArrayField.js similarity index 98% rename from src/components/ArrayField.js rename to src/components/fields/ArrayField.js index b6edb4c29c..6c6a6d484f 100644 --- a/src/components/ArrayField.js +++ b/src/components/fields/ArrayField.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; -import { defaultTypeValue } from "../utils"; +import { defaultTypeValue } from "../../utils"; import SchemaField from "./SchemaField"; diff --git a/src/components/BooleanField.js b/src/components/fields/BooleanField.js similarity index 88% rename from src/components/BooleanField.js rename to src/components/fields/BooleanField.js index 080d307e52..10abd89ba7 100644 --- a/src/components/BooleanField.js +++ b/src/components/fields/BooleanField.js @@ -1,6 +1,6 @@ import React from "react"; -import CheckboxField from "./CheckboxField"; +import CheckboxField from "./../widgets/CheckboxWidget"; export default function BooleanField({schema, formData, required, onChange}) { // XXX at some point in the future we'll support other widgets for boolean diff --git a/src/components/Field.js b/src/components/fields/Field.js similarity index 100% rename from src/components/Field.js rename to src/components/fields/Field.js diff --git a/src/components/ObjectField.js b/src/components/fields/ObjectField.js similarity index 100% rename from src/components/ObjectField.js rename to src/components/fields/ObjectField.js diff --git a/src/components/SchemaField.js b/src/components/fields/SchemaField.js similarity index 100% rename from src/components/SchemaField.js rename to src/components/fields/SchemaField.js diff --git a/src/components/StringField.js b/src/components/fields/StringField.js similarity index 80% rename from src/components/StringField.js rename to src/components/fields/StringField.js index 03e35c3f9d..b3c473e7d2 100644 --- a/src/components/StringField.js +++ b/src/components/fields/StringField.js @@ -1,7 +1,7 @@ import React from "react"; -import TextField from "./TextField"; -import SelectField from "./SelectField"; +import TextField from "./../widgets/TextWidget"; +import SelectField from "./../widgets/SelectWidget"; export default function StringField({schema, formData, required, onChange}) { diff --git a/src/components/UnsupportedField.js b/src/components/fields/UnsupportedField.js similarity index 100% rename from src/components/UnsupportedField.js rename to src/components/fields/UnsupportedField.js diff --git a/src/components/CheckboxField.js b/src/components/widgets/CheckboxWidget.js similarity index 84% rename from src/components/CheckboxField.js rename to src/components/widgets/CheckboxWidget.js index ce5129590f..1dc7a78b32 100644 --- a/src/components/CheckboxField.js +++ b/src/components/widgets/CheckboxWidget.js @@ -1,7 +1,7 @@ import React from "react"; -import { defaultFieldValue } from "../utils"; -import Field from "./Field"; +import { defaultFieldValue } from "../../utils"; +import Field from "./../fields/Field"; export default function CheckboxField({ schema, diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js new file mode 100644 index 0000000000..00aaaa4c64 --- /dev/null +++ b/src/components/widgets/RadioWidget.js @@ -0,0 +1,31 @@ +import React from "react"; + +import Field from "./../fields/Field"; + + +export default function RadioField({schema, formData, options, onChange}) { + // Generating a unique field name to identify this set of radio buttons + const name = Math.random().toString(); + return ( + + { + options.map((option, i) => { + const checked = formData ? option === formData : + option === schema.default; + return ( +
+ +
+ ); + }) + } +
+ ); +} diff --git a/src/components/SelectField.js b/src/components/widgets/SelectWidget.js similarity index 85% rename from src/components/SelectField.js rename to src/components/widgets/SelectWidget.js index e5ce147155..7713913c53 100644 --- a/src/components/SelectField.js +++ b/src/components/widgets/SelectWidget.js @@ -1,7 +1,7 @@ import React from "react"; -import { defaultFieldValue } from "../utils"; -import Field from "./Field"; +import { defaultFieldValue } from "../../utils"; +import Field from "./../fields/Field"; export default function SelectField({ diff --git a/src/components/TextField.js b/src/components/widgets/TextWidget.js similarity index 84% rename from src/components/TextField.js rename to src/components/widgets/TextWidget.js index 71403a6729..ed65511141 100644 --- a/src/components/TextField.js +++ b/src/components/widgets/TextWidget.js @@ -1,7 +1,7 @@ import React from "react"; -import { defaultFieldValue } from "../utils"; -import Field from "./Field"; +import { defaultFieldValue } from "../../utils"; +import Field from "./../fields/Field"; export default function TextField({ From b43749a93a05b749443521ba0fa390ddb64f05a4 Mon Sep 17 00:00:00 2001 From: Nicolas Perriault Date: Mon, 21 Dec 2015 15:14:46 +0100 Subject: [PATCH 2/7] Moved fields.Field to widgets.Wrapper. --- src/components/widgets/CheckboxWidget.js | 8 ++++---- src/components/widgets/RadioWidget.js | 8 ++++---- src/components/widgets/SelectWidget.js | 8 ++++---- src/components/widgets/TextWidget.js | 8 ++++---- src/components/{fields/Field.js => widgets/Wrapper.js} | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) rename src/components/{fields/Field.js => widgets/Wrapper.js} (84%) diff --git a/src/components/widgets/CheckboxWidget.js b/src/components/widgets/CheckboxWidget.js index 1dc7a78b32..53bcaf4141 100644 --- a/src/components/widgets/CheckboxWidget.js +++ b/src/components/widgets/CheckboxWidget.js @@ -1,9 +1,9 @@ import React from "react"; import { defaultFieldValue } from "../../utils"; -import Field from "./../fields/Field"; +import Wrapper from "./../widgets/Wrapper"; -export default function CheckboxField({ +export default function CheckboxWidget({ schema, onChange, formData, @@ -12,13 +12,13 @@ export default function CheckboxField({ placeholder }) { return ( - + onChange(event.target.checked)} /> - + ); } diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js index 00aaaa4c64..e3ae47aec4 100644 --- a/src/components/widgets/RadioWidget.js +++ b/src/components/widgets/RadioWidget.js @@ -1,13 +1,13 @@ import React from "react"; -import Field from "./../fields/Field"; +import Wrapper from "./../widgets/Wrapper"; -export default function RadioField({schema, formData, options, onChange}) { +export default function RadioWidget({schema, formData, options, onChange}) { // Generating a unique field name to identify this set of radio buttons const name = Math.random().toString(); return ( - + { options.map((option, i) => { const checked = formData ? option === formData : @@ -26,6 +26,6 @@ export default function RadioField({schema, formData, options, onChange}) { ); }) } - + ); } diff --git a/src/components/widgets/SelectWidget.js b/src/components/widgets/SelectWidget.js index 7713913c53..1b3ea91684 100644 --- a/src/components/widgets/SelectWidget.js +++ b/src/components/widgets/SelectWidget.js @@ -1,10 +1,10 @@ import React from "react"; import { defaultFieldValue } from "../../utils"; -import Field from "./../fields/Field"; +import Wrapper from "./../widgets/Wrapper"; -export default function SelectField({ +export default function SelectWidget({ schema, formData, options, @@ -13,7 +13,7 @@ export default function SelectField({ onChange }) { return ( - + - + ); } diff --git a/src/components/widgets/TextWidget.js b/src/components/widgets/TextWidget.js index ed65511141..91f7a63acf 100644 --- a/src/components/widgets/TextWidget.js +++ b/src/components/widgets/TextWidget.js @@ -1,10 +1,10 @@ import React from "react"; import { defaultFieldValue } from "../../utils"; -import Field from "./../fields/Field"; +import Wrapper from "./../widgets/Wrapper"; -export default function TextField({ +export default function TextWidget({ schema, formData, label, @@ -13,7 +13,7 @@ export default function TextField({ onChange }) { return ( - onChange(event.target.value)} /> - + ); } diff --git a/src/components/fields/Field.js b/src/components/widgets/Wrapper.js similarity index 84% rename from src/components/fields/Field.js rename to src/components/widgets/Wrapper.js index 7b759a1740..2d405f7fe7 100644 --- a/src/components/fields/Field.js +++ b/src/components/widgets/Wrapper.js @@ -12,7 +12,7 @@ function getLabel(label, required) { return label; } -export default function Field({type, children, label, required}) { +export default function Wrapper({type, children, label, required}) { return (