Figsolve #2: Удобный Input
Сегодня собираем Input, который не разваливается при взаимодействии. Без особой магии, но с хитростями.
Задача
Итак, поле ввода. Что от него нужно? Чтобы из него ничего не вываливалось. Чтобы текст шёл туда, куда должен. Чтобы появлялись оверлеи — когда нужно, и только тогда. Звучит как стандарт? Вот именно. Сделаем стандарт по-человечески.
Общий вид
Для начала просто рисуем Input. Добавляем состояния. Плейсхолдер я делаю отдельным вариантом — да, можно попробовать через properties, но там начнётся головная боль с переключениями и поведением. А мне хочется, чтобы всё просто работало.
Состояние ошибки я не добавлял — в рамках этой задачи оно нам не мешает.
Правильное направление
Направление при вводе текста должно инвертироваться. Здесь всё просто: повторяем трюк из Figsight #1 — инверсия направления через контейнер. Работает стабильно, проверено.
Оверлеи
Чтож, вот мы и подошли к самому интересному.
У компонента есть два варианта появления оверлея. Если пользователь просто взаимодействует — оверлей появляется справа. Если вводит длинный текст и контент переполняется — оверлей должен быть слева, чтобы не перекрывать важное.
Для этого случая я решил вернуться к своей старой идее: сделать оверлей через маску, так как когда то в статье Figsight #2 я уже поднимал эту тему, а про сами оверлеи я замечал в Figsight #12. Ранее я уже пытался решить эту задачу — не вышло. А в этот раз — получилось.
Figma капризничает с масками. Их нельзя нормально наслаивать, они не любят перекрытия. Но с появлением маски Luminance стало возможным аккуратно вытянуть эффект, без ущерба для текста.
Внутри получилось не самое чистое решение — пришлось дублировать текстовый слой. Не фанат такого подхода, но на текущий момент — это лучшее, что приходит на ум. Работает, не ломается, легко переиспользуется.
В итоге у нас получился аккуратный, предсказуемый Input, в котором ничего не едет, не выпадает, и всё ведёт себя именно так, как ожидаешь. Проверено в бою.
До встречи в следующем выпуске. Будем собирать другие уникальные и полезные компоненты.