autodisol/components/Pictures.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _reactImageLightbox = _interopRequireDefault(require("react-image-lightbox"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

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; }

var PicturesJSX = function PicturesJSX(_ref) {
  var css = _ref.classes,
      _ref$moreLabel = _ref.moreLabel,
      moreLabel = _ref$moreLabel === void 0 ? 'more' : _ref$moreLabel,
      shortLabel = _ref.shortLabel,
      _ref$pictures = _ref.pictures,
      pictures = _ref$pictures === void 0 ? [] : _ref$pictures,
      limit = _ref.limit,
      deletable = _ref.deletable,
      handleDelete = _ref.handleDelete,
      spaced = _ref.spaced,
      _ref$justify = _ref.justify,
      justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
      _ref$maxImagesInARow = _ref.maxImagesInARow,
      maxImagesInARow = _ref$maxImagesInARow === void 0 ? 3 : _ref$maxImagesInARow,
      _ref$contrast = _ref.contrast,
      contrast = _ref$contrast === void 0 ? 'dark' : _ref$contrast,
      rest = _objectWithoutProperties(_ref, ["classes", "moreLabel", "shortLabel", "pictures", "limit", "deletable", "handleDelete", "spaced", "justify", "maxImagesInARow", "contrast"]);

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      _useState4 = _slicedToArray(_useState3, 2),
      index = _useState4[0],
      setIndex = _useState4[1];

  var thumbnails = limit && limit > 0 ? pictures.slice(0, limit) : pictures;
  return _react["default"].createElement(_Grid["default"], _extends({
    container: true,
    direction: "row",
    justify: justify,
    alignItems: "center",
    spacing: 16
  }, rest), thumbnails.map(function (_ref2, i) {
    var name = _ref2.name,
        src = _ref2.src;
    return _react["default"].createElement(_Grid["default"], {
      item: true,
      key: name,
      className: css.wrapper,
      xs: Math.trunc(12 / maxImagesInARow),
      container: true,
      justify: "center"
    }, _react["default"].createElement("div", {
      className: deletable ? css["infoWrapper_".concat(contrast)] : css.silentWrapper
    }, _react["default"].createElement("a", {
      href: src,
      onClick: function onClick(e) {
        e.preventDefault();
        setIndex(i);
        setIsOpen(true);
      },
      className: deletable ? css.imageContainerDeletable : css.imageContainer
    }, _react["default"].createElement("img", _extends({
      src: src
    }, {
      alt: name,
      className: css.picture
    })), thumbnails.length - 1 === i && pictures.length > i + 1 && _react["default"].createElement("div", {
      className: css.overlay
    }, shortLabel ? "+ ".concat(pictures.length - thumbnails.length) : "".concat(pictures.length - thumbnails.length, " ").concat(moreLabel)))), deletable && _react["default"].createElement(_Typography["default"], {
      variant: "body1",
      component: "div",
      className: css["infoZone_".concat(contrast)]
    }, i + 1, "/", thumbnails.length, _react["default"].createElement(_IconButton["default"], {
      className: css["noPaddingButton_".concat(contrast)],
      onClick: function onClick() {
        return handleDelete && handleDelete(i);
      }
    }, _react["default"].createElement(_Delete["default"], {
      fontSize: "small"
    }))));
  }), isOpen && _react["default"].createElement(_reactImageLightbox["default"], {
    imageTitle: pictures[index].name,
    imageCaption: pictures[index].caption,
    mainSrc: pictures[index].src,
    nextSrc: pictures[(index + 1) % pictures.length].src,
    prevSrc: pictures[(index + pictures.length - 1) % pictures.length].src,
    onMoveNextRequest: function onMoveNextRequest() {
      return setIndex((index + 1) % pictures.length);
    },
    onMovePrevRequest: function onMovePrevRequest() {
      return setIndex((index + pictures.length - 1) % pictures.length);
    },
    onCloseRequest: function onCloseRequest() {
      return setIsOpen(false);
    },
    toolbarButtons: [deletable && handleDelete && _react["default"].createElement(_Button["default"], {
      onClick: function onClick() {
        setIsOpen(false);
        handleDelete(index);
      },
      style: {
        color: '#fff',
        opacity: 0.7
      }
    }, _react["default"].createElement(_Delete["default"], null))],
    animationOnKeyInput: true,
    reactModalStyle: {
      overlay: {
        zIndex: 1200
      }
    }
  }));
};

PicturesJSX.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  moreLabel: _propTypes["default"].string,
  shortLabel: _propTypes["default"].bool,
  pictures: _propTypes["default"].arrayOf(_propTypes["default"].object.isRequired).isRequired,
  limit: _propTypes["default"].number,
  deletable: _propTypes["default"].bool,
  handleDelete: _propTypes["default"].func,
  spaced: _propTypes["default"].bool,
  justify: _propTypes["default"].string,
  centered: _propTypes["default"].bool,
  maxImagesInARow: _propTypes["default"].number,
  contrast: _propTypes["default"].oneOf(["dark", "light"])
};
var Pictures = (0, _withStyles["default"])(function (theme) {
  return {
    picture: {
      height: '100%',
      display: 'block'
    },
    wrapper: {
      position: 'relative',
      display: 'flex',
      '&:before': {
        content: "''",
        paddingTop: '100%'
      }
    },
    overlay: {
      backgroundColor: '#6667',
      width: '100%',
      height: '100%',
      position: 'absolute',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#fff'
    },
    imageContainer: {
      width: 'calc(100% - 16px)',
      height: 'calc(100% - 16px)',
      position: 'absolute',
      overflow: 'hidden',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    imageContainerDeletable: {
      extend: 'imageContainer',
      width: 'calc(100% - 20px)',
      height: 'calc(100% - 20px)',
      borderRadius: 3
    },
    infoWrapper: {
      position: 'relative',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      borderTopRightRadius: 8,
      borderTopLeftRadius: 8
    },
    infoWrapper_dark: {
      extend: 'infoWrapper',
      background: theme.palette.secondary.dark
    },
    infoWrapper_light: {
      extend: 'infoWrapper',
      background: 'transparent'
    },
    silentWrapper: {
      width: '100%'
    },
    infoZone: {
      position: 'relative',
      top: -5,
      borderBottomRightRadius: 8,
      borderBottomLeftRadius: 8,
      padding: '0 10px 10px 10px',
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    infoZone_dark: {
      extend: 'infoZone',
      background: theme.palette.secondary.dark,
      color: 'white'
    },
    infoZone_light: {
      extend: 'infoZone',
      background: 'transparent',
      color: theme.palette.secondary.dark
    },
    noPaddingButton_dark: {
      padding: 0,
      color: 'white'
    },
    noPaddingButton_light: {
      padding: 0,
      color: theme.palette.secondary.dark
    }
  };
})(PicturesJSX);
var _default = Pictures;
exports["default"] = _default;