Photo_React/photo/node_modules/react-google-photo/dist/react-google-photo.esm.js

import React, { useRef, useEffect, useState } from 'react';
import ReactDom from 'react-dom';
import noScroll from 'no-scroll';
import cx from 'classnames';
import screenfull from 'screenfull';

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function CloseArrow(_ref) {
  var className = _ref.className,
      props = _objectWithoutPropertiesLoose(_ref, ["className"]);

  return React.createElement("div", Object.assign({
    className: className
  }, props), React.createElement("svg", {
    fill: "#ffffff",
    width: "24px",
    height: "24px",
    viewBox: "0 0 24 24"
  }, React.createElement("path", {
    d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
  })));
}
function PrevArrowButton(_ref2) {
  var className = _ref2.className,
      props = _objectWithoutPropertiesLoose(_ref2, ["className"]);

  return React.createElement("div", Object.assign({
    className: className
  }, props), React.createElement("svg", {
    fill: "#ffffff",
    width: "36px",
    height: "36px",
    viewBox: "0 0 24 24"
  }, React.createElement("path", {
    d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
  })));
}
function NextArrowButton(_ref3) {
  var className = _ref3.className,
      props = _objectWithoutPropertiesLoose(_ref3, ["className"]);

  return React.createElement("div", Object.assign({
    className: className
  }, props), React.createElement("svg", {
    fill: "#ffffff",
    width: "36px",
    height: "36px",
    viewBox: "0 0 24 24"
  }, React.createElement("path", {
    d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
  })));
}

var useEventListener = function useEventListener(active, eventName, handler, element) {
  // Create a ref that stores handler
  var savedHandler = useRef(); // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
  // ... without us needing to pass it in effect deps array ...
  // ... and potentially cause effect to re-run every render.

  useEffect(function () {
    savedHandler.current = handler;
  }, [handler]);
  useEffect(function () {
    if (!element || !element.addEventListener) {
      return;
    } // Create event listener that calls handler function stored in ref


    var eventListener = function eventListener(event) {
      return savedHandler.current(event);
    };

    if (active) {
      // Add event listener
      element.addEventListener(eventName, eventListener);
    } // Remove event listener on cleanup


    return function () {
      element.removeEventListener(eventName, eventListener);
    };
  }, // Re-run if eventName or element changes
  [active, eventName, element]);
};

var keycodes = {
  esc: 27,
  left: 37,
  right: 39
};
var classes = {
  overlay: 'react-google-photo-overlay',
  column: 'react-google-photo-column',
  leftColumn: 'react-google-photo-left-column',
  rightColumn: 'react-google-photo-right-column',
  arrowButton: 'react-google-photo-arrow-button',
  arrowButtonHide: 'react-google-photo-arrow-button-hide',
  arrowButtonLeft: 'react-google-photo-arrow-button-left',
  arrowButtonRight: 'react-google-photo-arrow-button-right',
  arrowButtonReturn: 'react-google-photo-arrow-button-return',
  image: 'react-google-photo-overlay-image',
  imageOpen: 'react-google-photo-overlay-image-open',
  animationIn: 'react-google-photo-fade-in',
  animationOut: 'react-google-photo-fade-out'
};
var isBrowser = typeof window !== 'undefined';
var Direction;

(function (Direction) {
  Direction[Direction["Prev"] = 0] = "Prev";
  Direction[Direction["Next"] = 1] = "Next";
})(Direction || (Direction = {}));

var GooglePhoto = function GooglePhoto(_ref) {
  var _classNames$animation, _classNames$animation2, _cx2, _cx3, _cx4;

  var open = _ref.open,
      src = _ref.src,
      _ref$srcIndex = _ref.srcIndex,
      srcIndexProp = _ref$srcIndex === void 0 ? 0 : _ref$srcIndex,
      fullscreen = _ref.fullscreen,
      _ref$keyboardNavigati = _ref.keyboardNavigation,
      keyboardNavigation = _ref$keyboardNavigati === void 0 ? true : _ref$keyboardNavigati,
      _ref$closeOnEsc = _ref.closeOnEsc,
      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
      _ref$mouseIdleTimeout = _ref.mouseIdleTimeout,
      mouseIdleTimeout = _ref$mouseIdleTimeout === void 0 ? 5000 : _ref$mouseIdleTimeout,
      _ref$animationDuratio = _ref.animationDuration,
      animationDuration = _ref$animationDuratio === void 0 ? 250 : _ref$animationDuratio,
      classNames = _ref.classNames,
      onClose = _ref.onClose,
      onChangeIndex = _ref.onChangeIndex;
  var refContainer = useRef(null);
  var refTimeoutMouseIdle = useRef(null);

  var _useState = useState(open),
      showPortal = _useState[0],
      setShowPortal = _useState[1];

  var _useState2 = useState({
    width: isBrowser ? window.innerWidth : 0,
    height: isBrowser ? window.innerHeight : 0
  }),
      windowSizes = _useState2[0],
      setWindowSizes = _useState2[1];

  var _useState3 = useState(false),
      mouseIdle = _useState3[0],
      setMouseIdle = _useState3[1];

  var _useState4 = useState(srcIndexProp),
      srcIndex = _useState4[0],
      setSrcIndex = _useState4[1]; // Lazily create the ref instance
  // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily


  if (refContainer.current === null && isBrowser) {
    refContainer.current = document.createElement('div');
  }

  var handleOpen = function handleOpen() {
    noScroll.on();
    window.addEventListener('resize', handleWindowResize);

    if (refContainer.current && !document.body.contains(refContainer.current)) {
      document.body.appendChild(refContainer.current);
    }

    if (fullscreen && screenfull.isEnabled) {
      screenfull.request();
      screenfull.on('change', handleScreenfullChange);
    }
  };

  var handleClose = function handleClose() {
    window.removeEventListener('resize', handleWindowResize);

    if (refContainer.current && document.body.contains(refContainer.current)) {
      document.body.removeChild(refContainer.current);
    }

    if (screenfull.isEnabled) {
      screenfull.exit();
      screenfull.off('change', handleScreenfullChange);
    }

    noScroll.off();
  };

  var handleKeydown = function handleKeydown(e) {
    if (e.keyCode === keycodes.left && keyboardNavigation) {
      handleChangeIndex(Direction.Prev);
    } else if (e.keyCode === keycodes.right && keyboardNavigation) {
      handleChangeIndex(Direction.Next);
    } else if (e.keyCode === keycodes.esc && closeOnEsc) {
      onClose();
    }
  };

  useEventListener(open, 'keydown', handleKeydown, isBrowser ? document : undefined);

  var handleMousemove = function handleMousemove() {
    // Hide the actions buttons when move do not move for x seconds
    if (refTimeoutMouseIdle.current) {
      clearTimeout(refTimeoutMouseIdle.current);
    }

    if (mouseIdle === true) {
      setMouseIdle(false);
    }

    refTimeoutMouseIdle.current = setTimeout(function () {
      setMouseIdle(true);
    }, mouseIdleTimeout);
  };

  useEventListener(open, 'mousemove', handleMousemove, isBrowser ? document.querySelector('*') : undefined); // We listen to the srcIndexProp to update the internal state if the user manage the component

  useEffect(function () {
    setSrcIndex(srcIndexProp);
  }, [srcIndexProp]);
  useEffect(function () {
    // When the modal is rendered first time we want to block the scroll
    if (open) {
      handleOpen();
    }

    return function () {
      // When the component is unmounted directly we want to unblock the scroll
      if (showPortal) {
        handleClose();
      }
    };
  }, []);
  useEffect(function () {
    // If the open prop is changing, we need to open the modal
    if (open && !showPortal) {
      setShowPortal(true);
      handleOpen();
    }
  }, [open]);

  var handleScreenfullChange = function handleScreenfullChange() {
    if (screenfull.isEnabled && !screenfull.isFullscreen && open) {
      onClose();
    }
  };

  var handleWindowResize = function handleWindowResize() {
    setWindowSizes({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  var handleChangeIndex = function handleChangeIndex(direction) {
    if (direction === Direction.Prev && srcIndex !== 0) {
      var newIndex = srcIndex - 1;
      onChangeIndex ? onChangeIndex(newIndex) : setSrcIndex(newIndex);
    } else if (direction === Direction.Next && src[srcIndex + 1]) {
      var _newIndex = srcIndex + 1;

      onChangeIndex ? onChangeIndex(_newIndex) : setSrcIndex(_newIndex);
    }
  };

  var handleClickCloseArrow = function handleClickCloseArrow() {
    onClose();
  };

  var handleAnimationEnd = function handleAnimationEnd() {
    if (!open) {
      setShowPortal(false);
      handleClose();
    } // if (onAnimationEnd) {
    //   onAnimationEnd();
    // }

  };

  var image = src[srcIndex];
  var wrapperImageStyle = {
    position: 'absolute',
    overflow: 'hidden',
    userSelect: 'none'
  };
  var imageWidth = image.width;
  var imageHeight = image.height; // Adjust image ratio max with window size

  if (imageWidth > windowSizes.width) {
    var ratio = windowSizes.width / imageWidth;
    imageHeight *= ratio;
    imageWidth *= ratio;
  }

  if (imageHeight > windowSizes.height) {
    var _ratio = windowSizes.height / imageHeight;

    imageHeight *= _ratio;
    imageWidth *= _ratio;
  }

  if (imageHeight > imageWidth || imageWidth < windowSizes.width) {
    wrapperImageStyle.left = (windowSizes.width - imageWidth) / 2;
    wrapperImageStyle.height = windowSizes.height;
    wrapperImageStyle.width = imageWidth;
  } else {
    wrapperImageStyle.top = (windowSizes.height - imageHeight) / 2;
    wrapperImageStyle.height = imageHeight;
    wrapperImageStyle.width = windowSizes.width;
  }

  if (windowSizes.height > imageHeight) {
    wrapperImageStyle.height = imageHeight;
    wrapperImageStyle.top = (windowSizes.height - imageHeight) / 2;
  } else if (windowSizes.width > imageWidth) {
    wrapperImageStyle.height = windowSizes.height;
    wrapperImageStyle.left = (windowSizes.width - imageWidth) / 2;
  }

  return showPortal && refContainer.current ? ReactDom.createPortal(React.createElement("div", {
    className: cx(classes.overlay, classNames === null || classNames === void 0 ? void 0 : classNames.overlay),
    style: {
      animation: (open ? (_classNames$animation = classNames === null || classNames === void 0 ? void 0 : classNames.animationIn) !== null && _classNames$animation !== void 0 ? _classNames$animation : classes.animationIn : (_classNames$animation2 = classNames === null || classNames === void 0 ? void 0 : classNames.animationOut) !== null && _classNames$animation2 !== void 0 ? _classNames$animation2 : classes.animationOut) + " " + animationDuration + "ms"
    },
    onAnimationEnd: handleAnimationEnd
  }, React.createElement("div", {
    style: wrapperImageStyle
  }, src.map(function (source, index) {
    var _cx;

    return React.createElement("img", {
      key: index,
      src: source.src,
      alt: source.alt,
      width: wrapperImageStyle.width,
      height: wrapperImageStyle.height,
      className: cx(classes.image, classNames === null || classNames === void 0 ? void 0 : classNames.image, (_cx = {}, _cx[classes.imageOpen] = index === srcIndex, _cx))
    });
  })), srcIndex !== 0 && React.createElement("div", {
    className: cx(classes.column, classes.leftColumn),
    onClick: function onClick() {
      return handleChangeIndex(Direction.Prev);
    }
  }, React.createElement(PrevArrowButton, {
    className: cx(classes.arrowButton, classes.arrowButtonLeft, (_cx2 = {}, _cx2[classes.arrowButtonHide] = mouseIdle, _cx2))
  })), src[srcIndex + 1] && React.createElement("div", {
    className: cx(classes.column, classes.rightColumn),
    onClick: function onClick() {
      return handleChangeIndex(Direction.Next);
    }
  }, React.createElement(NextArrowButton, {
    className: cx(classes.arrowButton, classes.arrowButtonRight, (_cx3 = {}, _cx3[classes.arrowButtonHide] = mouseIdle, _cx3))
  })), React.createElement("div", {
    onClick: handleClickCloseArrow
  }, React.createElement(CloseArrow, {
    className: cx(classes.arrowButtonReturn, (_cx4 = {}, _cx4[classes.arrowButtonHide] = mouseIdle, _cx4))
  }))), refContainer.current) : null;
};

export default GooglePhoto;
export { GooglePhoto };
//# sourceMappingURL=react-google-photo.esm.js.map