Add functionality to transform props from redux-form to ui form components

This commit is contained in:
JUDIT GRESKOVITS 2017-01-06 12:51:33 +00:00
parent 9b67417afd
commit 3a18bedb45
5 changed files with 48 additions and 8 deletions

View File

@ -2,11 +2,17 @@ const React = require('react');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
const ReduxForm = require('redux-form'); const ReduxForm = require('redux-form');
const Styled = require('styled-components'); const Styled = require('styled-components');
const Input = require('./input'); // const Input = require('./input');
const InputRfProps = require('./inputRfProps'); // const InputRfProps = require('./inputRfProps');
const validate = require('./validate'); const validate = require('./validate');
const Form = require('./shared').form; const Form = require('./shared').form;
const proxy = require('./proxy');
const {
Input
} = proxy;
const { const {
browserHistory browserHistory
} = ReactRouter; } = ReactRouter;
@ -24,7 +30,7 @@ const FormTwo = (props) => {
const { handleSubmit } = props const { handleSubmit } = props
return ( return (
<Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}> <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> <div>
<label>Sex</label> <label>Sex</label>
<Field name="sex" component={ <Field name="sex" component={

View File

@ -1,11 +1,17 @@
const React = require('react'); const React = require('react');
const ReduxForm = require('redux-form'); const ReduxForm = require('redux-form');
const Styled = require('styled-components'); const Styled = require('styled-components');
const Input = require('./input'); // const Input = require('./input');
const InputRfProps = require('./inputRfProps'); const InputRfProps = require('./inputRfProps');
const validate = require('./validate'); const validate = require('./validate');
const Form = require('./shared').form; const Form = require('./shared').form;
const proxy = require('./proxy');
const {
Input
} = proxy;
const { const {
Field, Field,
reduxForm reduxForm
@ -38,6 +44,7 @@ const InputField = styled.input`
// styled html input element - props.input -> props // styled html input element - props.input -> props
const SimpleInput = (props) => { const SimpleInput = (props) => {
return ( return (
<InputField <InputField
type="text" type="text"
@ -68,9 +75,7 @@ const TestForm = React.createClass({
</div> </div>
<div> <div>
{ /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ } { /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
<Field name="lastName" component={ <Field name="lastName" component={Input} type="text" placeholder="Last Name" label="Last Name"/>
props => <Input {...props.input} {...props.meta} {...props} />
} type="text" placeholder="Last Name" label="Last Name"/>
</div> </div>
<div> <div>
<Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/> <Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>

View File

@ -9,6 +9,11 @@ const Label = styled.label`
color: #464646; color: #464646;
`; `;
const Error = styled.label`
color: red;
float: right;
`;
const InputField = styled.input` const InputField = styled.input`
margin-bottom: 15px; margin-bottom: 15px;
background: #FFFFFF; background: #FFFFFF;
@ -55,7 +60,10 @@ const Input = ({
style, style,
tabIndex, tabIndex,
type, type,
value value,
touched,
valid,
error
}) => { }) => {
const _label = label || children; const _label = label || children;
const _children = label && children ? children : null; const _children = label && children ? children : null;
@ -65,6 +73,7 @@ const Input = ({
<Label htmlFor={id}> <Label htmlFor={id}>
{_label} {_label}
</Label> </Label>
{ touched && !valid && error && <Error>{error}</Error>}
<InputField <InputField
aria-labelledby={labelledby} aria-labelledby={labelledby}
autoComplete={autoComplete} autoComplete={autoComplete}

View File

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

View File

@ -36,6 +36,7 @@
"require-dir": "^0.3.1", "require-dir": "^0.3.1",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"styled-components": "^1.2.1", "styled-components": "^1.2.1",
"transform-props-with": "^2.1.0",
"validator": "^6.2.0", "validator": "^6.2.0",
"webpack": "^1.13.2", "webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2" "webpack-dev-server": "^1.16.2"