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