Fix the area code parsing issue (GH-60)

Author: ArtyomVancyan

README.md

@@ -50,7 +50,7 @@ range of opportunities for handling the data in your desired way.
 ```javascript
 {
   countryCode: 1,
-  areaCode: 702,
+  areaCode: "702",
   phoneNumber: "1234567",
   isoCode: "us",
   valid: function valid(strict)

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.3.1",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [

src/index.tsx

@@ -61,7 +61,7 @@ const parsePhoneNumber = (formattedNumber: string, countriesList: typeof countri
 
 	/** Converts the parsed values of the country and area codes to integers if values present */
 	const countryCode = countryCodeMatch.length > 0 ? parseInt(countryCodeMatch[0]) : null;
-	const areaCode = areaCodeMatch.length > 1 ? parseInt(areaCodeMatch[1]) : null;
+	const areaCode = areaCodeMatch.length > 1 ? areaCodeMatch[1] : null;
 
 	/** Parses the phone number by removing the country and area codes from the formatted value */
 	const phoneNumberPattern = new RegExp(`^${countryCode}${(areaCode || "")}(\\d+)`);
@@ -146,9 +146,10 @@ const PhoneInput = ({
 	}, [pattern])
 
 	const selectValue = useMemo(() => {
-		const metadata = getMetadata(getRawValue(value), countriesList);
-		return (metadata || countriesList[0])?.[0] + (metadata || countriesList[0])?.[2];
-	}, [countriesList, value])
+		let metadata = getMetadata(getRawValue(value), countriesList);
+		metadata = metadata || countries.find(([iso]) => iso === countryCode);
+		return ({...metadata})?.[0] + ({...metadata})?.[2];
+	}, [countriesList, countryCode, value])
 
 	const setFieldValue = useCallback((value: PhoneNumber) => {
 		if (formInstance) {
@@ -181,9 +182,9 @@ const PhoneInput = ({
 
 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		const formattedNumber = displayFormat(clean(event.target.value).join(""));
-		const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList, countryCode);
+		const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
 		handleChange({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}, event);
-	}, [clean, countriesList, countryCode, handleChange])
+	}, [clean, countriesList, handleChange])
 
 	const onInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		handleInput(event);

src/types.ts

@@ -3,7 +3,7 @@ import {InputProps} from "antd/lib/input";
 
 export interface PhoneNumber {
 	countryCode?: number | null;
-	areaCode?: number | null;
+	areaCode?: string | null;
 	phoneNumber?: string | null;
 	isoCode?: string;
 

tests/antd.test.tsx

@@ -37,12 +37,12 @@ describe("Checking the basic rendering and functionality", () => {
 		render(<PhoneInput
 			onMount={(value: any) => {
 				assert(value.countryCode === 1);
-				assert(value.areaCode === 702);
+				assert(value.areaCode === "702");
 				assert(value.phoneNumber === "1234567");
 				assert(value.isoCode === "us");
 				assert(value.valid());
 			}}
-			value={{countryCode: 1, areaCode: 702, phoneNumber: "1234567"}}
+			value={{countryCode: 1, areaCode: "702", phoneNumber: "1234567"}}
 		/>);
 		assert(screen.getByDisplayValue("+1 (702) 123 4567"));
 	})
@@ -71,7 +71,7 @@ describe("Checking the basic rendering and functionality", () => {
 	it("Using the input with FormItem", async () => {
 		render(<Form onFinish={({phone}: any) => {
 			assert(phone.countryCode === 1);
-			assert(phone.areaCode === 907);
+			assert(phone.areaCode === "907");
 			assert(phone.phoneNumber === "1234567");
 			assert(phone.isoCode === "us");
 		}}>
@@ -87,7 +87,7 @@ describe("Checking the basic rendering and functionality", () => {
 	})
 
 	it("Checking input validation with FormItem", async () => {
-		render(<Form initialValues={{phone: {countryCode: 1, areaCode: 702, phoneNumber: "1234567"}}}>
+		render(<Form initialValues={{phone: {countryCode: 1, areaCode: "702", phoneNumber: "1234567"}}}>
 			<FormItem name="phone" rules={[{
 				validator: (_: any, {valid}: any) => {
 					assert(valid());
@@ -102,7 +102,7 @@ describe("Checking the basic rendering and functionality", () => {
 	})
 
 	it("Checking form with initial value", async () => {
-		render(<Form initialValues={{phone: {countryCode: 1, areaCode: 702}}}>
+		render(<Form initialValues={{phone: {countryCode: 1, areaCode: "702"}}}>
 			<FormItem name="phone">
 				<PhoneInput/>
 			</FormItem>
@@ -114,7 +114,7 @@ describe("Checking the basic rendering and functionality", () => {
 	})
 
 	it("Checking validation with casual form actions", async () => {
-		render(<Form data-testid="form" initialValues={{phone: {countryCode: 1, areaCode: 702, phoneNumber: ""}}}>
+		render(<Form data-testid="form" initialValues={{phone: {countryCode: 1, areaCode: "702", phoneNumber: ""}}}>
 			<FormItem name="phone" rules={[{
 				validator: (_: any, {valid}: any) => {
 					if (valid()) return Promise.resolve();