@ducor/form
Version:
form package
17 lines (16 loc) • 1.68 kB
JavaScript
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 Errors from "./components/errors";
import Label from "./components/label";
import HelperText from "./components/helperText";
export const Upload = ({ label, withAsterisk, direction = "vertical", name, helperText, defaultValue, id, className, accept, }) => {
const { control, formState: { errors }, } = useFormContext();
const controlId = id || uuidv4();
return (_jsxs("div", { className: twMerge("flex", direction === "horizontal"
? "flex-row gap-2 items-center"
: "flex-col gap-2 items-start"), children: [label && (_jsx(Label, { id: controlId, label: label, withAsterisk: withAsterisk })), _jsxs("div", { className: 'w-full space-y-2', children: [_jsx("div", { className: 'relative', children: _jsx(Controller, { name: name, control: control, defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null, rules: {
required: withAsterisk ? "This field is required" : false,
}, render: ({ field }) => (_jsx("input", { type: 'file', id: controlId, accept: accept, onChange: (e) => { var _a; return field.onChange(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); }, className: twMerge("w-full p-2 border border-gray-300 rounded-lg dark:text-gray-200 outline-none text-gray-700", className) })) }) }), helperText && _jsx(HelperText, { helperText: helperText }), errors[name] && _jsx(Errors, { value: errors[name] })] })] }));
};