Make switches not reliant on Formik

Author: DaneEveritt

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,49 +34,44 @@ 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}>
-                        {({ field, form }: FieldProps) => (
-                            <input
-                                id={uuid}
-                                name={name}
-                                type={'checkbox'}
-                                onChange={() => {
-                                    form.setFieldTouched(name);
-                                    form.setFieldValue(field.name, !field.value);
-                                }}
-                                defaultChecked={field.value}
-                            />
-                        )}
-                    </Field>
-                    <label htmlFor={uuid}/>
-                </ToggleContainer>
-                <div className={'w-full'}>
-                    <label
-                        className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
-                        htmlFor={uuid}
-                    >{label}</label>
-                    {description &&
-                    <p className={'input-help'}>
-                        {description}
-                    </p>
-                    }
-                </div>
+        <div className={'flex items-center'}>
+            <ToggleContainer className={'mr-4 flex-none'}>
+                {children
+                || <input
+                    id={uuid}
+                    name={name}
+                    type={'checkbox'}
+                    onChange={e => onChange && onChange(e)}
+                    defaultChecked={defaultChecked}
+                />
+                }
+                <label htmlFor={uuid}/>
+            </ToggleContainer>
+            <div className={'w-full'}>
+                <label
+                    className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                    htmlFor={uuid}
+                >{label}</label>
+                {description &&
+                <p className={'input-help'}>
+                    {description}
+                </p>
+                }
             </div>
-        </FormikFieldWrapper>
+        </div>
     );
 };
 

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'}