mirror of
https://github.com/vector-im/element-web.git
synced 2025-08-26 00:42:08 +02:00
3d0982e9a6
* Move the UserMenu out of the SpacePanel ul list * Apply aria-selected to the spacepanel treeview * Fix typing
72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
/*
|
|
Copyright 2018 New Vector Ltd
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
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 classNames from "classnames";
|
|
import React, { HTMLAttributes, ReactHTML, WheelEvent } from "react";
|
|
|
|
type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
|
|
JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
|
|
type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<Omit<JSX.IntrinsicElements[T], 'ref'>>;
|
|
|
|
export type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
|
|
element?: T;
|
|
className?: string;
|
|
onScroll?: (event: Event) => void;
|
|
onWheel?: (event: WheelEvent) => void;
|
|
style?: React.CSSProperties;
|
|
tabIndex?: number;
|
|
wrappedRef?: (ref: HTMLDivElement) => void;
|
|
};
|
|
|
|
export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> extends React.Component<IProps<T>> {
|
|
static defaultProps = {
|
|
element: 'div' as keyof ReactHTML,
|
|
};
|
|
|
|
public readonly containerRef: React.RefObject<HTMLDivElement> = React.createRef();
|
|
|
|
public componentDidMount() {
|
|
if (this.containerRef.current && this.props.onScroll) {
|
|
// 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
|
|
this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
|
|
}
|
|
|
|
this.props.wrappedRef?.(this.containerRef.current);
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
if (this.containerRef.current && this.props.onScroll) {
|
|
this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
|
|
}
|
|
}
|
|
|
|
public render() {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { element, className, onScroll, tabIndex, wrappedRef, children, ...otherProps } = this.props;
|
|
|
|
return React.createElement(element, {
|
|
...otherProps,
|
|
ref: this.containerRef,
|
|
className: classNames("mx_AutoHideScrollbar", className),
|
|
// Firefox sometimes makes this element focusable due to
|
|
// overflow:scroll;, so force it out of tab order by default.
|
|
tabIndex: tabIndex ?? -1,
|
|
}, children);
|
|
}
|
|
}
|