Added propTypes to widget components.

Author: n1k0

fixtures/widgets/CheckboxWidget/index.js

@@ -1,4 +1,5 @@
 module.exports = {
+  type: "boolean",
   label: "foo",
   onChange: console.log.bind(console)
 };

fixtures/widgets/RadioWidget/index.js

@@ -1,8 +1,7 @@
 module.exports = {
-  schema: {
-    type: "string",
-    title: "foo",
-    default: "b"
-  },
-  options: ["a", "b"]
+  type: "string",
+  label: "foo",
+  defaultValue: "b",
+  options: ["a", "b"],
+  onChange: console.log.bind(console)
 };

src/components/fields/BooleanField.js

@@ -6,6 +6,7 @@ import CheckboxField from "./../widgets/CheckboxWidget";
 export default function BooleanField({schema, formData, required, onChange}) {
   const {title, description} = schema;
   const commonProps = {
+    type: schema.type,
     onChange,
     label: title,
     placeholder: description,

src/components/fields/StringField.js

@@ -1,19 +1,25 @@
 import React from "react";
 
-import TextField from "./../widgets/TextWidget";
-import SelectField from "./../widgets/SelectWidget";
+import { defaultFieldValue } from "../../utils";
+import TextWidget from "./../widgets/TextWidget";
+import SelectWidget from "./../widgets/SelectWidget";
 
 
 export default function StringField({schema, formData, required, onChange}) {
+  const {type, title, description} = schema;
   const commonProps = {
-    schema,
+    type: type,
+    label: title,
+    placeholder: description,
     onChange,
-    label:    schema.title,
-    formData: formData,
+    value: formData,
     required: required,
+    defaultValue: defaultFieldValue(formData, schema),
   };
   if (Array.isArray(schema.enum)) {
-    return <SelectField options={schema.enum} {...commonProps} />;
+    // XXX uiSchema: Could also be a list of radio buttons
+    return <SelectWidget options={schema.enum} {...commonProps} />;
   }
-  return <TextField placeholder={schema.description} {...commonProps} />;
+  // XXX uiSchema: Could also be a textarea for longer texts
+  return <TextWidget {...commonProps} />;
 }

src/components/widgets/CheckboxWidget.js

@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 import Wrapper from "./../widgets/Wrapper";
 
 function CheckboxWidget({
+  type,
   onChange,
   label,
   defaultValue,
@@ -11,7 +12,7 @@ function CheckboxWidget({
   placeholder
 }) {
   return (
-    <Wrapper label={label} required={required} type="boolean">
+    <Wrapper label={label} required={required} type={type}>
       <input type="checkbox"
         title={placeholder}
         checked={value}
@@ -23,6 +24,7 @@ function CheckboxWidget({
 }
 
 CheckboxWidget.propTypes = {
+  type: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   label: PropTypes.string,
   defaultValue: PropTypes.bool,

src/components/widgets/RadioWidget.js

@@ -1,24 +1,34 @@
-import React from "react";
+import React, { PropTypes } from "react";
 
 import Wrapper from "./../widgets/Wrapper";
 
 
-export default function RadioWidget({schema, formData, options, onChange}) {
+function RadioWidget({
+  type,
+  options,
+  label,
+  placeholder,
+  value,
+  defaultValue,
+  required,
+  onChange
+}) {
   // Generating a unique field name to identify this set of radio buttons
   const name = Math.random().toString();
   return (
-    <Wrapper type={schema.type} label={schema.title}>
+    <Wrapper type={type} label={label}>
       {
         options.map((option, i) => {
-          const checked = formData ? option === formData :
-                                     option === schema.default;
+          const checked = value ? option === value :
+                                  option === defaultValue;
           return (
             <div key={i}>
               <label>
                 <input type="radio"
                   name={name}
                   value={option}
                   checked={checked}
+                  placeholder={placeholder}
                   onChange={_ => onChange(option)} />
                 {option}
               </label>
@@ -29,3 +39,16 @@ export default function RadioWidget({schema, formData, options, onChange}) {
     </Wrapper>
   );
 }
+
+RadioWidget.propTypes = {
+  type: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.any,
+  defaultValue: PropTypes.any,
+  required: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default RadioWidget;

src/components/widgets/SelectWidget.js

@@ -1,23 +1,24 @@
-import React from "react";
+import React, { PropTypes } from "react";
 
-import { defaultFieldValue } from "../../utils";
 import Wrapper from "./../widgets/Wrapper";
 
 
-export default function SelectWidget({
-  schema,
-  formData,
+function SelectWidget({
+  type,
   options,
-  required,
   label,
+  placeholder,
+  value,
+  defaultValue,
+  required,
   onChange
 }) {
   return (
-    <Wrapper label={label} required={required}>
+    <Wrapper label={label} required={required} type={type}>
       <select
-        title={schema.description}
-        value={defaultFieldValue(formData, schema)}
-        defaultValue={schema.default}
+        title={placeholder}
+        value={value}
+        defaultValue={defaultValue}
         onChange={(event) => onChange(event.target.value)}>{
         options.map((option, i) => {
           return <option key={i}>{option}</option>;
@@ -26,3 +27,16 @@ export default function SelectWidget({
     </Wrapper>
   );
 }
+
+SelectWidget.propTypes = {
+  type: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.any,
+  defaultValue: PropTypes.any,
+  required: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default SelectWidget;

src/components/widgets/TextWidget.js

@@ -1,26 +1,37 @@
-import React from "react";
+import React, { PropTypes } from "react";
 
-import { defaultFieldValue } from "../../utils";
 import Wrapper from "./../widgets/Wrapper";
 
 
-export default function TextWidget({
-  schema,
-  formData,
+function TextWidget({
+  type,
   label,
-  required,
   placeholder,
+  value,
+  defaultValue,
+  required,
   onChange
 }) {
   return (
-    <Wrapper label={label} required={required}
-      type={schema.type}>
+    <Wrapper label={label} required={required} type={type}>
       <input type="text"
-        value={defaultFieldValue(formData, schema)}
-        defaultValue={schema.default}
+        value={value}
+        defaultValue={defaultValue}
         placeholder={placeholder}
         required={required}
         onChange={(event) => onChange(event.target.value)} />
     </Wrapper>
   );
 }
+
+TextWidget.propTypes = {
+  type: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  required: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default TextWidget;

src/components/widgets/Wrapper.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropTypes } from "react";
 
 const REQUIRED_FIELD_SYMBOL = "*";
 
@@ -12,7 +12,7 @@ function getLabel(label, required) {
   return label;
 }
 
-export default function Wrapper({type, children, label, required}) {
+function Wrapper({type, children, label, required}) {
   return (
     <div className={`field field-${type}`}>
       <label>
@@ -22,3 +22,12 @@ export default function Wrapper({type, children, label, required}) {
     </div>
   );
 }
+
+Wrapper.propTypes = {
+  type: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  children: React.PropTypes.node.isRequired,
+};
+
+export default Wrapper;