2018-11-01 18:32:17 +03:00
|
|
|
/*
|
|
|
|
Copyright 2018 New Vector Ltd
|
2020-03-26 13:05:27 +03:00
|
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
2018-11-01 18:32:17 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2021-06-24 18:42:03 +03:00
|
|
|
import React, { HTMLAttributes, WheelEvent } from "react";
|
2018-11-01 18:32:17 +03:00
|
|
|
|
2021-06-24 18:43:12 +03:00
|
|
|
interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll"> {
|
2021-06-01 16:13:46 +03:00
|
|
|
className?: string;
|
2021-06-22 22:41:26 +03:00
|
|
|
onScroll?: (event: Event) => void;
|
|
|
|
onWheel?: (event: WheelEvent) => void;
|
2021-07-02 01:23:03 +03:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
tabIndex?: number;
|
2021-06-01 16:13:46 +03:00
|
|
|
wrappedRef?: (ref: HTMLDivElement) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class AutoHideScrollbar extends React.Component<IProps> {
|
|
|
|
private containerRef: React.RefObject<HTMLDivElement> = React.createRef();
|
2018-12-18 16:29:42 +03:00
|
|
|
|
2021-06-01 16:15:42 +03:00
|
|
|
public componentDidMount() {
|
2021-06-01 16:13:46 +03:00
|
|
|
if (this.containerRef.current && this.props.onScroll) {
|
2021-05-28 16:59:14 +03:00
|
|
|
// 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
|
2021-06-01 16:13:46 +03:00
|
|
|
this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
|
2021-05-28 16:59:14 +03:00
|
|
|
}
|
|
|
|
|
2021-06-01 16:13:46 +03:00
|
|
|
if (this.props.wrappedRef) {
|
|
|
|
this.props.wrappedRef(this.containerRef.current);
|
2021-05-28 16:59:14 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-01 16:15:42 +03:00
|
|
|
public componentWillUnmount() {
|
2021-06-01 16:13:46 +03:00
|
|
|
if (this.containerRef.current && this.props.onScroll) {
|
|
|
|
this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
|
2018-11-12 14:57:21 +03:00
|
|
|
}
|
2018-11-01 18:32:17 +03:00
|
|
|
}
|
|
|
|
|
2021-06-01 16:15:42 +03:00
|
|
|
public getScrollTop(): number {
|
2021-06-01 16:13:46 +03:00
|
|
|
return this.containerRef.current.scrollTop;
|
2019-02-13 16:49:14 +03:00
|
|
|
}
|
|
|
|
|
2021-06-01 16:15:42 +03:00
|
|
|
public render() {
|
2021-06-03 10:31:06 +03:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
|
|
|
|
|
2018-11-01 18:32:17 +03:00
|
|
|
return (<div
|
2021-06-03 10:31:06 +03:00
|
|
|
{...otherProps}
|
2021-06-01 16:13:46 +03:00
|
|
|
ref={this.containerRef}
|
2021-06-03 10:31:06 +03:00
|
|
|
style={style}
|
|
|
|
className={["mx_AutoHideScrollbar", className].join(" ")}
|
|
|
|
onWheel={onWheel}
|
2021-08-06 14:28:06 +03:00
|
|
|
// Firefox sometimes makes this element focusable due to
|
|
|
|
// overflow:scroll;, so force it out of tab order by default.
|
|
|
|
tabIndex={tabIndex ?? -1}
|
2020-07-18 14:19:03 +03:00
|
|
|
>
|
2021-06-03 10:31:06 +03:00
|
|
|
{ children }
|
2018-11-01 18:32:17 +03:00
|
|
|
</div>);
|
|
|
|
}
|
|
|
|
}
|