@ducor/form
Version:
form package
29 lines (28 loc) • 2.21 kB
JavaScript
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] })] }));
};