Merge pull request #56 from Unleash/refactor-form-add-component-layout

refactor layout into a new form add component

frontend/src/component/feature/form-add-component.jsx

@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+import { Card, CardTitle } from 'react-mdl';
+
+import FormComponent from './form';
+import { styles as commonStyles } from '../common';
+
+const FormAddComponent = ({ title, ...formProps }) => (
+    <Card className={commonStyles.fullwidth}>
+        <CardTitle style={{ paddingTop: '24px' }}>{title}</CardTitle>
+        <FormComponent {...formProps}/>
+    </Card>
+);
+
+FormAddComponent.propTypes = {
+    title: PropTypes.string,
+};
+
+export default FormAddComponent;

frontend/src/component/feature/form-add-container.jsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { hashHistory } from 'react-router';
 import { createFeatureToggles, validateName } from '../../store/feature-actions';
 import { createMapper, createActions } from '../input-helpers';
-import FormComponent from './form';
+import FormAddComponent from './form-add-component';
 
 const ID = 'add-feature-toggle';
 const mapStateToProps = createMapper({
@@ -66,4 +66,9 @@ const prepare = (methods, dispatch) => {
 };
 const actions = createActions({ id: ID, prepare });
 
-export default connect(mapStateToProps, actions)(FormComponent);
+const FormAddContainer = connect(
+    mapStateToProps,
+    actions
+)(FormAddComponent);
+
+export default FormAddContainer;

frontend/src/component/feature/form/index.jsx

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
-import { Textfield, Switch, Grid, Cell } from 'react-mdl';
+import { Textfield, Switch } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 
-import { FormButtons, HeaderTitle } from '../../common';
+import { FormButtons } from '../../common';
 
 const trim = (value) => {
     if (value && value.trim) {
@@ -33,7 +33,6 @@ class AddFeatureToggleComponent extends Component {
             onSubmit,
             onCancel,
             editmode = false,
-            title,
         } = this.props;
 
         const {
@@ -45,11 +44,8 @@ class AddFeatureToggleComponent extends Component {
         const configuredStrategies = input.strategies || [];
 
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
             <form onSubmit={onSubmit(input)}>
-                        {title && <HeaderTitle title={title} />}
-                        <section>
+                <section style={{ padding: '16px' }}>
                     <Textfield
                         floatingLabel
                         label="Name"
@@ -79,7 +75,6 @@ class AddFeatureToggleComponent extends Component {
                         }}>Enabled</Switch>
                         <hr />
                     </div>}
-                        </section>
 
                     <StrategiesSection
                         configuredStrategies={configuredStrategies}
@@ -93,9 +88,8 @@ class AddFeatureToggleComponent extends Component {
                         submitText={editmode ? 'Update' : 'Create'}
                         onCancel={onCancel}
                     />
+                </section>
             </form>
-                </Cell>
-            </Grid>
         );
     }