@flexis/ui/components/ScrollArea/ScrollArea.es.js

Styleless React Components

import _extends from "@babel/runtime-corejs3/helpers/extends";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent;
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import { style, classes } from './ScrollArea.st.css';

var ScrollArea =
/** @class */
function () {
  var ScrollArea = /*#__PURE__*/function (_PureComponent) {
    _inherits(ScrollArea, _PureComponent);

    function ScrollArea() {
      var _this;

      _classCallCheck(this, ScrollArea);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollArea).apply(this, arguments));
      _this.state = {
        topShadow: false,
        rightShadow: false,
        bottomShadow: false,
        leftShadow: false
      };
      _this.isHiddenScrollbar = false;
      _this.scroller = null;
      return _this;
    }

    _createClass(ScrollArea, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            className = _this$props.className,
            ignoreTopShadow = _this$props.ignoreTopShadow,
            ignoreRightShadow = _this$props.ignoreRightShadow,
            ignoreBottomShadow = _this$props.ignoreBottomShadow,
            ignoreLeftShadow = _this$props.ignoreLeftShadow,
            hideXScrollbar = _this$props.hideXScrollbar,
            hideYScrollbar = _this$props.hideYScrollbar,
            children = _this$props.children,
            props = _objectWithoutProperties(_this$props, ["className", "ignoreTopShadow", "ignoreRightShadow", "ignoreBottomShadow", "ignoreLeftShadow", "hideXScrollbar", "hideYScrollbar", "children"]);

        var _this$state = this.state,
            topShadow = _this$state.topShadow,
            rightShadow = _this$state.rightShadow,
            bottomShadow = _this$state.bottomShadow,
            leftShadow = _this$state.leftShadow;
        return _createElement("div", _extends({}, omit(props, ['y2xScroll']), {
          className: style(classes.root, className)
        }), _createElement("div", {
          ref: this.onScrollerRef,
          className: style(classes.scroller, {
            hideXScrollbar: hideXScrollbar,
            hideYScrollbar: hideYScrollbar
          }),
          onScroll: this.onScroll,
          onWheel: this.onWheel
        }, children), _createElement("div", {
          className: style(classes.shadow, {
            'top': true,
            'active': topShadow && !ignoreTopShadow
          })
        }), _createElement("div", {
          className: style(classes.shadow, {
            'right': true,
            'active': rightShadow && !ignoreRightShadow
          })
        }), _createElement("div", {
          className: style(classes.shadow, {
            'bottom': true,
            'active': bottomShadow && !ignoreBottomShadow
          })
        }), _createElement("div", {
          className: style(classes.shadow, {
            'left': true,
            'active': leftShadow && !ignoreLeftShadow
          })
        }));
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate() {
        this.setShadow(this.scroller);
        this.hideScroll(this.scroller);
      }
    }, {
      key: "onScrollerRef",
      value: function onScrollerRef(ref) {
        this.scroller = ref;
        this.setShadow(ref);
        this.hideScroll(ref);
      }
    }, {
      key: "onScroll",
      value: function onScroll(_ref) {
        var currentTarget = _ref.currentTarget;
        this.setShadow(currentTarget);
      }
    }, {
      key: "onWheel",
      value: function onWheel(event) {
        var isHiddenScrollbar = this.isHiddenScrollbar;
        var y2xScroll = this.props.y2xScroll;
        var deltaY = event.deltaY,
            currentTarget = event.currentTarget;

        if (y2xScroll && !isHiddenScrollbar) {
          event.preventDefault();
          currentTarget.scrollLeft -= deltaY;
        }
      }
    }, {
      key: "setShadow",
      value: function setShadow(element) {
        if (!element) {
          return;
        }

        var scrollLeft = element.scrollLeft,
            scrollTop = element.scrollTop,
            scrollWidth = element.scrollWidth,
            scrollHeight = element.scrollHeight,
            clientWidth = element.clientWidth,
            clientHeight = element.clientHeight;
        this.setState(function () {
          return {
            topShadow: scrollTop > 0,
            rightShadow: scrollLeft + clientWidth < scrollWidth,
            bottomShadow: scrollTop + clientHeight < scrollHeight,
            leftShadow: scrollLeft > 0
          };
        });
      }
    }, {
      key: "hideScroll",
      value: function hideScroll(element) {
        if (!element) {
          return;
        }

        var _this$props2 = this.props,
            hideXScrollbar = _this$props2.hideXScrollbar,
            hideYScrollbar = _this$props2.hideYScrollbar;
        var xOffset = element.offsetHeight - element.clientHeight;
        var yOffset = element.offsetWidth - element.clientWidth;
        this.isHiddenScrollbar = !xOffset;

        if (hideXScrollbar) {
          element.style.marginBottom = "-".concat(xOffset, "px");
        } else {
          element.style.marginBottom = '0';
        }

        if (hideYScrollbar) {
          element.style.marginRight = "-".concat(yOffset, "px");
        } else {
          element.style.marginRight = '0';
        }
      }
    }]);

    return ScrollArea;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? ScrollArea.propTypes = {
    ignoreTopShadow: PropTypes.bool,
    ignoreRightShadow: PropTypes.bool,
    ignoreBottomShadow: PropTypes.bool,
    ignoreLeftShadow: PropTypes.bool,
    hideXScrollbar: PropTypes.bool,
    hideYScrollbar: PropTypes.bool,
    y2xScroll: PropTypes.bool,
    children: PropTypes.node
  } : void 0;
  ScrollArea.defaultProps = {
    ignoreTopShadow: false,
    ignoreRightShadow: false,
    ignoreBottomShadow: false,
    ignoreLeftShadow: false,
    hideXScrollbar: false,
    hideYScrollbar: false,
    y2xScroll: false
  };

  __decorate([Bind()], ScrollArea.prototype, "onScrollerRef", null);

  __decorate([Bind()], ScrollArea.prototype, "onScroll", null);

  __decorate([Bind()], ScrollArea.prototype, "onWheel", null);

  return ScrollArea;
}();

export default ScrollArea;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Njcm9sbEFyZWEvU2Nyb2xsQXJlYS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQSxPQUFPLEtBQVAsTUFNTyxPQU5QOzs7QUFPQSxPQUFPLFNBQVAsTUFBc0IsWUFBdEI7QUFDQSxTQUVDLElBRkQsRUFHQyxJQUhELFFBSU8sZUFKUDtBQUtBLFNBQ0MsS0FERCxFQUVDLE9BRkQsUUFHTyxxQkFIUDs7QUE0QkEsSUFBQSxVQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsVUFBckI7QUFBQTs7QUFBQSwwQkFBQTtBQUFBOztBQUFBOzs7QUF1QkMsWUFBQSxLQUFBLEdBQVE7QUFDUCxRQUFBLFNBQVMsRUFBSyxLQURQO0FBRVAsUUFBQSxXQUFXLEVBQUcsS0FGUDtBQUdQLFFBQUEsWUFBWSxFQUFFLEtBSFA7QUFJUCxRQUFBLFVBQVUsRUFBSTtBQUpQLE9BQVI7QUFPUSxZQUFBLGlCQUFBLEdBQW9CLEtBQXBCO0FBQ0EsWUFBQSxRQUFBLEdBQTJCLElBQTNCO0FBL0JUO0FBd0xDOztBQXhMRDtBQUFBO0FBQUEsK0JBaUNPO0FBQUEsMEJBWUQsS0FBSyxLQVpKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosZUFKSSxlQUlKLGVBSkk7QUFBQSxZQUtKLGlCQUxJLGVBS0osaUJBTEk7QUFBQSxZQU1KLGtCQU5JLGVBTUosa0JBTkk7QUFBQSxZQU9KLGdCQVBJLGVBT0osZ0JBUEk7QUFBQSxZQVFKLGNBUkksZUFRSixjQVJJO0FBQUEsWUFTSixjQVRJLGVBU0osY0FUSTtBQUFBLFlBVUosUUFWSSxlQVVKLFFBVkk7QUFBQSxZQVdELEtBWEM7O0FBQUEsMEJBa0JELEtBQUssS0FsQko7QUFBQSxZQWNKLFNBZEksZUFjSixTQWRJO0FBQUEsWUFlSixXQWZJLGVBZUosV0FmSTtBQUFBLFlBZ0JKLFlBaEJJLGVBZ0JKLFlBaEJJO0FBQUEsWUFpQkosVUFqQkksZUFpQkosVUFqQkk7QUFvQkwsZUFDQyxtQ0FDSyxJQUFJLENBQUMsS0FBRCxFQUFRLENBQUMsV0FBRCxDQUFSLENBRFQ7QUFFQyxVQUFBLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQVQsRUFBZSxTQUFmO0FBRmpCLFlBSUM7QUFDQyxVQUFBLEdBQUcsRUFBRSxLQUFLLGFBRFg7QUFFQyxVQUFBLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVQsRUFBbUI7QUFDbEMsWUFBQSxjQUFjLEVBQWQsY0FEa0M7QUFFbEMsWUFBQSxjQUFjLEVBQWQ7QUFGa0MsV0FBbkIsQ0FGakI7QUFNQyxVQUFBLFFBQVEsRUFBRSxLQUFLLFFBTmhCO0FBT0MsVUFBQSxPQUFPLEVBQUUsS0FBSztBQVBmLFdBU0UsUUFURixDQUpELEVBZUM7QUFDQyxVQUFBLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQVQsRUFBaUI7QUFDaEMsbUJBQVUsSUFEc0I7QUFFaEMsc0JBQVUsU0FBUyxJQUFJLENBQUM7QUFGUSxXQUFqQjtBQURqQixVQWZELEVBcUJDO0FBQ0MsVUFBQSxTQUFTLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFULEVBQWlCO0FBQ2hDLHFCQUFVLElBRHNCO0FBRWhDLHNCQUFVLFdBQVcsSUFBSSxDQUFDO0FBRk0sV0FBakI7QUFEakIsVUFyQkQsRUEyQkM7QUFDQyxVQUFBLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQVQsRUFBaUI7QUFDaEMsc0JBQVUsSUFEc0I7QUFFaEMsc0JBQVUsWUFBWSxJQUFJLENBQUM7QUFGSyxXQUFqQjtBQURqQixVQTNCRCxFQWlDQztBQUNDLFVBQUEsU0FBUyxFQUFFLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBVCxFQUFpQjtBQUNoQyxvQkFBVSxJQURzQjtBQUVoQyxzQkFBVSxVQUFVLElBQUksQ0FBQztBQUZPLFdBQWpCO0FBRGpCLFVBakNELENBREQ7QUEwQ0E7QUEvRkY7QUFBQTtBQUFBLDJDQWlHbUI7QUFDakIsYUFBSyxTQUFMLENBQWUsS0FBSyxRQUFwQjtBQUNBLGFBQUssVUFBTCxDQUFnQixLQUFLLFFBQXJCO0FBQ0E7QUFwR0Y7QUFBQTtBQUFBLG9DQXVHdUIsR0F2R3ZCLEVBdUcwQztBQUN4QyxhQUFLLFFBQUwsR0FBZ0IsR0FBaEI7QUFDQSxhQUFLLFNBQUwsQ0FBZSxHQUFmO0FBQ0EsYUFBSyxVQUFMLENBQWdCLEdBQWhCO0FBQ0E7QUEzR0Y7QUFBQTtBQUFBLHFDQThHNEQ7QUFBQSxZQUF4QyxhQUF3QyxRQUF4QyxhQUF3QztBQUMxRCxhQUFLLFNBQUwsQ0FBZSxhQUFmO0FBQ0E7QUFoSEY7QUFBQTtBQUFBLDhCQW1IaUIsS0FuSGpCLEVBbUhrRDtBQUFBLFlBRy9DLGlCQUgrQyxHQUk1QyxJQUo0QyxDQUcvQyxpQkFIK0M7QUFBQSxZQU0vQyxTQU4rQyxHQU81QyxLQUFLLEtBUHVDLENBTS9DLFNBTitDO0FBQUEsWUFTL0MsTUFUK0MsR0FXNUMsS0FYNEMsQ0FTL0MsTUFUK0M7QUFBQSxZQVUvQyxhQVYrQyxHQVc1QyxLQVg0QyxDQVUvQyxhQVYrQzs7QUFhaEQsWUFBSSxTQUFTLElBQUksQ0FBQyxpQkFBbEIsRUFBcUM7QUFDcEMsVUFBQSxLQUFLLENBQUMsY0FBTjtBQUNBLFVBQUEsYUFBYSxDQUFDLFVBQWQsSUFBNEIsTUFBNUI7QUFDQTtBQUNEO0FBcElGO0FBQUE7QUFBQSxnQ0FzSW1CLE9BdEluQixFQXNJMEM7QUFFeEMsWUFBSSxDQUFDLE9BQUwsRUFBYztBQUNiO0FBQ0E7O0FBSnVDLFlBT3ZDLFVBUHVDLEdBYXBDLE9BYm9DLENBT3ZDLFVBUHVDO0FBQUEsWUFRdkMsU0FSdUMsR0FhcEMsT0Fib0MsQ0FRdkMsU0FSdUM7QUFBQSxZQVN2QyxXQVR1QyxHQWFwQyxPQWJvQyxDQVN2QyxXQVR1QztBQUFBLFlBVXZDLFlBVnVDLEdBYXBDLE9BYm9DLENBVXZDLFlBVnVDO0FBQUEsWUFXdkMsV0FYdUMsR0FhcEMsT0Fib0MsQ0FXdkMsV0FYdUM7QUFBQSxZQVl2QyxZQVp1QyxHQWFwQyxPQWJvQyxDQVl2QyxZQVp1QztBQWV4QyxhQUFLLFFBQUwsQ0FBYztBQUFBLGlCQUFPO0FBQ3BCLFlBQUEsU0FBUyxFQUFLLFNBQVMsR0FBRyxDQUROO0FBRXBCLFlBQUEsV0FBVyxFQUFHLFVBQVUsR0FBRyxXQUFiLEdBQTJCLFdBRnJCO0FBR3BCLFlBQUEsWUFBWSxFQUFFLFNBQVMsR0FBRyxZQUFaLEdBQTJCLFlBSHJCO0FBSXBCLFlBQUEsVUFBVSxFQUFJLFVBQVUsR0FBRztBQUpQLFdBQVA7QUFBQSxTQUFkO0FBTUE7QUEzSkY7QUFBQTtBQUFBLGlDQTZKb0IsT0E3SnBCLEVBNkoyQztBQUV6QyxZQUFJLENBQUMsT0FBTCxFQUFjO0FBQ2I7QUFDQTs7QUFKd0MsMkJBU3JDLEtBQUssS0FUZ0M7QUFBQSxZQU94QyxjQVB3QyxnQkFPeEMsY0FQd0M7QUFBQSxZQVF4QyxjQVJ3QyxnQkFReEMsY0FSd0M7QUFVekMsWUFBTSxPQUFPLEdBQUcsT0FBTyxDQUFDLFlBQVIsR0FBdUIsT0FBTyxDQUFDLFlBQS9DO0FBQ0EsWUFBTSxPQUFPLEdBQUcsT0FBTyxDQUFDLFdBQVIsR0FBc0IsT0FBTyxDQUFDLFdBQTlDO0FBRUEsYUFBSyxpQkFBTCxHQUF5QixDQUFDLE9BQTFCOztBQUVBLFlBQUksY0FBSixFQUFvQjtBQUNuQixVQUFBLE9BQU8sQ0FBQyxLQUFSLENBQWMsWUFBZCxjQUFpQyxPQUFqQztBQUNBLFNBRkQsTUFFTztBQUNOLFVBQUEsT0FBTyxDQUFDLEtBQVIsQ0FBYyxZQUFkLEdBQTZCLEdBQTdCO0FBQ0E7O0FBRUQsWUFBSSxjQUFKLEVBQW9CO0FBQ25CLFVBQUEsT0FBTyxDQUFDLEtBQVIsQ0FBYyxXQUFkLGNBQWdDLE9BQWhDO0FBQ0EsU0FGRCxNQUVPO0FBQ04sVUFBQSxPQUFPLENBQUMsS0FBUixDQUFjLFdBQWQsR0FBNEIsR0FBNUI7QUFDQTtBQUNEO0FBdkxGOztBQUFBO0FBQUEsSUFBd0MsYUFBeEM7O0FBRVEsMENBQUEsVUFBQSxDQUFBLFNBQUEsR0FBWTtBQUNsQixJQUFBLGVBQWUsRUFBSyxTQUFTLENBQUMsSUFEWjtBQUVsQixJQUFBLGlCQUFpQixFQUFHLFNBQVMsQ0FBQyxJQUZaO0FBR2xCLElBQUEsa0JBQWtCLEVBQUUsU0FBUyxDQUFDLElBSFo7QUFJbEIsSUFBQSxnQkFBZ0IsRUFBSSxTQUFTLENBQUMsSUFKWjtBQUtsQixJQUFBLGNBQWMsRUFBTSxTQUFTLENBQUMsSUFMWjtBQU1sQixJQUFBLGNBQWMsRUFBTSxTQUFTLENBQUMsSUFOWjtBQU9sQixJQUFBLFNBQVMsRUFBVyxTQUFTLENBQUMsSUFQWjtBQVFsQixJQUFBLFFBQVEsRUFBWSxTQUFTLENBQUM7QUFSWixHQUFaO0FBV0EsRUFBQSxVQUFBLENBQUEsWUFBQSxHQUFlO0FBQ3JCLElBQUEsZUFBZSxFQUFLLEtBREM7QUFFckIsSUFBQSxpQkFBaUIsRUFBRyxLQUZDO0FBR3JCLElBQUEsa0JBQWtCLEVBQUUsS0FIQztBQUlyQixJQUFBLGdCQUFnQixFQUFJLEtBSkM7QUFLckIsSUFBQSxjQUFjLEVBQU0sS0FMQztBQU1yQixJQUFBLGNBQWMsRUFBTSxLQU5DO0FBT3JCLElBQUEsU0FBUyxFQUFXO0FBUEMsR0FBZjs7QUEwRlAsRUFBQSxVQUFBLENBQUEsQ0FEQyxJQUFJLEVBQ0wsQ0FBQSxFLG9CQUFBLEUsZUFBQSxFQUlDLElBSkQsQ0FBQTs7QUFPQSxFQUFBLFVBQUEsQ0FBQSxDQURDLElBQUksRUFDTCxDQUFBLEUsb0JBQUEsRSxVQUFBLEVBRUMsSUFGRCxDQUFBOztBQUtBLEVBQUEsVUFBQSxDQUFBLENBREMsSUFBSSxFQUNMLENBQUEsRSxvQkFBQSxFLFNBQUEsRUFpQkMsSUFqQkQsQ0FBQTs7QUFxRUQsU0FBQSxVQUFBO0FBQUMsQ0F4TEQsRUFBQTs7ZUFBcUIsVSIsInNvdXJjZVJvb3QiOiIifQ==