117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import { Form } from "antd";
|
|
import { TitleProps } from "antd/es/typography/Title";
|
|
import { FunctionComponent } 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 extends TitleProps {
|
|
phone: string;
|
|
setPhone: (phone: string) => void;
|
|
propName?: string
|
|
label?: string
|
|
}
|
|
|
|
const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone, propName, label }) => {
|
|
const { t } = useTranslation();
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
|
|
return (
|
|
<Form.Item
|
|
name={propName}
|
|
label={label}
|
|
rules={[
|
|
{ required: true, message: "" },
|
|
{
|
|
validator: (_, value) => {
|
|
if (!value || value.length <= 3) {
|
|
return Promise.reject(new Error(""));
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
normalize={(value) => {
|
|
if (value && setPhone) {
|
|
setPhone(value);
|
|
}
|
|
return value;
|
|
}}
|
|
>
|
|
<PhoneInputWrapper
|
|
phone={phone}
|
|
themeName={themeName}
|
|
isRTL={isRTL}
|
|
placeholder={t("login.mobileNumber")}
|
|
propName={propName}
|
|
label={label}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
};
|
|
|
|
export const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChange, propName, label }: {
|
|
phone: string;
|
|
themeName: string;
|
|
isRTL: boolean;
|
|
placeholder: string;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
propName?: string;
|
|
label?: string;
|
|
}) => {
|
|
return (
|
|
<div className="pro-phone-input">
|
|
<PhoneInput
|
|
country={"om"}
|
|
inputStyle={{
|
|
borderRadius: 1000,
|
|
height: 50,
|
|
width: "100%",
|
|
color: themeName === "light" ? "#000" : "#FFF",
|
|
backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
|
|
textAlign: isRTL ? "right" : "left",
|
|
direction: isRTL ? "rtl" : "ltr",
|
|
paddingLeft: "50px",
|
|
paddingRight: "50px",
|
|
borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
|
|
}}
|
|
placeholder={label || placeholder}
|
|
value={value || phone}
|
|
onChange={(value) => {
|
|
onChange?.(value);
|
|
}}
|
|
buttonStyle={{
|
|
backgroundColor: "transparent",
|
|
border: 0,
|
|
borderLeft: "1px solid #363636",
|
|
borderRadius: 0,
|
|
position: "relative",
|
|
...(isRTL && {
|
|
top: -25,
|
|
right: 25,
|
|
}),
|
|
...(!isRTL && {
|
|
top: -25,
|
|
}),
|
|
}}
|
|
autocompleteSearch
|
|
inputProps={{
|
|
id: propName || "phone", // Required for accessibility & autofill
|
|
name: propName || "phone",
|
|
required: true,
|
|
autoFocus: false,
|
|
autoComplete: "tel",
|
|
type: "tel",
|
|
inputMode: "numeric",
|
|
pattern: "[0-9]*",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProPhoneInput;
|