Boolean field working

Author: Emmanouil Konstantinidis

rest_framework_docs/static/rest_framework_docs/js/components/fields/boolean.js

@@ -0,0 +1,62 @@
+var React = require('react');
+
+var FieldBoolean = React.createClass({
+  getInitialState: function() {
+    return {
+      checked: null
+    };
+  },
+
+  removeField: function (fieldName, event) {
+    event.preventDefault();
+    this.props.removeField(fieldName);
+  },
+
+  handleChange: function (value) {
+    this.props.onChange(value);
+  },
+
+  isChecked: function () {
+    if (this.props.value === undefined) return;
+  },
+
+  render: function () {
+    var labelName = this.props.name.replace('_', ' ');
+
+    return (
+      <div className='form-group'>
+        <label
+          htmlFor={this.props.name}
+          className='col-sm-4 control-label'>
+            {this.props.isCustom ? (
+              <i
+                className='fa fa-minus-circle'
+                title='Remove Field'
+                onClick={this.removeField.bind(this, this.props.name)} />
+            ) : null}
+            {labelName}
+        </label>
+        <div className='col-sm-8'>
+          <label className='radio-inline'>
+            <input
+              type='radio'
+              name={this.props.name}
+              value='True'
+              checked={this.isChecked(true)}
+              onChange={this.handleChange.bind(this, true)} /> True
+          </label>
+          <label className='radio-inline'>
+            <input
+              type='radio'
+              name={this.props.name}
+              value='False'
+              checked={this.isChecked(false)}
+              onChange={this.handleChange.bind(this, false)} /> False
+          </label>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = FieldBoolean;

rest_framework_docs/static/rest_framework_docs/js/components/fields/text.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var Input = React.createClass({
+var FieldText = React.createClass({
 
   removeField: function (fieldName, event) {
     event.preventDefault();
@@ -12,6 +12,8 @@ var Input = React.createClass({
   },
 
   render: function () {
+    var labelName = this.props.name.replace('_', ' ');
+
     return (
       <div className="form-group">
         <label
@@ -24,7 +26,7 @@ var Input = React.createClass({
                 onClick={this.removeField.bind(this, this.props.name)}
                 />
             ) : null}
-            {this.props.name}
+            {labelName}
         </label>
         <div className="col-sm-8">
           <input
@@ -41,4 +43,4 @@ var Input = React.createClass({
   }
 });
 
-module.exports = Input;
+module.exports = FieldText;

rest_framework_docs/static/rest_framework_docs/js/components/request/data.js

@@ -1,6 +1,7 @@
 var React = require('react');
 
 var FieldText = require('../fields/text');
+var FieldBoolean = require('../fields/boolean');
 var Header = require('../helpers/header');
 var RequestUtils = require('../../utils/request');
 
@@ -9,12 +10,27 @@ var Data = React.createClass({
     this.props.removeCustomField(fieldName);
   },
 
-  handleChange: function (fieldName, event) {
+  handleBooleanChange: function (fieldName, value) {
+    this.props.onChange(value, fieldName);
+  },
+
+  handleTextChange: function (fieldName, event) {
     this.props.onChange(event.target.value, fieldName);
   },
 
   _renderBooleanField: function (field, key) {
-    console.log(field, key);
+    var value = this.props.data[field.name];
+
+    return (
+      <FieldBoolean
+        key={key}
+        name={field.name}
+        value={value}
+        required={field.required ? 'required' : false}
+        removeField={this.removeCustomField}
+        isCustom={field.isCustom ? 'isCustom' : false}
+        onChange={this.handleBooleanChange.bind(this, field.name)} />
+    );
   },
 
   _renderTextInput: function (field, key) {
@@ -30,7 +46,7 @@ var Data = React.createClass({
         required={field.required ? 'required' : false}
         removeField={this.removeCustomField}
         isCustom={field.isCustom ? 'isCustom' : false}
-        onChange={this.handleChange.bind(this, field.name)} />
+        onChange={this.handleTextChange.bind(this, field.name)} />
     );
   },
 
@@ -56,10 +72,7 @@ var Data = React.createClass({
 
     return (
       <div>
-
         {this.props.fields.length ? <Header title='Data' /> : null}
-
-
         {this._renderFields()}
       </div>
     );