9d1f8b9d6a
The feature to pin column could hide the rightmost column, which is specified with children property of ColumnsArea. The user is likely to see the column when the property changed, so scroll the area in such cases.
62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import ColumnHeader from './column_header';
|
|
import PropTypes from 'prop-types';
|
|
import { debounce } from 'lodash';
|
|
import { scrollTop } from '../../../scroll';
|
|
import { isMobile } from '../../../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,
|
|
};
|
|
|
|
handleHeaderClick = () => {
|
|
const scrollable = 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 } = 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'
|
|
aria-labelledby={columnHeaderId}
|
|
className='column'
|
|
onScroll={this.handleScroll}
|
|
>
|
|
{header}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|