137 lines
3.4 KiB
TypeScript
137 lines
3.4 KiB
TypeScript
import { Form } from "antd";
|
|
import useFormInstance from "antd/es/form/hooks/useFormInstance";
|
|
import { PhoneNumberUtil } from "google-libphonenumber";
|
|
import { FunctionComponent, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import PhoneInput from "react-phone-input-2";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { ProBlack1 } from "ThemeConstants";
|
|
|
|
interface ProPhoneInput {
|
|
propName?: string;
|
|
label?: string;
|
|
getValueCallback?: (value: string) => void;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
}
|
|
|
|
const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
|
|
propName,
|
|
label,
|
|
getValueCallback,
|
|
value,
|
|
onChange,
|
|
}) => {
|
|
const form = useFormInstance();
|
|
const { t } = useTranslation();
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
|
|
return (
|
|
<Form.Item
|
|
name={propName}
|
|
label={label}
|
|
rules={[
|
|
{ required: true, message: t("validation.phoneRequired") },
|
|
{
|
|
validator: (_, value) => {
|
|
// Initialize the PhoneNumberUtil instance
|
|
const phoneUtil = PhoneNumberUtil.getInstance();
|
|
if (
|
|
value &&
|
|
!phoneUtil.isValidNumber(
|
|
phoneUtil.parseAndKeepRawInput(`+${value}`),
|
|
)
|
|
)
|
|
return Promise.reject(new Error(t("validation.invalidPhone")));
|
|
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
style={{ direction: "ltr" }}
|
|
>
|
|
<PhoneInputWrapper
|
|
onChange={(value) => {
|
|
form.setFieldValue(propName, value);
|
|
getValueCallback?.(value);
|
|
onChange?.(value);
|
|
}}
|
|
phone={value || form.getFieldValue(propName)}
|
|
themeName={themeName}
|
|
placeholder={t("login.mobileNumber")}
|
|
propName={propName}
|
|
label={label}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
};
|
|
|
|
export const PhoneInputWrapper = ({
|
|
phone,
|
|
themeName,
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
propName,
|
|
label,
|
|
}: {
|
|
phone?: string;
|
|
themeName: string;
|
|
placeholder: string;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
propName?: string;
|
|
label?: string;
|
|
}) => {
|
|
const inputStyle = useMemo(
|
|
() => ({
|
|
borderRadius: 1000,
|
|
height: 50,
|
|
width: "100%",
|
|
color: themeName === "light" ? "#000" : "#FFF",
|
|
backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
|
|
textAlign: "left" as const,
|
|
direction: "ltr" as const,
|
|
paddingLeft: "50px",
|
|
paddingRight: "50px",
|
|
borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
|
|
}),
|
|
[themeName],
|
|
);
|
|
|
|
return (
|
|
<div className="pro-phone-input">
|
|
<PhoneInput
|
|
key={themeName}
|
|
country={"om"}
|
|
inputStyle={inputStyle}
|
|
placeholder={label || placeholder}
|
|
value={value || phone}
|
|
onChange={(value) => {
|
|
onChange?.(value);
|
|
}}
|
|
buttonStyle={{
|
|
backgroundColor: "transparent",
|
|
border: 0,
|
|
borderLeft: "1px solid #363636",
|
|
borderRadius: 0,
|
|
position: "relative",
|
|
top: -25,
|
|
}}
|
|
autocompleteSearch
|
|
inputProps={{
|
|
id: propName || "phone", // Required for accessibility & autofill
|
|
name: propName || "phone",
|
|
required: true,
|
|
autoFocus: false,
|
|
autoComplete: "tel",
|
|
type: "tel",
|
|
inputMode: "numeric",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProPhoneInput;
|