You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

131 lines
3.9 KiB

  1. import { debounce } from 'lodash';
  2. import React from 'react';
  3. import ImmutablePropTypes from 'react-immutable-proptypes';
  4. import PropTypes from 'prop-types';
  5. import StatusContainer from 'flavours/glitch/containers/status_container';
  6. import ImmutablePureComponent from 'react-immutable-pure-component';
  7. import LoadGap from './load_gap';
  8. import ScrollableList from './scrollable_list';
  9. import { FormattedMessage } from 'react-intl';
  10. export default class StatusList extends ImmutablePureComponent {
  11. static propTypes = {
  12. scrollKey: PropTypes.string.isRequired,
  13. statusIds: ImmutablePropTypes.list.isRequired,
  14. featuredStatusIds: ImmutablePropTypes.list,
  15. onLoadMore: PropTypes.func,
  16. onScrollToTop: PropTypes.func,
  17. onScroll: PropTypes.func,
  18. trackScroll: PropTypes.bool,
  19. shouldUpdateScroll: PropTypes.func,
  20. isLoading: PropTypes.bool,
  21. isPartial: PropTypes.bool,
  22. hasMore: PropTypes.bool,
  23. prepend: PropTypes.node,
  24. alwaysPrepend: PropTypes.bool,
  25. emptyMessage: PropTypes.node,
  26. timelineId: PropTypes.string.isRequired,
  27. };
  28. static defaultProps = {
  29. trackScroll: true,
  30. };
  31. getFeaturedStatusCount = () => {
  32. return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
  33. }
  34. getCurrentStatusIndex = (id, featured) => {
  35. if (featured) {
  36. return this.props.featuredStatusIds.indexOf(id);
  37. } else {
  38. return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount();
  39. }
  40. }
  41. handleMoveUp = (id, featured) => {
  42. const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
  43. this._selectChild(elementIndex);
  44. }
  45. handleMoveDown = (id, featured) => {
  46. const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
  47. this._selectChild(elementIndex);
  48. }
  49. handleLoadOlder = debounce(() => {
  50. this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
  51. }, 300, { leading: true })
  52. _selectChild (index) {
  53. const element = this.node.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
  54. if (element) {
  55. element.focus();
  56. }
  57. }
  58. setRef = c => {
  59. this.node = c;
  60. }
  61. render () {
  62. const { statusIds, featuredStatusIds, onLoadMore, timelineId, ...other } = this.props;
  63. const { isLoading, isPartial } = other;
  64. if (isPartial) {
  65. return (
  66. <div className='regeneration-indicator'>
  67. <div>
  68. <div className='regeneration-indicator__figure' />
  69. <div className='regeneration-indicator__label'>
  70. <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
  71. <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
  72. </div>
  73. </div>
  74. </div>
  75. );
  76. }
  77. let scrollableContent = (isLoading || statusIds.size > 0) ? (
  78. statusIds.map((statusId, index) => statusId === null ? (
  79. <LoadGap
  80. key={'gap:' + statusIds.get(index + 1)}
  81. disabled={isLoading}
  82. maxId={index > 0 ? statusIds.get(index - 1) : null}
  83. onClick={onLoadMore}
  84. />
  85. ) : (
  86. <StatusContainer
  87. key={statusId}
  88. id={statusId}
  89. onMoveUp={this.handleMoveUp}
  90. onMoveDown={this.handleMoveDown}
  91. contextType={timelineId}
  92. />
  93. ))
  94. ) : null;
  95. if (scrollableContent && featuredStatusIds) {
  96. scrollableContent = featuredStatusIds.map(statusId => (
  97. <StatusContainer
  98. key={`f-${statusId}`}
  99. id={statusId}
  100. featured
  101. onMoveUp={this.handleMoveUp}
  102. onMoveDown={this.handleMoveDown}
  103. contextType={timelineId}
  104. />
  105. )).concat(scrollableContent);
  106. }
  107. return (
  108. <ScrollableList {...other} showLoading={isLoading && statusIds.size === 0} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
  109. {scrollableContent}
  110. </ScrollableList>
  111. );
  112. }
  113. }