coject
Version:
React Library
114 lines • 7.91 kB
JavaScript
import React, { useEffect, useState } from "react";
// React Hook Form
import { useFormContext } from "react-hook-form";
// Material UI
import { Box, FormHelperText, TextField, Tooltip } from "@mui/material";
// Styles
import useStyles from "./theme";
export const InputLabel = ({ name, multiline, value, helperText, validation, required, onChange, label, tooltipPlacement, ...props }) => {
const { classes } = useStyles();
const Methods = useFormContext();
const { defaultValue, ...restProps } = props;
const [isTouched, setIsTouched] = useState(false);
const [inputValue, setInputValue] = useState(value ?? "");
const setValue = Methods?.setValue;
const control = Methods?.control;
const getValues = Methods?.getValues;
const watch = Methods?.watch;
const setError = Methods?.setError;
const clearErrors = Methods?.clearErrors;
const errors = Methods?.formState?.errors || {};
const isSubmitted = Methods?.formState?.isSubmitted || false;
const isInsideForm = !!Methods;
// Methods Watching
useEffect(() => {
control && setInputValue(getValues(name || "default") !== undefined ? getValues(name || "default") : "");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [control, getValues, name, watch && watch(name || "default")]);
// Value
useEffect(() => {
if (!isInsideForm || !name)
return;
if (value !== undefined) {
setInputValue(value);
control && setValue(name || "default", value);
}
else
control && setValue(name || "default", "");
}, [control, name, setValue, value]);
// Change Value
const changeValue = (event) => {
if (!isTouched)
setIsTouched(true);
onChange && onChange(event, event.target.value, Methods);
setInputValue(event.target.value);
control && setValue(name || "default", event.target.value);
if (isInsideForm && name) {
setValue?.(name || "default", event.target.value);
}
};
// Error Handling
useEffect(() => {
if (!isInsideForm)
return;
const Required = (!!required || !!validation?.required) && !inputValue;
const Phone = !!validation?.phone && !!inputValue && !(/^\d{9}$/.test(`${inputValue}`));
const Numbers = !!validation?.number && !!inputValue && !(/^[0-9,.]+$/i.test(`${inputValue}`));
const English = !!validation?.english && !!inputValue && !(/^[-/_.,'A-Za-z ]+$/i.test(`${inputValue}`));
const Email = !!validation?.email && !!inputValue && !(/^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/.test(`${inputValue}`));
const Arabic = !!validation?.arabic && !!inputValue && !(/^[\u0621-\u064A\u064B-\u0652\u0670\u0671',._\/\-\s]+$/ui.test(`${inputValue}`));
const MinNumber = !!validation?.min && !!inputValue && Number(inputValue) < Number((validation.min instanceof Object) ? validation.min.value : validation.min);
const MaxNumber = !!validation?.max && !!inputValue && Number(inputValue) > Number((validation.max instanceof Object) ? validation.max.value : validation.max);
const MinLength = !!validation?.minLength && !!inputValue && (`${inputValue}`).length < Number((validation.minLength instanceof Object) ? validation.minLength.value : validation.minLength);
const MaxLength = !!validation?.maxLength && !!inputValue && (`${inputValue}`).length > Number((validation.maxLength instanceof Object) ? validation.maxLength.value : validation.maxLength);
const Pattern = !!validation?.pattern && !!inputValue && ((validation.pattern instanceof Object) ? !((validation?.pattern?.value).test(`${inputValue}`)) : !((validation?.pattern).test(`${inputValue}`)));
// Clear Errors
if (!Required && !Numbers && !Arabic && !English && !MinNumber && !MaxNumber && !MinLength && !MaxLength && !Pattern && !Email && !Phone)
clearErrors(name || "default");
// Set Errors
else {
// Required
if (Required)
setError(name || "default", { type: "required", message: ((required?.toString() === "true") || (validation?.required?.toString() === "true")) ? "This Field Is Required" : `${required ? required : ""}${validation?.required ? validation?.required : ""}` });
// Numbers
if (Numbers)
setError(name || "default", { type: "pattern", message: (validation?.number?.toString() === "true") ? "This Field Just Numbers" : `${validation?.number}` });
// Arabic
if (Arabic)
setError(name || "default", { type: "pattern", message: (validation?.arabic?.toString() === "true") ? "This Field Just Arabic" : `${validation?.arabic}` });
// English
if (English)
setError(name || "default", { type: "pattern", message: (validation?.english?.toString() === "true") ? "This Field Just English" : `${validation?.english}` });
// Email
if (Email)
setError(name || "default", { type: "pattern", message: (validation?.email?.toString() === "true") ? "This Field Just Email" : `${validation?.email}` });
// Phone
if (Phone)
setError(name || "default", { type: "pattern", message: (validation?.phone?.toString() === "true") ? "This Field Just Phone" : `${validation?.phone}` });
// MinNumber
if (MinNumber)
setError(name || "default", { type: "min", message: (validation?.min instanceof Object) ? `${validation.min.message}` : "Less Than The Minimum" });
// MaxNumber
if (MaxNumber)
setError(name || "default", { type: "max", message: (validation?.max instanceof Object) ? `${validation.max.message}` : "Greater Than The Maximum" });
// MinLength
if (MinLength)
setError(name || "default", { type: "minLength", message: (validation?.minLength instanceof Object) ? `${validation.minLength.message}` : "Less Than The Minimum Length" });
// MaxLength
if (MaxLength)
setError(name || "default", { type: "maxLength", message: (validation?.maxLength instanceof Object) ? `${validation.maxLength.message}` : "Greater Than The Maximum Length" });
// Pattern
if (Pattern)
setError(name || "default", { type: "pattern", message: (validation?.pattern instanceof Object) ? `${validation.pattern.message}` : "This Field Required" });
}
}, [inputValue, required, name, setError, clearErrors, validation]);
return (React.createElement(React.Fragment, null,
React.createElement(Box, { className: `${classes.root} coject_input` },
label && (React.createElement(Box, { className: classes.label }, label)),
React.createElement(Tooltip, { arrow: true, disableHoverListener: true, title: (!!(errors && errors[name || "default"] && (isTouched || isSubmitted))) ? errors[name || "default"]?.message : "", placement: tooltipPlacement ?? (localStorage?.language === "ar" ? "left" : "right"), open: !!(errors && errors[name || "default"] && (isTouched || isSubmitted)) },
React.createElement(TextField, { name: name || "default", variant: "outlined", multiline: multiline, error: !!(errors && errors[name || "default"] && (isTouched || isSubmitted)), sx: multiline ? { '& .MuiInputBase-root textarea': { resize: 'both', overflow: 'auto' } } : undefined, onBlur: () => setIsTouched(true), autoComplete: "off", value: inputValue, onChange: changeValue, ...restProps, InputProps: {
...restProps.InputProps
} }, props?.children)),
(helperText) && React.createElement(FormHelperText, { className: classes.error }, helperText))));
};
//# sourceMappingURL=index.js.map