From 3ced97763dcc4a5326c99892540ca38120af5411 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Mon, 18 Sep 2017 16:34:42 +0100
Subject: [PATCH] Move ValidatedField component out of render function
---
package.json | 1 +
src/atoms/ValidatedField.js | 48 +++++++++++++++++++++----------------
src/atoms/ValidatedField.md | 10 ++++----
3 files changed, 35 insertions(+), 24 deletions(-)
diff --git a/package.json b/package.json
index 1f28697d3..6d247574f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"react-redux": "^5.0.2",
"react-router": "^3.0.5",
"react-tag-autocomplete": "^5.4.1",
+ "recompose": "^0.25.0",
"redux": "^3.6.0",
"redux-form": "^7.0.3",
"xpub-fonts": "^0.0.2"
diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
index 32afa56c8..2028f9793 100644
--- a/src/atoms/ValidatedField.js
+++ b/src/atoms/ValidatedField.js
@@ -1,33 +1,41 @@
import React from 'react'
+import { compose, withHandlers } from 'recompose'
import classnames from 'classnames'
import { Field } from 'redux-form'
import classes from './ValidatedField.local.scss'
// TODO: pass ...props.input to children automatically?
-const ValidatedField = ({ component, ...rest }) => (
- <Field
- {...rest}
- component={({ meta, input }) => (
- <div className={classes.root}>
- {component(input)}
+const ValidatedFieldComponent = ({ component }) => ({ meta, input }) => (
+ <div>
+ {component(input)}
- <div className={classes.messages}>
- {meta.error && (
- <div className={classnames(classes.message, classes.error)}>
- {meta.error}
- </div>
- )}
+ {console.log(meta)}
- {meta.warning && (
- <div className={classnames(classes.message, classes.warning)}>
- {meta.warning}
- </div>
- )}
- </div>
+ {meta.touched && (
+ <div className={classes.messages}>
+ {meta.error && (
+ <div className={classnames(classes.message, classes.error)}>
+ {meta.error}
+ </div>
+ )}
+
+ {meta.warning && (
+ <div className={classnames(classes.message, classes.warning)}>
+ {meta.warning}
+ </div>
+ )}
</div>
)}
- />
+ </div>
+)
+
+const ValidatedField = ({ fieldComponent, ...rest }) => (
+ <Field {...rest} component={fieldComponent}/>
)
-export default ValidatedField
+export default compose(
+ withHandlers({
+ fieldComponent: ValidatedFieldComponent
+ })
+)(ValidatedField)
diff --git a/src/atoms/ValidatedField.md b/src/atoms/ValidatedField.md
index 78e3bd0b1..136df6151 100644
--- a/src/atoms/ValidatedField.md
+++ b/src/atoms/ValidatedField.md
@@ -8,11 +8,12 @@ const ValidatedFieldForm = reduxForm({
onChange: values => console.log(values)
})(ValidatedField);
+const TextInput = input => <TextField {...input}/>;
+
<ValidatedFieldForm
name="error"
validate={() => 'Required'}
- component={input => <TextField {...input}/>}
- />
+ component={TextInput}/>
```
```js
@@ -23,9 +24,10 @@ const ValidatedFieldForm = reduxForm({
onChange: values => console.log(values)
})(ValidatedField);
+const TextInput = input => <TextField {...input}/>;
+
<ValidatedFieldForm
name="warning"
warn={() => 'Expected'}
- component={input => <TextField {...input}/>}
- />
+ component={TextInput}/>
```
--
GitLab