Move Header into components

Author: Emmanouil Konstantinidis

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

@@ -30,8 +30,6 @@ var Request = React.createClass({
   },
 
   setSelectedMethod: function (method) {
-    console.log('REQUEST _ setSelectedMethod');
-
     this.setState({
       selectedMethod: method
     });
@@ -68,13 +66,11 @@ var Request = React.createClass({
       <div>
         <h3>Request</h3>
 
-        <Header title='API Endpoint' />
         <FieldUrl
           name='urlEndpoint'
           url={endpoint.path}
           onChange={this.handleUrlChange} />
 
-        <Header title='Method' />
         <Methods
           methods={this.state.endpoint.methods}
           selectedMethod={this.state.selectedMethod}

rest_framework_docs/static/rest_framework_docs/js/components/request/field-url.js

@@ -1,5 +1,6 @@
 var React = require('react');
 
+var Header = require('../helpers/header');
 var Input = require('../helpers/input');
 
 var FieldUrl = React.createClass({
@@ -22,11 +23,14 @@ var FieldUrl = React.createClass({
 
   render: function () {
     return (
-      <Input
-        name='Url Endpoint'
-        value={this.state.url}
-        placeholder='Endpoint Url'
-        onChange={this.handleChange} />
+      <div>
+        <Header title='API Endpoint' />
+        <Input
+          name='Url Endpoint'
+          value={this.state.url}
+          placeholder='Endpoint Url'
+          onChange={this.handleChange} />
+      </div>
     );
   }
 });

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

@@ -1,4 +1,5 @@
 var React = require('react');
+var Header = require('../helpers/header');
 
 var Methods = React.createClass({
 
@@ -29,18 +30,21 @@ var Methods = React.createClass({
 
   render: function () {
     return (
-      <div className='btn-group methods'>
-        {this.state.methods.map(function (method, i) {
-          var methodClass = 'btn btn-sm method ' + method.toLowerCase() +
-            (this.state.selectedMethod == method ? ' active' : null);
-          return (
-            <button
-              key={i}
-              type='button'
-              className={methodClass}
-              onClick={this.setMethod.bind(this, method)}>{method}</button>
-          );
-        }, this)}
+      <div>
+        <Header title='Method' />
+        <div className='btn-group methods'>
+          {this.state.methods.map(function (method, i) {
+            var methodClass = 'btn btn-sm method ' + method.toLowerCase() +
+              (this.state.selectedMethod == method ? ' active' : null);
+            return (
+              <button
+                key={i}
+                type='button'
+                className={methodClass}
+                onClick={this.setMethod.bind(this, method)}>{method}</button>
+            );
+          }, this)}
+        </div>
       </div>
     );
   }

rest_framework_docs/static/rest_framework_docs/js/dist.js

@@ -32497,8 +32497,6 @@ var Request = React.createClass({
   },
 
   setSelectedMethod: function setSelectedMethod(method) {
-    console.log('REQUEST _ setSelectedMethod');
-
     this.setState({
       selectedMethod: method
     });
@@ -32539,12 +32537,10 @@ var Request = React.createClass({
         null,
         'Request'
       ),
-      React.createElement(Header, { title: 'API Endpoint' }),
       React.createElement(FieldUrl, {
         name: 'urlEndpoint',
         url: endpoint.path,
         onChange: this.handleUrlChange }),
-      React.createElement(Header, { title: 'Method' }),
       React.createElement(Methods, {
         methods: this.state.endpoint.methods,
         selectedMethod: this.state.selectedMethod,
@@ -32573,6 +32569,7 @@ module.exports = Request;
 
 var React = require('react');
 
+var Header = require('../helpers/header');
 var Input = require('../helpers/input');
 
 var FieldUrl = React.createClass({
@@ -32595,17 +32592,22 @@ var FieldUrl = React.createClass({
   },
 
   render: function render() {
-    return React.createElement(Input, {
-      name: 'Url Endpoint',
-      value: this.state.url,
-      placeholder: 'Endpoint Url',
-      onChange: this.handleChange });
+    return React.createElement(
+      'div',
+      null,
+      React.createElement(Header, { title: 'API Endpoint' }),
+      React.createElement(Input, {
+        name: 'Url Endpoint',
+        value: this.state.url,
+        placeholder: 'Endpoint Url',
+        onChange: this.handleChange })
+    );
   }
 });
 
 module.exports = FieldUrl;
 
-},{"../helpers/input":165,"react":159}],169:[function(require,module,exports){
+},{"../helpers/header":164,"../helpers/input":165,"react":159}],169:[function(require,module,exports){
 'use strict';
 
 var React = require('react');
@@ -32695,6 +32697,7 @@ module.exports = Headers;
 'use strict';
 
 var React = require('react');
+var Header = require('../helpers/header');
 
 var Methods = React.createClass({
   displayName: 'Methods',
@@ -32727,26 +32730,31 @@ var Methods = React.createClass({
   render: function render() {
     return React.createElement(
       'div',
-      { className: 'btn-group methods' },
-      this.state.methods.map(function (method, i) {
-        var methodClass = 'btn btn-sm method ' + method.toLowerCase() + (this.state.selectedMethod == method ? ' active' : null);
-        return React.createElement(
-          'button',
-          {
-            key: i,
-            type: 'button',
-            className: methodClass,
-            onClick: this.setMethod.bind(this, method) },
-          method
-        );
-      }, this)
+      null,
+      React.createElement(Header, { title: 'Method' }),
+      React.createElement(
+        'div',
+        { className: 'btn-group methods' },
+        this.state.methods.map(function (method, i) {
+          var methodClass = 'btn btn-sm method ' + method.toLowerCase() + (this.state.selectedMethod == method ? ' active' : null);
+          return React.createElement(
+            'button',
+            {
+              key: i,
+              type: 'button',
+              className: methodClass,
+              onClick: this.setMethod.bind(this, method) },
+            method
+          );
+        }, this)
+      )
     );
   }
 });
 
 module.exports = Methods;
 
-},{"react":159}],172:[function(require,module,exports){
+},{"../helpers/header":164,"react":159}],172:[function(require,module,exports){
 'use strict';
 
 var React = require('react');