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);