@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
26 lines (25 loc) • 2.34 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const formik_1 = require("formik");
const errors_1 = require("../../utils/errors");
const component_1 = __importDefault(require("./component"));
const description_1 = __importDefault(require("./description"));
const tooltip_1 = __importDefault(require("./tooltip"));
const CheckboxInput = ({ name, label, onChange, optionDescription, disabled = false, }) => {
const { getFieldProps } = (0, formik_1.useFormikContext)();
const { onChange: formikOnChange } = getFieldProps(name);
const { hasErrors } = (0, errors_1.useValidationErrors)(name);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formik_1.Field, { name: name, as: "input", type: "checkbox", className: (0, clsx_1.default)('form-check-input', { 'is-invalid': hasErrors }), onChange: (e) => {
formikOnChange(e);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, disabled: disabled }), (0, jsx_runtime_1.jsx)("span", { children: label }), optionDescription && (0, jsx_runtime_1.jsx)(description_1.default, { text: optionDescription })] }));
};
exports.CheckboxInput = CheckboxInput;
const Checkbox = ({ name, label, required = false, tooltip = '', description = '', onChange, optionDescription, disabled = false, }) => ((0, jsx_runtime_1.jsxs)(component_1.default, Object.assign({ field: name, required: required, type: "checkbox" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "form-check checkbox" }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "form-check-label" }, { children: [(0, jsx_runtime_1.jsx)(exports.CheckboxInput, { name: name, label: label, onChange: onChange, optionDescription: optionDescription, disabled: disabled }), tooltip && ' ', (0, jsx_runtime_1.jsx)(tooltip_1.default, { text: tooltip })] })) })), description && (0, jsx_runtime_1.jsx)(description_1.default, { text: description })] })));
exports.default = Checkbox;