aserbin/IDP-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: memorizing country select

Browse Source
This commit is contained in:
AlexSserb
2025-08-11 10:19:40 +04:00
parent d09664ad57
commit 6caac5743b
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ui/PhoneInput/PhoneInput.tsx
View File

@ -1,14 +1,16 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { IMaskInput } from "react-imask";
import {
InputBase,
type InputBaseProps,
type PolymorphicComponentProps,
} from "@mantine/core";
import CountrySelect from "@/components/ui/PhoneInput/components/CountrySelect";
import { Country } from "@/components/ui/PhoneInput/types";
import getInitialDataFromValue from "@/components/ui/PhoneInput/utils/getInitialDataFromValue";
import getPhoneMask from "@/components/ui/PhoneInput/utils/getPhoneMask";
type AdditionalProps = {
onChange: (value: string | null) => void;
@ -60,28 +62,32 @@ const PhoneInput = ({
setDropdownWidth(inputRef.current?.offsetWidth);
}, [inputRef.current?.offsetWidth]);
const countrySelect = useMemo(
() => (
<CountrySelect
disabled={disabled || readOnly}
country={country}
setCountry={country => {
setCountry(country);
setPhoneMask(getPhoneMask(country.code), country);
setValue("");
if (inputRef.current) {
inputRef.current.focus();
}
}}
leftSectionWidth={leftSectionWidth}
inputWidth={dropdownWidth}
/>
),
[country, leftSectionWidth, dropdownWidth, disabled, readOnly]
);
return (
<InputBase
{...props}
component={IMaskInput}
inputRef={inputRef}
leftSection={
<></>
// <CountrySelect
// disabled={disabled || readOnly}
// country={country}
// setCountry={country => {
// setCountry(country);
// setPhoneMask(getPhoneMask(country.code), country);
// setValue("");
// if (inputRef.current) {
// inputRef.current.focus();
// }
// }}
// leftSectionWidth={leftSectionWidth}
// inputWidth={dropdownWidth}
// />
}
leftSection={countrySelect}
leftSectionWidth={leftSectionWidth}
styles={{
input: {
@ -93,7 +99,6 @@ const PhoneInput = ({
"1px solid var(--mantine-color-default-border)",
},
}}
inputMode={"numeric"}
mask={mask}
value={value}
onAccept={onChange}