react-misc-toolbox/dist/ImageViewer.js

- [ ] diagramexample | optimize creating from blank slate

"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 _Accordion = require("./Accordion");

var _Accordion2 = _interopRequireDefault(_Accordion);

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

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

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

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$shouldRenderLarg = _ref.shouldRenderLargeNavButton,
      shouldRenderLargeNavButton = _ref$shouldRenderLarg === undefined ? false : _ref$shouldRenderLarg,
      forceRefresh = _ref.forceRefresh,
      _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,
      _ref$shouldRenderSmal = _ref.shouldRenderSmallNavButtons,
      shouldRenderSmallNavButtons = _ref$shouldRenderSmal === undefined ? true : _ref$shouldRenderSmal,
      accordionProps = _ref.accordionProps,
      layout = _ref.layout,
      className = _ref.className,
      style = _ref.style,
      onClick = _ref.onClick,
      _ref$shouldRenderAcco = _ref.shouldRenderAccordionSwipeButton,
      shouldRenderAccordionSwipeButton = _ref$shouldRenderAcco === undefined ? true : _ref$shouldRenderAcco,
      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: "20rem",
      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) {
    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, forceRefresh]);

  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);
  }, [forceRefresh]);

  (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, forceRefresh]);

  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,
    shouldRenderSmallNavButtons: shouldRenderSmallNavButtons,
    previewImageHeight: previewImageHeight,
    mainImageMaxHeight: mainImageMaxHeight,
    previewImageWidth: previewImageWidth,
    mainImageWidth: mainImageWidth,
    srcsLength: srcs.length
  };

  var fitsWithinFrame = layout === "vertical" ? !(srcs.length * previewImageHeight > mainImageWidth) : !(srcs.length * previewImageWidth > mainImageWidth);

  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,
      shouldRenderLargeNavButton && 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)
          );
        })
      ),
      shouldRenderLargeNavButton && 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 },
      fitsWithinFrame && shouldRenderSmallNavButtons && renderSmallNavButton(PREV),
      _react2.default.createElement(
        _Accordion2.default,
        {
          noX: !shouldRenderAccordionSwipeButton,
          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)()));
            })
          );
        }
      ),
      fitsWithinFrame && shouldRenderSmallNavButtons && renderSmallNavButton(NEXT)
    )
  );
};

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