wix-style-react/src/Sidebar/SidebarContentWrapper.js

wix-style-react

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 {
  static propTypes = {
    skin: PropTypes.oneOf(['dark', 'light']),
    containerDataHook: PropTypes.string,
    containerClasses: PropTypes.string,
    children: PropTypes.node,
  };

  static defaultProps = {
    skin: sidebarSkins.dark,
  };

  constructor(props) {
    super(props);

    this.childrenContainerRef = React.createRef();
    this.childrenContentRef = React.createRef();
    this.state = {
      isScrollbarDisplayed: false,
    };

    this.childrenResizeObserver =
      typeof window !== 'undefined' &&
      'ResizeObserver' in window &&
      new ResizeObserver(this._handleChildrenResize);
  }

  _handleChildrenResize = () => {
    this._shouldAddGradient();
  };

  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 (
      <div
        className={css.containerClasses}
        ref={this.childrenContainerRef}
        data-hook={containerDataHook}
      >
        <div className={css.childrenContent} ref={this.childrenContentRef}>
          {children}
        </div>
        {this.state.isScrollbarDisplayed && (
          <div
            className={gradientClasses}
            data-hook={dataHooks.scrollBarGradient}
          />
        )}
      </div>
    );
  }
}