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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 90x 441x 441x 441x 441x 9x 9x 9x 441x 4x 953x 9x | import { Field } from 'formik'
import { useState } from 'react'
import { CheckboxOptions } from '../../../types/form'
import { FormError } from '../../Errors/FormError/FormError'
import { Icon } from '../../Icon/Icon'
import { IconButton } from '../../IconButton/IconButton'
import { Modal } from '../../Modal/ModalBase/Modal'
import { Label } from '../Label/Label'
export type CheckboxProps = {
/** Provide an name to uniquely identify the Checkbox input. */
name: string
/** Provide a label to provide a description of the Checkbox input that you are exposing to the user. */
labelText?: string
/** A list of options to choose from. */
options: CheckboxOptions[]
/** Provides assistance on how to fill out a field. */
helperText?: string
/** When set to true, a '*' symbol will be displayed next to the label, indicating that the field is required. */
inputRequired?: boolean
}
/**
* Checkbox, can only be used with Formik
*/
export const Checkbox: React.FC<CheckboxProps> = ({ name, labelText, helperText, options, inputRequired = false }) => {
const [isCheckboxModalOpen, setIsCheckboxModalOpen] = useState(false)
const [modalContent, setModalContent] = useState<string | null>(null)
const [modalHeadline, setModalHeadlineContent] = useState<string | null>(null)
const handleIconClick = (tooltip: string, headline: string) => {
setModalContent(tooltip)
setModalHeadlineContent(headline)
setIsCheckboxModalOpen(true)
}
return (
<>
<Modal
datacy="modal"
open={isCheckboxModalOpen}
onClose={() => setIsCheckboxModalOpen(false)}
headline={modalHeadline ?? 'Information:'}
>
<div className="max-w-lg">{modalContent}</div>
</Modal>
{labelText && (
<Label
isLegend
className="font-semibold"
name={`checkbox-${name}`}
labelText={labelText}
inputRequired={inputRequired}
/>
)}
{options.map((option) => (
<label
datacy={`checkbox-${name}-option-${option.value}`}
key={option.value.toString()}
className="my-1 flex cursor-pointer items-center"
>
<Field type="checkbox" className="mr-2" name={name} value={`${option.value}`} />
{option.icon && <Icon icon={option.icon} />}
<span className="mr-4">{option.label}</span>
{option.helperText && (
<div className="flex">
<IconButton
datacy={`checkbox-${option.value}-info-icon`}
icon="info"
iconClassName="text-base"
className="h-5 w-5 text-gray-500 hover:bg-opacity-10"
onClick={() => handleIconClick(option.helperText ?? 'Keine Hilfetext vorhanden', option.label)}
/>
</div>
)}
</label>
))}
<p datacy={`checkbox-${name}-helpertext`} className="text-sm text-gray-500">
{helperText}
</p>
<FormError fieldName={name} />
</>
)
}
|