feat(MaskedInput): 2nd edition

[lossir]

Проблемы ¹

Проблема 1

Старый код, отвечающий за подсветку маски.
Плюс его в поддержке IE11 и старых версий других браузеров.
Минусы - влияние на вёрстку; специфичное тестирование.

Проблема 2

Использование setTimeout для обработки события onUnexpectedInput.

---

Также есть некоторые проблемы/недоработки которые были и в предыдущей реализации - , но на которые не жаловались.

Ломается маска при наличия скролла

Если value шире чем width компонента, то появится возможность скролить содержимое стрелками, мышкой, или скролиться будет само по мере ввода.

В предыдущей реализации ломалась вёрстка маски, и она могла пропадать частями.

В новой реализации css свойство background-clip: text всегда отображает текст будто у элемента scrollLeft = 0.
Настройки свойства background-position в этом случае тоже игнорируются.
Единственный способ исправить - отключать подсветку при наличие скролла.

Маску можно заполнять строго слева направо

В предыдущей реализации технически невозможно ввести символ, скажем, в середине маски.

В новой реализации принципиально такая возможность есть (см символ ` в imask), но сейчас подсветка работает по старой логике.
В принципе это можно исправить.

---

Шрифт ui подключается только при монтировании

Для красивого символа земли _ теперь используется специальный шрифт².
Особенность его подключение в том, что основной шрифт должен быть явно указан в том же css правиле:

font-family: ui, Arial;

Для этого основной шрифт необходимо получить через getComputedStyle у родителя.

Проблема в том, что не существует общего/готового механизма, который бы оповещал о смене шрифта для конкретного элемента на странице.
Поэтому в текущей реализации основной шрифт берётся из body единожды, после чего шрифт ui подключается нужным элементам.

---

Решения

Решение 1

После отказа от поддержки IE11, эту логику получилось сделать "проще", хоть и многословнее.
Новый код минимально влияет на вёрстку, благодаря чему MaskedInput тестируется как обычный Input.

Всё работает с помощью градиента и стилей background-clip³ и -webkit-text-fill-color⁴.

Также символ подчеркивания снова реализовали через специальный шрифт (ui), как это было в старых версиях пакета.
Но теперь шрифт лежит на сервере статики, что позволило избежать сложностей, которые он создавал раньше⁵.

Решение 2

setTimeout удалось заменить на синхронный код, но логика не стала проще.

Ссылки

Песочница с новыми стялими
https://codepen.io/lossir/pen/ExrewOx

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ✅ unit-тесты для логики
   ✅ скриншоты для верстки и кросс-браузерности
   ⬜ нерелевантно

2. Добавлена (обновлена) документация
   ✅ styleguidist для пропов и примеров использования компонентов
   ✅ jsdoc для утилит и хелперов
   ✅ комментарии для неочевидных мест в коде
   ✅ прочие инструкции (README.md, contributing.md и др.)
   ⬜ нерелевантно

3. Изменения корректно типизированы
   ✅ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

Footnotes

1. https://yt.skbkontur.ru/issue/IF-1701 ↩

2. https://s.kontur.ru/common-v2/fonts/ui/ ↩

3. https://caniuse.com/background-clip-text ↩

4. https://caniuse.com/mdn-css_properties_-webkit-text-fill-color ↩

5. https://github.com/skbkontur/retail-ui/issues/2181 ↩