react-misc-toolbox/dist/ImageViewer.js

'use strict';

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

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

var _regenerator2 = _interopRequireDefault(_regenerator);

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

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _from = require('babel-runtime/core-js/array/from');

var _from2 = _interopRequireDefault(_from);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _StyledImageViewer = require('./StyledImageViewer');

var _StyledImageViewer2 = _interopRequireDefault(_StyledImageViewer);

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

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

var _SVGDir2 = _interopRequireDefault(_SVGDir);

var _reactMediumImageZoom = require('react-medium-image-zoom');

var _reactMediumImageZoom2 = _interopRequireDefault(_reactMediumImageZoom);

var _OutsideClickListener = require('./OutsideClickListener');

var _Accordion = require('./Accordion');

var _Accordion2 = _interopRequireDefault(_Accordion);

var _defaultStyles = require('./defaultStyles');

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

var _KBListener = require('./KBListener');

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

var NEXT = 'NEXT';
var PREV = 'PREV';
var GOTO = 'GOTO';

var initialState = { pos: 0, sliding: false, dir: NEXT };

var CONTAINER = _StyledImageViewer2.default.CONTAINER,
    MAIN_FRAME = _StyledImageViewer2.default.MAIN_FRAME,
    PREVIEW_BUTTON = _StyledImageViewer2.default.PREVIEW_BUTTON,
    PREVIEW_FRAME = _StyledImageViewer2.default.PREVIEW_FRAME,
    PREVIEW_ACCORDION = _StyledImageViewer2.default.PREVIEW_ACCORDION,
    MAIN_IMAGE_FRAME = _StyledImageViewer2.default.MAIN_IMAGE_FRAME,
    MAIN_IMAGE = _StyledImageViewer2.default.MAIN_IMAGE,
    SMALL_NAV_BUTTON = _StyledImageViewer2.default.SMALL_NAV_BUTTON,
    LARGE_NAV_BUTTON = _StyledImageViewer2.default.LARGE_NAV_BUTTON;


var ImageViewer = function ImageViewer(_ref) {
  var _ref$debug = _ref.debug,
      debug = _ref$debug === undefined ? false : _ref$debug,
      _ref$imageMargin = _ref.imageMargin,
      imageMargin = _ref$imageMargin === undefined ? 30 : _ref$imageMargin,
      _ref$srcs = _ref.srcs,
      srcs = _ref$srcs === undefined ? (0, _from2.default)({ length: 8 }, function (_, i) {
    return 'https://loremflickr.com/210/300?random=' + i;
  }) : _ref$srcs,
      disableDiscreteNavButtons = _ref.disableDiscreteNavButtons,
      accordionProps = _ref.accordionProps,
      layout = _ref.layout,
      className = _ref.className,
      style = _ref.style,
      onClick = _ref.onClick,
      renderMidArea = _ref.renderMidArea,
      renderOption = _ref.renderOption,
      renderOptions = _ref.renderOptions,
      _ref$zoomedInImagePro = _ref.zoomedInImageProps,
      zoomedInImageProps = _ref$zoomedInImagePro === undefined ? {} : _ref$zoomedInImagePro,
      _ref$unzoomedImagePro = _ref.unzoomedImageProps,
      unzoomedImageProps = _ref$unzoomedImagePro === undefined ? {
    style: {
      width: '30rem',
      overflowX: 'hidden',
      overflowY: 'hidden'
    }
  } : _ref$unzoomedImagePro,
      _ref$cssImageUnzoomed = _ref.cssImageUnzoomedClass,
      cssImageUnzoomedClass = _ref$cssImageUnzoomed === undefined ? 'imageviewer__image--unzoomed' : _ref$cssImageUnzoomed,
      _ref$cssImageZoomedIn = _ref.cssImageZoomedInClass,
      cssImageZoomedInClass = _ref$cssImageZoomedIn === undefined ? 'imageviewer__image--zoomed-in' : _ref$cssImageZoomedIn;

  var slide = function () {
    var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(dir) {
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              dispatch({ type: dir, numItems: numItems });
              _context.next = 3;
              return setTimeout(function () {
                dispatch({ type: 'stopSliding' });
              }, 1000);

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

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

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      isComponentActive = _useState2[0],
      setIsComponentActive = _useState2[1];

  var reducer = function reducer(state, _ref3) {
    var type = _ref3.type,
        numItems = _ref3.numItems,
        pos = _ref3.pos;

    switch (type) {
      case 'reset':
        return initialState;
      case PREV:
        return (0, _extends3.default)({}, state, {
          dir: PREV,
          sliding: true,
          pos: state.pos === 0 ? numItems - 1 : state.pos - 1
        });
      case NEXT:
        return (0, _extends3.default)({}, state, {
          dir: NEXT,
          sliding: true,
          pos: state.pos === numItems - 1 ? 0 : state.pos + 1
        });
      case GOTO:
        return (0, _extends3.default)({}, state, {
          pos: pos
        });
      case 'stopSliding':
        return (0, _extends3.default)({}, state, {
          sliding: false
        });
      default:
        return state;
    }
  };

  var goTo = function goTo(dir) {
    console.log(dir);
    slide(dir);
  };

  var _useReducer = (0, _react.useReducer)(reducer, initialState),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  var dir = state.dir,
      sliding = state.sliding,
      pos = state.pos;

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
      isSwiping = _useState4[0],
      setIsSwipingTo = _useState4[1];

  var handlers = (0, _reactSwipeable.useSwipeable)({
    onSwiping: function onSwiping(e) {
      setIsSwipingTo(true);
    },
    onSwiped: function onSwiped() {
      setTimeout(function () {
        setIsSwipingTo(false);
      }, 150);
    },
    onSwipedLeft: function onSwipedLeft() {
      goTo(NEXT);
    },
    onSwipedRight: function onSwipedRight() {
      goTo(PREV);
    },
    trackMouse: true
    //preventDefaultTouchmoveEvent: true,
  });

  var numItems = srcs.length;

  var arrayOfSecondaryRefs = (0, _from2.default)({ length: srcs.length }, function () {
    return (0, _react.useRef)(null);
  });
  var arrayOfPrimaryRefs = (0, _from2.default)({ length: srcs.length }, function () {
    return (0, _react.useRef)(null);
  });

  var externalSwipeableRef = (0, _react.useRef)(null);
  var mainImageRef = (0, _react.useRef)(null);

  var _useState5 = (0, _react.useState)(0),
      _useState6 = (0, _slicedToArray3.default)(_useState5, 2),
      previewImageWidth = _useState6[0],
      setPreviewImageWidthTo = _useState6[1];

  var _useState7 = (0, _react.useState)(0),
      _useState8 = (0, _slicedToArray3.default)(_useState7, 2),
      previewImageHeight = _useState8[0],
      setPreviewImageHeightTo = _useState8[1];

  var _useState9 = (0, _react.useState)(0),
      _useState10 = (0, _slicedToArray3.default)(_useState9, 2),
      previewImageFrameWidth = _useState10[0],
      setPreviewImageFrameWidthTo = _useState10[1];

  var _useState11 = (0, _react.useState)(0),
      _useState12 = (0, _slicedToArray3.default)(_useState11, 2),
      previewImageFrameHeight = _useState12[0],
      setPreviewImageFrameHeightTo = _useState12[1];

  var _useState13 = (0, _react.useState)(0),
      _useState14 = (0, _slicedToArray3.default)(_useState13, 2),
      mainImageWidth = _useState14[0],
      setMainImageWidthTo = _useState14[1];

  var _useState15 = (0, _react.useState)(0),
      _useState16 = (0, _slicedToArray3.default)(_useState15, 2),
      mainImageMaxHeight = _useState16[0],
      setMainImageMaxHeightTo = _useState16[1];

  (0, _react.useEffect)(function () {
    var previewImageElement = arrayOfSecondaryRefs[pos] && arrayOfSecondaryRefs[pos].current;

    if (previewImageElement) {
      var previewImageBCR = previewImageElement.getBoundingClientRect();
      setPreviewImageWidthTo(previewImageBCR.width);
      setPreviewImageHeightTo(previewImageBCR.height);

      if (externalSwipeableRef) {
        var previewFrameBCR = externalSwipeableRef.current.getBoundingClientRect();
        setPreviewImageFrameWidthTo(previewFrameBCR.width);
        setPreviewImageFrameHeightTo(previewFrameBCR.height);
      }

      externalSwipeableRef.current.scrollTo({
        left: previewImageWidth * (pos + 0.5) - previewImageFrameWidth / 2,
        top: previewImageHeight * (pos + 0.5) - previewImageFrameHeight / 2,
        behavior: 'smooth'
      });
    }
  }, [pos]);

  var _useState17 = (0, _react.useState)(0),
      _useState18 = (0, _slicedToArray3.default)(_useState17, 2),
      forced = _useState18[0],
      forceUpdate = _useState18[1];

  (0, _react.useEffect)(function () {
    setTimeout(function () {
      return forceUpdate(1);
    }, 200);
  }, []);

  (0, _react.useEffect)(function () {
    debug && console.log(arrayOfPrimaryRefs[0].current && arrayOfPrimaryRefs[0].current.offsetHeight);
    var mainImageElement = arrayOfPrimaryRefs[pos] && arrayOfPrimaryRefs[pos].current;
    if (mainImageElement) {
      setMainImageWidthTo(mainImageElement.getBoundingClientRect().width);
      setMainImageMaxHeightTo(Math.max.apply(Math, (0, _toConsumableArray3.default)(arrayOfPrimaryRefs.map(function (primaryRef) {
        return primaryRef.current.getBoundingClientRect().height;
      }))));

      if (sliding) {
        var by = (mainImageWidth + imageMargin) * pos;

        mainImageRef.current.scrollTo({
          left: by,
          behavior: 'smooth'
        });
      } else {
        var _by = (mainImageWidth + imageMargin) * pos;

        mainImageRef.current.scrollTo({
          left: _by
        });
      }
    }
  }, [pos, forced]);

  var getOptionProps = function getOptionProps(src, i) {
    return function () {
      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var className = _ref4.className,
          style = _ref4.style,
          _onClick = _ref4.onClick,
          props = (0, _objectWithoutProperties3.default)(_ref4, ['className', 'style', 'onClick']);

      return (0, _extends3.default)({
        style: (0, _extends3.default)({
          backgroundImage: 'url(\'' + src + '\')'
        }, style),
        key: i,
        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];
          }

          _onClick && _onClick.apply(undefined, [e].concat(args));
          dispatch({ type: GOTO, pos: i });
        },

        id: 'imageviewer__preview__item-' + i,
        className: className ? (0, _helperFunctions.flippyClass)(pos === i, 'imageviewer__preview__item', 'active', 'inactive') + ' ' + (0, _helperFunctions.flippyClass)(pos === i, className, 'active', 'inactive') : (0, _helperFunctions.flippyClass)(pos === i, 'imageviewer__preview__item', 'active', 'inactive')
      }, props);
    };
  };
  var renderDebugArea = function renderDebugArea() {
    return _react2.default.createElement(
      'div',
      { style: { background: '#fff' } },
      (0, _stringify2.default)(state),
      ' isComponentActive: ',
      (0, _stringify2.default)(isComponentActive)
    );
  };

  var _useOutsideClickListe = (0, _OutsideClickListener.useOutsideClickListener)({
    outsideHandler: function outsideHandler() {
      return setIsComponentActive(false);
    },
    insideHandler: function insideHandler() {
      return setIsComponentActive(true);
    }
  }),
      elClickListenerRef = _useOutsideClickListe.elClickListenerRef;

  (0, _KBListener.useKBListener)({
    keyCodes: [[37, function () {
      if (isComponentActive) {
        slide(PREV);
      }
    }], [39, function () {
      if (isComponentActive) {
        slide(NEXT);
      }
    }]]
  });

  var sharedButtonProps = {
    layout: layout,
    disableDiscreteNavButtons: disableDiscreteNavButtons,
    previewImageHeight: previewImageHeight,
    mainImageMaxHeight: mainImageMaxHeight,
    previewImageWidth: previewImageWidth,
    mainImageWidth: mainImageWidth,
    srcsLength: srcs.length
  };

  var renderImageZoom = function renderImageZoom(src) {
    return _react2.default.createElement(_reactMediumImageZoom2.default, {
      shouldHandleZoom: function shouldHandleZoom(e) {
        return !isSwiping;
      },
      image: (0, _extends3.default)({
        src: src,
        className: cssImageUnzoomedClass
      }, unzoomedImageProps),
      zoomImage: (0, _extends3.default)({
        src: src,
        className: cssImageZoomedInClass
      }, zoomedInImageProps)
    });
  };

  var renderLargeNavButton = function renderLargeNavButton(dir) {
    var cardinalDir = dir === NEXT ? 'Right' : 'Left';
    return _react2.default.createElement(
      LARGE_NAV_BUTTON,
      (0, _extends3.default)({}, sharedButtonProps, {
        dir: dir,
        onClick: function onClick() {
          return goTo(dir);
        },
        className: 'imageviewer__topnav imageviewer__topnav__' + dir,
        colors: _defaultStyles.buttonStyles.semiTransparentNeutral
      }),
      _react2.default.createElement(_SVGDir2.default, { size: 30, fill: '#666666', dir: cardinalDir })
    );
  };

  var renderSmallNavButton = function renderSmallNavButton(dir) {
    var cardinalDir = dir === NEXT ? 'Right' : 'Left';
    return _react2.default.createElement(
      SMALL_NAV_BUTTON,
      (0, _extends3.default)({}, sharedButtonProps, {
        onClick: function onClick() {
          return goTo(dir);
        },
        className: 'imageviewer__bottomnav imageviewer__bottomnav__' + dir,
        colors: _defaultStyles.buttonStyles.semiTransparentNeutral
      }),
      _react2.default.createElement(_SVGDir2.default, { size: '24', fill: '#666666', dir: cardinalDir })
    );
  };
  var accordionFrameProps = {
    layout: layout,
    previewImageWidth: previewImageWidth,
    mainImageWidth: mainImageWidth,
    previewImageHeight: previewImageHeight,
    mainImageMaxHeight: mainImageMaxHeight,
    srcsLength: srcs.length
  };
  return _react2.default.createElement(
    CONTAINER,
    {
      layout: layout,
      onClick: onClick,
      className: (0, _helperFunctions.advancedMulti)({
        unflattenedBases: [className, 'imageviewer__container'],
        flipVars: [[isComponentActive, 'active', 'inactive']]
      }),
      ref: elClickListenerRef,
      style: style
    },
    _react2.default.createElement(
      MAIN_FRAME,
      null,
      renderLargeNavButton(PREV),
      _react2.default.createElement(
        MAIN_IMAGE_FRAME,
        (0, _extends3.default)({}, handlers, {
          ref: mainImageRef,
          imageWidth: mainImageWidth
        }),
        srcs.map(function (src, i) {
          return _react2.default.createElement(
            MAIN_IMAGE,
            {
              ref: arrayOfPrimaryRefs[i],
              key: i,
              imageMargin: imageMargin
            },
            renderImageZoom(src)
          );
        })
      ),
      renderLargeNavButton(NEXT)
    ),
    renderMidArea && renderMidArea(),
    debug && renderDebugArea(),
    renderOptions ? renderOptions({
      getOptionProps: getOptionProps,
      srcs: srcs,
      pos: pos,
      externalSwipeableRef: externalSwipeableRef,
      accordionFrameProps: accordionFrameProps,
      arrayOfSecondaryRefs: arrayOfSecondaryRefs
    }) : _react2.default.createElement(
      PREVIEW_FRAME,
      { layout: layout },
      renderSmallNavButton(PREV),
      _react2.default.createElement(
        _Accordion2.default,
        {
          externalSwipeableRef: externalSwipeableRef
        },
        function (_ref5) {
          var handlers = _ref5.handlers,
              swipeableRef = _ref5.swipeableRef;
          return _react2.default.createElement(
            PREVIEW_ACCORDION,
            (0, _extends3.default)({}, accordionFrameProps, handlers, {
              ref: swipeableRef
            }, accordionProps),
            srcs.map(function (src, i) {
              return renderOption ? renderOption({
                getOptionProps: getOptionProps(src, i),
                isActive: pos === i,
                containerRef: arrayOfSecondaryRefs[i]
              }) : _react2.default.createElement(PREVIEW_BUTTON, (0, _extends3.default)({
                isOn: pos === i,
                colors: 'darken',
                containerRef: arrayOfSecondaryRefs[i]
              }, getOptionProps(src, i)()));
            })
          );
        }
      ),
      renderSmallNavButton(NEXT)
    )
  );
};

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