OSDN Git Service

update the error message on file selection
authorZhiting Lin <zlin035@uottawa.ca>
Thu, 18 Jul 2019 07:27:45 +0000 (15:27 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Thu, 18 Jul 2019 07:27:45 +0000 (15:27 +0800)
src/features/shared/components/FileField.jsx
src/features/shared/components/RestoreKeystore/RestoreKeystore.jsx

index 4e342d3..5bbc7ad 100644 (file)
@@ -1,5 +1,13 @@
 import React from 'react'
 import { FieldLabel } from 'features/shared/components'
+import pick from 'lodash/pick'
+
+const TEXT_FIELD_PROPS = [
+  'value',
+  'onBlur',
+  'onFocus',
+  'name'
+]
 
 class FileField extends React.Component {
   constructor(props) {
@@ -13,7 +21,8 @@ class FileField extends React.Component {
   }
 
   render() {
-
+    const fieldProps = pick(this.props.fieldProps, TEXT_FIELD_PROPS)
+    const {touched, error} = this.props.fieldProps
     return(
       <div className='form-group'>
         {this.props.title && <FieldLabel>{this.props.title}</FieldLabel>}
@@ -21,6 +30,8 @@ class FileField extends React.Component {
           type='file'
           onChange={this.onChange}
         />
+
+        {touched && error && <span className='text-danger'><strong>{error}</strong></span>}
         {this.props.hint && <span className='help-block'>{this.props.hint}</span>}
       </div>
     )
index 11a0685..51813c2 100644 (file)
@@ -59,6 +59,15 @@ class RestoreKeystore extends React.Component {
   }
 }
 
+const validate = (values, props) => {
+  const errors = {}
+  const t = props.t
+
+  if (!values.file) {
+    errors.file = ( t('form.required'))
+  }
+  return errors
+}
 
 export default withNamespaces('translations')( connect(
   () => ({}),
@@ -68,4 +77,5 @@ export default withNamespaces('translations')( connect(
 )(reduxForm({
   form: 'restoreKeystore',
   fields: ['file'],
+  validate
 })(RestoreKeystore)))