@helpscout/hsds-react/utilities/scrollFade.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.getFadeRightStyles = exports.getFadeLeftStyles = exports.getFadeBottomStyles = exports.getFadeTopStyles = void 0;
var offsetX = 28;
var offsetY = 32;

var getFadeTopStyles = function getFadeTopStyles(event, offset) {
  if (offset === void 0) {
    offset = offsetX;
  }

  var scrollNode = event.currentTarget;
  var scrollTop = scrollNode.scrollTop;
  var transform;

  if (scrollTop > 0) {
    var size = scrollTop < offset ? scrollTop : offset;
    var amount = offset ? size / offset : 1;
    transform = "scaleY(" + amount + ")";
  } else {
    transform = "scaleY(0)";
  }

  return transform;
};

exports.getFadeTopStyles = getFadeTopStyles;

var getFadeBottomStyles = function getFadeBottomStyles(event, offset) {
  if (offset === void 0) {
    offset = offsetX;
  }

  var scrollNode = event.currentTarget;
  var clientHeight = scrollNode.clientHeight,
      scrollHeight = scrollNode.scrollHeight,
      scrollTop = scrollNode.scrollTop;
  var scrollBottom = scrollHeight - (scrollTop + clientHeight);
  var transform;

  if (scrollBottom > 0) {
    var size = scrollBottom < offset ? scrollBottom : offset;
    var amount = offset ? size / offset : 1;
    transform = "scaleY(" + amount + ")";
  } else {
    transform = "scaleY(0)";
  }

  return transform;
};

exports.getFadeBottomStyles = getFadeBottomStyles;

var getFadeLeftStyles = function getFadeLeftStyles(event, offset) {
  if (offset === void 0) {
    offset = offsetY;
  }

  var scrollNode = event.currentTarget;
  var scrollLeft = scrollNode.scrollLeft;
  var transform;

  if (scrollLeft > 0) {
    var size = scrollLeft < offset ? scrollLeft : offset;
    var amount = offset ? size / offset : 1;
    transform = "scaleX(" + amount + ")";
  } else {
    transform = "scaleX(0)";
  }

  return transform;
};

exports.getFadeLeftStyles = getFadeLeftStyles;

var getFadeRightStyles = function getFadeRightStyles(event, offset) {
  if (offset === void 0) {
    offset = offsetY;
  }

  var scrollNode = event.currentTarget;
  var clientWidth = scrollNode.clientWidth,
      scrollWidth = scrollNode.scrollWidth,
      scrollLeft = scrollNode.scrollLeft;
  var scrollRight = scrollWidth - (scrollLeft + clientWidth);
  var transform;

  if (scrollRight > 0) {
    var size = scrollRight < offset ? scrollRight : offset;
    var amount = offset ? size / offset : 1;
    transform = "scaleX(" + amount + ")";
  } else {
    transform = "scaleX(0)";
  }

  return transform;
};

exports.getFadeRightStyles = getFadeRightStyles;