add validation to one input

not sure this is the best approach
This commit is contained in:
Berkeley Martinez
2015-09-21 22:41:12 -07:00
parent 65572d65c8
commit 10b3b8d758
3 changed files with 92 additions and 5 deletions

View File

@ -7,19 +7,57 @@ import {
Well Well
} from 'react-bootstrap'; } from 'react-bootstrap';
const defaults = {
'string': {
value: '',
valid: false,
pristine: true
}
};
function defaultValue(type) {
return defaults[type];
}
function validatePosition(value) {
if (!value && typeof value !== 'string') {
return false;
}
return true;
}
export default contain({ export default contain({
actions: 'jobActions', actions: 'jobActions',
store: 'jobsStore', store: 'jobsStore',
map({ form = {} }) { map({ form = {} }) {
return form; const {
position = defaultValue('string'),
location = defaultValue('string'),
description = defaultValue('string')
} = form;
return {
position,
location,
description
};
} }
}, },
React.createClass({ React.createClass({
displayName: 'NewJob', displayName: 'NewJob',
propTypes: { propTypes: {
jobActions: PropTypes.object jobActions: PropTypes.object,
position: PropTypes.object,
location: PropTypes.object,
description: PropTypes.object
}, },
render() { render() {
const {
jobActions,
position
} = this.props;
return ( return (
<div> <div>
<Row> <Row>
@ -28,10 +66,23 @@ export default contain({
<h1>Create You Job Post</h1> <h1>Create You Job Post</h1>
<form className='form-horizontal'> <form className='form-horizontal'>
<Input <Input
bsStyle={
!position.valid && !position.pristine ?
'error' :
null
}
label='Position' label='Position'
labelClassName='col-xs-2' labelClassName='col-xs-2'
onChange={ ({ target: { value } }) => {
jobActions.handleForm({
name: 'position',
value,
validator: validatePosition
});
}}
placeholder='Position' placeholder='Position'
type='text' type='text'
value={ position.value }
wrapperClassName='col-xs-10' /> wrapperClassName='col-xs-10' />
<Input <Input
label='Location' label='Location'

View File

@ -2,6 +2,7 @@ import { Actions } from 'thundercats';
import debugFactory from 'debug'; import debugFactory from 'debug';
const debug = debugFactory('freecc:jobs:actions'); const debug = debugFactory('freecc:jobs:actions');
const assign = Object.assign;
export default Actions({ export default Actions({
setJobs: null, setJobs: null,
@ -23,7 +24,7 @@ export default Actions({
// if no job found this will be null which is a op noop // if no job found this will be null which is a op noop
return foundJob ? return foundJob ?
Object.assign({}, oldState, { currentJob: foundJob }) : assign({}, oldState, { currentJob: foundJob }) :
null; null;
}; };
}, },
@ -37,6 +38,38 @@ export default Actions({
}, },
closeModal() { closeModal() {
return { showModal: false }; return { showModal: false };
},
handleForm({ name, value, validator = () => {} }) {
if (!name) {
// operation noop
return { replace: null };
}
if (!validator(value)) {
return {
transform(oldState) {
const { oldForm } = oldState;
const newState = assign({}, oldState);
newState.form = assign(
{},
oldForm,
{ [name]: { value, valid: false, pristine: false }}
);
return newState;
}
};
}
return {
transform(oldState) {
const { oldForm } = oldState;
const newState = assign({}, oldState);
newState.form = assign(
{},
oldForm,
{ [name]: { value, valid: true, pristine: false }}
);
return newState;
}
};
} }
}) })
.refs({ displayName: 'JobActions' }) .refs({ displayName: 'JobActions' })

View File

@ -14,12 +14,15 @@ export default Store({ showModal: false })
findJob, findJob,
setError, setError,
openModal, openModal,
closeModal closeModal,
handleForm
} = cat.getActions('JobActions'); } = cat.getActions('JobActions');
const register = createRegistrar(jobsStore); const register = createRegistrar(jobsStore);
register(setter(setJobs)); register(setter(setJobs));
register(transformer(findJob));
register(setter(setError)); register(setter(setError));
register(setter(openModal)); register(setter(openModal));
register(setter(closeModal)); register(setter(closeModal));
register(transformer(findJob));
register(handleForm);
}); });