Make switches not reliant on Formik

resources/scripts/components/elements/FormikSwitch.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import { Field, FieldProps } from 'formik';
+import Switch, { SwitchProps } from '@/components/elements/Switch';
+
+const FormikSwitch = ({ name, label, ...props }: SwitchProps) => {
+    return (
+        <FormikFieldWrapper name={name}>
+            <Field name={name}>
+                {({ field, form }: FieldProps) => (
+                    <Switch
+                        name={name}
+                        label={label}
+                        onChange={() => {
+                            form.setFieldTouched(name);
+                            form.setFieldValue(field.name, !field.value);
+                        }}
+                        defaultChecked={field.value}
+                        {...props}
+                    />
+                )}
+            </Field>
+        </FormikFieldWrapper>
+    );
+};
+
+export default FormikSwitch;

resources/scripts/components/elements/Switch.tsx

@@ -2,8 +2,6 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import v4 from 'uuid/v4';
 import classNames from 'classnames';
-import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import { Field, FieldProps } from 'formik';
 
 const ToggleContainer = styled.div`
     ${tw`relative select-none w-12 leading-normal`};
@@ -36,34 +34,30 @@ const ToggleContainer = styled.div`
     }
 `;
 
-interface Props {
+export interface SwitchProps {
     name: string;
-    description?: string;
     label: string;
-    enabled?: boolean;
+    description?: string;
+    defaultChecked?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    children?: React.ReactNode;
 }
 
-const Switch = ({ name, label, description }: Props) => {
+const Switch = ({ name, label, description, defaultChecked, onChange, children }: SwitchProps) => {
     const uuid = useMemo(() => v4(), []);
 
     return (
-        <FormikFieldWrapper name={name}>
         <div className={'flex items-center'}>
             <ToggleContainer className={'mr-4 flex-none'}>
-                    <Field name={name}>
+                {children
-                        {({ field, form }: FieldProps) => (
+                || <input
-                            <input
                     id={uuid}
                     name={name}
                     type={'checkbox'}
-                                onChange={() => {
+                    onChange={e => onChange && onChange(e)}
-                                    form.setFieldTouched(name);
+                    defaultChecked={defaultChecked}
-                                    form.setFieldValue(field.name, !field.value);
-                                }}
-                                defaultChecked={field.value}
                 />
-                        )}
+                }
-                    </Field>
                 <label htmlFor={uuid}/>
             </ToggleContainer>
             <div className={'w-full'}>
@@ -78,7 +72,6 @@ const Switch = ({ name, label, description }: Props) => {
                 }
             </div>
         </div>
-        </FormikFieldWrapper>
     );
 };
 

resources/scripts/components/server/schedules/EditScheduleModal.tsx

@@ -3,7 +3,7 @@ import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import Field from '@/components/elements/Field';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import Switch from '@/components/elements/Switch';
+import FormikSwitch from '@/components/elements/FormikSwitch';
 import createOrUpdateSchedule from '@/api/server/schedules/createOrUpdateSchedule';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
@@ -56,7 +56,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
                     running. Use the fields above to specify when these tasks should begin running.
                 </p>
                 <div className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
-                    <Switch
+                    <FormikSwitch
                         name={'enabled'}
                         description={'If disabled, this schedule and it\'s associated tasks will not run.'}
                         label={'Enabled'}