react-misc-toolbox/dist/AccordionScroller.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _ScrollNavHorizontal$;

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _SVGPrev = require('./svg/SVGPrev');

var _SVGPrev2 = _interopRequireDefault(_SVGPrev);

var _SVGNext = require('./svg/SVGNext');

var _SVGNext2 = _interopRequireDefault(_SVGNext);

var _recompose = require('recompose');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _RTGCSSTransitionFade = require('./RTGCSSTransitionFade');

var _RTGCSSTransitionFade2 = _interopRequireDefault(_RTGCSSTransitionFade);

var _helperFunctions = require('./helperFunctions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var interval = void 0;

var ScrollNavHorizontal = function (_React$Component) {
  (0, _inherits3.default)(ScrollNavHorizontal, _React$Component);

  function ScrollNavHorizontal() {
    var _ref,
        _this2 = this;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ScrollNavHorizontal);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ScrollNavHorizontal.__proto__ || (0, _getPrototypeOf2.default)(ScrollNavHorizontal)).call.apply(_ref, [this].concat(args))), _this), _this.handleScroll = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var _this$props, containerClass, containerRef, leeway, setShowLeft, setShowRight, showLog, containerElement;

      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _this$props = _this.props, containerClass = _this$props.containerClass, containerRef = _this$props.containerRef, leeway = _this$props.leeway, setShowLeft = _this$props.setShowLeft, setShowRight = _this$props.setShowRight, showLog = _this$props.showLog;
              containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
              _context.next = 4;
              return (0, _helperFunctions.delay)(500);

            case 4:

              showLog && console.log('// handleScroll // ', 'containerElement.scrollLeft + leeway: ', containerElement.scrollLeft + leeway, 'scrollWidth: ', containerElement.scrollWidth, 'clientWidth: ', containerElement.clientWidth, 'diff: ', containerElement.scrollWidth - containerElement.clientWidth);

              if (!(containerElement.scrollLeft === 0 || containerElement.scrollWidth === containerElement.clientWidth)) {
                _context.next = 11;
                break;
              }

              _context.next = 8;
              return setShowLeft(false);

            case 8:
              clearInterval(interval);
              _context.next = 14;
              break;

            case 11:
              if (!(containerElement.scrollLeft > 0)) {
                _context.next = 14;
                break;
              }

              _context.next = 14;
              return setShowLeft(true);

            case 14:
              if (!(containerElement.scrollLeft + leeway >= containerElement.scrollWidth - containerElement.clientWidth || containerElement.scrollWidth === containerElement.clientWidth)) {
                _context.next = 20;
                break;
              }

              _context.next = 17;
              return setShowRight(false);

            case 17:
              clearInterval(interval);
              _context.next = 23;
              break;

            case 20:
              if (!(containerElement.scrollWidth >= containerElement.clientWidth)) {
                _context.next = 23;
                break;
              }

              _context.next = 23;
              return setShowRight(true);

            case 23:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, _this2);
    })), _this.renderNav = function (direction) {
      var _this$props2 = _this.props,
          containerClass = _this$props2.containerClass,
          height = _this$props2.height,
          width = _this$props2.width,
          showLeft = _this$props2.showLeft,
          showRight = _this$props2.showRight,
          containerRef = _this$props2.containerRef;

      var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });

      var autoHeight = containerElement && containerElement.clientHeight;
      var autoWidth = 18;

      var startScroll = function startScroll(e) {
        e.stopPropagation();
        clearInterval(interval);

        if (containerElement) {
          interval = setInterval(function () {
            return direction === 'left' ? containerElement.scrollLeft -= 20 : containerElement.scrollLeft += 20;
          }, 50);
        }
      };
      var endScroll = function endScroll(e) {
        e.stopPropagation();
        clearInterval(interval);
      };
      return _react2.default.createElement(
        _RTGCSSTransitionFade2.default,
        {
          style: {
            width: width ? width : autoWidth,
            height: height ? height : autoHeight
          },
          onMouseDown: function onMouseDown(e) {
            return startScroll(e);
          },
          onMouseUp: function onMouseUp(e) {
            return endScroll(e);
          },
          onTouchStart: function onTouchStart(e) {
            return startScroll(e);
          },
          onTouchEnd: function onTouchEnd(e) {
            return endScroll(e);
          },
          className: 'scrollnavhorizontal__scroller scrollnavhorizontal__scroller--' + direction,
          'in': direction === 'left' ? showLeft : showRight
        },
        _react2.default.createElement(_style2.default, {
          styleId: '1090513052',
          css: '.scrollnavhorizontal__scroller{-webkit-transition:opacity 1000ms ease-in-out,background-color 300ms ease-out;transition:opacity 1000ms ease-in-out,background-color 300ms ease-out;background-color:rgba(89,27,100,0.521);z-index:3;height:10rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}.scrollnavhorizontal__scroller svg{background:white;}.scrollnavhorizontal__scroller:hover{background-color:rgba(89,27,100,0.267);}.scrollnavhorizontal__scroller:active{background-color:#591b64;}.scrollnavhorizontal__scroller--left{left:0;}.scrollnavhorizontal__scroller--right{right:0;}'
        }),
        direction === 'left' ? _react2.default.createElement(_SVGPrev2.default, { size: width ? width : autoWidth }) : _react2.default.createElement(_SVGNext2.default, { size: width ? width : autoWidth })
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ScrollNavHorizontal, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          containerClass = _props.containerClass,
          containerRef = _props.containerRef;

      this.handleScroll();
      var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
      containerElement.addEventListener('scroll', this.handleScroll);
      window.addEventListener('resize', this.handleScroll);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      prevProps.numberOfItems !== this.props.numberOfItems && this.handleScroll();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearInterval(interval);
      var _props2 = this.props,
          containerClass = _props2.containerClass,
          containerRef = _props2.containerRef;

      var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
      containerElement.removeEventListener('scroll', this.handleScroll);
      window.removeEventListener('resize', this.handleScroll);
    }
  }, {
    key: 'render',
    value: function render() {
      return typeof window !== 'undefined' && _react2.default.createElement(
        _react2.default.Fragment,
        null,
        this.renderNav('left'),
        this.props.children,
        this.renderNav('right')
      );
    }
  }]);
  return ScrollNavHorizontal;
}(_react2.default.Component);

ScrollNavHorizontal.defaultProps = {
  showLog: false,
  leeway: 0
};

ScrollNavHorizontal.propTypes = (_ScrollNavHorizontal$ = {
  containerClass: _propTypes2.default.string,
  leeway: _propTypes2.default.number,
  width: _propTypes2.default.number,
  showLeft: _propTypes2.default.bool.isRequired,
  showRight: _propTypes2.default.bool.isRequired,
  setShowLeft: _propTypes2.default.func.isRequired
}, (0, _defineProperty3.default)(_ScrollNavHorizontal$, 'setShowLeft', _propTypes2.default.func.isRequired), (0, _defineProperty3.default)(_ScrollNavHorizontal$, 'numberOfItems', _propTypes2.default.number), _ScrollNavHorizontal$);

var enhance = (0, _recompose.compose)((0, _recompose.withState)('showLeft', 'setShowLeft', false), (0, _recompose.withState)('showRight', 'setShowRight', false), (0, _recompose.onlyUpdateForKeys)(['showLeft', 'showRight', 'numberOfItems', 'children']));

exports.default = enhance(ScrollNavHorizontal);