From bc4fa6b198557a7f3989eb0865e2c77ac7451d29 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sun, 3 Dec 2017 23:26:40 -0800 Subject: Rename themes -> flavours ? ? --- .../themes/glitch/components/scrollable_list.js | 198 --------------------- 1 file changed, 198 deletions(-) delete mode 100644 app/javascript/themes/glitch/components/scrollable_list.js (limited to 'app/javascript/themes/glitch/components/scrollable_list.js') diff --git a/app/javascript/themes/glitch/components/scrollable_list.js b/app/javascript/themes/glitch/components/scrollable_list.js deleted file mode 100644 index ccdcd7c85..000000000 --- a/app/javascript/themes/glitch/components/scrollable_list.js +++ /dev/null @@ -1,198 +0,0 @@ -import React, { PureComponent } from 'react'; -import { ScrollContainer } from 'react-router-scroll-4'; -import PropTypes from 'prop-types'; -import IntersectionObserverArticleContainer from 'themes/glitch/containers/intersection_observer_article_container'; -import LoadMore from './load_more'; -import IntersectionObserverWrapper from 'themes/glitch/util/intersection_observer_wrapper'; -import { throttle } from 'lodash'; -import { List as ImmutableList } from 'immutable'; -import classNames from 'classnames'; -import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'themes/glitch/util/fullscreen'; - -export default class ScrollableList extends PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; - - static propTypes = { - scrollKey: PropTypes.string.isRequired, - onScrollToBottom: PropTypes.func, - onScrollToTop: PropTypes.func, - onScroll: PropTypes.func, - trackScroll: PropTypes.bool, - shouldUpdateScroll: PropTypes.func, - isLoading: PropTypes.bool, - hasMore: PropTypes.bool, - prepend: PropTypes.node, - emptyMessage: PropTypes.node, - children: PropTypes.node, - }; - - static defaultProps = { - trackScroll: true, - }; - - state = { - lastMouseMove: null, - }; - - intersectionObserverWrapper = new IntersectionObserverWrapper(); - - handleScroll = throttle(() => { - if (this.node) { - const { scrollTop, scrollHeight, clientHeight } = this.node; - const offset = scrollHeight - scrollTop - clientHeight; - this._oldScrollPosition = scrollHeight - scrollTop; - - if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) { - this.props.onScrollToBottom(); - } else if (scrollTop < 100 && this.props.onScrollToTop) { - this.props.onScrollToTop(); - } else if (this.props.onScroll) { - this.props.onScroll(); - } - } - }, 150, { - trailing: true, - }); - - handleMouseMove = throttle(() => { - this._lastMouseMove = new Date(); - }, 300); - - handleMouseLeave = () => { - this._lastMouseMove = null; - } - - componentDidMount () { - this.attachScrollListener(); - this.attachIntersectionObserver(); - attachFullscreenListener(this.onFullScreenChange); - - // Handle initial scroll posiiton - this.handleScroll(); - } - - componentDidUpdate (prevProps) { - const someItemInserted = React.Children.count(prevProps.children) > 0 && - React.Children.count(prevProps.children) < React.Children.count(this.props.children) && - this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - - // Reset the scroll position when a new child comes in in order not to - // jerk the scrollbar around if you're already scrolled down the page. - if (someItemInserted && this._oldScrollPosition && this.node.scrollTop > 0) { - const newScrollTop = this.node.scrollHeight - this._oldScrollPosition; - - if (this.node.scrollTop !== newScrollTop) { - this.node.scrollTop = newScrollTop; - } - } else { - this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop; - } - } - - componentWillUnmount () { - this.detachScrollListener(); - this.detachIntersectionObserver(); - detachFullscreenListener(this.onFullScreenChange); - } - - onFullScreenChange = () => { - this.setState({ fullscreen: isFullscreen() }); - } - - attachIntersectionObserver () { - this.intersectionObserverWrapper.connect({ - root: this.node, - rootMargin: '300% 0px', - }); - } - - detachIntersectionObserver () { - this.intersectionObserverWrapper.disconnect(); - } - - attachScrollListener () { - this.node.addEventListener('scroll', this.handleScroll); - } - - detachScrollListener () { - this.node.removeEventListener('scroll', this.handleScroll); - } - - getFirstChildKey (props) { - const { children } = props; - let firstChild = children; - if (children instanceof ImmutableList) { - firstChild = children.get(0); - } else if (Array.isArray(children)) { - firstChild = children[0]; - } - return firstChild && firstChild.key; - } - - setRef = (c) => { - this.node = c; - } - - handleLoadMore = (e) => { - e.preventDefault(); - this.props.onScrollToBottom(); - } - - _recentlyMoved () { - return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600); - } - - render () { - const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; - const { fullscreen } = this.state; - const childrenCount = React.Children.count(children); - - const loadMore = (hasMore && childrenCount > 0) ? : null; - let scrollableArea = null; - - if (isLoading || childrenCount > 0 || !emptyMessage) { - scrollableArea = ( -
-
- {prepend} - - {React.Children.map(this.props.children, (child, index) => ( - - {child} - - ))} - - {loadMore} -
-
- ); - } else { - scrollableArea = ( -
- {emptyMessage} -
- ); - } - - if (trackScroll) { - return ( - - {scrollableArea} - - ); - } else { - return scrollableArea; - } - } - -} -- cgit