react-misc-toolbox/dist/Accordion.js

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

'use strict';

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

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _regenerator2 = _interopRequireDefault(_regenerator);

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

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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 _SVGExpandMore = require('./svg/SVGExpandMore');

var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);

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

var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);

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

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _ = require('.');

var _reactSwipeable = require('react-swipeable');

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

//center on select
//cure the 'freeze' bug

var interval = void 0;

var useSetState = function useSetState(initialState) {
  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, (0, _extends3.default)({}, initialState)),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  return [state, setState];
};

var useSafeSetState = function useSafeSetState(initialState) {
  var _useSetState = useSetState(initialState),
      _useSetState2 = (0, _slicedToArray3.default)(_useSetState, 2),
      state = _useSetState2[0],
      setState = _useSetState2[1];

  var mountedRef = (0, _react.useRef)(false);
  (0, _react.useEffect)(function () {
    mountedRef.current = true;
    return function () {
      return mountedRef.current = false;
    };
  }, []);

  var safeSetState = function safeSetState() {
    return mountedRef.current && setState.apply(undefined, arguments);
  };
  return [state, safeSetState];
};

var Accordion = function Accordion(_ref) {
  var externalSwipeableRef = _ref.externalSwipeableRef,
      _ref$pointerScrollDis = _ref.pointerScrollDistance,
      pointerScrollDistance = _ref$pointerScrollDis === undefined ? 200 : _ref$pointerScrollDis,
      _ref$swipeScrollDista = _ref.swipeScrollDistance,
      swipeScrollDistance = _ref$swipeScrollDista === undefined ? 300 : _ref$swipeScrollDista,
      _ref$showLog = _ref.showLog,
      showLog = _ref$showLog === undefined ? false : _ref$showLog,
      _ref$noX = _ref.noX,
      noX = _ref$noX === undefined ? false : _ref$noX,
      _ref$noY = _ref.noY,
      noY = _ref$noY === undefined ? false : _ref$noY,
      _ref$scrollSpeed = _ref.scrollSpeed,
      scrollSpeed = _ref$scrollSpeed === undefined ? 400 : _ref$scrollSpeed,
      height = _ref.height,
      swipeableProps = _ref.swipeableProps,
      children = _ref.children,
      width = _ref.width,
      renderButton = _ref.renderButton;

  var swipeableRef = externalSwipeableRef ? externalSwipeableRef : (0, _react.useRef)(null);

  var _useSafeSetState = useSafeSetState({
    showLeft: false,
    showRight: false,
    showUp: false,
    showDown: false
  }),
      _useSafeSetState2 = (0, _slicedToArray3.default)(_useSafeSetState, 2),
      state = _useSafeSetState2[0],
      safeSetState = _useSafeSetState2[1];

  var showLeft = state.showLeft,
      showRight = state.showRight,
      showUp = state.showUp,
      showDown = state.showDown;


  (0, _react.useEffect)(function () {
    handleNavButtons();
    var containerElement = swipeableRef.current;

    if (typeof window !== 'undefined' && containerElement) {
      showLog && console.log('Added event listeners');

      containerElement.addEventListener('scroll', handleNavButtons);
      window.addEventListener('resize', handleNavButtons);
    }

    return function () {
      var containerElement = swipeableRef.current;
      if (typeof window !== 'undefined' && containerElement) {
        showLog && console.log('Removed event listeners');

        containerElement.removeEventListener('scroll', handleNavButtons);
        window.removeEventListener('resize', handleNavButtons);
      }
    };
  }, [children]);

  var handleNavButtons = function () {
    var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var containerElement;
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              containerElement = swipeableRef.current;
              //await delay(250)
              // showLog &&
              //console.log(
              //  `// handleNavButtons // `,
              //  `containerElement.scrollLeft`,
              //  containerElement.scrollLeft,
              //  `scrollWidth: `,
              //  containerElement.scrollWidth,
              //  `clientWidth: `,
              //  containerElement.clientWidth,
              //  `diff: `,
              //  containerElement.scrollWidth - containerElement.clientWidth,
              //  `scrollTop: `,
              //  containerElement.scrollTop,
              //  `scrollHeight: `,
              //  containerElement.scrollHeight,
              //  `clientHeight: `,
              //  containerElement.clientHeight
              //)

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

              _context.next = 4;
              return safeSetState({ showLeft: false });

            case 4:
              _context.next = 9;
              break;

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

              _context.next = 9;
              return safeSetState({ showLeft: true });

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

              _context.next = 12;
              return safeSetState({ showRight: false });

            case 12:
              _context.next = 17;
              break;

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

              _context.next = 17;
              return safeSetState({ showRight: true });

            case 17:
              if (!(containerElement.scrollTop === 0 || containerElement.scrollHeight === containerElement.clientHeight)) {
                _context.next = 22;
                break;
              }

              _context.next = 20;
              return safeSetState({ showUp: false });

            case 20:
              _context.next = 25;
              break;

            case 22:
              if (!(containerElement.scrollTop > 0)) {
                _context.next = 25;
                break;
              }

              _context.next = 25;
              return safeSetState({ showUp: true });

            case 25:
              if (!(containerElement.scrollTop + 1 >= containerElement.scrollHeight - containerElement.clientHeight || containerElement.scrollHeight === containerElement.clientHeight)) {
                _context.next = 30;
                break;
              }

              _context.next = 28;
              return safeSetState({ showDown: false });

            case 28:
              _context.next = 33;
              break;

            case 30:
              if (!(containerElement.scrollTop === 0)) {
                _context.next = 33;
                break;
              }

              _context.next = 33;
              return safeSetState({ showDown: true });

            case 33:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function handleNavButtons() {
      return _ref2.apply(this, arguments);
    };
  }();

  var endScroll = function endScroll(e) {
    console.log('endScroll');
    e.stopPropagation();
    clearInterval(interval);
  };

  var startScroll = function startScroll(e, direction) {
    var scrollDistance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
    var isContinuous = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
    var isTouch = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

    console.log('startScroll');
    e.stopPropagation();
    var containerElement = swipeableRef.current;
    clearInterval(interval);
    var touchMod = isTouch ? -1 : 1;
    var execScroll = function execScroll() {
      switch (direction) {
        case 'Left':
          containerElement.scrollTo({
            left: containerElement.scrollLeft - touchMod * scrollDistance,
            behavior: 'smooth'
          });
          break;
        case 'Right':
          containerElement.scrollTo({
            left: containerElement.scrollLeft + touchMod * scrollDistance,
            behavior: 'smooth'
          });
          break;
        case 'Up':
          containerElement.scrollTo({
            top: containerElement.scrollTop - touchMod * scrollDistance,
            behavior: 'smooth'
          });
          break;
        case 'Down':
          containerElement.scrollTo({
            top: containerElement.scrollTop + touchMod * scrollDistance,
            behavior: 'smooth'
          });
          break;
      }
    };
    if (containerElement) {
      execScroll();
      interval = isContinuous && setInterval(execScroll, scrollSpeed);
    }
  };

  var renderNav = function renderNav(direction) {
    var containerElement = swipeableRef.current;

    var autoHeight = containerElement && containerElement.clientHeight;
    var autoWidth = 30;
    var vertWidth = containerElement && containerElement.clientWidth;
    var vertHeight = 30;

    var SVGProps = {
      fill: '#555',
      size: width ? width : 18
    };
    var renderIcon = function renderIcon(_ref3) {
      var direction = _ref3.direction,
          props = (0, _objectWithoutProperties3.default)(_ref3, ['direction']);

      switch (direction) {
        case 'Right':
          return _react2.default.createElement(_SVGNext2.default, (0, _extends3.default)({}, SVGProps, { dir: direction }, props));
        case 'Left':
          return _react2.default.createElement(_SVGPrev2.default, (0, _extends3.default)({}, SVGProps, { dir: direction }, props));
        case 'Up':
          return _react2.default.createElement(_SVGExpandLess2.default, (0, _extends3.default)({}, SVGProps, props));
        case 'Down':
          return _react2.default.createElement(_SVGExpandMore2.default, (0, _extends3.default)({}, SVGProps, props));
      }
    };
    var inProp = function inProp(_ref4) {
      var direction = _ref4.direction;

      switch (direction) {
        case 'Right':
          return showRight;
        case 'Left':
          return showLeft;
        case 'Up':
          return showUp;
        case 'Down':
          return showDown;
      }
    };

    var getXShapeLayout = function getXShapeLayout() {
      return {
        width: width ? width : autoWidth,
        height: height ? height : autoHeight
      };
    };
    var getYShapeLayout = function getYShapeLayout() {
      return {
        width: width ? width : vertWidth,
        height: height ? height : vertHeight
      };
    };
    var getStyle = function getStyle(_ref5) {
      var direction = _ref5.direction;

      switch (direction) {
        case 'Right':
          return (0, _extends3.default)({
            top: 0,
            right: 0
          }, getXShapeLayout());
        case 'Left':
          return (0, _extends3.default)({
            top: 0
          }, getXShapeLayout());
        case 'Up':
          return (0, _extends3.default)({
            top: 0
          }, getYShapeLayout());
        case 'Down':
          return (0, _extends3.default)({
            bottom: 0
          }, getYShapeLayout());
      }
    };

    return _react2.default.createElement(
      _RTGTransition2.default,
      { in: inProp({ direction: direction }) },
      function (_ref6) {
        var transitionStyle = _ref6.style;

        var getButtonProps = function getButtonProps() {
          var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

          var style = _ref7.style,
              className = _ref7.className,
              colors = _ref7.colors,
              props = (0, _objectWithoutProperties3.default)(_ref7, ['style', 'className', 'colors']);
          return (0, _extends3.default)({
            onPointerDown: function onPointerDown(e) {
              return startScroll(e, direction, pointerScrollDistance, true);
            },
            onPointerUp: function onPointerUp(e) {
              return endScroll(e);
            },
            className: (0, _helperFunctions.unflippyMultiBase)([className, 'accordion_navbutton'], direction),
            colors: colors ? colors : _.buttonStyles.violet,
            style: (0, _extends3.default)({}, transitionStyle, {
              padding: 0,
              position: 'absolute'
            }, getStyle({ direction: direction }), style)
          }, props);
        };
        return renderButton ? renderButton({ getButtonProps: getButtonProps, renderIcon: renderIcon, direction: direction }) : _react2.default.createElement(
          _Button2.default,
          (0, _extends3.default)({}, getButtonProps({
            colors: 'smoke'
          })),
          renderIcon({ direction: direction, fill: '#555' })
        );
      }
    );
  };

  var handlers = (0, _reactSwipeable.useSwipeable)({
    onSwiped: function onSwiped(e) {
      startScroll(e.event, e.dir, swipeScrollDistance, false, true);
    },
    preventDefaultTouchmoveEvent: true
  });

  return typeof window !== 'undefined' && _react2.default.createElement(
    _react2.default.Fragment,
    null,
    !noX && renderNav('Left'),
    !noY && renderNav('Up'),
    typeof children === 'function' ? children({ handlers: handlers, swipeableRef: swipeableRef }) : _react2.default.createElement(
      'div',
      (0, _extends3.default)({}, handlers, {
        ref: swipeableRef
      }, swipeableProps),
      children
    ),
    !noX && renderNav('Right'),
    !noY && renderNav('Down')
  );
};

exports.default = _react2.default.memo(Accordion);