react-misc-toolbox/dist/ContainerNav.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _SVGExpandMore = require('./svg/SVGExpandMore');

var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);

var _SVGExpandLess = require('./svg/SVGExpandLess');

var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _RTGTransition = require('./RTGTransition');

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

var _SVGDir = require('./svg/SVGDir');

var _SVGDir2 = _interopRequireDefault(_SVGDir);

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

var iconSize = '50';
var scrollOptions = { block: 'start', behavior: 'smooth' };

var ContainerNav = function ContainerNav(_ref) {
  var containerId = _ref.containerId,
      children = _ref.children;

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends4.default)({}, state, newState);
  }, {
    showContainerNav: false,
    isMounted: false
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var showContainerNav = state.showContainerNav;

  var setShowContainerNavTo = function setShowContainerNavTo(value) {
    return setState({ showContainerNav: value });
  };

  var handleScroll = function handleScroll() {
    var container = document.getElementById(containerId);
    if (container.offsetTop < window.scrollY && container.offsetTop + container.offsetHeight > window.scrollY + window.screen.height) {
      setShowContainerNavTo(true);
    }
    if (container.offsetTop > window.scrollY || container.offsetTop + container.offsetHeight < window.scrollY + window.screen.height) {
      setShowContainerNavTo(false);
    }
  };
  (0, _react.useEffect)(function () {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', handleScroll);
    }
    return function () {
      if (typeof window !== 'undefined') {
        window.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  var sharedStyle = {
    position: 'fixed',
    left: '2rem'
  };
  var container = document.getElementById(containerId);
  var renderIcon = function renderIcon(_ref2) {
    var direction = _ref2.direction,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['direction']);
    return _react2.default.createElement(_SVGDir2.default, (0, _extends4.default)({ dir: direction }, props));
  };

  var UP = 'Up';
  var DOWN = 'Down';
  return _react2.default.createElement(
    _RTGTransition2.default,
    { transitionType: 'fade', duration: 1000, in: showContainerNav },
    function (_ref3) {
      var transitionStyle = _ref3.style;

      var getNavButtonProps = function getNavButtonProps() {
        var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : UP;
        return function () {
          var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

          var _onClick = _ref4.onClick,
              className = _ref4.className,
              style = _ref4.style,
              props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
          return (0, _extends4.default)({
            onClick: function onClick(e) {
              for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                args[_key - 1] = arguments[_key];
              }

              e.stopPropagation();
              direction === UP ? container.scrollIntoView(scrollOptions) : container.scrollIntoView((0, _extends4.default)({}, scrollOptions, {
                block: 'end'
              })), _onClick && _onClick.apply(undefined, [e].concat(args));
            },
            className: (0, _helperFunctions.flippyClass)(showContainerNav, 'containernav__navbutton', 'show', 'hide') + ' ' + (0, _helperFunctions.flippyClass)(showContainerNav, 'containernav__navbutton__' + direction, 'show', 'hide'),
            style: (0, _extends4.default)({}, sharedStyle, transitionStyle, (0, _defineProperty3.default)({}, direction === UP ? 'top' : 'bottom', '2rem'), style)
          }, props);
        };
      };
      return typeof children === 'function' ? children({ getNavButtonProps: getNavButtonProps, renderIcon: renderIcon }) : _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          _Button2.default,
          (0, _extends4.default)({}, getNavButtonProps(UP)()),
          renderIcon({ direction: UP, size: iconSize })
        ),
        _react2.default.createElement(
          _Button2.default,
          (0, _extends4.default)({}, getNavButtonProps(DOWN)()),
          renderIcon({ direction: DOWN, size: iconSize })
        )
      );
    }
  );
};

exports.default = ContainerNav;