OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert IndicatorScrollbar to TS 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-09-12 09:24:46 +02:00
parent ff7e32cdd1
commit 9a7e2b31d4
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
1 changed files with 69 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/structures/IndicatorScrollbar.js → src/components/structures/IndicatorScrollbar.tsx
View File

@ -14,34 +14,39 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from "react"; import React, { createRef } from "react";
import PropTypes from "prop-types";
import AutoHideScrollbar from "./AutoHideScrollbar"; import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent"; import { replaceableComponent } from "../../utils/replaceableComponent";
interface IProps {
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
// and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
// by the parent element.
trackHorizontalOverflow?: boolean;
// If true, when the user tries to use their mouse wheel in the component it will
// scroll horizontally rather than vertically. This should only be used on components
// with no vertical scroll opportunity.
verticalScrollsHorizontally?: boolean;
children: JSX.Element | JSX.Element[];
className: string;
}
interface IState {
leftIndicatorOffset: number | string;
rightIndicatorOffset: number | string;
}
@replaceableComponent("structures.IndicatorScrollbar") @replaceableComponent("structures.IndicatorScrollbar")
export default class IndicatorScrollbar extends React.Component { export default class IndicatorScrollbar extends React.Component<IProps, IState> {
static propTypes = { private autoHideScrollbar = createRef<AutoHideScrollbar>();
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator private scrollElement: HTMLDivElement;
// and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning private likelyTrackpadUser: boolean = null;
// by the parent element. private checkAgainForTrackpad = 0; // ts in milliseconds to recheck this._likelyTrackpadUser
trackHorizontalOverflow: PropTypes.bool,
// If true, when the user tries to use their mouse wheel in the component it will constructor(props: IProps) {
// scroll horizontally rather than vertically. This should only be used on components
// with no vertical scroll opportunity.
verticalScrollsHorizontally: PropTypes.bool,
};
constructor(props) {
super(props); super(props);
this._collectScroller = this._collectScroller.bind(this);
this._collectScrollerComponent = this._collectScrollerComponent.bind(this);
this.checkOverflow = this.checkOverflow.bind(this);
this._scrollElement = null;
this._autoHideScrollbar = null;
this._likelyTrackpadUser = null;
this._checkAgainForTrackpad = 0; // ts in milliseconds to recheck this._likelyTrackpadUser
this.state = { this.state = {
leftIndicatorOffset: 0, leftIndicatorOffset: 0,
@ -49,30 +54,19 @@ export default class IndicatorScrollbar extends React.Component {
}; };
} }
moveToOrigin() { private collectScroller = (scroller: HTMLDivElement): void => {
if (!this._scrollElement) return; if (scroller && !this.scrollElement) {
this.scrollElement = scroller;
this._scrollElement.scrollLeft = 0;
this._scrollElement.scrollTop = 0;
}
_collectScroller(scroller) {
if (scroller && !this._scrollElement) {
this._scrollElement = scroller;
// Using the passive option to not block the main thread // Using the passive option to not block the main thread
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
this._scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true }); this.scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true });
this.checkOverflow(); this.checkOverflow();
} }
} };
_collectScrollerComponent(autoHideScrollbar) { public componentDidUpdate(prevProps: IProps): void {
this._autoHideScrollbar = autoHideScrollbar; const prevLen = ("length" in prevProps?.children) ? prevProps.children.length : 0;
} const curLen = ("length" in this.props?.children) ? this.props.children.length : 0;
componentDidUpdate(prevProps) {
const prevLen = prevProps && prevProps.children && prevProps.children.length || 0;
const curLen = this.props.children && this.props.children.length || 0;
// check overflow only if amount of children changes. // check overflow only if amount of children changes.
// if we don't guard here, we end up with an infinite // if we don't guard here, we end up with an infinite
// render > componentDidUpdate > checkOverflow > setState > render loop // render > componentDidUpdate > checkOverflow > setState > render loop
@ -81,62 +75,58 @@ export default class IndicatorScrollbar extends React.Component {
} }
} }
componentDidMount() { public componentDidMount(): void {
this.checkOverflow(); this.checkOverflow();
} }
checkOverflow() { private checkOverflow = (): void => {
const hasTopOverflow = this._scrollElement.scrollTop > 0; const hasTopOverflow = this.scrollElement.scrollTop > 0;
const hasBottomOverflow = this._scrollElement.scrollHeight > const hasBottomOverflow = this.scrollElement.scrollHeight >
(this._scrollElement.scrollTop + this._scrollElement.clientHeight); (this.scrollElement.scrollTop + this.scrollElement.clientHeight);
const hasLeftOverflow = this._scrollElement.scrollLeft > 0; const hasLeftOverflow = this.scrollElement.scrollLeft > 0;
const hasRightOverflow = this._scrollElement.scrollWidth > const hasRightOverflow = this.scrollElement.scrollWidth >
(this._scrollElement.scrollLeft + this._scrollElement.clientWidth); (this.scrollElement.scrollLeft + this.scrollElement.clientWidth);
if (hasTopOverflow) { if (hasTopOverflow) {
this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow"); this.scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow");
} else { } else {
this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow"); this.scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow");
} }
if (hasBottomOverflow) { if (hasBottomOverflow) {
this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow"); this.scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow");
} else { } else {
this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow"); this.scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow");
} }
if (hasLeftOverflow) { if (hasLeftOverflow) {
this._scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow"); this.scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow");
} else { } else {
this._scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow"); this.scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow");
} }
if (hasRightOverflow) { if (hasRightOverflow) {
this._scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow"); this.scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow");
} else { } else {
this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow"); this.scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow");
} }
if (this.props.trackHorizontalOverflow) { if (this.props.trackHorizontalOverflow) {
this.setState({ this.setState({
// Offset from absolute position of the container // Offset from absolute position of the container
leftIndicatorOffset: hasLeftOverflow ? `${this._scrollElement.scrollLeft}px` : '0', leftIndicatorOffset: hasLeftOverflow ? `${this.scrollElement.scrollLeft}px` : '0',
// Negative because we're coming from the right // Negative because we're coming from the right
rightIndicatorOffset: hasRightOverflow ? `-${this._scrollElement.scrollLeft}px` : '0', rightIndicatorOffset: hasRightOverflow ? `-${this.scrollElement.scrollLeft}px` : '0',
}); });
} }
} };
getScrollTop() { public componentWillUnmount(): void {
return this._autoHideScrollbar.getScrollTop(); if (this.scrollElement) {
} this.scrollElement.removeEventListener("scroll", this.checkOverflow);
componentWillUnmount() {
if (this._scrollElement) {
this._scrollElement.removeEventListener("scroll", this.checkOverflow);
} }
} }
onMouseWheel = (e) => { private onMouseWheel = (e: React.WheelEvent): void => {
if (this.props.verticalScrollsHorizontally && this._scrollElement) { if (this.props.verticalScrollsHorizontally && this.scrollElement) {
// xyThreshold is the amount of horizontal motion required for the component to // xyThreshold is the amount of horizontal motion required for the component to
// ignore the vertical delta in a scroll. Used to stop trackpads from acting in // ignore the vertical delta in a scroll. Used to stop trackpads from acting in
// strange ways. Should be positive. // strange ways. Should be positive.
@ -150,19 +140,19 @@ export default class IndicatorScrollbar extends React.Component {
// for at least the next 1 minute. // for at least the next 1 minute.
const now = new Date().getTime(); const now = new Date().getTime();
if (Math.abs(e.deltaX) > 0) { if (Math.abs(e.deltaX) > 0) {
this._likelyTrackpadUser = true; this.likelyTrackpadUser = true;
this._checkAgainForTrackpad = now + (1 * 60 * 1000); this.checkAgainForTrackpad = now + (1 * 60 * 1000);
} else { } else {
// if we haven't seen any horizontal scrolling for a while, assume // if we haven't seen any horizontal scrolling for a while, assume
// the user might have plugged in a mousewheel // the user might have plugged in a mousewheel
if (this._likelyTrackpadUser && now >= this._checkAgainForTrackpad) { if (this.likelyTrackpadUser && now >= this.checkAgainForTrackpad) {
this._likelyTrackpadUser = false; this.likelyTrackpadUser = false;
} }
} }
// don't mess with the horizontal scroll for trackpad users // don't mess with the horizontal scroll for trackpad users
// See https://github.com/vector-im/element-web/issues/10005 // See https://github.com/vector-im/element-web/issues/10005
if (this._likelyTrackpadUser) { if (this.likelyTrackpadUser) {
return; return;
} }
@ -178,13 +168,13 @@ export default class IndicatorScrollbar extends React.Component {
// noinspection JSSuspiciousNameCombination // noinspection JSSuspiciousNameCombination
const val = Math.abs(e.deltaY) < 25 ? (e.deltaY + additionalScroll) : e.deltaY; const val = Math.abs(e.deltaY) < 25 ? (e.deltaY + additionalScroll) : e.deltaY;
this._scrollElement.scrollLeft += val * yRetention; this.scrollElement.scrollLeft += val * yRetention;
} }
} }
}; };
render() { public render(): JSX.Element {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props; const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
const leftIndicatorStyle = { left: this.state.leftIndicatorOffset }; const leftIndicatorStyle = { left: this.state.leftIndicatorOffset };
@ -195,8 +185,8 @@ export default class IndicatorScrollbar extends React.Component {
? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null; ? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
return (<AutoHideScrollbar return (<AutoHideScrollbar
ref={this._collectScrollerComponent} ref={this.autoHideScrollbar}
wrappedRef={this._collectScroller} wrappedRef={this.collectScroller}
onWheel={this.onMouseWheel} onWheel={this.onMouseWheel}
{...otherProps} {...otherProps}
> >