Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement