cursor-focus

> React cursor focus library

 

Install

``bash
npm install --save cursor-focus
`

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

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

$3

Для случая с одним фокусным слоем:
`jsx
let StoreFocus = new StoreFocusBase();
`

Для случая с несколькими фокусными слоями:
`jsx
let StoreFocus = new StoreFocusBase([MY_FOCUS_LAYER_1, MY_FOCUS_LAYER_2]);
`

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

$3

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

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

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

$3

`jsx

`

$3

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

Для обработки кликов на фокусабельных элементах - необходимо эмулировать обычный браузерный
`jsx
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();
});
``

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

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

$3

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

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

$3

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

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

$3

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

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

$3

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

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

License

MIT © alexflomboim