@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
19 lines (18 loc) • 1.72 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { Field, useFormikContext } from 'formik';
import { useValidationErrors } from '../../utils/errors';
import Component from './component';
import Description from './description';
import Tooltip from './tooltip';
export const CheckboxInput = ({ name, label, onChange, optionDescription, disabled = false, }) => {
const { getFieldProps } = useFormikContext();
const { onChange: formikOnChange } = getFieldProps(name);
const { hasErrors } = useValidationErrors(name);
return (_jsxs(_Fragment, { children: [_jsx(Field, { name: name, as: "input", type: "checkbox", className: clsx('form-check-input', { 'is-invalid': hasErrors }), onChange: (e) => {
formikOnChange(e);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, disabled: disabled }), _jsx("span", { children: label }), optionDescription && _jsx(Description, { text: optionDescription })] }));
};
const Checkbox = ({ name, label, required = false, tooltip = '', description = '', onChange, optionDescription, disabled = false, }) => (_jsxs(Component, Object.assign({ field: name, required: required, type: "checkbox" }, { children: [_jsx("div", Object.assign({ className: "form-check checkbox" }, { children: _jsxs("label", Object.assign({ className: "form-check-label" }, { children: [_jsx(CheckboxInput, { name: name, label: label, onChange: onChange, optionDescription: optionDescription, disabled: disabled }), tooltip && ' ', _jsx(Tooltip, { text: tooltip })] })) })), description && _jsx(Description, { text: description })] })));
export default Checkbox;