Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const HomeScreen extends PureComponent {
constructor(props) {
this.state = {
focusedKey: null
};
this.onSetFocus = this.onSetFocus.bind(this);
}
componentDidUpdate(oldProps) {
const {active} = this.props;
if (oldProps.active !== active) {
this.setState({
focusedKey: null
});
}
}
onSetFocus(nextFocusKey) {
if (nextFocusKey === SIDE_MENU) {
this.props.onFocusSideMenu();
} else {
this.setState({
focusedKey: nextFocusKey
});
}
}
render() {
const {rows} = this.props;
const {focusedKey} = this.state;
return (<React.Fragment>
{rows.map((rowData, index) => (<GalleryRow
key={rowData.id}
active={focusedKey === `ROW_${index}`}
items={rowData.items}
onSetFocus={this.onSetFocus}
focusMap={{
up: `ROW_${index - 1}`, // no clamping for simplification
down: `ROW_${index + 1}`, // no clamping for simplification
left: 'SIDE_MENU'
}}
/>))}
</React.Fragment>);
}
}
const GalleryRow extends PureComponent {
// handles key events and calls the onSetFocus prop with the next key
// called only if current row is active
// next focus key is taken from focusMap prop based on direction
// left direction can only be called when first item is focused
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment