From 26d86ca37f42789a79809dd531e8dfd425018ff7 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sat, 17 Feb 2024 18:31:30 +0400 Subject: [PATCH 1/9] GH-68: Segregate the `namePath` calculation part Signed-off-by: Artyom Vancyan --- src/index.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 732ce57..28a5737 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -85,18 +85,20 @@ const PhoneInput = forwardRef(({ return ({...metadata})?.[0] + ({...metadata})?.[2]; }, [countriesList, countryCode, value]) - const setFieldValue = useCallback((value: PhoneNumber) => { - if (formInstance) { - let namePath = []; - let formName = (formContext as any)?.name || ""; - let fieldName = (antInputProps as any)?.id || ""; - if (formName) { - namePath.push(formName); - fieldName = fieldName.slice(formName.length + 1); - } - formInstance.setFieldValue(namePath.concat(fieldName.split("_")), value); + const namePath = useMemo(() => { + let path = []; + let formName = (formContext as any)?.name || ""; + let fieldName = (antInputProps as any)?.id || ""; + if (formName) { + path.push(formName); + fieldName = fieldName.slice(formName.length + 1); } - }, [antInputProps, formContext, formInstance]) + return path.concat(fieldName.split("_")); + }, [antInputProps, formContext]) + + const setFieldValue = useCallback((value: PhoneNumber) => { + if (formInstance) formInstance.setFieldValue(namePath, value); + }, [formInstance]) const onKeyDown = useCallback((event: KeyboardEvent) => { onKeyDownMaskHandler(event); From 548b8394a38efdbbf4cf6dcb568240a75ccc224a Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sat, 17 Feb 2024 18:37:34 +0400 Subject: [PATCH 2/9] GH-68: Observe value changes using `useWatch` hook Signed-off-by: Artyom Vancyan --- src/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.tsx b/src/index.tsx index 28a5737..dacce47 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,6 +11,7 @@ import { } from "react"; import useFormInstance from "antd/es/form/hooks/useFormInstance"; import {FormContext} from "antd/es/form/context"; +import {useWatch} from "antd/es/form/Form"; import Select from "antd/es/select"; import Input from "antd/es/input"; @@ -73,6 +74,7 @@ const PhoneInput = forwardRef(({ excludeCountries, preferredCountries, }); + console.log("value: ", value); const { onInput: onInputMaskHandler, @@ -96,6 +98,9 @@ const PhoneInput = forwardRef(({ return path.concat(fieldName.split("_")); }, [antInputProps, formContext]) + const phoneValue = useWatch(namePath, formInstance); + console.log("phoneValue: ", getRawValue(phoneValue)); + const setFieldValue = useCallback((value: PhoneNumber) => { if (formInstance) formInstance.setFieldValue(namePath, value); }, [formInstance]) From 6d4e3e011a347d0686455ec7cc2d4de5703bdc5a Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sun, 18 Feb 2024 23:10:50 +0400 Subject: [PATCH 3/9] GH-68: Add the missing dependency Signed-off-by: Artyom Vancyan --- src/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index dacce47..5f11492 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -74,7 +74,6 @@ const PhoneInput = forwardRef(({ excludeCountries, preferredCountries, }); - console.log("value: ", value); const { onInput: onInputMaskHandler, @@ -99,11 +98,10 @@ const PhoneInput = forwardRef(({ }, [antInputProps, formContext]) const phoneValue = useWatch(namePath, formInstance); - console.log("phoneValue: ", getRawValue(phoneValue)); const setFieldValue = useCallback((value: PhoneNumber) => { if (formInstance) formInstance.setFieldValue(namePath, value); - }, [formInstance]) + }, [formInstance, namePath]) const onKeyDown = useCallback((event: KeyboardEvent) => { onKeyDownMaskHandler(event); From eb23bc781be846246396137c02d107b3c67b9bd5 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sun, 18 Feb 2024 23:11:25 +0400 Subject: [PATCH 4/9] GH-68: Update phone properties on watched value change Signed-off-by: Artyom Vancyan --- src/index.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/index.tsx b/src/index.tsx index 5f11492..9e2c7c5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -134,6 +134,17 @@ const PhoneInput = forwardRef(({ }) }, [forwardedRef]) + useEffect(() => { + const rawValue = getRawValue(phoneValue); + const metadata = getMetadata(rawValue); + if (!metadata?.[3]) return; + const formattedNumber = getFormattedNumber(rawValue, metadata?.[3] as string); + const phoneMetadata = parsePhoneNumber(formattedNumber); + setFieldValue({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}); + setCountryCode(metadata?.[0] as string); + setValue(formattedNumber); + }, [phoneValue, setFieldValue, setValue]) + useEffect(() => { if (initiatedRef.current) return; initiatedRef.current = true; From 4945c58f92703f2335b4c596b5e6bf2f48f9de2e Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Sun, 18 Feb 2024 23:26:54 +0400 Subject: [PATCH 5/9] GH-68: Optimize update frequency - identify `setFieldValue` updates Signed-off-by: Artyom Vancyan --- src/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 9e2c7c5..4ceff71 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -137,13 +137,14 @@ const PhoneInput = forwardRef(({ useEffect(() => { const rawValue = getRawValue(phoneValue); const metadata = getMetadata(rawValue); - if (!metadata?.[3]) return; + // Skip if value has not been updated by `setFieldValue`. + if (!metadata?.[3] || rawValue === getRawValue(value)) return; const formattedNumber = getFormattedNumber(rawValue, metadata?.[3] as string); const phoneMetadata = parsePhoneNumber(formattedNumber); setFieldValue({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}); setCountryCode(metadata?.[0] as string); setValue(formattedNumber); - }, [phoneValue, setFieldValue, setValue]) + }, [phoneValue, value, setFieldValue, setValue]) useEffect(() => { if (initiatedRef.current) return; From 890e40122909b3f9612e881fddda90a34ec27f6e Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 19 Feb 2024 13:42:04 +0400 Subject: [PATCH 6/9] GH-68: Check `setFieldValue` work Signed-off-by: Artyom Vancyan --- tests/antd.test.tsx | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/tests/antd.test.tsx b/tests/antd.test.tsx index cdc584e..b664565 100644 --- a/tests/antd.test.tsx +++ b/tests/antd.test.tsx @@ -106,13 +106,47 @@ describe("Checking the basic rendering and functionality", () => { - ); const input = screen.getByDisplayValue("+1 (702)"); await userEvent.type(input, "1234567"); assert(input.getAttribute("value") === "+1 (702) 123 4567"); }) + it("Checking field value setters", async () => { + const FormWrapper = () => { + const [form] = Form.useForm(); + + const setFieldRawValue = () => { + form.setFieldValue("phone", "+1 (234) 234 2342"); + } + + return ( +
+ + + + + +
+ ) + } + + render(); + const form = screen.getByTestId("form"); + const submit = screen.getByTestId("submit"); + const input = screen.getByDisplayValue("+1 (702)"); + const setString = screen.getByTestId("set-string"); + + await userEvent.click(setString); + await userEvent.click(submit); + await act(async () => { + await new Promise(r => setTimeout(r, 100)); + }) + assert(!inputHasError(form)); // valid + console.log(input.getAttribute("value")); + assert(input.getAttribute("value") === "+1 (234) 234 2342"); + }) + it("Checking validation with casual form actions", async () => { render(
Date: Mon, 19 Feb 2024 14:00:38 +0400 Subject: [PATCH 7/9] GH-68: Check `setFieldValue` with object value Signed-off-by: Artyom Vancyan --- tests/antd.test.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/tests/antd.test.tsx b/tests/antd.test.tsx index b664565..236d7d6 100644 --- a/tests/antd.test.tsx +++ b/tests/antd.test.tsx @@ -116,6 +116,15 @@ describe("Checking the basic rendering and functionality", () => { const FormWrapper = () => { const [form] = Form.useForm(); + const setFieldObjectValue = () => { + form.setFieldValue("phone", { + countryCode: 48, + areaCode: "111", + phoneNumber: "1111111", + isoCode: "pl" + }); + } + const setFieldRawValue = () => { form.setFieldValue("phone", "+1 (234) 234 2342"); } @@ -127,6 +136,7 @@ describe("Checking the basic rendering and functionality", () => { +
) } @@ -136,6 +146,7 @@ describe("Checking the basic rendering and functionality", () => { const submit = screen.getByTestId("submit"); const input = screen.getByDisplayValue("+1 (702)"); const setString = screen.getByTestId("set-string"); + const setObject = screen.getByTestId("set-object"); await userEvent.click(setString); await userEvent.click(submit); @@ -143,8 +154,15 @@ describe("Checking the basic rendering and functionality", () => { await new Promise(r => setTimeout(r, 100)); }) assert(!inputHasError(form)); // valid - console.log(input.getAttribute("value")); assert(input.getAttribute("value") === "+1 (234) 234 2342"); + + await userEvent.click(setObject); + await userEvent.click(submit); + await act(async () => { + await new Promise(r => setTimeout(r, 100)); + }) + assert(!inputHasError(form)); // valid + assert(input.getAttribute("value") === "+48 (111) 111 1111"); }) it("Checking validation with casual form actions", async () => { From 02e5ccbbfac7de3d7ed1329789fa08c1022340d6 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 19 Feb 2024 14:06:19 +0400 Subject: [PATCH 8/9] GH-68: Add buttons for `setFieldValue` demonstration Signed-off-by: Artyom Vancyan --- examples/antd5.x/package.json | 2 +- examples/antd5.x/src/Demo.tsx | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/examples/antd5.x/package.json b/examples/antd5.x/package.json index dff2968..63d4bdf 100644 --- a/examples/antd5.x/package.json +++ b/examples/antd5.x/package.json @@ -33,4 +33,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/examples/antd5.x/src/Demo.tsx b/examples/antd5.x/src/Demo.tsx index 7795180..0e528f5 100644 --- a/examples/antd5.x/src/Demo.tsx +++ b/examples/antd5.x/src/Demo.tsx @@ -3,6 +3,7 @@ import Form from "antd/es/form"; import theme from "antd/es/theme"; import Button from "antd/es/button"; import Card from "antd/es/card/Card"; +import {useForm} from "antd/es/form/Form"; import FormItem from "antd/es/form/FormItem"; import ConfigProvider from "antd/es/config-provider"; import PhoneInput from "antd-phone-input"; @@ -10,6 +11,7 @@ import PhoneInput from "antd-phone-input"; import "antd/dist/reset.css"; const Demo = () => { + const [form] = useForm(); const [value, setValue] = useState(null); const [algorithm, setAlgorithm] = useState("defaultAlgorithm"); @@ -28,6 +30,19 @@ const Demo = () => { } } + const setFieldObjectValue = () => { + form.setFieldValue("phone", { + "countryCode": 52, + "areaCode": "444", + "phoneNumber": "44444444", + "isoCode": "mx" + }); + } + + const setFieldRawValue = () => { + form.setFieldValue("phone", "+1 (234) 234 2342"); + } + const handleFinish = ({phone}: any) => setValue(phone); return ( @@ -44,11 +59,13 @@ const Demo = () => { {JSON.stringify(value, null, 2)} )} -
+
+ + From 40e587678f481a6e83d0a7e5e810f42ebd2097bb Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 19 Feb 2024 14:06:43 +0400 Subject: [PATCH 9/9] GH-68: Upgrade the version to `0.3.5` Signed-off-by: Artyom Vancyan --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bc2018e..495363f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.4", + "version": "0.3.5", "name": "antd-phone-input", "description": "Advanced, highly customizable phone input component for Ant Design.", "keywords": [