diff --git a/resources/scripts/components/elements/FormikSwitch.tsx b/resources/scripts/components/elements/FormikSwitch.tsx new file mode 100644 index 000000000..4736e0794 --- /dev/null +++ b/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 ( + + + {({ field, form }: FieldProps) => ( + { + form.setFieldTouched(name); + form.setFieldValue(field.name, !field.value); + }} + defaultChecked={field.value} + {...props} + /> + )} + + + ); +}; + +export default FormikSwitch; diff --git a/resources/scripts/components/elements/Switch.tsx b/resources/scripts/components/elements/Switch.tsx index 932d8a67c..db0801aca 100644 --- a/resources/scripts/components/elements/Switch.tsx +++ b/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) => void; + children?: React.ReactNode; } -const Switch = ({ name, label, description }: Props) => { +const Switch = ({ name, label, description, defaultChecked, onChange, children }: SwitchProps) => { const uuid = useMemo(() => v4(), []); return ( - -
- - - {({ field, form }: FieldProps) => ( - { - form.setFieldTouched(name); - form.setFieldValue(field.name, !field.value); - }} - defaultChecked={field.value} - /> - )} - - -
- - {description && -

- {description} -

- } -
+
+ + {children + || onChange && onChange(e)} + defaultChecked={defaultChecked} + /> + } + +
+ + {description && +

+ {description} +

+ }
- +
); }; diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx index 648dd6f51..544944c7b 100644 --- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx +++ b/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
-