2018-11-12 11:57:21 +00:00
|
|
|
/*
|
|
|
|
Copyright 2018 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from "react";
|
2019-03-27 23:51:23 +00:00
|
|
|
import PropTypes from "prop-types";
|
2018-11-12 11:57:21 +00:00
|
|
|
import AutoHideScrollbar from "./AutoHideScrollbar";
|
|
|
|
|
|
|
|
export default class IndicatorScrollbar extends React.Component {
|
2019-03-27 23:51:23 +00:00
|
|
|
static PropTypes = {
|
|
|
|
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
|
|
|
|
// and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
|
|
|
|
// by the parent element.
|
|
|
|
trackHorizontalOverflow: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
2018-11-12 11:57:21 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this._collectScroller = this._collectScroller.bind(this);
|
2018-12-18 13:29:42 +00:00
|
|
|
this._collectScrollerComponent = this._collectScrollerComponent.bind(this);
|
2018-11-12 11:57:21 +00:00
|
|
|
this.checkOverflow = this.checkOverflow.bind(this);
|
2018-12-18 13:29:42 +00:00
|
|
|
this._scrollElement = null;
|
|
|
|
this._autoHideScrollbar = null;
|
2019-03-27 23:51:23 +00:00
|
|
|
|
|
|
|
this.state = {
|
|
|
|
leftIndicatorOffset: 0,
|
|
|
|
rightIndicatorOffset: 0,
|
|
|
|
};
|
2018-11-12 11:57:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
_collectScroller(scroller) {
|
2018-12-18 13:29:42 +00:00
|
|
|
if (scroller && !this._scrollElement) {
|
|
|
|
this._scrollElement = scroller;
|
|
|
|
this._scrollElement.addEventListener("scroll", this.checkOverflow);
|
2018-11-12 11:57:21 +00:00
|
|
|
this.checkOverflow();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-18 13:29:42 +00:00
|
|
|
_collectScrollerComponent(autoHideScrollbar) {
|
|
|
|
this._autoHideScrollbar = autoHideScrollbar;
|
|
|
|
}
|
|
|
|
|
2018-11-12 11:57:21 +00:00
|
|
|
checkOverflow() {
|
2018-12-18 13:29:42 +00:00
|
|
|
const hasTopOverflow = this._scrollElement.scrollTop > 0;
|
|
|
|
const hasBottomOverflow = this._scrollElement.scrollHeight >
|
|
|
|
(this._scrollElement.scrollTop + this._scrollElement.clientHeight);
|
2019-03-27 23:51:23 +00:00
|
|
|
const hasLeftOverflow = this._scrollElement.scrollLeft > 0;
|
|
|
|
const hasRightOverflow = this._scrollElement.scrollWidth >
|
|
|
|
(this._scrollElement.scrollLeft + this._scrollElement.clientWidth);
|
|
|
|
|
2018-11-12 11:57:21 +00:00
|
|
|
if (hasTopOverflow) {
|
2018-12-18 13:29:42 +00:00
|
|
|
this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow");
|
2018-11-12 11:57:21 +00:00
|
|
|
} else {
|
2018-12-18 13:29:42 +00:00
|
|
|
this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow");
|
2018-11-12 11:57:21 +00:00
|
|
|
}
|
|
|
|
if (hasBottomOverflow) {
|
2018-12-18 13:29:42 +00:00
|
|
|
this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow");
|
2018-11-12 11:57:21 +00:00
|
|
|
} else {
|
2018-12-18 13:29:42 +00:00
|
|
|
this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow");
|
|
|
|
}
|
2019-03-27 23:51:23 +00:00
|
|
|
if (hasLeftOverflow) {
|
|
|
|
this._scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow");
|
|
|
|
} else {
|
|
|
|
this._scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow");
|
|
|
|
}
|
|
|
|
if (hasRightOverflow) {
|
|
|
|
this._scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow");
|
|
|
|
} else {
|
|
|
|
this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow");
|
|
|
|
}
|
2018-12-18 13:29:42 +00:00
|
|
|
|
|
|
|
if (this._autoHideScrollbar) {
|
|
|
|
this._autoHideScrollbar.checkOverflow();
|
2018-11-12 11:57:21 +00:00
|
|
|
}
|
2019-03-27 23:51:23 +00:00
|
|
|
|
|
|
|
if (this.props.trackHorizontalOverflow) {
|
|
|
|
this.setState({
|
|
|
|
// Offset from absolute position of the container
|
2019-03-28 16:43:01 +00:00
|
|
|
leftIndicatorOffset: hasLeftOverflow ? `${this._scrollElement.scrollLeft}px` : '0',
|
2019-03-27 23:51:23 +00:00
|
|
|
|
|
|
|
// Negative because we're coming from the right
|
2019-03-28 16:43:01 +00:00
|
|
|
rightIndicatorOffset: hasRightOverflow ? `-${this._scrollElement.scrollLeft}px` : '0',
|
2019-03-27 23:51:23 +00:00
|
|
|
});
|
|
|
|
}
|
2018-11-12 11:57:21 +00:00
|
|
|
}
|
|
|
|
|
2019-02-13 13:49:14 +00:00
|
|
|
getScrollTop() {
|
|
|
|
return this._autoHideScrollbar.getScrollTop();
|
|
|
|
}
|
|
|
|
|
2018-11-12 11:57:21 +00:00
|
|
|
componentWillUnmount() {
|
2018-12-18 13:29:42 +00:00
|
|
|
if (this._scrollElement) {
|
|
|
|
this._scrollElement.removeEventListener("scroll", this.checkOverflow);
|
2018-11-12 11:57:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-03-27 23:51:23 +00:00
|
|
|
const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
|
|
|
|
const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
|
|
|
|
const leftOverflowIndicator = this.props.trackHorizontalOverflow
|
|
|
|
? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
|
|
|
|
const rightOverflowIndicator = this.props.trackHorizontalOverflow
|
|
|
|
? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
|
|
|
|
|
2019-01-11 01:18:21 +00:00
|
|
|
return (<AutoHideScrollbar
|
|
|
|
ref={this._collectScrollerComponent}
|
|
|
|
wrappedRef={this._collectScroller}
|
|
|
|
{... this.props}
|
|
|
|
>
|
2019-03-27 23:51:23 +00:00
|
|
|
{ leftOverflowIndicator }
|
2018-11-12 11:57:21 +00:00
|
|
|
{ this.props.children }
|
2019-03-27 23:51:23 +00:00
|
|
|
{ rightOverflowIndicator }
|
2018-11-12 11:57:21 +00:00
|
|
|
</AutoHideScrollbar>);
|
|
|
|
}
|
|
|
|
}
|