@helpscout/hsds-react/components/Scrollable/Scrollable.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Scrollable = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _EventListener = _interopRequireDefault(require("../EventListener"));

var _ScrollLock = _interopRequireDefault(require("../ScrollLock"));

var _classnames = _interopRequireDefault(require("classnames"));

var _scrollFade = require("../../utilities/scrollFade");

var _Scrollable = require("./Scrollable.css");

var _jsxRuntime = require("react/jsx-runtime");

// Deprecated in favour of ScrollableContainer

/* istanbul ignore file */
function noop() {}

var Scrollable = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Scrollable, _React$PureComponent);

  function Scrollable() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.containernode = void 0;

    _this.applyFade = function () {
      var containerNode = _this.containerNode;

      if (containerNode) {
        _this.applyFadeStyles({
          currentTarget: containerNode
        });
      }
    };

    _this.applyFadeStyles = function (event) {
      var _this$props = _this.props,
          offset = _this$props.faderSize,
          fade = _this$props.fade,
          fadeLeft = _this$props.fadeLeft,
          fadeRight = _this$props.fadeRight,
          fadeBottom = _this$props.fadeBottom;
      if (!fade && !fadeBottom && !fadeRight && !fadeLeft) return;

      if (fade && _this.faderNodeTop) {
        var transformTop = (0, _scrollFade.getFadeTopStyles)(event, offset);
        _this.faderNodeTop.style.transform = transformTop;

        _this.applyFadeStyleOffset(_this.faderNodeTop);
      }

      if (fadeBottom && _this.faderNodeBottom) {
        var transformBottom = (0, _scrollFade.getFadeBottomStyles)(event, offset);
        _this.faderNodeBottom.style.transform = transformBottom;

        _this.applyFadeStyleOffset(_this.faderNodeBottom);
      }

      if (fadeLeft && _this.faderNodeLeft) {
        var transformLeft = (0, _scrollFade.getFadeLeftStyles)(event, offset);
        _this.faderNodeLeft.style.transform = transformLeft;

        _this.applyFadeStyleOffset(_this.faderNodeLeft);
      }

      if (fadeRight && _this.faderNodeRight) {
        var transformRight = (0, _scrollFade.getFadeRightStyles)(event, offset);
        _this.faderNodeRight.style.transform = transformRight;

        _this.applyFadeStyleOffset(_this.faderNodeRight);
      }
    };

    _this.handleOnScroll = function (event) {
      _this.applyFadeStyles(event);

      _this.props.onScroll(event);
    };

    _this.setFaderNodeTopNode = function (node) {
      return _this.faderNodeTop = node;
    };

    _this.setFaderNodeLeftNode = function (node) {
      return _this.faderNodeLeft = node;
    };

    _this.setFaderNodeBottomNode = function (node) {
      return _this.faderNodeBottom = node;
    };

    _this.setFaderNodeRightNode = function (node) {
      return _this.faderNodeRight = node;
    };

    _this.setContainerNode = function (node) {
      _this.containerNode = node;

      _this.props.scrollableRef(node);
    };

    _this.handleWindowResize = function () {
      _this.applyFade();
    };

    return _this;
  }

  var _proto = Scrollable.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.applyFade();
  };

  _proto.applyFadeStyleOffset = function applyFadeStyleOffset(node) {
    // Guard, just in case the node element is removed.
    if (node) {
      var offset = this.containerNode.offsetWidth - this.containerNode.scrollWidth + "px";
      node.style.right = offset;
    }
  };

  _proto.renderFaderTop = function renderFaderTop() {
    var _this$props2 = this.props,
        backgroundColor = _this$props2.backgroundColor,
        fade = _this$props2.fade,
        rounded = _this$props2.rounded;
    if (!fade) return null;
    var componentClassName = (0, _classnames.default)('c-Scrollable__fader', 'is-top', rounded && 'is-rounded');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.FaderUI, {
      className: componentClassName,
      ref: this.setFaderNodeTopNode,
      role: "presentation",
      style: {
        color: backgroundColor
      }
    });
  };

  _proto.renderFaderLeft = function renderFaderLeft() {
    var _this$props3 = this.props,
        backgroundColor = _this$props3.backgroundColor,
        fadeLeft = _this$props3.fadeLeft,
        rounded = _this$props3.rounded;
    if (!fadeLeft) return;
    var componentClassName = (0, _classnames.default)('c-Scrollable__fader', 'is-left');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.FaderUI, {
      fadeSides: true,
      rounded: rounded,
      className: componentClassName,
      ref: this.setFaderNodeLeftNode,
      role: "presentation",
      style: {
        color: backgroundColor
      }
    });
  };

  _proto.renderFaderRight = function renderFaderRight() {
    var _this$props4 = this.props,
        backgroundColor = _this$props4.backgroundColor,
        fadeRight = _this$props4.fadeRight,
        rounded = _this$props4.rounded;
    if (!fadeRight) return;
    var componentClassName = (0, _classnames.default)('c-Scrollable__fader', 'is-right');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.FaderUI, {
      fadeSides: true,
      rounded: rounded,
      className: componentClassName,
      ref: this.setFaderNodeRightNode,
      role: "presentation",
      style: {
        color: backgroundColor
      }
    });
  };

  _proto.renderFaderBottom = function renderFaderBottom() {
    var _this$props5 = this.props,
        backgroundColor = _this$props5.backgroundColor,
        fadeBottom = _this$props5.fadeBottom,
        rounded = _this$props5.rounded;
    if (!fadeBottom) return null;
    var componentClassName = (0, _classnames.default)('c-Scrollable__fader', 'is-bottom', rounded && 'is-rounded');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.FaderUI, {
      className: componentClassName,
      ref: this.setFaderNodeBottomNode,
      role: "presentation",
      style: {
        color: backgroundColor,
        transform: 'scaleY(1)'
      }
    });
  };

  _proto.renderContent = function renderContent() {
    var _this$props6 = this.props,
        children = _this$props6.children,
        contentClassName = _this$props6.contentClassName,
        fade = _this$props6.fade,
        fadeLeft = _this$props6.fadeLeft,
        fadeRight = _this$props6.fadeRight,
        isScrollLocked = _this$props6.isScrollLocked;
    var componentClassName = (0, _classnames.default)('c-ScrollableNode', 'c-Scrollable__content', contentClassName);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.ContentUI, {
      fade: fade,
      fadeSides: fadeLeft || fadeRight,
      isScrollLocked: isScrollLocked,
      className: componentClassName,
      onScroll: this.handleOnScroll,
      ref: this.setContainerNode,
      children: children
    });
  };

  _proto.render = function render() {
    var _this$props7 = this.props,
        backgroundColor = _this$props7.backgroundColor,
        children = _this$props7.children,
        className = _this$props7.className,
        contentClassName = _this$props7.contentClassName,
        fade = _this$props7.fade,
        fadeBottom = _this$props7.fadeBottom,
        innerRef = _this$props7.innerRef,
        onScroll = _this$props7.onScroll,
        rounded = _this$props7.rounded,
        scrollableRef = _this$props7.scrollableRef,
        isScrollLocked = _this$props7.isScrollLocked,
        scrollLockDirection = _this$props7.scrollLockDirection,
        fadeLeft = _this$props7.fadeLeft,
        fadeRight = _this$props7.fadeRight,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props7, ["backgroundColor", "children", "className", "contentClassName", "fade", "fadeBottom", "innerRef", "onScroll", "rounded", "scrollableRef", "isScrollLocked", "scrollLockDirection", "fadeLeft", "fadeRight"]);
    var componentClassName = (0, _classnames.default)('c-Scrollable', fade && 'has-fade', rounded && 'is-rounded', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Scrollable.ScrollableUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      fadeSides: fadeLeft || fadeRight,
      className: componentClassName,
      ref: innerRef,
      children: [(fadeLeft || fadeRight) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EventListener.default, {
        event: "resize",
        handler: this.handleWindowResize
      }), this.renderFaderLeft(), this.renderFaderTop(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollLock.default, {
        isDisabled: !isScrollLocked,
        direction: scrollLockDirection,
        children: this.renderContent()
      }), this.renderFaderRight(), this.renderFaderBottom()]
    }));
  };

  return Scrollable;
}(_react.default.PureComponent);

exports.Scrollable = Scrollable;
Scrollable.defaultProps = {
  backgroundColor: 'white',
  'data-cy': 'Scrollable',
  fade: false,
  fadeBottom: false,
  fadeLeft: false,
  fadeRight: false,
  faderSize: 28,
  innerRef: noop,
  onScroll: noop,
  scrollableRef: noop,
  isScrollLocked: true
};
Scrollable.propTypes = {
  /** Background color for the fade elements. */
  backgroundColor: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Custom class names for the component's content DOM node. */
  contentClassName: _propTypes.default.string,

  /** Adds a "fade-to-white" visual experience while scrolling. Appears at the top. */
  fade: _propTypes.default.bool,

  /** Adds a "fade-to-white" visual experience while scrolling. Appears at the bottom. */
  fadeBottom: _propTypes.default.bool,

  /** Adds a "fade-to-white" visual experience while scrolling. Appears at the Left. */
  fadeLeft: _propTypes.default.bool,

  /** Adds a "fade-to-white" visual experience while scrolling. Appears at the Right. */
  fadeRight: _propTypes.default.bool,

  /** Size in pixels of the "shader"*/
  faderSize: _propTypes.default.number,

  /** Whether to use `ScrollLock` or not. Default `true` */
  isScrollLocked: _propTypes.default.bool,

  /** Enables rounded corners for the top fade element. */
  rounded: _propTypes.default.bool,

  /** Callback function when component is scrolled. */
  onScroll: _propTypes.default.func,

  /** `ScrollLock` direction */
  scrollLockDirection: _propTypes.default.string,

  /** Retrieves the scrollable node. */
  scrollableRef: _propTypes.default.func,

  /** Retrieve the DOM Node */
  innerRef: _propTypes.default.func,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Scrollable;
exports.default = _default;