daily-toolset
Version:
A lightweight, versatile collection of TypeScript utility functions for everyday development needs. Simplify and streamline your Node.js, React, and Next.js projects with a powerful suite of well-organized helpers for strings, arrays, dates, objects, and
72 lines (71 loc) • 4.82 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormInput = FormInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const bs_1 = require("react-icons/bs");
const input_1 = require("../../components/ui/input");
const popover_1 = require("../../components/ui/popover");
const FormLabel_1 = require("./FormLabel");
const lu_1 = require("react-icons/lu");
const InputError_1 = require("./InputError");
const FormDateInput_1 = require("./FormDateInput");
const formProvider_1 = require("../../form/formProvider");
function FormInput(props) {
var _a;
const { isRequired = true, isDisabled = false, label, type = "text", name, error, defaultValue, onChange, showError = true, leftSection, className, ...rest } = props;
const { formValues, formErrors, updateValue, validateField } = (0, formProvider_1.useForm)();
const id = (0, react_1.useId)();
const errorData = error
? error
: name
? (formErrors === null || formErrors === void 0 ? void 0 : formErrors[name]) || ""
: "";
const inputValue = defaultValue
? defaultValue
: name
? (_a = formValues[name]) !== null && _a !== void 0 ? _a : ""
: "";
return ((0, jsx_runtime_1.jsxs)("div", { className: "explita-input-root", children: [(0, jsx_runtime_1.jsx)(FormLabel_1.Label, { id: id, label: label, isRequired: isRequired }), (0, jsx_runtime_1.jsxs)("div", { children: [leftSection && (0, jsx_runtime_1.jsx)("span", { className: "left-section", children: leftSection }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: id, name: name, type: type, disabled: isDisabled, defaultValue: inputValue, "data-error": errorData.length > 0, onChange: onChange
? onChange
: async (e) => {
updateValue(name, e.target.value);
await validateField(name, e.target.value);
}, className: `${leftSection && "has-left-section"} ${className}`, ...rest })] }), (0, jsx_runtime_1.jsx)(InputError_1.InputError, { message: errorData })] }));
}
FormInput.Password = function Password({ minLength = 6, showRequirements = true, ...props }) {
const [popoverOpened, setPopoverOpened] = (0, react_1.useState)(false);
const [value, setValue] = (0, react_1.useState)("");
const checks = requirements.map((requirement, index) => ((0, jsx_runtime_1.jsx)(PasswordRequirement, { label: requirement.label, meets: requirement.re.test(value) }, index)));
// const strength = getStrength(value);
// const color =
// strength === 100
// ? "bg-teal-500"
// : strength > 50
// ? "bg-yellow-500"
// : "bg-red-500";
return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: popoverOpened, onOpenChange: setPopoverOpened, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { onFocusCapture: () => setPopoverOpened(true), onBlurCapture: () => setPopoverOpened(false), asChild: true, children: (0, jsx_runtime_1.jsx)(FormInput, { type: "password", autoComplete: "off", defaultValue: value, onChange: (event) => setValue(event.currentTarget.value), ...props }) }), showRequirements && ((0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { className: "explita-popover-content explita-password-popover", align: "start", children: [(0, jsx_runtime_1.jsx)(PasswordRequirement, { label: `Includes at least ${minLength} characters`, meets: value.length > minLength - 1 }), checks] }))] }));
};
function PasswordRequirement({ meets, label, }) {
return ((0, jsx_runtime_1.jsxs)("p", { className: `password-requirement ${meets ? "success" : "error"}`, children: [meets ? (0, jsx_runtime_1.jsx)(lu_1.LuCheck, { size: 16 }) : (0, jsx_runtime_1.jsx)(lu_1.LuX, { size: 16 }), " ", (0, jsx_runtime_1.jsx)("span", { children: label })] }));
}
const requirements = [
{ re: /[0-9]/, label: "Includes number" },
{ re: /[a-z]/, label: "Includes lowercase letter" },
{ re: /[A-Z]/, label: "Includes uppercase letter" },
{ re: /[$&+,:;=?@#|'<>.^*()%!-]/, label: "Includes special symbol" },
];
function getStrength(password) {
let multiplier = password.length > 5 ? 0 : 1;
requirements.forEach((requirement) => {
if (!requirement.re.test(password)) {
multiplier += 1;
}
});
return Math.max(100 - (100 / (requirements.length + 1)) * multiplier, 10);
}
FormInput.Search = function Search({ placeholder = "Search...", ...props }) {
return ((0, jsx_runtime_1.jsx)(FormInput, { ...props, type: "search", name: "search", autoComplete: "off", placeholder: placeholder, leftSection: (0, jsx_runtime_1.jsx)(bs_1.BsSearch, {}) }));
};
FormInput.Date = FormDateInput_1.DateInput;