#43 hide a field / added HiddenWidget

src/components/fields/SchemaField.js

@@ -44,9 +44,11 @@ function getContent({type, label, required, children, displayLabel}) {
 }
 
 function Wrapper(props) {
+  const style = props.hidden ? {"display": "none"} : {};
   const {type, classNames} = props;
+
   return (
-    <div className={`field field-${type} ${classNames}`}>
+    <div style={style} className={`field field-${type} ${classNames}`}>
       {getContent(props)}
     </div>
   );
@@ -81,6 +83,7 @@ function SchemaField(props) {
   return (
     <Wrapper
       label={schema.title || name}
+      hidden={uiSchema["ui:widget"] === "hidden"}
       required={required}
       type={schema.type}
       displayLabel={displayLabel}

src/components/fields/StringField.js

@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 import { defaultFieldValue, getAlternativeWidget } from "../../utils";
 import TextWidget from "./../widgets/TextWidget";
 import SelectWidget from "./../widgets/SelectWidget";
+import HiddenWidget from "./../widgets/HiddenWidget";
 
 
 function StringField({schema, name, uiSchema, formData, required, onChange}) {

src/components/widgets/HiddenWidget.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from "react";
+
+
+function HiddenWidget({
+  schema,
+  placeholder,
+  value,
+  defaultValue,
+  required,
+  onChange
+}) {
+  return (
+    <input type="hidden"
+      value={value}
+      defaultValue={defaultValue}
+      required={required}
+      onChange={(event) => onChange(event.target.value)} />
+  );
+}
+
+if (process.env.NODE_ENV !== "production") {
+  HiddenWidget.propTypes = {
+    schema: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    value: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    defaultValue: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    required: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+}
+
+export default HiddenWidget;

src/utils.js

@@ -4,26 +4,31 @@ import UpDownWidget from "./components/widgets/UpDownWidget";
 import RangeWidget from "./components/widgets/RangeWidget";
 import SelectWidget from "./components/widgets/SelectWidget";
 import TextareaWidget from "./components/widgets/TextareaWidget";
+import HiddenWidget from "./components/widgets/HiddenWidget";
 
 
 const altWidgetMap = {
   boolean: {
     radio: RadioWidget,
     select: SelectWidget,
+    hidden: HiddenWidget,
   },
   string: {
     password: PasswordWidget,
     radio: RadioWidget,
     select: SelectWidget,
     textarea: TextareaWidget,
+    hidden: HiddenWidget,
   },
   number: {
     updown: UpDownWidget,
     range: RangeWidget,
+    hidden: HiddenWidget,
   },
   integer: {
     updown: UpDownWidget,
     range: RangeWidget,
+    hidden: HiddenWidget,
   }
 };