resources/js/components/techniques/Form.js

   1 import { withFormik } from 'formik';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import { getTranslation } from '../../helpers/Technique';
   8 import yup from '../../schema/yup';
   9
  10 const ContentForm = ({
  11         errors,
  12         handleBlur,
  13         handleChange,
  14         handleSubmit,
  15         onCancel,
  16         touched,
  17         values,
  18 }) => {
  19         const { t } = useTranslation();
  20
  21         return <Form noValidate onSubmit={handleSubmit}>
  22                 <Modal.Body>
  23                         <Row>
  24                                 <Form.Group as={Col} md={6} controlId="content.title">
  25                                         <Form.Label>{t('content.title')}</Form.Label>
  26                                         <Form.Control
  27                                                 isInvalid={!!(touched.title && errors.title)}
  28                                                 name="title"
  29                                                 onBlur={handleBlur}
  30                                                 onChange={handleChange}
  31                                                 type="text"
  32                                                 value={values.title || ''}
  33                                         />
  34                                 </Form.Group>
  35                         </Row>
  36                         <Form.Group controlId="content.short">
  37                                 <Form.Label>{t('content.short')}</Form.Label>
  38                                 <Form.Control
  39                                         as="textarea"
  40                                         isInvalid={!!(touched.short && errors.short)}
  41                                         name="short"
  42                                         onBlur={handleBlur}
  43                                         onChange={handleChange}
  44                                         rows={3}
  45                                         value={values.short || ''}
  46                                 />
  47                         </Form.Group>
  48                         <Form.Group controlId="content.description">
  49                                 <Form.Label>{t('content.description')}</Form.Label>
  50                                 <Form.Control
  51                                         as="textarea"
  52                                         isInvalid={!!(touched.description && errors.description)}
  53                                         name="description"
  54                                         onBlur={handleBlur}
  55                                         onChange={handleChange}
  56                                         rows={10}
  57                                         value={values.description || ''}
  58                                 />
  59                         </Form.Group>
  60                         <Form.Group controlId="content.attribution">
  61                                 <Form.Label>{t('content.attribution')}</Form.Label>
  62                                 <Form.Control
  63                                         as="textarea"
  64                                         isInvalid={!!(touched.attribution && errors.attribution)}
  65                                         name="attribution"
  66                                         onBlur={handleBlur}
  67                                         onChange={handleChange}
  68                                         rows={3}
  69                                         value={values.attribution || ''}
  70                                 />
  71                         </Form.Group>
  72                 </Modal.Body>
  73                 <Modal.Footer>
  74                         {onCancel ?
  75                                 <Button onClick={onCancel} variant="secondary">
  76                                         {t('button.cancel')}
  77                                 </Button>
  78                         : null}
  79                         <Button type="submit" variant="primary">
  80                                 {t('button.save')}
  81                         </Button>
  82                 </Modal.Footer>
  83         </Form>;
  84 };
  85
  86 ContentForm.propTypes = {
  87         errors: PropTypes.shape({
  88                 attribution: PropTypes.string,
  89                 description: PropTypes.string,
  90                 short: PropTypes.string,
  91                 title: PropTypes.string,
  92         }),
  93         handleBlur: PropTypes.func,
  94         handleChange: PropTypes.func,
  95         handleSubmit: PropTypes.func,
  96         onCancel: PropTypes.func,
  97         touched: PropTypes.shape({
  98                 attribution: PropTypes.bool,
  99                 description: PropTypes.bool,
 100                 short: PropTypes.bool,
 101                 title: PropTypes.bool,
 102         }),
 103         values: PropTypes.shape({
 104                 attribution: PropTypes.string,
 105                 description: PropTypes.string,
 106                 short: PropTypes.string,
 107                 title: PropTypes.string,
 108         }),
 109 };
 110
 111 export default withFormik({
 112         displayName: 'ContentForm',
 113         enableReinitialize: true,
 114         handleSubmit: async (values, actions) => {
 115                 const { onSubmit } = actions.props;
 116                 await onSubmit(values);
 117         },
 118         mapPropsToValues: ({ content, language }) => ({
 119                 attribution: getTranslation(content, 'attribution', language),
 120                 description: getTranslation(content, 'description', language),
 121                 id: (content && content.id) || null,
 122                 language,
 123                 short: getTranslation(content, 'short', language),
 124                 title: getTranslation(content, 'title', language),
 125         }),
 126         validationSchema: yup.object().shape({
 127                 attribution: yup.string(),
 128                 description: yup.string(),
 129                 short: yup.string(),
 130                 title: yup.string(),
 131         }),
 132 })(ContentForm);