Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
refactor layout into a new form add component
This commit is contained in:
Vegard Sandvold 2017-01-28 16:46:34 +01:00 committed by GitHub
commit f73d2c6633
3 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/feature/form-add-component.jsx Normal file
View File

@ -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;

9
frontend/src/component/feature/form-add-container.jsx
View File

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

14
frontend/src/component/feature/form/index.jsx
View File

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