Make switches not reliant on Formik

This commit is contained in:
Dane Everitt 2020-04-25 17:37:03 -07:00
parent a10191a120
commit 67c6be9f6f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 59 additions and 39 deletions

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

View file

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

View file

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