@atlaskit/editor-common/dist/es2019/ui/OverflowShadow/index.js

A package that contains common classes and components for editor and renderer

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
export const shadowClassNames = {
  RIGHT_SHADOW: 'right-shadow',
  LEFT_SHADOW: 'left-shadow'
};
export default function overflowShadow(Component, options) {
  return class OverflowShadow extends React.Component {
    constructor(...args) {
      super(...args);
      _defineProperty(this, "overflowContainerWidth", 0);
      _defineProperty(this, "state", {
        showLeftShadow: false,
        showRightShadow: false
      });
      _defineProperty(this, "handleScroll", event => {
        if (!this.overflowContainer || event.target !== this.overflowContainer || options.useShadowObserver) {
          return;
        }
        this.updateShadows();
      });
      _defineProperty(this, "updateShadows", () => {
        if (options.useShadowObserver) {
          return;
        }
        this.setState(prevState => {
          if (!this.overflowContainer) {
            return;
          }
          const diff = this.calcOverflowDiff();
          const showRightShadow = diff > 0 && diff > this.overflowContainer.scrollLeft;
          const showLeftShadow = this.showLeftShadow(this.overflowContainer);
          if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== this.state.showRightShadow) {
            return {
              showLeftShadow,
              showRightShadow
            };
          }
          return null;
        });
      });
      _defineProperty(this, "showLeftShadow", overflowContainer => {
        return !!overflowContainer && overflowContainer.scrollLeft > 0;
      });
      _defineProperty(this, "calcOverflowDiff", () => {
        if (!this.overflowContainer) {
          return 0;
        }
        this.diff = this.calcScrollableWidth();
        return this.diff - this.overflowContainer.offsetWidth;
      });
      _defineProperty(this, "calcScrollableWidth", () => {
        if (!this.scrollable && this.overflowContainer) {
          return this.overflowContainer.scrollWidth;
        }
        if (!this.scrollable) {
          return 0;
        }
        let width = 0;
        for (let i = 0; i < this.scrollable.length; i++) {
          const scrollableElement = this.scrollable[i];
          width += scrollableElement.scrollWidth;
        }
        return width;
      });
      _defineProperty(this, "handleContainer", container => {
        if (!container || this.container) {
          return;
        }
        this.container = container;
        this.overflowContainer = container.querySelector(options.overflowSelector);
        if (!this.overflowContainer) {
          this.overflowContainer = container;
        }
        if (options.useShadowObserver) {
          this.initShadowObserver();
          return;
        }
        this.updateShadows();
        this.overflowContainer.addEventListener('scroll', this.handleScroll);
      });
    }
    componentWillUnmount() {
      if (options.useShadowObserver) {
        return this.shadowObserver && this.shadowObserver.dispose();
      }
      if (this.overflowContainer) {
        this.overflowContainer.removeEventListener('scroll', this.handleScroll);
      }
      this.updateShadows();
    }
    componentDidUpdate() {
      if (!options.useShadowObserver) {
        this.updateShadows();
      }
    }
    initShadowObserver() {
      if (this.shadowObserver || !this.overflowContainer) {
        return;
      }
      this.shadowObserver = new ShadowObserver({
        scrollContainer: this.overflowContainer,
        onUpdateShadows: shadowStates => {
          this.setState(prevState => {
            const {
              showLeftShadow,
              showRightShadow
            } = shadowStates;
            if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
              return {
                showLeftShadow,
                showRightShadow
              };
            }
            return null;
          });
        }
      });
    }
    render() {
      const {
        showLeftShadow,
        showRightShadow
      } = this.state;
      let classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
      return /*#__PURE__*/React.createElement(Component, _extends({
        handleRef: this.handleContainer,
        shadowClassNames: classNames
      }, this.props));
    }
  };
}