wix-style-react
Version:
wix-style-react
65 lines • 2.88 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Sidebar.st.css';
import { dataHooks, sidebarSkins } from './constants';
/** A sidebar content children wrapper to add gradient */
export class SidebarContentWrapper extends Component {
constructor(props) {
super(props);
this._handleChildrenResize = () => {
this._shouldAddGradient();
};
this.childrenContainerRef = React.createRef();
this.childrenContentRef = React.createRef();
this.state = {
isScrollbarDisplayed: false,
};
this.childrenResizeObserver =
typeof window !== 'undefined' &&
'ResizeObserver' in window &&
new ResizeObserver(this._handleChildrenResize);
}
componentDidMount() {
this._shouldAddGradient();
const { childrenResizeObserver, childrenContainerRef, childrenContentRef } = this;
if (childrenResizeObserver && childrenContainerRef.current) {
childrenResizeObserver.observe(childrenContainerRef.current);
}
if (childrenResizeObserver && childrenContentRef.current) {
childrenResizeObserver.observe(childrenContentRef.current);
}
}
componentWillUnmount() {
const { childrenResizeObserver, childrenContainerRef, childrenContentRef } = this;
if (childrenResizeObserver && childrenContainerRef.current) {
childrenResizeObserver.unobserve(childrenContainerRef.current);
}
if (childrenResizeObserver && childrenContentRef.current) {
childrenResizeObserver.unobserve(childrenContentRef.current);
}
}
_shouldAddGradient() {
const { scrollHeight, clientHeight } = this.childrenContainerRef.current;
this.setState({ isScrollbarDisplayed: scrollHeight > clientHeight });
}
render() {
const { skin, containerClasses, children, containerDataHook } = this.props;
const css = { ...classes, containerClasses };
const gradientClasses = st(classes.gradient, {
skin,
});
return (React.createElement("div", { className: css.containerClasses, ref: this.childrenContainerRef, "data-hook": containerDataHook },
React.createElement("div", { className: css.childrenContent, ref: this.childrenContentRef }, children),
this.state.isScrollbarDisplayed && (React.createElement("div", { className: gradientClasses, "data-hook": dataHooks.scrollBarGradient }))));
}
}
SidebarContentWrapper.propTypes = {
skin: PropTypes.oneOf(['dark', 'light']),
containerDataHook: PropTypes.string,
containerClasses: PropTypes.string,
children: PropTypes.node,
};
SidebarContentWrapper.defaultProps = {
skin: sidebarSkins.dark,
};
//# sourceMappingURL=SidebarContentWrapper.js.map