86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
|
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`};
|
||
|
|
|
||
|
|
& > input[type="checkbox"] {
|
||
|
|
${tw`hidden`};
|
||
|
|
|
||
|
|
&:checked + label {
|
||
|
|
${tw`bg-primary-500 border-primary-700 shadow-none`};
|
||
|
|
}
|
||
|
|
|
||
|
|
&:checked + label:before {
|
||
|
|
right: 0.125rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > label {
|
||
|
|
${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
|
||
|
|
transition: all 75ms linear;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
${tw`absolute block bg-white border h-5 w-5 rounded-full`};
|
||
|
|
top: 0.125rem;
|
||
|
|
right: calc(50% + 0.125rem);
|
||
|
|
//width: 1.25rem;
|
||
|
|
//height: 1.25rem;
|
||
|
|
content: "";
|
||
|
|
transition: all 75ms ease-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
name: string;
|
||
|
|
description?: string;
|
||
|
|
label: string;
|
||
|
|
enabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Switch = ({ name, label, description }: Props) => {
|
||
|
|
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>
|
||
|
|
</FormikFieldWrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Switch;
|