]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/techniques/Form.js
clean up manual tracking
[alttp.git] / 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);