Add redux-form spike: one page form, multi page form, validation, errors
This commit is contained in:
JUDIT GRESKOVITS
parent
94ae410220
commit
8160896e50
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"presets": [
|
||||
"react",
|
||||
"es2015"
|
||||
],
|
||||
"plugins": [
|
||||
["transform-object-rest-spread", {
|
||||
"useBuiltIns": true
|
||||
}],
|
||||
"add-module-exports",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"react-hot-loader/babel"
|
||||
],
|
||||
"sourceMaps": "both"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"extends": "semistandard",
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"babel",
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"generator-star-spacing": 0,
|
||||
"babel/generator-star-spacing": 1,
|
||||
"space-before-function-paren": [2, "never"],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
"object-curly-newline": ["error", {
|
||||
"minProperties": 1
|
||||
}],
|
||||
"sort-vars": ["error", {
|
||||
"ignoreCase": true
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
npm-debug.log
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
const Centered = styled.div`
|
||||
width: 300px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const PrettyLink = styled(Link)`
|
||||
text-transform: uppercase;
|
||||
padding: 0 10px;
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const App = React.createClass({
|
||||
render: function() {
|
||||
const {
|
||||
children
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Centered>
|
||||
<PrettyLink to="form" activeStyle={{ fontWeight: "bold" }}>Form</PrettyLink>
|
||||
<PrettyLink to="form-one" activeStyle={{ fontWeight: "bold" }}>Multi page form</PrettyLink>
|
||||
</Centered>
|
||||
<div>
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const Home = ({}) => <Centered><p>Select a form!</p></Centered>;
|
||||
|
||||
module.exports = {
|
||||
App,
|
||||
Home
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
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 validate = require('./validate');
|
||||
const Form = require('./shared').form;
|
||||
|
||||
const {
|
||||
browserHistory
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
Field,
|
||||
reduxForm
|
||||
} = ReduxForm;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const FormOne = (props) => {
|
||||
const { handleSubmit } = props;
|
||||
return (
|
||||
<Form onSubmit={handleSubmit(() => {browserHistory.push('/form-two')})}>
|
||||
<Field name="firstName" type="text" component={InputRfProps} label="First Name"/>
|
||||
<Field name="lastName" type="text" component={InputRfProps} label="Last Name"/>
|
||||
<div>
|
||||
<button type="submit" className="next">Next</button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = reduxForm({
|
||||
form: 'multiform',
|
||||
destroyOnUnmount: false,
|
||||
forceUnregisterOnUnmount: true,
|
||||
validate
|
||||
})(FormOne)
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
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 validate = require('./validate');
|
||||
const Form = require('./shared').form;
|
||||
|
||||
const {
|
||||
browserHistory
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
Field,
|
||||
reduxForm
|
||||
} = ReduxForm;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const FormThree = (props) => {
|
||||
const { handleSubmit, pristine, submitting } = props
|
||||
return (
|
||||
<Form onSubmit={
|
||||
e => {
|
||||
e.preventDefault();
|
||||
browserHistory.push('/form');
|
||||
}}>
|
||||
<div>
|
||||
<label>Favorite Color</label>
|
||||
<Field name="favoriteColor" component="select">
|
||||
<option></option>
|
||||
<option value="ff0000">Red</option>
|
||||
<option value="00ff00">Green</option>
|
||||
<option value="0000ff">Blue</option>
|
||||
</Field>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="employed">Employed</label>
|
||||
<div>
|
||||
<Field name="employed" id="employed" component="input" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Notes</label>
|
||||
<div>
|
||||
<Field name="notes" component="textarea" placeholder="Notes"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" className="previous" onClick={
|
||||
e => {
|
||||
e.preventDefault();
|
||||
browserHistory.push('/form-two');
|
||||
}}>Previous</button>
|
||||
<button type="submit" disabled={pristine || submitting}>Submit</button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = reduxForm({
|
||||
form: 'multiform',
|
||||
destroyOnUnmount: false,
|
||||
forceUnregisterOnUnmount: true,
|
||||
validate
|
||||
})(FormThree)
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
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 validate = require('./validate');
|
||||
const Form = require('./shared').form;
|
||||
|
||||
const {
|
||||
browserHistory
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
Field,
|
||||
reduxForm
|
||||
} = ReduxForm;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const FormTwo = (props) => {
|
||||
const { handleSubmit } = props
|
||||
return (
|
||||
<Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}>
|
||||
<Field name="email" type="email" component={InputRfProps} label="Email"/>
|
||||
<div>
|
||||
<label>Sex</label>
|
||||
<Field name="sex" component={
|
||||
({ meta: { touched, error } }) => touched && error ?
|
||||
<span> {error}</span> : false
|
||||
}/>
|
||||
<div>
|
||||
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
|
||||
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" className="previous" onClick={
|
||||
e => {
|
||||
e.preventDefault();
|
||||
browserHistory.push('/form-one');
|
||||
}}>Previous</button>
|
||||
<button type="submit" className="next">Next</button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = reduxForm({
|
||||
form: 'multiform',
|
||||
destroyOnUnmount: false,
|
||||
forceUnregisterOnUnmount: true,
|
||||
validate
|
||||
})(FormTwo)
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
const React = require('react');
|
||||
const ReduxForm = require('redux-form');
|
||||
const Styled = require('styled-components');
|
||||
const Input = require('./input');
|
||||
const InputRfProps = require('./inputRfProps');
|
||||
const validate = require('./validate');
|
||||
const Form = require('./shared').form;
|
||||
|
||||
const {
|
||||
Field,
|
||||
reduxForm
|
||||
} = ReduxForm;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const InputField = styled.input`
|
||||
margin-bottom: 15px;
|
||||
background: #FFFFFF;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #3B46CC;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
border-color: 1px solid #3B46CC;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
// styled html input element - props.input -> props
|
||||
const SimpleInput = (props) => {
|
||||
return (
|
||||
<InputField
|
||||
type="text"
|
||||
{...props.input}
|
||||
placeholder={props.placeholder} />
|
||||
);
|
||||
}
|
||||
|
||||
const onSubmit = values => {
|
||||
}
|
||||
|
||||
const TestForm = React.createClass({
|
||||
render: function() {
|
||||
const {
|
||||
handleSubmit,
|
||||
pristine,
|
||||
reset,
|
||||
submitting
|
||||
} = this.props;
|
||||
return (
|
||||
<Form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<label>First Name</label>
|
||||
<div>
|
||||
{ /* styled html input */ }
|
||||
<Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
|
||||
</div>
|
||||
</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"/>
|
||||
</div>
|
||||
<div>
|
||||
<Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>
|
||||
</div>
|
||||
<div>
|
||||
{ /* Input component from @ui - modified to expect props.input */ }
|
||||
<Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sex</label>
|
||||
<div>
|
||||
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
|
||||
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Favorite Color</label>
|
||||
<div>
|
||||
<Field name="favoriteColor" component="select">
|
||||
<option></option>
|
||||
<option value="ff0000">Red</option>
|
||||
<option value="00ff00">Green</option>
|
||||
<option value="0000ff">Blue</option>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="employed">Employed</label>
|
||||
<div>
|
||||
<Field name="employed" id="employed" component="input" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Notes</label>
|
||||
<div>
|
||||
<Field name="notes" component="textarea"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" disabled={pristine || submitting}>Submit</button>
|
||||
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = reduxForm({
|
||||
form: 'test-form',
|
||||
// validate,
|
||||
destroyOnUnmount: false
|
||||
})(TestForm);
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Label = styled.label`
|
||||
color: #464646;
|
||||
`;
|
||||
|
||||
const InputField = styled.input`
|
||||
margin-bottom: 15px;
|
||||
background: #FFFFFF;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #3B46CC;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
border-color: 1px solid #3B46CC;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Input = ({
|
||||
autoComplete,
|
||||
autoFocus,
|
||||
children,
|
||||
className,
|
||||
disabled = false,
|
||||
form,
|
||||
id,
|
||||
inputMode,
|
||||
label,
|
||||
labelledby,
|
||||
list,
|
||||
name,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
pattern,
|
||||
placeholder,
|
||||
readOnly,
|
||||
required,
|
||||
selectionDirection,
|
||||
spellCheck,
|
||||
style,
|
||||
tabIndex,
|
||||
type,
|
||||
value
|
||||
}) => {
|
||||
const _label = label || children;
|
||||
const _children = label && children ? children : null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label htmlFor={id}>
|
||||
{_label}
|
||||
</Label>
|
||||
<InputField
|
||||
aria-labelledby={labelledby}
|
||||
autoComplete={autoComplete}
|
||||
autoFocus={autoFocus}
|
||||
disabled={disabled}
|
||||
form={form}
|
||||
id={id}
|
||||
inputMode={inputMode}
|
||||
list={list}
|
||||
name={name}
|
||||
onChange={onChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
pattern={pattern}
|
||||
placeholder={placeholder}
|
||||
readOnly={readOnly}
|
||||
required={required}
|
||||
selectionDirection={selectionDirection}
|
||||
spellCheck={spellCheck}
|
||||
tabIndex={tabIndex}
|
||||
type={type}
|
||||
value={value}
|
||||
/>
|
||||
{_children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Input.propTypes = {
|
||||
autoComplete: React.PropTypes.string,
|
||||
autoFocus: React.PropTypes.bool,
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
form: React.PropTypes.string,
|
||||
id: React.PropTypes.string,
|
||||
inputMode: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
labelledby: React.PropTypes.string,
|
||||
list: React.PropTypes.string,
|
||||
name: React.PropTypes.string,
|
||||
onChange: React.PropTypes.func,
|
||||
onFocus: React.PropTypes.func,
|
||||
onBlur: React.PropTypes.func,
|
||||
pattern: React.PropTypes.string,
|
||||
placeholder: React.PropTypes.string,
|
||||
readOnly: React.PropTypes.bool,
|
||||
required: React.PropTypes.bool,
|
||||
selectionDirection: React.PropTypes.string,
|
||||
spellCheck: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
tabIndex: React.PropTypes.string,
|
||||
type: React.PropTypes.string,
|
||||
value: React.PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Input;
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Label = styled.label`
|
||||
color: #464646;
|
||||
`;
|
||||
|
||||
const Error = styled.label`
|
||||
color: red;
|
||||
float: right;
|
||||
`;
|
||||
|
||||
const InputField = styled.input`
|
||||
margin-bottom: 15px;
|
||||
background: #FFFFFF;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #3B46CC;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
border-color: 1px solid #3B46CC;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const InputRfProps = ({
|
||||
autoComplete,
|
||||
autoFocus,
|
||||
children,
|
||||
className,
|
||||
disabled = false,
|
||||
form,
|
||||
id,
|
||||
inputMode,
|
||||
label,
|
||||
labelledby,
|
||||
list,
|
||||
pattern,
|
||||
placeholder,
|
||||
readOnly,
|
||||
required,
|
||||
selectionDirection,
|
||||
spellCheck,
|
||||
style,
|
||||
tabIndex,
|
||||
type,
|
||||
input,
|
||||
meta
|
||||
}) => {
|
||||
const _label = label || children;
|
||||
const _children = label && children ? children : null;
|
||||
const { onChange, onBlur, onDragStart, onDrop, onFocus, name, value } = input;
|
||||
const { error, valid, touched } = meta;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label htmlFor={id}>
|
||||
{_label}
|
||||
</Label>
|
||||
{ touched && !valid && error && <Error>{error}</Error>}
|
||||
<InputField
|
||||
aria-labelledby={labelledby}
|
||||
autoComplete={autoComplete}
|
||||
autoFocus={autoFocus}
|
||||
disabled={disabled}
|
||||
form={form}
|
||||
id={id}
|
||||
inputMode={inputMode}
|
||||
list={list}
|
||||
name={name}
|
||||
onChange={onChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
pattern={pattern}
|
||||
placeholder={placeholder}
|
||||
readOnly={readOnly}
|
||||
required={required}
|
||||
selectionDirection={selectionDirection}
|
||||
spellCheck={spellCheck}
|
||||
tabIndex={tabIndex}
|
||||
type={type}
|
||||
value={value}
|
||||
/>
|
||||
{_children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
InputRfProps.propTypes = {
|
||||
autoComplete: React.PropTypes.string,
|
||||
autoFocus: React.PropTypes.bool,
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
form: React.PropTypes.string,
|
||||
id: React.PropTypes.string,
|
||||
inputMode: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
labelledby: React.PropTypes.string,
|
||||
list: React.PropTypes.string,
|
||||
pattern: React.PropTypes.string,
|
||||
placeholder: React.PropTypes.string,
|
||||
readOnly: React.PropTypes.bool,
|
||||
required: React.PropTypes.bool,
|
||||
selectionDirection: React.PropTypes.string,
|
||||
spellCheck: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
tabIndex: React.PropTypes.string,
|
||||
type: React.PropTypes.string,
|
||||
input: React.PropTypes.object,
|
||||
meta: React.PropTypes.object,
|
||||
};
|
||||
|
||||
module.exports = InputRfProps;
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
const React = require('react');
|
||||
const ReduxForm = require('redux-form');
|
||||
const Styled = require('styled-components');
|
||||
const Input = require('./input');
|
||||
const InputRfProps = require('./inputRfProps');
|
||||
|
||||
const {
|
||||
Field,
|
||||
reduxForm
|
||||
} = ReduxForm;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Form = styled.form`
|
||||
margin: 30px auto;
|
||||
width: 300px;
|
||||
`;
|
||||
|
||||
const InputField = styled.input`
|
||||
margin-bottom: 15px;
|
||||
background: #FFFFFF;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #3B46CC;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
border-color: 1px solid #3B46CC;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
// styled html input element - props.input -> props
|
||||
const SimpleInput = (props) => {
|
||||
return (
|
||||
<InputField
|
||||
type="text"
|
||||
{...props.input}
|
||||
placeholder={props.placeholder} />
|
||||
);
|
||||
}
|
||||
|
||||
const TestMultiform = React.createClass({
|
||||
render: function() {
|
||||
const {
|
||||
handleSubmit,
|
||||
pristine,
|
||||
reset,
|
||||
submitting
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>First Name</label>
|
||||
<div>
|
||||
{ /* styled html input */ }
|
||||
<Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
|
||||
</div>
|
||||
</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"/>
|
||||
</div>
|
||||
<div>
|
||||
<Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>
|
||||
</div>
|
||||
<div>
|
||||
{ /* Input component from @ui - modified to expect props.input */ }
|
||||
<Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sex</label>
|
||||
<div>
|
||||
<label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
|
||||
<label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Favorite Color</label>
|
||||
<div>
|
||||
<Field name="favoriteColor" component="select">
|
||||
<option></option>
|
||||
<option value="ff0000">Red</option>
|
||||
<option value="00ff00">Green</option>
|
||||
<option value="0000ff">Blue</option>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="employed">Employed</label>
|
||||
<div>
|
||||
<Field name="employed" id="employed" component="input" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Notes</label>
|
||||
<div>
|
||||
<Field name="notes" component="textarea"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" disabled={pristine || submitting}>Submit</button>
|
||||
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = reduxForm({
|
||||
form: 'test-multiform'
|
||||
})(TestMultiform);
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Form = styled.form`
|
||||
margin: 30px auto;
|
||||
width: 300px;
|
||||
`;
|
||||
|
||||
module.exports = {
|
||||
form: Form
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const SubmissionError = require('redux-form').SubmissionError;
|
||||
|
||||
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
|
||||
|
||||
function submit(values) {
|
||||
return sleep(1000) // simulate server latency
|
||||
.then(() => {
|
||||
if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
|
||||
throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
|
||||
} else if (values.password !== 'redux-form') {
|
||||
throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
|
||||
} else {
|
||||
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = submit;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
const validator = require('validator');
|
||||
|
||||
const validate = values => {
|
||||
console.log('validate values = ', values);
|
||||
const errors = {};
|
||||
if (!values.firstName) {
|
||||
errors.firstName = 'Required';
|
||||
}
|
||||
if (!values.lastName) {
|
||||
errors.lastName = 'Required';
|
||||
}
|
||||
if (!values.email) {
|
||||
errors.email = 'Required';
|
||||
} else if (!validator.isEmail(values.email)) {
|
||||
errors.email = 'Invalid email address';
|
||||
}
|
||||
if (!values.sex) {
|
||||
errors.sex = 'Required';
|
||||
}
|
||||
if (!values.favoriteColor) {
|
||||
errors.favoriteColor = 'Required';
|
||||
}
|
||||
console.log('errors = ', errors);
|
||||
return errors;
|
||||
}
|
||||
|
||||
module.exports = validate;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
const ReactDOM = require('react-dom');
|
||||
const React = require('react');
|
||||
const store = require('./store')();
|
||||
const nes = require('nes/dist/client');
|
||||
|
||||
const {
|
||||
Client
|
||||
} = nes;
|
||||
|
||||
const client = new Client(`ws://${document.location.host}`);
|
||||
|
||||
client.connect((err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
console.log('connected');
|
||||
|
||||
client.subscribe('/stats/5', (update, flag) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_STATS',
|
||||
payload: update
|
||||
})
|
||||
}, (err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
console.log('subscribed');
|
||||
});
|
||||
});
|
||||
|
||||
const render = () => {
|
||||
const Root = require('./root');
|
||||
|
||||
ReactDOM.render(
|
||||
<Root store={store} />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', render);
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router');
|
||||
const AppHome = require('./app');
|
||||
const Form = require('./form/form');
|
||||
const Multiform = require('./form/multiform');
|
||||
const FormOne = require('./form/form-one');
|
||||
const FormTwo = require('./form/form-two');
|
||||
const FormThree = require('./form/form-three');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
const {
|
||||
Provider
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
Router,
|
||||
Route,
|
||||
IndexRoute,
|
||||
browserHistory
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
App,
|
||||
Home
|
||||
} = AppHome;
|
||||
|
||||
module.exports = ({
|
||||
store
|
||||
}) => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<Provider store={store}>
|
||||
<Router history={browserHistory}>
|
||||
<Route path="/" component={App}>
|
||||
<IndexRoute component={Home} />
|
||||
<Route path="form" component={Form} />
|
||||
<Route path="form-one" component={FormOne} />
|
||||
<Route path="form-two" component={FormTwo} />
|
||||
<Route path="form-three" component={FormThree} />
|
||||
</Route>
|
||||
</Router>
|
||||
</Provider>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
const takeRight = require('lodash.takeright');
|
||||
const redux = require('redux');
|
||||
const reduxFormReducer = require('redux-form').reducer;
|
||||
|
||||
const {
|
||||
createStore,
|
||||
compose,
|
||||
combineReducers,
|
||||
applyMiddleware
|
||||
} = redux;
|
||||
|
||||
/*const reducer = (state, action) => {
|
||||
if (action.type !== 'UPDATE_STATS') {
|
||||
return state;
|
||||
}
|
||||
|
||||
const data = (state.data || []).concat([action.payload]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
data: takeRight(data, 50)
|
||||
};
|
||||
};*/
|
||||
|
||||
const reducer = combineReducers({ form: reduxFormReducer });
|
||||
|
||||
module.exports = (state = Object.freeze({})) => {
|
||||
return createStore(reducer, state, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
|
||||
};
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"name": "chartjs-graphing-spike",
|
||||
"private": true,
|
||||
"license": "private",
|
||||
"main": "server/index.js",
|
||||
"dependencies": {
|
||||
"autoprefixer": "^6.5.1",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.16.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-react-hmre": "^1.1.1",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"build-array": "^1.0.0",
|
||||
"component-emitter": "^1.2.1",
|
||||
"css-loader": "^0.25.0",
|
||||
"hapi": "^15.2.0",
|
||||
"hapi-webpack-dev-plugin": "^1.1.4",
|
||||
"inert": "^4.0.2",
|
||||
"lodash.takeright": "^4.1.1",
|
||||
"nes": "^6.3.1",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-modules-values": "^1.2.2",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"react-redux": "^4.4.5",
|
||||
"react-router": "^3.0.0",
|
||||
"redux": "^3.6.0",
|
||||
"redux-form": "^6.4.3",
|
||||
"require-dir": "^0.3.1",
|
||||
"style-loader": "^0.13.1",
|
||||
"styled-components": "^1.2.1",
|
||||
"validator": "^6.2.0",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-register": "^6.16.3",
|
||||
"eslint": "^3.8.1",
|
||||
"eslint-config-semistandard": "^7.0.0",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
"eslint-plugin-babel": "^3.3.0",
|
||||
"eslint-plugin-promise": "^3.3.0",
|
||||
"eslint-plugin-react": "^6.4.1",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"json-loader": "^0.5.4"
|
||||
},
|
||||
"ava": {
|
||||
"require": [
|
||||
"babel-register"
|
||||
],
|
||||
"babel": "inherit"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# redux-form
|
||||
|
||||
## summary
|
||||
|
||||
- [x] form values in redux store
|
||||
- [x] clear / retain values in store
|
||||
- [x] pre-populate form
|
||||
- [x] validation field / form level
|
||||
- [x] multi page form
|
||||
- [x] custom form fields
|
||||
- [?] requires updates to existing ui components
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
const requireDir = require('require-dir');
|
||||
const plugins = require('./plugins');
|
||||
const routes = requireDir('./routes');
|
||||
const Hapi = require('hapi');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const server = new Hapi.Server();
|
||||
|
||||
server.connection({
|
||||
host: 'localhost',
|
||||
port: 8000
|
||||
});
|
||||
|
||||
server.register(plugins, (err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
Object.keys(routes).forEach((name) => {
|
||||
routes[name](server);
|
||||
});
|
||||
|
||||
server.start((err) => {
|
||||
server.connections.forEach((conn) => {
|
||||
console.log(`started at: ${conn.info.uri}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
const Emitter = require('component-emitter');
|
||||
|
||||
const cdm = {};
|
||||
|
||||
module.exports = (server) => ({
|
||||
on: (id) => {
|
||||
console.log('on', cdm[id]);
|
||||
if (cdm[id] && (cdm[id].sockets > 0)) {
|
||||
cdm[id].sockets +=1;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let messageId = 0;
|
||||
const interval = setInterval(() => {
|
||||
console.log(`publishing /stats/${id}`);
|
||||
|
||||
server.publish(`/stats/${id}`, {
|
||||
when: new Date().getTime(),
|
||||
cpu: Math.random() * 100
|
||||
});
|
||||
}, 45);
|
||||
|
||||
cdm[id] = {
|
||||
interval,
|
||||
sockets: 1
|
||||
};
|
||||
},
|
||||
off: (id) => {
|
||||
if (!(cdm[id].sockets -= 1)) {
|
||||
clearInterval(cdm[id].interval);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
const cfg = require('../webpack.config.js');
|
||||
|
||||
module.exports = [
|
||||
require('inert'),
|
||||
require('nes'), {
|
||||
register: require('hapi-webpack-dev-plugin'),
|
||||
options: {
|
||||
compiler: webpack(cfg),
|
||||
devIndex: path.join(__dirname, '../static')
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = (server) => {
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/',
|
||||
handler: (request, reply) => {
|
||||
reply.file(path.join(__dirname, '../../static/index.html'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const Metric = require('../metric');
|
||||
|
||||
module.exports = (server) => {
|
||||
const metric = Metric(server);
|
||||
|
||||
server.subscription('/stats/{id}', {
|
||||
onSubscribe: (socket, path, params, next) => {
|
||||
console.log('onSubscribe');
|
||||
metric.on(params.id);
|
||||
next();
|
||||
},
|
||||
onUnsubscribe: (socket, path, params, next) => {
|
||||
console.log('onUnsubscribe');
|
||||
metric.off(params.id);
|
||||
next();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = (server) => {
|
||||
// server.route({
|
||||
// method: 'GET',
|
||||
// path: '/{param*}',
|
||||
// handler: {
|
||||
// directory: {
|
||||
// path: path.join(__dirname, '../../static'),
|
||||
// redirectToSlash: true,
|
||||
// index: true
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const Pkg = require('../../package.json');
|
||||
|
||||
const internals = {
|
||||
response: {
|
||||
version: Pkg.version
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = (server) => {
|
||||
server.route({
|
||||
method: 'GET',
|
||||
path: '/ops/version',
|
||||
config: {
|
||||
description: 'Returns the version of the server',
|
||||
handler: (request, reply) => reply(internals.response)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>React Boilerplate</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'></div>
|
||||
<script src='/static/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
const config = {
|
||||
debug: true,
|
||||
devtool: 'source-map',
|
||||
context: path.join(__dirname, './client'),
|
||||
app: path.join(__dirname, './client/index.js'),
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:8888',
|
||||
'webpack/hot/only-dev-server',
|
||||
'react-hot-loader/patch',
|
||||
'./index.js'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, './static'),
|
||||
publicPath: '/static/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin()
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /js?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['babel']
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['json']
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
const devServer = {
|
||||
hot: true,
|
||||
compress: true,
|
||||
lazy: false,
|
||||
publicPath: config.output.publicPath,
|
||||
historyApiFallback: {
|
||||
index: './static/index.html'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Object.assign({
|
||||
devServer
|
||||
}, config);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue