@quintoandar-tokko/carousel 1.0.54

package/lib/components/ButtonGallery.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonGallery = void 0;
+var _box = require("@quintoandar-tokko/box");
+var _react = _interopRequireDefault(require("react"));
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _excluded = ["text"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var ButtonGallery = exports.ButtonGallery = function ButtonGallery(_ref) {
+  var text = _ref.text,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    __css: {
+      padding: '6px 12px',
+      color: '#FFF',
+      borderRadius: '32px',
+      background: _theme["default"].colors.secondary,
+      border: '1px solid #A2D4E5',
+      fontFamily: 'Nunito Sans',
+      fontSize: '12px',
+      fontWeight: '600',
+      cursor: 'pointer',
+      ':hover': {
+        background: '#A2D4E5',
+        color: _theme["default"].colors.secondary
+      },
+      ':active': {
+        color: _theme["default"].colors.secondaryHover,
+        borderColor: _theme["default"].colors.secondary
+      }
+    }
+  }, props), text);
+};

package/lib/components/ButtonsMainImage.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonsMainImage = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("../../styles/gallery.css");
+var _box = require("@quintoandar-tokko/box");
+var _ButtonGallery = require("./ButtonGallery");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ButtonsMainImage = exports.ButtonsMainImage = function ButtonsMainImage(_ref) {
+  var _ref$video = _ref.video,
+    video = _ref$video === void 0 ? [] : _ref$video,
+    _ref$video2 = _ref.video360,
+    video360 = _ref$video2 === void 0 ? [] : _ref$video2,
+    _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$imgWithCover = _ref.imgWithCover,
+    imgWithCover = _ref$imgWithCover === void 0 ? [] : _ref$imgWithCover,
+    _ref$planos = _ref.planos,
+    planos = _ref$planos === void 0 ? [] : _ref$planos,
+    _ref$frontCoverBluepr = _ref.frontCoverBlueprints,
+    frontCoverBlueprints = _ref$frontCoverBluepr === void 0 ? [] : _ref$frontCoverBluepr,
+    setTabSelected = _ref.setTabSelected,
+    setFullscreen = _ref.setFullscreen,
+    setIndex = _ref.setIndex,
+    tabTextsDict = _ref.tabTextsDict;
+  var handleClick = function handleClick(e, type) {
+    e.stopPropagation();
+    setTabSelected(type);
+    setFullscreen(true);
+    setIndex(0);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "buttonsMainImgContainer"
+  }, video.length > 0 && /*#__PURE__*/_react["default"].createElement(_ButtonGallery.ButtonGallery, {
+    text: tabTextsDict.videos,
+    onClick: function onClick(e) {
+      handleClick(e, 'videos');
+    }
+  }), video360.length > 0 && /*#__PURE__*/_react["default"].createElement(_ButtonGallery.ButtonGallery, {
+    text: tabTextsDict.video360,
+    onClick: function onClick(e) {
+      handleClick(e, 'video360');
+    }
+  }), (images.length > 0 || imgWithCover.length > 0) && /*#__PURE__*/_react["default"].createElement(_ButtonGallery.ButtonGallery, {
+    className: "buttonGallery",
+    text: tabTextsDict.photos,
+    onClick: function onClick(e) {
+      handleClick(e, 'fotos');
+    }
+  }), (planos.length > 0 || frontCoverBlueprints.length > 0) && /*#__PURE__*/_react["default"].createElement(_ButtonGallery.ButtonGallery, {
+    text: tabTextsDict.bluePrints,
+    onClick: function onClick(e) {
+      handleClick(e, 'planos');
+    }
+  }));
+};

package/lib/components/FullScreen.js

@@ -0,0 +1,139 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullScreen = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _icons = require("@quintoandar-tokko/icons");
+var _text = require("@quintoandar-tokko/text");
+var _SliderSwap = require("./SliderSwap");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var FullScreen = exports.FullScreen = function FullScreen(_ref) {
+  var fullscreen = _ref.fullscreen,
+    tabContainers = _ref.tabContainers,
+    tabSelected = _ref.tabSelected,
+    fotos = _ref.fotos,
+    index = _ref.index,
+    setIndex = _ref.setIndex,
+    setTabSelected = _ref.setTabSelected,
+    videos = _ref.videos,
+    video360 = _ref.video360,
+    setFullscreen = _ref.setFullscreen,
+    planos = _ref.planos,
+    handleImageClickToFullscreen = _ref.handleImageClickToFullscreen,
+    URLOpenFullscreen = _ref.URLOpenFullscreen;
+  var allFiles = {
+    fotos: fotos,
+    videos: videos,
+    video360: video360,
+    planos: planos
+  };
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    contTab = _useState2[0],
+    setContTab = _useState2[1];
+  var windowWidth = window.innerWidth;
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [contTab, index]);
+  (0, _react.useEffect)(function () {
+    var newContTab;
+    if (tabSelected === 'videos') {
+      newContTab = videos.length;
+    } else if (tabSelected === 'fotos') {
+      newContTab = fotos.length;
+    } else if (tabSelected === 'planos') {
+      newContTab = planos.length;
+    } else if (tabSelected === 'video360') {
+      newContTab = video360.length;
+    }
+    setContTab(newContTab);
+  }, [tabSelected]);
+  var changeTabContainer = function changeTabContainer(tab) {
+    setIndex(0);
+    setTabSelected(tab);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'ArrowRight') {
+      if (index + 1 === contTab) return;
+      setIndex(function (prevIndex) {
+        return prevIndex + 1;
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      if (index === 0) return;
+      setIndex(function (prevIndex) {
+        return prevIndex - 1;
+      });
+    }
+    if (event.key === 'Escape') {
+      closeFullscreen();
+    }
+  };
+  var closeFullscreen = function closeFullscreen() {
+    handleImageClickToFullscreen(URLOpenFullscreen);
+    setFullscreen(false);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fullscreen ".concat(fullscreen ? 'openFullscreen' : '')
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsCloseIconMobile"
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    onClick: closeFullscreen,
+    className: "closeIcon",
+    icon: "icon-cerrar"
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsOverlay",
+    onClick: closeFullscreen
+  }), tabContainers.length > 1 && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsTabHeader"
+  }, tabContainers.map(function (tab, i) {
+    return /*#__PURE__*/_react["default"].createElement(_text.Text, {
+      key: i,
+      onClick: function onClick() {
+        return changeTabContainer(tab.value);
+      },
+      className: "".concat(tabSelected === tab.value && 'tabSelected'),
+      variant: "bodyBold.fontSize14"
+    }, tab.label);
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsContainerTabs",
+    __css: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsTabCont"
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsTabContImage"
+  }, /*#__PURE__*/_react["default"].createElement(_SliderSwap.SliderSwap, {
+    setIndex: setIndex,
+    fullScreen: fullscreen,
+    fileType: tabSelected,
+    files: allFiles[tabSelected],
+    index: index,
+    windowWidth: windowWidth,
+    tabSelected: tabSelected
+  }), /*#__PURE__*/_react["default"].createElement(_text.Text, {
+    className: "contFotos",
+    variant: "bodyBold.fontSize14"
+  }, "".concat(index + 1, "/").concat(allFiles[tabSelected].length)))), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "fsCloseIconDesktop"
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    onClick: closeFullscreen,
+    className: "closeIcon",
+    icon: "icon-cerrar"
+  }))));
+};

package/lib/components/ImageCard.js

@@ -0,0 +1,146 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _ImageErrorFallback = require("./ImageErrorFallback");
+var _excluded = ["url", "styles", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var validateImageDimensions = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(imageUrl) {
+    var img;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // eslint-disable-next-line no-undef
+          img = new Image();
+          img.src = imageUrl;
+          _context.next = 4;
+          return new Promise(function (resolve, reject) {
+            img.onload = function () {
+              return resolve();
+            };
+            img.onerror = function (error) {
+              return reject(error);
+            };
+          });
+        case 4:
+          return _context.abrupt("return", img.width > img.height);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function validateImageDimensions(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var ImageCard = exports.ImageCard = function ImageCard(_ref2) {
+  var url = _ref2.url,
+    styles = _ref2.styles,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rectangle = _useState2[0],
+    setRectangle = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorImage = _useState4[0],
+    setErrorImage = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showSkeleton = _useState6[0],
+    setShowSkeleton = _useState6[1];
+  var isRectangle = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _isRectangle;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setErrorImage(false);
+            _context2.prev = 1;
+            _context2.next = 4;
+            return validateImageDimensions(url);
+          case 4:
+            _isRectangle = _context2.sent;
+            return _context2.abrupt("return", setRectangle(_isRectangle));
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](1);
+            return _context2.abrupt("return", setErrorImage(true));
+          case 11:
+            _context2.prev = 11;
+            setShowSkeleton(false);
+            return _context2.finish(11);
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 8, 11, 14]]);
+    }));
+    return function isRectangle() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    if (url) {
+      isRectangle();
+    } else {
+      setShowSkeleton(false);
+    }
+  }, [url]);
+  if (url && errorImage) {
+    return /*#__PURE__*/_react["default"].createElement(_ImageErrorFallback.ImageErrorFallback, props, children);
+  }
+  return !showSkeleton ? /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    className: "image-card",
+    __css: _objectSpread({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: _theme["default"].colors.neutralGray8,
+      width: '100%',
+      height: '47%',
+      borderRadius: '12px',
+      backgroundSize: rectangle ? 'cover' : 'contain',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundImage: "url(".concat(url, ")"),
+      cursor: 'pointer'
+    }, styles)
+  }, props), children) : /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    className: "image-card",
+    __css: _objectSpread({
+      background: _theme["default"].colors.neutralGray8,
+      width: '100%',
+      height: '47%',
+      borderRadius: '12px'
+    }, styles)
+  }, props));
+};

package/lib/components/ImageErrorFallback.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageErrorFallback = void 0;
+var _box = require("@quintoandar-tokko/box");
+var _text = require("@quintoandar-tokko/text");
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["fullscreen", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var ImageErrorFallback = exports.ImageErrorFallback = function ImageErrorFallback(_ref) {
+  var _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    __css: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: fullscreen ? null : _theme["default"].colors.neutralGray8,
+      borderRadius: '12px',
+      gap: '8px',
+      height: '47%',
+      cursor: 'pointer'
+    }
+  }, props), !fullscreen ? /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M22.7702 6.25C22.1402 4.3 20.3502 3 18.3302 3H5.67023C3.09023 3 0.990234 5.13 0.990234 7.75V16.25C0.990234 18.87 3.09023 21 5.66023 21H18.3302C20.9102 21 23.0002 18.87 23.0002 16.25V7.75C23.0002 7.24 22.9202 6.73 22.7602 6.25H22.7702ZM5.66023 5H18.3302C19.4802 5 20.5002 5.75 20.8702 6.88C20.9602 7.16 21.0102 7.45 21.0102 7.75V11.18L18.7402 9.25C17.5402 8.23 15.7002 8.26 14.5402 9.32L9.83023 13.63C9.42023 14 8.76023 14.03 8.32023 13.69L6.20023 12.07C5.28023 11.37 4.05023 11.24 3.00023 11.65V7.75C3.00023 6.23 4.20023 5 5.67023 5H5.66023ZM18.3302 19H5.67023C4.20023 19 3.00023 17.77 3.00023 16.25V14.03L3.42023 13.69C3.86023 13.33 4.54023 13.32 4.99023 13.66L7.11023 15.28C7.67023 15.71 8.36023 15.92 9.04023 15.92C9.82023 15.92 10.5902 15.64 11.1802 15.1L15.8902 10.79C16.3102 10.4 17.0102 10.39 17.4502 10.77L20.7402 13.56C20.8202 13.63 20.9202 13.67 21.0202 13.71V16.24C21.0202 17.76 19.8202 18.99 18.3502 18.99L18.3302 19Z",
+    fill: "#344149"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M7.68023 11.53C9.27023 11.53 10.5602 10.24 10.5602 8.65C10.5602 7.06 9.27023 5.77 7.68023 5.77C6.09023 5.77 4.80023 7.06 4.80023 8.65C4.80023 10.24 6.09023 11.53 7.68023 11.53ZM7.68023 7.77C8.17023 7.77 8.56024 8.17 8.56024 8.65C8.56024 9.13 8.16023 9.53 7.68023 9.53C7.20023 9.53 6.80023 9.13 6.80023 8.65C6.80023 8.17 7.20023 7.77 7.68023 7.77Z",
+    fill: "#344149"
+  })) : /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "33",
+    height: "32",
+    viewBox: "0 0 33 32",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M30.8598 8.33333C30.0198 5.73333 27.6332 4 24.9398 4H8.05982C4.61982 4 1.81982 6.84 1.81982 10.3333V21.6667C1.81982 25.16 4.61982 28 8.04649 28H24.9398C28.3798 28 31.1665 25.16 31.1665 21.6667V10.3333C31.1665 9.65333 31.0598 8.97333 30.8465 8.33333H30.8598ZM8.04649 6.66667H24.9398C26.4732 6.66667 27.8332 7.66667 28.3265 9.17333C28.4465 9.54667 28.5132 9.93333 28.5132 10.3333V14.9067L25.4865 12.3333C23.8865 10.9733 21.4332 11.0133 19.8865 12.4267L13.6065 18.1733C13.0598 18.6667 12.1798 18.7067 11.5932 18.2533L8.76649 16.0933C7.53982 15.16 5.89982 14.9867 4.49982 15.5333V10.3333C4.49982 8.30667 6.09982 6.66667 8.05982 6.66667H8.04649ZM24.9398 25.3333H8.05982C6.09982 25.3333 4.49982 23.6933 4.49982 21.6667V18.7067L5.05982 18.2533C5.64649 17.7733 6.55316 17.76 7.15316 18.2133L9.97982 20.3733C10.7265 20.9467 11.6465 21.2267 12.5532 21.2267C13.5932 21.2267 14.6198 20.8533 15.4065 20.1333L21.6865 14.3867C22.2465 13.8667 23.1798 13.8533 23.7665 14.36L28.1532 18.08C28.2598 18.1733 28.3932 18.2267 28.5265 18.28V21.6533C28.5265 23.68 26.9265 25.32 24.9665 25.32L24.9398 25.3333Z",
+    fill: "white"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.7398 15.3733C12.8598 15.3733 14.5798 13.6533 14.5798 11.5333C14.5798 9.41333 12.8598 7.69333 10.7398 7.69333C8.61982 7.69333 6.89982 9.41333 6.89982 11.5333C6.89982 13.6533 8.61982 15.3733 10.7398 15.3733ZM10.7398 10.36C11.3932 10.36 11.9132 10.8933 11.9132 11.5333C11.9132 12.1733 11.3798 12.7067 10.7398 12.7067C10.0998 12.7067 9.56649 12.1733 9.56649 11.5333C9.56649 10.8933 10.0998 10.36 10.7398 10.36Z",
+    fill: "white"
+  })), /*#__PURE__*/_react["default"].createElement(_text.Text, {
+    style: {
+      position: 'relative'
+    },
+    textAlign: "center",
+    fontSize: fullscreen ? '14px' : '12px',
+    width: fullscreen ? 'auto' : '128px',
+    color: _theme["default"].colors.neutralGray1
+  }, "No pudimos cargar esta imagen"), children);
+};