From 3a18bedb45a9ad70e393ccb5a15d39ce23f14a88 Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Fri, 6 Jan 2017 12:51:33 +0000
Subject: [PATCH] Add functionality to transform props from redux-form to ui
 form components

---
 .../form/redux-form/client/form/form-two.js   | 12 +++++++++---
 spikes/form/redux-form/client/form/form.js    | 13 +++++++++----
 spikes/form/redux-form/client/form/input.js   | 11 ++++++++++-
 spikes/form/redux-form/client/form/proxy.js   | 19 +++++++++++++++++++
 spikes/form/redux-form/package.json           |  1 +
 5 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 spikes/form/redux-form/client/form/proxy.js

diff --git a/spikes/form/redux-form/client/form/form-two.js b/spikes/form/redux-form/client/form/form-two.js
index fe4c6f8f..8a02e06f 100644
--- a/spikes/form/redux-form/client/form/form-two.js
+++ b/spikes/form/redux-form/client/form/form-two.js
@@ -2,11 +2,17 @@ const React = require('react');
 const ReactRouter = require('react-router');
 const ReduxForm = require('redux-form');
 const Styled = require('styled-components');
-const Input = require('./input');
-const InputRfProps = require('./inputRfProps');
+// const Input = require('./input');
+// const InputRfProps = require('./inputRfProps');
 const validate = require('./validate');
 const Form = require('./shared').form;
 
+const proxy = require('./proxy');
+
+const {
+  Input
+} = proxy;
+
 const {
   browserHistory
 } = ReactRouter;
@@ -24,7 +30,7 @@ const FormTwo = (props) => {
   const { handleSubmit } = props
   return (
     <Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}>
-      <Field name="email" type="email" component={InputRfProps} label="Email"/>
+      <Field name="email" type="email" component={Input} label="Email"/>
       <div>
         <label>Sex</label>
         <Field name="sex" component={
diff --git a/spikes/form/redux-form/client/form/form.js b/spikes/form/redux-form/client/form/form.js
index 96e27922..3064c45b 100644
--- a/spikes/form/redux-form/client/form/form.js
+++ b/spikes/form/redux-form/client/form/form.js
@@ -1,11 +1,17 @@
 const React = require('react');
 const ReduxForm = require('redux-form');
 const Styled = require('styled-components');
-const Input = require('./input');
+// const Input = require('./input');
 const InputRfProps = require('./inputRfProps');
 const validate = require('./validate');
 const Form = require('./shared').form;
 
+const proxy = require('./proxy');
+
+const {
+  Input
+} = proxy;
+
 const {
   Field,
   reduxForm
@@ -38,6 +44,7 @@ const InputField = styled.input`
 
 // styled html input element - props.input -> props
 const SimpleInput = (props) => {
+
   return (
     <InputField
       type="text"
@@ -68,9 +75,7 @@ const TestForm = React.createClass({
           </div>
           <div>
             { /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
-            <Field name="lastName" component={
-                props => <Input {...props.input} {...props.meta} {...props} />
-              } type="text" placeholder="Last Name" label="Last Name"/>
+            <Field name="lastName" component={Input} type="text" placeholder="Last Name" label="Last Name"/>
           </div>
           <div>
             <Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>
diff --git a/spikes/form/redux-form/client/form/input.js b/spikes/form/redux-form/client/form/input.js
index aa668047..c4089b5c 100644
--- a/spikes/form/redux-form/client/form/input.js
+++ b/spikes/form/redux-form/client/form/input.js
@@ -9,6 +9,11 @@ const Label = styled.label`
   color: #464646;
 `;
 
+const Error = styled.label`
+  color: red;
+  float: right;
+`;
+
 const InputField = styled.input`
   margin-bottom: 15px;
   background: #FFFFFF;
@@ -55,7 +60,10 @@ const Input = ({
   style,
   tabIndex,
   type,
-  value
+  value,
+  touched,
+  valid,
+  error
 }) => {
   const _label = label || children;
   const _children = label && children ? children : null;
@@ -65,6 +73,7 @@ const Input = ({
       <Label htmlFor={id}>
         {_label}
       </Label>
+      { touched && !valid && error && <Error>{error}</Error>}
       <InputField
         aria-labelledby={labelledby}
         autoComplete={autoComplete}
diff --git a/spikes/form/redux-form/client/form/proxy.js b/spikes/form/redux-form/client/form/proxy.js
new file mode 100644
index 00000000..7ab46b27
--- /dev/null
+++ b/spikes/form/redux-form/client/form/proxy.js
@@ -0,0 +1,19 @@
+const transformPropsWith = require('transform-props-with');
+const Input = require('./input');
+
+const {
+  default: tx
+} = transformPropsWith;
+
+const flattenProps = props => {
+  const { input, meta, ...rest } = props;
+  return {
+    ...input,
+    ...meta,
+    ...rest
+  };
+}
+
+module.exports = {
+  Input: tx(flattenProps)(Input)
+};
diff --git a/spikes/form/redux-form/package.json b/spikes/form/redux-form/package.json
index b08da256..3643b352 100644
--- a/spikes/form/redux-form/package.json
+++ b/spikes/form/redux-form/package.json
@@ -36,6 +36,7 @@
     "require-dir": "^0.3.1",
     "style-loader": "^0.13.1",
     "styled-components": "^1.2.1",
+    "transform-props-with": "^2.1.0",
     "validator": "^6.2.0",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.2"