UNPKG

@ducor/form

Version:
29 lines (28 loc) 2.21 kB
var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Controller, useFormContext } from "react-hook-form"; import { twMerge } from "tailwind-merge"; import { uuidv4 } from "./utils"; import Label from "./components/label"; import Errors from "./components/errors"; import HelperText from "./components/helperText"; export const Switch = (_a) => { var { name, label, direction = "vertical", helperText, id, withAsterisk } = _a, rest = __rest(_a, ["name", "label", "direction", "helperText", "id", "withAsterisk"]); const { control, formState: { errors }, } = useFormContext(); const controlId = id || uuidv4(); return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: twMerge("flex", direction === "horizontal" ? "flex-row items-center gap-4" : "flex-col gap-2"), children: [_jsx("div", { className: 'relative', children: _jsx(Controller, Object.assign({ name: name, control: control, defaultValue: false, rules: { required: withAsterisk ? "This field is required" : false, } }, rest, { render: ({ field }) => (_jsx("div", { className: `w-10 h-5 flex items-center rounded-full p-1 cursor-pointer ${field.value ? "bg-green-500" : "bg-gray-300"}`, onClick: () => field.onChange(!field.value), children: _jsx("div", { className: `bg-white w-4 h-4 rounded-full shadow transform ${field.value ? "translate-x-5" : "translate-x-0"}` }) })) })) }), label && (_jsx(Label, { id: controlId, label: label, withAsterisk: withAsterisk }))] }), helperText && _jsx(HelperText, { helperText: helperText }), errors[name] && _jsx(Errors, { value: errors[name] })] })); };