src/features/shared/components/FormContainer/FormContainer.jsx

   1 import React from 'react'
   2 import { ErrorBanner, PageTitle, FormSection, SubmitIndicator } from 'features/shared/components'
   3 import componentClassNames from 'utility/componentClassNames'
   4 import disableAutocomplete from 'utility/disableAutocomplete'
   5
   6 import styles from './FormContainer.scss'
   7 import Tutorial from 'features/tutorial/components/Tutorial'
   8 import {withNamespaces} from 'react-i18next'
   9
  10 class FormContainer extends React.Component {
  11   render() {
  12     const t = this.props.t
  13     return(
  14       <div className={componentClassNames(this, 'flex-container')}>
  15         <PageTitle title={this.props.label} />
  16
  17         <div className={`${styles.main} flex-container`}>
  18           <div className={styles.content}>
  19             <form onSubmit={this.props.onSubmit} {...disableAutocomplete}>
  20               {this.props.children}
  21
  22               <FormSection className={styles.submitSection}>
  23                 {this.props.error &&
  24                   <ErrorBanner
  25                     title={ t('form.errorTitle')}
  26                     error={this.props.error} />}
  27
  28                 {this.props.success &&
  29                   <ErrorBanner
  30                     title={t('form.successTitle')}
  31                     success={this.props.success} />}
  32
  33                 <div className={styles.submit}>
  34                   <button type='submit' className='btn btn-primary' disabled={this.props.submitting || this.props.disabled}>
  35                     {this.props.submitLabel ||  (t('form.submit'))}
  36                   </button>
  37
  38                   {this.props.showSubmitIndicator && this.props.submitting &&
  39                     <SubmitIndicator />
  40                   }
  41                 </div>
  42               </FormSection>
  43             </form>
  44           </div>
  45           <Tutorial types={['TutorialForm']} />
  46         </div>
  47       </div>
  48     )
  49   }
  50 }
  51
  52 export default withNamespaces('translations') (FormContainer)