Создавая функцию автофокуса для наших компонентов, мы смогли улучшить их API. Посмотрим, как мы этого добились с помощью модификатора {{autofocus}}.

Приглашение нового админа в аккаунт компании, создание новой карты, оформление перевода. Все эти действия являются конфиденциальными и должны быть подтверждены пользователем. Для их подтверждения требуется ввести одноразовый пароль из текстового сообщения. Как необанк, безопасность лежит в основе того, что мы делаем в Qonto, но мы не должны допустить, чтобы это ухудшало качество обслуживания. Вот почему мы хотим автофокусировать этот ввод.

Упростите действие подтверждения

Давайте автоматически сконцентрируемся на вводе одноразового пароля. Чтобы предоставить пользователю указание и отправную точку, чтобы он мог легко подтвердить свое действие.

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

Наш ввод одноразового пароля и ввод электронной почты являются двумя компонентами. Но это не совсем один и тот же компонент.

Эта функция автофокуса должна быть реализована в нескольких компонентах, распределенных между двумя приложениями. Вопрос в том, как нам делиться кодом?

Переход к лучшим API для наших компонентов

Один из вариантов - использовать миксины, но миксины больше не рекомендуются в экосистеме Ember (1). К счастью, у нас есть новая функция в Ember для совместного использования кода между компонентами, аналогичная директивам в модификаторах Vue или Angular: Ember.

С помощью модификатора мы можем применить модификацию к элементу DOM с функцией или классом. Это позволяет нам использовать такой компонент, обратите внимание на часть {{autofocus}}:

<OTPInput
  @label="Confirmation Code"
  @value={{this.confirmationCode}}
  {{on "update" this.updateCode}}
  {{autofocus}}
/>

Модификаторы - это функция, запланированная в следующем (и первом!) Ember Edition (2). В настоящее время с этой функцией проводятся эксперименты в стороннем пакете: https://github.com/ember-modifier/ember-modifier.

Если вы хотите подробнее узнать о модификаторах, вы можете посмотреть этот связанный пост в блоге.

Итерация №1

Упрощенная версия нашего модификатора будет:

import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element) {
  element.focus();
});

Простой.

Итерация # 2

Давайте сделаем это немного сложнее и автофокусируем первый неотключенный вход - если он существует:

import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element) {
  let childElement = element.querySelector('input:not([disabled])');
  if (childElement) {
    childElement.focus();
  } else {
    element.focus();
  }
});

Итерация # 3

Последняя итерация, пусть наш модификатор поддерживает использование селектора в качестве параметра:

<ConfirmationModal {{autofocus "#confirm-button"}}>

Здесь мы используем позиционные параметры, которые мы можем получить в нашей функции-модификаторе в виде массива во втором параметре. Наш модификатор автофокуса становится таким:

import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element, [selector = 'input:not([disabled])']) {
  let childElement = element.querySelector(selector);
  if (childElement) {
    childElement.focus();
  } else {
    element.focus();
  }
});

И мы можем использовать его, чтобы установить фокус на кнопку закрытия информативного модального окна.

Вывод: воспользуемся этим кодом

Код заключен в небольшой аддон: ember-autofocus-modifier. Вы можете использовать его как есть. Или вы можете скопировать код и поэкспериментировать с созданием собственного модификатора.

Благодаря этой работе мы можем делиться кодом между несколькими приложениями. Мы сохраняем согласованность некоторых реализаций при распространении.

Чтобы установить аддон, выполните команду yarn add -D ember-autofocus-modifier (или npm install --save-dev ember-autofocus-modifier). Тогда в ваших шаблонах доступен модификатор {{autofocus}}.

Спасибо за прочтение!

(1) о том, почему миксины больше не рекомендуются: https://github.com/emberjs/rfcs/issues/534

(2) вы не знаете, что такое Ember Edition? Https://emberjs.com/editions/