mirror of https://github.com/vector-im/riot-web
Make AutoHideScrollbar pass through all unknown props
parent
079a5c10ad
commit
3f12b7280d
|
@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React, {HTMLAttributes} from "react";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps extends HTMLAttributes<HTMLDivElement> {
|
||||||
className?: string;
|
className?: string;
|
||||||
onScroll?: () => void;
|
onScroll?: () => void;
|
||||||
onWheel?: () => void;
|
onWheel?: () => void;
|
||||||
|
@ -52,14 +52,18 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
|
||||||
|
|
||||||
return (<div
|
return (<div
|
||||||
|
{...otherProps}
|
||||||
ref={this.containerRef}
|
ref={this.containerRef}
|
||||||
style={this.props.style}
|
style={style}
|
||||||
className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
|
className={["mx_AutoHideScrollbar", className].join(" ")}
|
||||||
onWheel={this.props.onWheel}
|
onWheel={onWheel}
|
||||||
tabIndex={this.props.tabIndex}
|
tabIndex={tabIndex}
|
||||||
>
|
>
|
||||||
{ this.props.children }
|
{ children }
|
||||||
</div>);
|
</div>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -185,21 +185,24 @@ export default class IndicatorScrollbar extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
|
||||||
|
|
||||||
const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
|
const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
|
||||||
const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
|
const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
|
||||||
const leftOverflowIndicator = this.props.trackHorizontalOverflow
|
const leftOverflowIndicator = trackHorizontalOverflow
|
||||||
? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
|
? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
|
||||||
const rightOverflowIndicator = this.props.trackHorizontalOverflow
|
const rightOverflowIndicator = trackHorizontalOverflow
|
||||||
? <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._collectScrollerComponent}
|
||||||
wrappedRef={this._collectScroller}
|
wrappedRef={this._collectScroller}
|
||||||
onWheel={this.onMouseWheel}
|
onWheel={this.onMouseWheel}
|
||||||
{...this.props}
|
{...otherProps}
|
||||||
>
|
>
|
||||||
{ leftOverflowIndicator }
|
{ leftOverflowIndicator }
|
||||||
{ this.props.children }
|
{ children }
|
||||||
{ rightOverflowIndicator }
|
{ rightOverflowIndicator }
|
||||||
</AutoHideScrollbar>);
|
</AutoHideScrollbar>);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue