import React from 'react'; import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import { scrollTop } from 'flavours/glitch/scroll'; import { isMobile } from 'flavours/glitch/is_mobile'; export default class Column extends React.PureComponent { static propTypes = { heading: PropTypes.string, icon: PropTypes.string, children: PropTypes.node, active: PropTypes.bool, hideHeadingOnMobile: PropTypes.bool, name: PropTypes.string, bindToDocument: PropTypes.bool, }; handleHeaderClick = () => { const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable'); if (!scrollable) { return; } this._interruptScrollAnimation = scrollTop(scrollable); }; scrollTop () { const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable'); if (!scrollable) { return; } this._interruptScrollAnimation = scrollTop(scrollable); } handleScroll = debounce(() => { if (typeof this._interruptScrollAnimation !== 'undefined') { this._interruptScrollAnimation(); } }, 200); setRef = (c) => { this.node = c; }; render () { const { heading, icon, children, active, hideHeadingOnMobile, name } = this.props; const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth))); const columnHeaderId = showHeading && heading.replace(/ /g, '-'); const header = showHeading && ( <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} /> ); return ( <div ref={this.setRef} role='region' data-column={name} aria-labelledby={columnHeaderId} className='column' onScroll={this.handleScroll} > {header} {children} </div> ); } }