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