]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/snes/SettingsForm.js
tracker medallion controler
[alttp.git] / resources / js / components / snes / SettingsForm.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 yup from '../../schema/yup';
8
9 const SettingsForm = ({
10         deviceList,
11         errors,
12         handleBlur,
13         handleChange,
14         handleSubmit,
15         onCancel,
16         settings,
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} sm={3} controlId="snes.proto">
26                                         <Form.Label>{t('snes.proto')}</Form.Label>
27                                         <Form.Select
28                                                 isInvalid={!!(touched.proto && errors.proto)}
29                                                 name="proto"
30                                                 onBlur={handleBlur}
31                                                 onChange={handleChange}
32                                                 value={values.proto || 'ws'}
33                                         >
34                                                 <option value="ws">ws://</option>
35                                                 <option value="wss">wss://</option>
36                                         </Form.Select>
37                                         {touched.proto && errors.proto ?
38                                                 <Form.Control.Feedback type="invalid">
39                                                         {t(errors.proto)}
40                                                 </Form.Control.Feedback>
41                                         : null}
42                                 </Form.Group>
43                                 <Form.Group as={Col} sm={6} controlId="snes.host">
44                                         <Form.Label>{t('snes.host')}</Form.Label>
45                                         <Form.Control
46                                                 isInvalid={!!(touched.host && errors.host)}
47                                                 name="host"
48                                                 onBlur={handleBlur}
49                                                 onChange={handleChange}
50                                                 type="text"
51                                                 value={values.host || 'localhost'}
52                                         />
53                                         {touched.host && errors.host ?
54                                                 <Form.Control.Feedback type="invalid">
55                                                         {t(errors.host)}
56                                                 </Form.Control.Feedback>
57                                         : null}
58                                 </Form.Group>
59                                 <Form.Group as={Col} sm={3} controlId="snes.port">
60                                         <Form.Label>{t('snes.port')}</Form.Label>
61                                         <Form.Control
62                                                 isInvalid={!!(touched.port && errors.port)}
63                                                 min="1"
64                                                 max="65665"
65                                                 name="port"
66                                                 onBlur={handleBlur}
67                                                 onChange={handleChange}
68                                                 type="number"
69                                                 value={values.port || 8080}
70                                         />
71                                         {touched.port && errors.port ?
72                                                 <Form.Control.Feedback type="invalid">
73                                                         {t(errors.port)}
74                                                 </Form.Control.Feedback>
75                                         : null}
76                                 </Form.Group>
77                                 <Form.Group as={Col} sm={12} controlId="snes.device">
78                                         <Form.Label>{t('snes.device')}</Form.Label>
79                                         <Form.Select
80                                                 isInvalid={!!(touched.device && errors.device)}
81                                                 name="device"
82                                                 onBlur={handleBlur}
83                                                 onChange={handleChange}
84                                                 value={values.device || ''}
85                                         >
86                                                 <option value="">Auto</option>
87                                                 {settings.device && !deviceList.includes(settings.device) ?
88                                                         <option value={settings.device}>{settings.device}</option>
89                                                 : null}
90                                                 {deviceList.map(device =>
91                                                         <option key={device} value={device}>{device}</option>
92                                                 )}
93                                         </Form.Select>
94                                         {touched.device && errors.device ?
95                                                 <Form.Control.Feedback type="invalid">
96                                                         {t(errors.device)}
97                                                 </Form.Control.Feedback>
98                                         : null}
99                                 </Form.Group>
100                         </Row>
101                 </Modal.Body>
102                 <Modal.Footer>
103                         {onCancel ?
104                                 <Button onClick={onCancel} variant="secondary">
105                                         {t('button.cancel')}
106                                 </Button>
107                         : null}
108                         <Button type="submit" variant="primary">
109                                 {t('button.save')}
110                         </Button>
111                 </Modal.Footer>
112         </Form>;
113 };
114
115 SettingsForm.propTypes = {
116         deviceList: PropTypes.arrayOf(PropTypes.string),
117         errors: PropTypes.shape({
118                 device: PropTypes.string,
119                 host: PropTypes.string,
120                 port: PropTypes.string,
121                 proto: PropTypes.string,
122         }),
123         handleBlur: PropTypes.func,
124         handleChange: PropTypes.func,
125         handleSubmit: PropTypes.func,
126         onCancel: PropTypes.func,
127         settings: PropTypes.shape({
128                 device: PropTypes.string,
129                 host: PropTypes.string,
130                 port: PropTypes.number,
131                 proto: PropTypes.string,
132         }),
133         touched: PropTypes.shape({
134                 device: PropTypes.bool,
135                 host: PropTypes.bool,
136                 port: PropTypes.bool,
137                 proto: PropTypes.bool,
138         }),
139         values: PropTypes.shape({
140                 device: PropTypes.string,
141                 host: PropTypes.string,
142                 port: PropTypes.number,
143                 proto: PropTypes.string,
144         }),
145 };
146
147 export default withFormik({
148         displayName: 'SettingsForm',
149         enableReinitialize: true,
150         handleSubmit: async (values, actions) => {
151                 const { onSubmit } = actions.props;
152                 onSubmit(values);
153         },
154         mapPropsToValues: ({ settings }) => settings,
155         validationSchema: yup.object().shape({
156                 device: yup.string(),
157                 host: yup.string(),
158                 port: yup.number().min(1).max(65665),
159                 proto: yup.string(),
160         }),
161 })(SettingsForm);