cursor-focus

React cursor focus library

Install

npm install --save cursor-focus

Использование

Для работы неободимо:

1. Создать экземляр StoreFocusBase

Для случая с одним фокусным слоем:

let StoreFocus = new StoreFocusBase();

Для случая с несколькими фокусными слоями:

let StoreFocus = new StoreFocusBase([MY_FOCUS_LAYER_1, MY_FOCUS_LAYER_2]);

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

2. Все фокусабльные элементы обернуть в HOC focusable:

Фокусабельные элементы должны быть выделены в классовые компоненты.

const TestComponent = focusable(class MyButton extends React.Component {
    constructor(props) {
        super(props);
    }
})

Этот HOC имплементирует в компонент логику его фокусабельности. Признак присутствия фокуса автоматически передается в компоенент через props.focused (true/false)

3. Передать в соответствующие компоненты StoreFocus и массив идентификаторов слоев, в которые компонент входит:

<TestComponent focusLayers={[MY_FOCUS_LAYER_1]} focusStore={StoreFocus}/>

4. В приложении реализовать реакцию на нажатия кнопок курсора

Для манипуляции фокусом - необходимо вызывать функцию moveFocus вашего StoreFocus, передавая в него параметром - направление перехода.

Для обработки кликов на фокусабельных элементах - необходимо эмулировать обычный браузерный

document.addEventListener('keydown', function(e){
    if(e.code === 'ArrowUp')        StoreFocus.moveFocus(MOVE_FOCUS_DIRECTION.UP);
    if(e.code === 'ArrowRight')     StoreFocus.moveFocus(MOVE_FOCUS_DIRECTION.RIGHT);
    if(e.code === 'ArrowDown')      StoreFocus.moveFocus(MOVE_FOCUS_DIRECTION.DOWN);
    if(e.code === 'ArrowLeft')      StoreFocus.moveFocus(MOVE_FOCUS_DIRECTION.LEFT);
    if(e.code === 'Enter')          StoreFocus.click();
  });

Поддержка мыши реализована автоматически

Расширенные возможности

Данамическая фокусабельность компонентов

Компоненты могу быть фокусабельными не всегда. Например, какая-то кнопка по логике приолжения присутствует в UI но недоступна для нажатия.

В этом случае в соотвествующем focusable-компоненте необходимо определить фунуцию focusable() и возвращать в ней true или false в зависимости от ситуации. На основе этого флага библиотека будет или не будет рассматривать этот компонент как доступый к фокусу при очередном клике

Фокус по-умолчанию

При необходимости, можно определить компонент, как такой, который должен быть автоматически зафокушен при переключении на слой, в котором он находится. Для этого необходимо определить в компоненте функцию defaultFocused() в которой вернуть true. При переходе на слой, в который включен такой элемент - он получит фокус.

В случае, если таких элементов одновременно будет несколько - фокус получит последний.

Слои

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

Для этого в библиотеке предусмотрены слои. Для использования слоев необходимо:

1. в конструктор вашего StoreFocus передать массив констант-идентификаторов всех используемых вами слоев
2. в компонент передать пропсой focusLayers массив индентификаторов слоев, в который этот клмплнент входит
3. управлять слоями, устанавливая текущий активный слой вызовом функции setCurrentFocusLayer(key) вашего StoreFocusBase, передавая в нее идентификатор желаемого слоя
4. при вызове setCurrentFocusLayer(null) будет осуществлен переход на предыдщуий фокусный слой

Автоматический уход со слоя

Например, поверх основного UI слева выехало меню, и вы отдали фокус в него. Клики вверх-вниз по меню - перемещают фокус по элементам меню. Может возникнуть желание скрывать меню, при клике вправо с любого пункта меню.

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

License

MIT © alexflomboim