Make switches not reliant on Formik
This commit is contained in:
parent
a10191a120
commit
67c6be9f6f
3 changed files with 59 additions and 39 deletions
27
resources/scripts/components/elements/FormikSwitch.tsx
Normal file
27
resources/scripts/components/elements/FormikSwitch.tsx
Normal file
|
@ -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;
|
|
@ -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}>
|
||||
{({ field, form }: FieldProps) => (
|
||||
<input
|
||||
{children
|
||||
|| <input
|
||||
id={uuid}
|
||||
name={name}
|
||||
type={'checkbox'}
|
||||
onChange={() => {
|
||||
form.setFieldTouched(name);
|
||||
form.setFieldValue(field.name, !field.value);
|
||||
}}
|
||||
defaultChecked={field.value}
|
||||
onChange={e => onChange && onChange(e)}
|
||||
defaultChecked={defaultChecked}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
}
|
||||
<label htmlFor={uuid}/>
|
||||
</ToggleContainer>
|
||||
<div className={'w-full'}>
|
||||
|
@ -78,7 +72,6 @@ const Switch = ({ name, label, description }: Props) => {
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
</FormikFieldWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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'}
|
||||
|
|
Loading…
Reference in a new issue