Updated TimelineQueueButtonHeader to dismiss on scroll

• Updated:
- TimelineQueueButtonHeader to dismiss on scroll

app/javascript/gabsocial/components/timeline_queue_button_header.js

@@ -1,4 +1,5 @@
 import { FormattedMessage } from 'react-intl'
+import throttle from 'lodash.throttle'
 import classNames from 'classnames/bind'
 import { shortNumberFormat } from '../utils/numbers'
 import { scrollTo } from '../utils/scroll_to'
@@ -21,6 +22,60 @@ export default class TimelineQueueButtonHeader extends PureComponent {
     itemType: 'item',
   }
 
+  state = {
+    onVisibleOffset: 0,
+    hidden: false,
+  }
+
+  componentDidMount() {
+    this.window = window
+    this.documentElement = document.scrollingElement || document.documentElement
+  }
+
+  componentWillUnmount() {
+    this.detachScrollListener()
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.count > 0 && prevProps.count === 0) {
+      // Init
+      this.window.addEventListener('scroll', this.handleScroll)
+      this.setState({ onVisibleOffset: this.documentElement.scrollTop })
+    } else if (prevProps.count > 0 && this.props.count === 0) {
+      // Deinit
+      this.detachScrollListener()
+      this.setState({
+        hidden: false,
+        onVisibleOffset: 0,
+      })
+    }
+  }
+
+  detachScrollListener = () => {
+    this.window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll = throttle(() => {
+    if (this.window) {
+      const { scrollTop } = this.documentElement
+      const { hidden, onVisibleOffset } = this.state
+      const { count } = this.props
+
+      const min = Math.min(onVisibleOffset, scrollTop)
+      const max = Math.max(onVisibleOffset, scrollTop)
+      const delta = max - min
+      const trigger = 50
+      
+      // If visible and scrolled a bit, hide it
+      if (delta > trigger && count > 0 && !hidden) {
+        this.setState({ hidden: true })
+        this.detachScrollListener()
+      }
+    }
+  }, 150, {
+    trailing: true,
+  })
+
   handleOnClick = () => {
     scrollTo(document.documentElement, 0, 500)
 
@@ -29,12 +84,13 @@ export default class TimelineQueueButtonHeader extends PureComponent {
 
   render() {
     const { count, itemType } = this.props
+    const { hidden } = this.state
 
     const hasItems = count > 0
 
     const classes = cx({
       default: 1,
-      displayNone: !hasItems,
+      displayNone: (!hasItems || hidden),
       mtNeg26PX: 1,
     })
 
@@ -48,7 +104,7 @@ export default class TimelineQueueButtonHeader extends PureComponent {
             onClick={this.handleOnClick}
           >
             {
-              hasItems &&
+              hasItems && !hidden && 
               <Text color='inherit' size='small'>
                 <FormattedMessage
                   id='timeline_queue.label'