fix(intl-phone-input): fix format outside value #311

igorokFront · 2022-10-19T09:17:34Z

Исправлено форматирование номера в intl-phone-input, который передаётся снаружи компонента в props value

changeset-bot · 2022-10-19T09:17:37Z

🦋 Changeset detected

Latest commit: 721f5ac

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@alfalab/core-components-intl-phone-input	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coveralls · 2022-10-19T09:26:08Z

Pull Request Test Coverage Report for Build 3375205641

11 of 13 (84.62%) changed or added relevant lines in 1 file are covered.
134 unchanged lines in 8 files lost coverage.
Overall coverage decreased (-1.8%) to 79.67%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/intl-phone-input/src/component.tsx	11	13	84.62%

Files with Coverage Reduction	New Missed Lines	%
packages/select/src/components/base-select/Component.tsx	1	91.34%
packages/intl-phone-input/src/components/select/component.tsx	2	79.17%
packages/intl-phone-input/src/utils/calculateCaretPos.ts	2	80.0%
packages/input-autocomplete/src/autocomplete-field/Component.tsx	3	70.0%
packages/select/src/utils.ts	6	87.64%
packages/intl-phone-input/src/useCaretAvoidCountryCode.ts	7	24.44%
packages/select/src/components/virtual-options-list/Component.tsx	54	7.63%
packages/intl-phone-input/src/component.tsx	59	43.29%

Totals
Change from base Build 3366517160:	-1.8%
Covered Lines:	6679
Relevant Lines:	7652

💛 - Coveralls

core-ds-bot · 2022-10-19T09:37:49Z

Собрана новая демка.

core-ds-bot · 2022-10-19T09:41:28Z

Собрана новая демка.

igorokFront · 2022-10-20T08:27:58Z

Добавил детект флага после вставки значения извне

core-ds-bot · 2022-10-20T08:41:10Z

Собрана новая демка.

core-ds-bot · 2022-10-20T09:11:57Z

Собрана новая демка.

core-ds-bot · 2022-10-27T07:22:12Z

Собрана новая демка.

core-ds-bot · 2022-10-31T13:38:22Z

Собрана новая демка.

EGNKupava · 2022-10-31T15:01:05Z

packages/base-modal/src/utils.ts


 export const restoreContainerStyles = (container: HTMLElement) => {
    const modalRestoreStyles = getModalStore().getRestoreStyles();

-    const index = modalRestoreStyles.findIndex(s => s.container === container);
+    const index = modalRestoreStyles.findIndex((s) => s.container === container);


Как-то линтер не правильно отработал. Должно было остаться без скобок. И остальные изменения тоже странные

Хотя, и у меня тоже стало также...

v-gevak

Откати все лишние изменения и подлей мастер ветку

igorokFront · 2022-11-01T06:31:25Z

Откати все лишние изменения и подлей мастер ветку

готово

core-ds-bot · 2022-11-01T06:57:31Z

Собрана новая демка.

v-gevak · 2022-11-01T08:36:02Z

packages/intl-phone-input/src/component.tsx

+            [countryIso2],
+        );
+
+        const formatedValue = useMemo(() => {


Почему ты форматируешь значение внутри компонента? Так в инпут попадает отформатированное значение, а в стейте остается неотформатированное

форматирую внутри компонента, потому что тут задача уже решается внутри компонента. А если снаружи отформатировать и форматирование будет отличаться от внутреннего - будут скачки. Более того тут используется библиотека для форматирования, которая не используется в других приложениях банка. Это внутренняя задача компонента, если значение пришло не отформатированным - его нужно форматировать

страна не определится, если мы извне поменяем значение

Я понимаю, я о том, что так получается рассинхрон со внешним стейтом, такого быть не должно. У тебя во внешнем стейте будет номер +79991111111, а в инпуте +7 999 111-11-11. Хотя на onChange улетает отформатированный номер. Это нужно исправить - либо там и там отформатированный номер, либо всегда внутри компонента отформатированный, а во внешнем стейте нет. Сейчас рандом полный

выглядит как мажорные изменения. Что если при получении неотформатированного значения просто вызывать onChange с отформатированным номером? Тогда и внешний и внутренний стейт будут в норме

"Что если при получении неотформатированного значения просто вызывать onChange с отформатированным номером?" - вроде это сделать и нужно

спасибо, сразу не сообразил. Поправил

v-gevak · 2022-11-01T08:39:25Z

packages/intl-phone-input/src/component.tsx

-        };
+                return targetCountry;
+            },
+            [countries, countryIso2],


На каждый рендер прилетает новое значение countries, смысла с этого useCallback тут нет. Соответственно useEffect ниже на каждый рендер вызывается

eslint-ом бы еще пройтись по файлу

а почему прилетает новое значение countries? из-за дефолтного значения с вызовом функции? для чего это сделано?

и как это лучше разрулить? в голову приходит только убрать тут countries из зависимостей

или убрать вызов метода из дефолта пропса

Убрать все useCallback и из зависимостей useEffect убрать getCountryByNumber и отключить eslint - eslint-disable-next-line react-hooks/exhaustive-deps ))

спасибо, поправил

core-ds-bot · 2022-11-01T13:23:05Z

Собрана новая демка.

core-ds-bot · 2022-11-02T06:29:23Z

Собрана новая демка.

reme3d2y · 2022-11-03T09:32:21Z

packages/intl-phone-input/src/component.tsx

@@ -468,6 +466,26 @@ export const IntlPhoneInput = forwardRef<HTMLInputElement, IntlPhoneInputProps>(
            /* eslint-disable-next-line react-hooks/exhaustive-deps */
        }, [value]);

+        useEffect(() => {
+            if (value && value.length > 1 && !value.includes(' ')) {


Было бы неплохо описать эту логику в комментах

fix(intl-phone-input): fix format outside value

878d640

igorokFront requested review from reme3d2y, v-gevak, EGNKupava and SiebenSieben as code owners October 19, 2022 09:17

Create happy-otters-breathe.md

4289cf1

Oladii approved these changes Oct 19, 2022

View reviewed changes

v-gevak approved these changes Oct 20, 2022

View reviewed changes

EGNKupava approved these changes Oct 20, 2022

View reviewed changes

fix(intl-phone-input): fix country detect outside value

0bb41e8

igorokFront requested review from v-gevak, EGNKupava and Oladii October 20, 2022 08:28

fix(intl-phone-input): fix country detect with default country

9f0d913

Merge branch 'master' into fix/FASTPAY-1857

0fa26e1

Merge branch 'master' into fix/FASTPAY-1857

7ef9047

EGNKupava reviewed Oct 31, 2022

View reviewed changes

v-gevak suggested changes Oct 31, 2022

View reviewed changes

Merge branch 'master' into fix/FASTPAY-1857

9b1d336

igorokFront requested a review from v-gevak November 1, 2022 06:31

v-gevak reviewed Nov 1, 2022

View reviewed changes

fix(intl-phone-input): fix eslint warnings

7d18f62

fix(intl-phone-input): emit onChange to unformated value

721f5ac

igorokFront requested a review from v-gevak November 2, 2022 08:45

v-gevak approved these changes Nov 3, 2022

View reviewed changes

reme3d2y reviewed Nov 3, 2022

View reviewed changes

reme3d2y approved these changes Nov 3, 2022

View reviewed changes

SiebenSieben merged commit a32104b into master Nov 3, 2022

SiebenSieben deleted the fix/FASTPAY-1857 branch November 3, 2022 16:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(intl-phone-input): fix format outside value #311

fix(intl-phone-input): fix format outside value #311

igorokFront commented Oct 19, 2022

changeset-bot bot commented Oct 19, 2022 •

edited

coveralls commented Oct 19, 2022 •

edited

core-ds-bot commented Oct 19, 2022

core-ds-bot commented Oct 19, 2022

igorokFront commented Oct 20, 2022

core-ds-bot commented Oct 20, 2022

core-ds-bot commented Oct 20, 2022

core-ds-bot commented Oct 27, 2022

core-ds-bot commented Oct 31, 2022

EGNKupava Oct 31, 2022

EGNKupava Oct 31, 2022

v-gevak left a comment

igorokFront commented Nov 1, 2022

core-ds-bot commented Nov 1, 2022

v-gevak Nov 1, 2022

igorokFront Nov 1, 2022

igorokFront Nov 1, 2022

v-gevak Nov 1, 2022

igorokFront Nov 1, 2022 •

edited

v-gevak Nov 1, 2022

igorokFront Nov 2, 2022

v-gevak Nov 1, 2022

v-gevak Nov 1, 2022

igorokFront Nov 1, 2022

igorokFront Nov 1, 2022

igorokFront Nov 1, 2022

v-gevak Nov 1, 2022

igorokFront Nov 2, 2022

core-ds-bot commented Nov 1, 2022

core-ds-bot commented Nov 2, 2022

reme3d2y Nov 3, 2022

fix(intl-phone-input): fix format outside value #311

fix(intl-phone-input): fix format outside value #311

Conversation

igorokFront commented Oct 19, 2022

changeset-bot bot commented Oct 19, 2022 • edited

🦋 Changeset detected

coveralls commented Oct 19, 2022 • edited

Pull Request Test Coverage Report for Build 3375205641

💛 - Coveralls

core-ds-bot commented Oct 19, 2022

core-ds-bot commented Oct 19, 2022

igorokFront commented Oct 20, 2022

core-ds-bot commented Oct 20, 2022

core-ds-bot commented Oct 20, 2022

core-ds-bot commented Oct 27, 2022

core-ds-bot commented Oct 31, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

v-gevak left a comment

Choose a reason for hiding this comment

igorokFront commented Nov 1, 2022

core-ds-bot commented Nov 1, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igorokFront Nov 1, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

core-ds-bot commented Nov 1, 2022

core-ds-bot commented Nov 2, 2022

Choose a reason for hiding this comment

changeset-bot bot commented Oct 19, 2022 •

edited

coveralls commented Oct 19, 2022 •

edited

igorokFront Nov 1, 2022 •

edited