--- /dev/null
+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { getTranslation } from '../../helpers/Technique';
+import yup from '../../schema/yup';
+
+const ContentForm = ({
+ errors,
+ handleBlur,
+ handleChange,
+ handleSubmit,
+ onCancel,
+ touched,
+ values,
+}) => {
+ const { t } = useTranslation();
+
+ return <Form noValidate onSubmit={handleSubmit}>
+ <Modal.Body>
+ <Row>
+ <Form.Group as={Col} md={6} controlId="content.title">
+ <Form.Label>{t('content.title')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.title && errors.title)}
+ name="title"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.title || ''}
+ />
+ </Form.Group>
+ </Row>
+ <Form.Group controlId="content.short">
+ <Form.Label>{t('content.short')}</Form.Label>
+ <Form.Control
+ as="textarea"
+ isInvalid={!!(touched.short && errors.short)}
+ name="short"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ rows={3}
+ value={values.short || ''}
+ />
+ </Form.Group>
+ <Form.Group controlId="content.description">
+ <Form.Label>{t('content.description')}</Form.Label>
+ <Form.Control
+ as="textarea"
+ isInvalid={!!(touched.description && errors.description)}
+ name="description"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ rows={10}
+ value={values.description || ''}
+ />
+ </Form.Group>
+ <Form.Group controlId="content.attribution">
+ <Form.Label>{t('content.attribution')}</Form.Label>
+ <Form.Control
+ as="textarea"
+ isInvalid={!!(touched.attribution && errors.attribution)}
+ name="attribution"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ rows={3}
+ value={values.attribution || ''}
+ />
+ </Form.Group>
+ </Modal.Body>
+ <Modal.Footer>
+ {onCancel ?
+ <Button onClick={onCancel} variant="secondary">
+ {t('button.cancel')}
+ </Button>
+ : null}
+ <Button type="submit" variant="primary">
+ {t('button.save')}
+ </Button>
+ </Modal.Footer>
+ </Form>;
+};
+
+ContentForm.propTypes = {
+ errors: PropTypes.shape({
+ attribution: PropTypes.string,
+ description: PropTypes.string,
+ short: PropTypes.string,
+ title: PropTypes.string,
+ }),
+ handleBlur: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleSubmit: PropTypes.func,
+ onCancel: PropTypes.func,
+ touched: PropTypes.shape({
+ attribution: PropTypes.bool,
+ description: PropTypes.bool,
+ short: PropTypes.bool,
+ title: PropTypes.bool,
+ }),
+ values: PropTypes.shape({
+ attribution: PropTypes.string,
+ description: PropTypes.string,
+ short: PropTypes.string,
+ title: PropTypes.string,
+ }),
+};
+
+export default withFormik({
+ displayName: 'ContentForm',
+ enableReinitialize: true,
+ handleSubmit: async (values, actions) => {
+ const { onSubmit } = actions.props;
+ await onSubmit(values);
+ },
+ mapPropsToValues: ({ content, language }) => ({
+ attribution: getTranslation(content, 'attribution', language),
+ description: getTranslation(content, 'description', language),
+ id: (content && content.id) || null,
+ language,
+ short: getTranslation(content, 'short', language),
+ title: getTranslation(content, 'title', language),
+ }),
+ validationSchema: yup.object().shape({
+ attribution: yup.string(),
+ description: yup.string(),
+ short: yup.string(),
+ title: yup.string(),
+ }),
+})(ContentForm);