PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Migrate AutoHideScrollbar to TypeScript

Browse source 
Also changed the way the React.RefObject is collected
This commit is contained in:
Germain Souquet 2021-06-01 14:13:46 +01:00
parent fd69fce1ba
commit 308ac505a8
2 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/structures/AutoHideScrollbar.js → src/components/structures/AutoHideScrollbar.tsx
View file

@ -17,42 +17,43 @@ limitations under the License.
import React from "react"; import React from "react";
export default class AutoHideScrollbar extends React.Component { interface IProps {
constructor(props) { className?: string;
super(props); onScroll?: () => void;
this._collectContainerRef = this._collectContainerRef.bind(this); onWheel?: () => void;
style?: React.CSSProperties
tabIndex?: number,
wrappedRef?: (ref: HTMLDivElement) => void;
} }
export default class AutoHideScrollbar extends React.Component<IProps> {
private containerRef: React.RefObject<HTMLDivElement> = React.createRef();
componentDidMount() { componentDidMount() {
if (this.containerRef && this.props.onScroll) { if (this.containerRef.current && this.props.onScroll) {
// 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.containerRef.addEventListener("scroll", this.props.onScroll, { passive: true }); this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
}
if (this.props.wrappedRef) {
this.props.wrappedRef(this.containerRef.current);
} }
} }
componentWillUnmount() { componentWillUnmount() {
if (this.containerRef && this.props.onScroll) { if (this.containerRef.current && this.props.onScroll) {
this.containerRef.removeEventListener("scroll", this.props.onScroll); this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
}
}
_collectContainerRef(ref) {
if (ref && !this.containerRef) {
this.containerRef = ref;
}
if (this.props.wrappedRef) {
this.props.wrappedRef(ref);
} }
} }
getScrollTop() { getScrollTop() {
return this.containerRef.scrollTop; return this.containerRef.current.scrollTop;
} }
render() { render() {
return (<div return (<div
ref={this._collectContainerRef} ref={this.containerRef}
style={this.props.style} style={this.props.style}
className={["mx_AutoHideScrollbar", this.props.className].join(" ")} className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
onWheel={this.props.onWheel} onWheel={this.props.onWheel}

2
src/components/views/dialogs/AddExistingToSpaceDialog.tsx
View file

@ -212,7 +212,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
autoComplete={true} autoComplete={true}
autoFocus={true} autoFocus={true}
/> />
<AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace"> <AutoHideScrollbar className="mx_AddExistingToSpace_content">
{ rooms.length > 0 ? ( { rooms.length > 0 ? (
<div className="mx_AddExistingToSpace_section"> <div className="mx_AddExistingToSpace_section">
<h3>{ _t("Rooms") }</h3> <h3>{ _t("Rooms") }</h3>