Init Add Extra Field

Author: Emmanouil Konstantinidis

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

@@ -1,5 +1,6 @@
 var React = require('react');
 
+var AddFieldsForm = require('./request/add-fields');
 var Header = require('./helpers/header');
 var Headers = require('./request/headers');
 var FieldsData = require('./request/fields-data');
@@ -29,6 +30,10 @@ var Request = React.createClass({
     });
   },
 
+  addField: function (field) {
+    console.log('Adding field: ', field);
+  },
+
   setSelectedMethod: function (method) {
     this.setState({
       selectedMethod: method
@@ -88,6 +93,8 @@ var Request = React.createClass({
               fields={endpoint.fields}
               data={this.state.data}
               onChange={this.handleDataFieldChange} />
+
+            <AddFieldsForm onAdd={this.addField} />
           </div>
         )}
       </div>

rest_framework_docs/static/rest_framework_docs/js/components/request/add-fields.js

@@ -0,0 +1,52 @@
+var React = require('react');
+
+var Header = require('../helpers/header');
+
+var AddFieldsForm = React.createClass({
+
+  getInitialState: function() {
+    return {
+      fieldName: ''
+    };
+  },
+
+  addField: function () {
+    this.props.onAdd(this.state.fieldName);
+  },
+
+  handleChange: function (event) {
+    this.setState({
+      fieldName: event.target.value
+    });
+  },
+
+  render: function () {
+    return (
+      <div>
+        <Header title='Add Extra Fields' />
+
+        <div className='form-group'>
+          <label className='col-sm-4 control-label'>Add Field</label>
+          <div className="col-sm-6">
+            <input
+              type='text'
+              className='form-control input-sm'
+              placeholder='Field Name (ie. email_address)'
+              onChange={this.handleChange}
+              value={this.state.fieldName} />
+          </div>
+          <div className="col-sm-2">
+            <button
+              type="button"
+              className='btn btn-sm btn-block btn-primary'
+              onClick={this.addField}>
+              Add
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = AddFieldsForm;