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,57 +44,52 @@ class AddFeatureToggleComponent extends Component {
         const configuredStrategies = input.strategies || [];
 
         return (
-            <Grid className="mdl-color--white">
+            <form onSubmit={onSubmit(input)}>
-                <Cell col={12}>
+                <section style={{ padding: '16px' }}>
-                    <form onSubmit={onSubmit(input)}>
+                    <Textfield
-                        {title && <HeaderTitle title={title} />}
+                        floatingLabel
-                        <section>
+                        label="Name"
-                            <Textfield
+                        name="name"
-                                floatingLabel
+                        disabled={editmode}
-                                label="Name"
+                        required
-                                name="name"
+                        value={name}
-                                disabled={editmode}
+                        error={nameError}
-                                required
+                        onBlur={(v) => validateName(v.target.value)}
-                                value={name}
+                        onChange={(v) => setValue('name', trim(v.target.value))} />
-                                error={nameError}
+                    <br />
-                                onBlur={(v) => validateName(v.target.value)}
+                    <Textfield
-                                onChange={(v) => setValue('name', trim(v.target.value))} />
+                        floatingLabel
-                            <br />
+                        style={{ width: '100%' }}
-                            <Textfield
+                        rows={1}
-                                floatingLabel
+                        label="Description"
-                                style={{ width: '100%' }}
+                        required
-                                rows={1}
+                        value={description}
-                                label="Description"
+                        onChange={(v) => setValue('description', v.target.value)} />
-                                required
-                                value={description}
-                                onChange={(v) => setValue('description', v.target.value)} />
-
-                            {!editmode && <div>
-                                <br />
-                                <Switch
-                                checked={enabled}
-                                onChange={() => {
-                                    setValue('enabled', !enabled);
-                                }}>Enabled</Switch>
-                                <hr />
-                            </div>}
-                        </section>
-
-                        <StrategiesSection
-                            configuredStrategies={configuredStrategies}
-                            addStrategy={addStrategy}
-                            updateStrategy={updateStrategy}
-                            moveStrategy={moveStrategy}
-                            removeStrategy={removeStrategy} />
 
+                    {!editmode && <div>
                         <br />
-                        <FormButtons
+                        <Switch
-                            submitText={editmode ? 'Update' : 'Create'}
+                        checked={enabled}
-                            onCancel={onCancel}
+                        onChange={() => {
-                        />
+                            setValue('enabled', !enabled);
-                    </form>
+                        }}>Enabled</Switch>
-                </Cell>
+                        <hr />
-            </Grid>
+                    </div>}
+
+                    <StrategiesSection
+                        configuredStrategies={configuredStrategies}
+                        addStrategy={addStrategy}
+                        updateStrategy={updateStrategy}
+                        moveStrategy={moveStrategy}
+                        removeStrategy={removeStrategy} />
+
+                    <br />
+                    <FormButtons
+                        submitText={editmode ? 'Update' : 'Create'}
+                        onCancel={onCancel}
+                    />
+                </section>
+            </form>
         );
     }