add validation to one input
not sure this is the best approach
This commit is contained in:
@ -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'
|
||||||
|
@ -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' })
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user