app/javascript/mastodon/components/status_list.js

   1 import React from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import PropTypes from 'prop-types';
   4 import StatusContainer from '../containers/status_container';
   5 import ImmutablePureComponent from 'react-immutable-pure-component';
   6 import ScrollableList from './scrollable_list';
   7
   8 export default class StatusList extends ImmutablePureComponent {
   9
  10   static propTypes = {
  11     scrollKey: PropTypes.string.isRequired,
  12     statusIds: ImmutablePropTypes.list.isRequired,
  13     onScrollToBottom: PropTypes.func,
  14     onScrollToTop: PropTypes.func,
  15     onScroll: PropTypes.func,
  16     trackScroll: PropTypes.bool,
  17     shouldUpdateScroll: PropTypes.func,
  18     isLoading: PropTypes.bool,
  19     hasMore: PropTypes.bool,
  20     prepend: PropTypes.node,
  21     emptyMessage: PropTypes.node,
  22   };
  23
  24   static defaultProps = {
  25     trackScroll: true,
  26   };
  27
  28   handleMoveUp = id => {
  29     const elementIndex = this.props.statusIds.indexOf(id) - 1;
  30     this._selectChild(elementIndex);
  31   }
  32
  33   handleMoveDown = id => {
  34     const elementIndex = this.props.statusIds.indexOf(id) + 1;
  35     this._selectChild(elementIndex);
  36   }
  37
  38   _selectChild (index) {
  39     const element = this.node.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
  40
  41     if (element) {
  42       element.focus();
  43     }
  44   }
  45
  46   setRef = c => {
  47     this.node = c;
  48   }
  49
  50   render () {
  51     const { statusIds, ...other } = this.props;
  52     const { isLoading } = other;
  53
  54     const scrollableContent = (isLoading || statusIds.size > 0) ? (
  55       statusIds.map((statusId) => (
  56         <StatusContainer
  57           key={statusId}
  58           id={statusId}
  59           onMoveUp={this.handleMoveUp}
  60           onMoveDown={this.handleMoveDown}
  61         />
  62       ))
  63     ) : null;
  64
  65     return (
  66       <ScrollableList {...other} ref={this.setRef}>
  67         {scrollableContent}
  68       </ScrollableList>
  69     );
  70   }
  71
  72 }