dashboard of Bytom
Revision | 07714b907ddcfe635e70e5e377e733ee4c1c9623 (tree) |
---|---|
Time | 2019-07-18 16:27:45 |
Author | Zhiting Lin <zlin035@uott...> |
Commiter | Zhiting Lin |
update the error message on file selection
@@ -1,5 +1,13 @@ | ||
1 | 1 | import React from 'react' |
2 | 2 | import { FieldLabel } from 'features/shared/components' |
3 | +import pick from 'lodash/pick' | |
4 | + | |
5 | +const TEXT_FIELD_PROPS = [ | |
6 | + 'value', | |
7 | + 'onBlur', | |
8 | + 'onFocus', | |
9 | + 'name' | |
10 | +] | |
3 | 11 | |
4 | 12 | class FileField extends React.Component { |
5 | 13 | constructor(props) { |
@@ -13,7 +21,8 @@ class FileField extends React.Component { | ||
13 | 21 | } |
14 | 22 | |
15 | 23 | render() { |
16 | - | |
24 | + const fieldProps = pick(this.props.fieldProps, TEXT_FIELD_PROPS) | |
25 | + const {touched, error} = this.props.fieldProps | |
17 | 26 | return( |
18 | 27 | <div className='form-group'> |
19 | 28 | {this.props.title && <FieldLabel>{this.props.title}</FieldLabel>} |
@@ -21,6 +30,8 @@ class FileField extends React.Component { | ||
21 | 30 | type='file' |
22 | 31 | onChange={this.onChange} |
23 | 32 | /> |
33 | + | |
34 | + {touched && error && <span className='text-danger'><strong>{error}</strong></span>} | |
24 | 35 | {this.props.hint && <span className='help-block'>{this.props.hint}</span>} |
25 | 36 | </div> |
26 | 37 | ) |
@@ -59,6 +59,15 @@ class RestoreKeystore extends React.Component { | ||
59 | 59 | } |
60 | 60 | } |
61 | 61 | |
62 | +const validate = (values, props) => { | |
63 | + const errors = {} | |
64 | + const t = props.t | |
65 | + | |
66 | + if (!values.file) { | |
67 | + errors.file = ( t('form.required')) | |
68 | + } | |
69 | + return errors | |
70 | +} | |
62 | 71 | |
63 | 72 | export default withNamespaces('translations')( connect( |
64 | 73 | () => ({}), |
@@ -68,4 +77,5 @@ export default withNamespaces('translations')( connect( | ||
68 | 77 | )(reduxForm({ |
69 | 78 | form: 'restoreKeystore', |
70 | 79 | fields: ['file'], |
80 | + validate | |
71 | 81 | })(RestoreKeystore))) |