2017-04-21 18:05:35 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2023-05-23 15:15:17 +00:00
|
|
|
import { PureComponent } from 'react';
|
|
|
|
|
2017-05-26 12:09:13 +00:00
|
|
|
import { debounce } from 'lodash';
|
2023-05-23 15:15:17 +00:00
|
|
|
|
2023-10-27 13:21:07 +00:00
|
|
|
import ColumnHeader from '../../../components/column_header';
|
2017-07-26 11:46:53 +00:00
|
|
|
import { isMobile } from '../../../is_mobile';
|
2023-05-23 15:15:17 +00:00
|
|
|
import { scrollTop } from '../../../scroll';
|
|
|
|
|
2023-05-23 08:52:27 +00:00
|
|
|
export default class Column extends PureComponent {
|
2016-08-31 14:15:12 +00:00
|
|
|
|
2017-05-12 12:44:10 +00:00
|
|
|
static propTypes = {
|
|
|
|
heading: PropTypes.string,
|
2023-10-27 13:21:07 +00:00
|
|
|
alwaysShowBackButton: PropTypes.bool,
|
2017-05-12 12:44:10 +00:00
|
|
|
icon: PropTypes.string,
|
2023-10-24 17:45:08 +00:00
|
|
|
iconComponent: PropTypes.func,
|
2017-05-12 12:44:10 +00:00
|
|
|
children: PropTypes.node,
|
|
|
|
active: PropTypes.bool,
|
2017-05-20 15:31:47 +00:00
|
|
|
hideHeadingOnMobile: PropTypes.bool,
|
2017-05-12 12:44:10 +00:00
|
|
|
};
|
2016-08-31 14:15:12 +00:00
|
|
|
|
2017-05-12 12:44:10 +00:00
|
|
|
handleHeaderClick = () => {
|
2017-05-03 00:04:16 +00:00
|
|
|
const scrollable = this.node.querySelector('.scrollable');
|
2017-06-03 23:39:38 +00:00
|
|
|
|
2017-04-11 19:58:28 +00:00
|
|
|
if (!scrollable) {
|
|
|
|
return;
|
|
|
|
}
|
2017-06-03 23:39:38 +00:00
|
|
|
|
2017-04-11 19:58:28 +00:00
|
|
|
this._interruptScrollAnimation = scrollTop(scrollable);
|
2023-01-30 00:45:35 +00:00
|
|
|
};
|
2016-09-18 16:18:46 +00:00
|
|
|
|
2017-08-08 22:21:58 +00:00
|
|
|
scrollTop () {
|
|
|
|
const scrollable = this.node.querySelector('.scrollable');
|
|
|
|
|
|
|
|
if (!scrollable) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._interruptScrollAnimation = scrollTop(scrollable);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2017-05-26 12:09:13 +00:00
|
|
|
handleScroll = debounce(() => {
|
2016-09-18 16:18:46 +00:00
|
|
|
if (typeof this._interruptScrollAnimation !== 'undefined') {
|
|
|
|
this._interruptScrollAnimation();
|
|
|
|
}
|
2023-01-30 00:45:35 +00:00
|
|
|
}, 200);
|
2016-09-18 16:18:46 +00:00
|
|
|
|
2017-05-12 12:44:10 +00:00
|
|
|
setRef = (c) => {
|
2017-05-03 00:04:16 +00:00
|
|
|
this.node = c;
|
2023-01-30 00:45:35 +00:00
|
|
|
};
|
2017-05-03 00:04:16 +00:00
|
|
|
|
2016-08-31 14:15:12 +00:00
|
|
|
render () {
|
2023-10-27 13:21:07 +00:00
|
|
|
const { heading, icon, iconComponent, children, active, hideHeadingOnMobile, alwaysShowBackButton } = this.props;
|
2017-02-05 00:58:25 +00:00
|
|
|
|
2017-07-26 13:03:23 +00:00
|
|
|
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
|
2016-09-10 16:36:48 +00:00
|
|
|
|
2017-07-26 11:46:53 +00:00
|
|
|
const columnHeaderId = showHeading && heading.replace(/ /g, '-');
|
2023-10-27 13:21:07 +00:00
|
|
|
|
2017-07-26 11:46:53 +00:00
|
|
|
const header = showHeading && (
|
2023-10-27 13:21:07 +00:00
|
|
|
<ColumnHeader icon={icon} iconComponent={iconComponent} active={active} title={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} showBackButton={alwaysShowBackButton} />
|
2017-07-26 11:46:53 +00:00
|
|
|
);
|
2017-02-05 03:11:14 +00:00
|
|
|
return (
|
2017-05-03 00:04:16 +00:00
|
|
|
<div
|
|
|
|
ref={this.setRef}
|
|
|
|
role='region'
|
|
|
|
aria-labelledby={columnHeaderId}
|
|
|
|
className='column'
|
2017-06-06 11:20:07 +00:00
|
|
|
onScroll={this.handleScroll}
|
|
|
|
>
|
2016-09-10 16:36:48 +00:00
|
|
|
{header}
|
2017-02-05 00:58:25 +00:00
|
|
|
{children}
|
2016-08-24 15:56:44 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-08-31 14:15:12 +00:00
|
|
|
|
2017-04-21 18:05:35 +00:00
|
|
|
}
|