Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 8x 41x 53x 6x | import { Field, FieldProps } from 'formik'
import { Label } from '../Label/Label'
export type ToggleProps = {
/** Gives the toggle a unique name. */
name: string
/** Provide label text. */
labelText: string
/** Specify the label for the "on" position. */
labelOn?: string
/** Specify the label for the "off" position. */
labelOff?: string
/** When set Required * will be seen. */
inputRequired?: boolean
/** Provide text that is used alongside the control label for additional help. */
helperText?: string
}
/**
* Toggle, can only be used with Formik.
*/
export const Toggle: React.FC<ToggleProps> = ({
name,
labelText,
labelOn,
labelOff,
helperText,
inputRequired = false,
}) => {
return (
<div className="mb-4">
{labelText && <Label datacy={`${name}`} name={name} labelText={labelText} inputRequired={inputRequired} />}
<Field name={name}>
{(props: FieldProps<boolean>) => (
<div
datacy={`${name}-clickdiv`}
onClick={() => props.form.setFieldValue(name, !props.field.value)}
className="inline-flex cursor-pointer items-center"
>
<div
className={`flex h-7 w-14 items-center ${
props.field.value ? 'bg-yellow-500' : 'bg-gray-300'
} my-1 rounded-full p-1 duration-300 ease-in-out`}
>
<div
datacy={`${name}-ball`}
className={`h-5 w-5 transform rounded-full bg-white shadow-md duration-300 ease-in-out ${
props.field.value ? 'translate-x-7' : ''
}`}
></div>
</div>
<p datacy={`${name}-labeltext`} className="pl-2 text-sm font-semibold">
{props.field.value ? labelOn : labelOff}
</p>
</div>
)}
</Field>
<p datacy={`${name}-helpertext`} className="text-sm text-gray-500">
{helperText}
</p>
</div>
)
}
|