diff --git a/package.json b/package.json index ce70ed9d460f58be999e3e4ca8dd3efb79a120b1..78a9237987ef5065a1ae03b57e91a50a8ed33e68 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-router": "^3.0.5", "react-tag-autocomplete": "^5.4.1", "redux": "^3.6.0", + "redux-form": "^7.0.4", "xpub-fonts": "^0.0.2" }, "devDependencies": { diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js index 5bbec1e0f4b81afe1f8dc3f59d39df8a31240712..f0186d98af36d778b945ec3dd7b95a9bfda09a1a 100644 --- a/src/atoms/ValidatedField.js +++ b/src/atoms/ValidatedField.js @@ -1,27 +1,33 @@ import React from 'react' import classnames from 'classnames' import classes from './ValidatedField.local.scss' +import { Field } from 'redux-form' // TODO: pass ...props.input to children automatically? -const ValidatedField = ({ form, children, error, warning }) => ( - <div> - {children} +const ValidatedField = ({ component, ...rest }) => ( + <Field + {...rest} + component={({ meta, input }) => ( + <div> + {component(input)} - <div className={classes.messages}> - {error && ( - <div className={classnames(classes.message, classes.error)}> - {error} - </div> - )} + <div className={classes.messages}> + {meta.error && ( + <div className={classnames(classes.message, classes.error)}> + {meta.error} + </div> + )} - {warning && ( - <div className={classnames(classes.message, classes.warning)}> - {warning} + {meta.warning && ( + <div className={classnames(classes.message, classes.warning)}> + {meta.warning} + </div> + )} </div> - )} - </div> - </div> + </div> + )} + /> ) export default ValidatedField