SHARE
TWEET

Untitled

a guest Apr 20th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const HomeScreen extends PureComponent {
  2.   constructor(props) {
  3.     this.state = {
  4.       focusedIndex: 0
  5.     };
  6.    
  7.     this.onKeyPress = this.onKeyPress.bind(this);
  8.   }
  9.  
  10.   componentDidMount() {
  11.     window.addEventListener('keydown', this.onKeyPress);
  12.   }
  13.  
  14.   componentWillUnmount() {
  15.     window.removeEventListener('keydown', this.onKeyPress);
  16.   }
  17.  
  18.   componentDidUpdate(oldProps) {
  19.     const {active} = this.props;
  20.    
  21.     if (oldProps.active !== active) {
  22.       this.setState({
  23.         focusedIndex: 0
  24.       });
  25.     }
  26.   }
  27.    
  28.   onKeyPress({keyCode}) {
  29.     const {active, rows} = this.props;
  30.     const {focusedIndex} = this.state;
  31.    
  32.     if (!active) {
  33.       return;
  34.     }
  35.    
  36.     let newIndex;
  37.    
  38.     switch(keyCode) {
  39.       case KEY_UP:
  40.         newIndex = focusedIndex - 1;
  41.         break;
  42.        
  43.       case KEY_DOWN:
  44.         newIndex = focusedIndex + 1;
  45.         break;
  46.        
  47.       default:
  48.         break;
  49.     }
  50.    
  51.     this.setState({
  52.       focusedIndex: Math.clamp(newIndex, 0, rows.length - 1)
  53.     });
  54.   }
  55.  
  56.   render() {
  57.     const {rows} = this.props;
  58.     const {focusedIndex} = this.state;
  59.    
  60.     return (<React.Fragment>
  61.       {rows.map((rowData, index) => (<GalleryRow
  62.         key={rowData.id}
  63.         active={index === focusedIndex}
  64.         items={rowData.items}
  65.       />))}
  66.     </React.Fragment>);
  67.   }
  68. }
  69.  
  70. const GalleryRow extends PureComponent {
  71.   // same logic that handles switching focus between gallery items
  72. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top