basic content editing

[alttp.git] / resources / js / components / techniques / Form.js

diff --git a/resources/js/components/techniques/Form.js b/resources/js/components/techniques/Form.js
new file mode 100644 (file)
index 0000000..9bbb511
--- /dev/null
+++ b/resources/js/components/techniques/Form.js
@@ -0,0 +1,132 @@
+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);