Skip to content

Instantly share code, notes, and snippets.

Avatar

Dmitriy Bryokhin asgvard

View GitHub Profile
View spatial-nav-hooks-full-example.jsx
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useFocusable, init, FocusContext } from '@noriginmedia/norigin-spatial-navigation';
init();
const MENU_FOCUS_KEY = 'MENU';
const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
View spatial-nav-hooks-example.jsx
function Button() {
const { ref, focused } = useFocusable();
return (<div ref={ref} className={focused ? 'button-focused' : 'button'}>
Press me
</div>);
}
View spatial-nav-hooks-focus-maps.jsx
function GalleryRow({items, focused}) {
const [focusedItemIndex, setFocusedItemIndex] = useState(0);
const onSetFocus = useCallback(({newFocusedIndex}) => {
if (!focused) {
return;
}
setFocusedItemIndex(Math.clamp(newFocusedIndex, 0, items.length - 1));
}, [focused]);
View spatial-nav-hooks-distributed-logic.jsx
function GalleryRow({items, focused}) {
const [focusedItemIndex, setFocusedItemIndex] = useState(0);
const onKeyPress = useCallback(({keyCode}) => {
if (!focused) {
return;
}
let newIndex;
@asgvard
asgvard / spatial-nav-full-example.js
Last active May 10, 2019
spatial-nav-full-example
View spatial-nav-full-example.js
// this example uses react-native-web syntax
import React, {PureComponent} from 'react';
import {View, ScrollView} from 'react-native';
import {initNavigation, withFocusable} from '@noriginmedia/react-spatial-navigation';
initNavigation();
const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@asgvard
asgvard / spatial-nav-context-example.js
Created Apr 13, 2019
spatial-nav-context-example
View spatial-nav-context-example.js
const SpatialNavigableApp = withSpatialNavigation()(App);
View focusable-hoc-example.js
const FocusableComponent = withFocusable()(Component);
View focusable-wrapper-example.js
<Focusable>
<Component />
</Focusable>
View spatial-nav-focus-map.js
const HomeScreen extends PureComponent {
constructor(props) {
this.state = {
focusedKey: null
};
this.onSetFocus = this.onSetFocus.bind(this);
}
componentDidUpdate(oldProps) {
@asgvard
asgvard / spatial-nav-distributed-logic.js
Last active Apr 13, 2019
Spatial Navigation article. Distributed logic example
View spatial-nav-distributed-logic.js
const HomeScreen extends PureComponent {
constructor(props) {
this.state = {
focusedIndex: 0
};
this.onKeyPress = this.onKeyPress.bind(this);
}
componentDidMount() {