diff options
Diffstat (limited to 'web/src/js/components/Modal/OptionModal.jsx')
-rw-r--r-- | web/src/js/components/Modal/OptionModal.jsx | 57 |
1 files changed, 36 insertions, 21 deletions
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx index ef3a224a..5741ee8c 100644 --- a/web/src/js/components/Modal/OptionModal.jsx +++ b/web/src/js/components/Modal/OptionModal.jsx @@ -1,8 +1,22 @@ -import React, { Component } from 'react' -import { connect } from 'react-redux' -import * as modalAction from '../../ducks/ui/modal' -import { update as updateOptions } from '../../ducks/options' -import Option from './OptionMaster' +import React, { Component } from "react" +import { connect } from "react-redux" +import * as modalAction from "../../ducks/ui/modal" +import Option from "./Option" + +function PureOptionHelp({help}){ + return <div className="help-block small">{help}</div>; +} +const OptionHelp = connect((state, {name}) => ({ + help: state.options[name].help, +}))(PureOptionHelp); + +function PureOptionError({error}){ + if(!error) return null; + return <div className="small text-danger">{error}</div>; +} +const OptionError = connect((state, {name}) => ({ + error: state.ui.optionsEditor[name] && state.ui.optionsEditor[name].error +}))(PureOptionError); class PureOptionModal extends Component { @@ -28,23 +42,25 @@ class PureOptionModal extends Component { </div> <div className="modal-body"> - { - Object.keys(options).sort() - .map((key, index) => { - let option = options[key]; - return ( - <Option - key={index} - name={key} - updateOptions={updateOptions} - option={option} - />) - }) - } + <div className="form-horizontal"> + { + options.map(name => + <div key={name} className="form-group"> + <div className="col-xs-6"> + <label htmlFor={name}>{name}</label> + <OptionHelp name={name}/> + </div> + <div className="col-xs-6"> + <Option name={name}/> + <OptionError name={name}/> + </div> + </div> + ) + } + </div> </div> <div className="modal-footer"> - <button type="button" className="btn btn-primary">Save Changes</button> </div> </div> ) @@ -53,10 +69,9 @@ class PureOptionModal extends Component { export default connect( state => ({ - options: state.options + options: Object.keys(state.options).sort() }), { hideModal: modalAction.hideModal, - updateOptions: updateOptions, } )(PureOptionModal) |