import { Form, Input, InputNumber, Skeleton } from "antd";
import { Constants, isEmailValid, myFetch } from "../../utils";
import { createElement, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useAppContext } from "../../Contexts/AppContext";
export function MyUsernameFormInput({
propsFormItem,
propsInput,
showSkeleton,
thirdPerson,
}) {
const { t } = useTranslation();
return (
);
}
export function MyPasswordFormInput({
propsFormItem,
propsInput,
formItemName,
label,
inputPlaceholder,
formItemRules,
newPassword,
}) {
const { t } = useTranslation();
return (
);
}
export function MyEmailFormInput({
inputNotRequired,
propsFormItem,
propsInput,
disableEmailCheck,
hasFeedback,
showSkeleton,
thirdPerson,
newEmail,
}) {
const { t } = useTranslation();
return (
);
}
export function MyCalendarMaxFutureBookingDaysFormInput({
formItemName = "calendarMaxFutureBookingDays",
}) {
const { t } = useTranslation();
const appContext = useAppContext();
return (
);
}
export function MyCalendarMinEarliestBookingTimeFormInput({
formItem = "calendarMinEarliestBookingTime",
}) {
const { t } = useTranslation();
return (
);
}
export function MyCompanyNameFormInput({ showSkeleton }) {
const { t } = useTranslation();
return (
);
}
export function MyCompanyAddressFormInput({ showSkeleton }) {
const { t } = useTranslation();
return (
);
}
export function MyAvailableCheckFormInput({
inputNotRequired,
propsFormItem,
propsInput,
formItemName,
minLength,
maxLength,
label,
ruleMessageValueRequired,
ruleMessageValueMinLengthRequired,
ruleMessageValueNotAvailable,
inputPlaceholder,
inputType,
disableAvailableCheck = false,
fetchUrl,
fetchParameter,
fetchDelay,
hasFeedback,
showSkeleton,
formItemRules,
}) {
const delayTimeout = useRef();
const isValid = (value) => {
return value.length >= minLength && value.length <= maxLength;
};
return (
({
validator(_, value) {
if (inputNotRequired && !value) {
return Promise.resolve();
}
if (
!value ||
!isValid(value) ||
(inputType === "email" && isEmailValid(value) === false)
) {
return Promise.reject("");
}
if (disableAvailableCheck) {
return Promise.resolve();
}
if (delayTimeout.current) {
clearTimeout(delayTimeout.current);
}
return new Promise((resolve, reject) => {
delayTimeout.current = setTimeout(() => {
let body = {};
body[fetchParameter] = value; // like email: value
myFetch({
url: fetchUrl,
method: "POST",
body: body,
})
.then(() => resolve())
.catch(() => reject(ruleMessageValueNotAvailable));
}, fetchDelay);
});
},
}),
]}
/>
);
}
export function MyFormInput({
propsFormItem,
propsInput,
formItemName,
formItemRules,
minLength,
maxLength,
label,
ruleMessageValueRequired,
ruleMessageValueMinLengthRequired,
inputPlaceholder,
inputType,
inputNotRequired,
showSkeleton,
InputFatherElement,
}) {
const commonProps = {
...propsInput,
placeholder: inputPlaceholder,
};
const myFormItemRules = [];
if (!inputNotRequired) {
myFormItemRules.push({
required: true,
message: ruleMessageValueRequired,
});
}
if (formItemRules) {
// check if formItemRules is an array
if (Array.isArray(formItemRules)) {
myFormItemRules.push(...formItemRules);
} else {
myFormItemRules.push(formItemRules);
}
}
if (inputType === "number") {
commonProps.min = minLength;
commonProps.max = maxLength;
} else {
commonProps.minLength = minLength;
commonProps.maxLength = maxLength;
myFormItemRules.push({
min: minLength,
message: ruleMessageValueMinLengthRequired,
});
}
const inputComponents = {
textarea: showSkeleton ? (
) : (
),
number: ,
password: ,
default: showSkeleton ? (
) : (
),
};
const inputComponent = inputComponents[inputType] || inputComponents.default;
return (
{InputFatherElement ? (
createElement(InputFatherElement, { children: inputComponent })
) : (
<>{inputComponent}
)}
);
}