@quintoandar-tokko/carousel 1.0.54

package/lib/index.js

@@ -0,0 +1,422 @@
+"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.Carousel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _icons = require("@quintoandar-tokko/icons");
+require("../styles/gallery.css");
+var _ImageCard = require("./components/ImageCard");
+var _FullScreen = require("./components/FullScreen");
+var _SliderSwap = require("./components/SliderSwap");
+var _ButtonsMainImage = require("./components/ButtonsMainImage");
+var _excluded = ["images", "planos", "video", "video360", "otherComponent", "otherButton", "frontCoverImg", "frontCoverBlueprints", "tabTextsDict"];
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+var defaultTabTextsDict = {
+  videos: 'Videos',
+  video360: 'Video 360°',
+  photos: 'Fotos',
+  bluePrints: 'Planos'
+};
+var Carousel = exports.Carousel = function Carousel(_ref) {
+  var _carouselContainerRef, _mainImageSkeletonRef;
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$planos = _ref.planos,
+    planos = _ref$planos === void 0 ? [] : _ref$planos,
+    _ref$video = _ref.video,
+    video = _ref$video === void 0 ? [] : _ref$video,
+    _ref$video2 = _ref.video360,
+    video360 = _ref$video2 === void 0 ? [] : _ref$video2,
+    _ref$otherComponent = _ref.otherComponent,
+    otherComponent = _ref$otherComponent === void 0 ? false : _ref$otherComponent,
+    _ref$otherButton = _ref.otherButton,
+    otherButton = _ref$otherButton === void 0 ? false : _ref$otherButton,
+    _ref$frontCoverImg = _ref.frontCoverImg,
+    frontCoverImg = _ref$frontCoverImg === void 0 ? false : _ref$frontCoverImg,
+    _ref$frontCoverBluepr = _ref.frontCoverBlueprints,
+    frontCoverBlueprints = _ref$frontCoverBluepr === void 0 ? false : _ref$frontCoverBluepr,
+    _ref$tabTextsDict = _ref.tabTextsDict,
+    tabTextsDict = _ref$tabTextsDict === void 0 ? defaultTabTextsDict : _ref$tabTextsDict,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowResize = _useState2[0],
+    setWindowResize = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullscreen = _useState4[0],
+    setFullscreen = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    carouselHeight = _useState6[0],
+    setCarouselHeight = _useState6[1];
+  var _useState7 = (0, _react.useState)('fotos'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tabSelected = _useState8[0],
+    setTabSelected = _useState8[1];
+  var tabContainers = [];
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    index = _useState10[0],
+    setIndex = _useState10[1];
+  var _useState11 = (0, _react.useState)(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    URLOpenFullscreen = _useState12[0],
+    setURLOpenFullscreen = _useState12[1];
+  var Images = [].concat(_toConsumableArray(images), _toConsumableArray(planos));
+  var imgWithCover = _toConsumableArray(images);
+  var bluePrintsWithCover = _toConsumableArray(planos);
+  if (frontCoverImg) {
+    Images.unshift(frontCoverImg);
+    imgWithCover.unshift(frontCoverImg);
+  }
+  if (frontCoverBlueprints) {
+    Images.unshift(frontCoverBlueprints);
+    bluePrintsWithCover.unshift(frontCoverBlueprints);
+  }
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    emptyImgArray = _useState14[0],
+    setEmptyImgArray = _useState14[1];
+  var carouselContainerRef = (0, _react.useRef)();
+  var containerWidth = (_carouselContainerRef = carouselContainerRef.current) === null || _carouselContainerRef === void 0 ? void 0 : _carouselContainerRef.parentElement.clientWidth;
+  var _useState15 = (0, _react.useState)(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    mainImageWidth = _useState16[0],
+    setMainImageWidth = _useState16[1];
+  var _useState17 = (0, _react.useState)(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    followImgColumns = _useState18[0],
+    setFollowImgColumns = _useState18[1];
+  var _useState19 = (0, _react.useState)(0),
+    _useState20 = _slicedToArray(_useState19, 2),
+    followingImgWidth = _useState20[0],
+    setFollowingImgWidth = _useState20[1];
+  var mainImageSkeletonRef = (0, _react.useRef)();
+  var mainImageWidthSkeleton = (_mainImageSkeletonRef = mainImageSkeletonRef.current) === null || _mainImageSkeletonRef === void 0 ? void 0 : _mainImageSkeletonRef.clientWidth;
+  var allPictures = [].concat(_toConsumableArray(imgWithCover), _toConsumableArray(bluePrintsWithCover));
+  var showOtherButtonsGalleryMobile = containerWidth > 530;
+  if (video.length > 0) {
+    tabContainers.push({
+      label: tabTextsDict.videos,
+      value: 'videos'
+    });
+  }
+  if (video360.length > 0) {
+    tabContainers.push({
+      label: tabTextsDict.video360,
+      value: 'video360'
+    });
+  }
+  if (images.length > 0 || frontCoverImg.length > 0) {
+    tabContainers.push({
+      label: tabTextsDict.photos,
+      value: 'fotos'
+    });
+  }
+  if (planos.length > 0 || frontCoverBlueprints.length > 0) {
+    tabContainers.push({
+      label: tabTextsDict.bluePrints,
+      value: 'planos'
+    });
+  }
+  (0, _react.useEffect)(function () {
+    var changeWidth = function changeWidth() {
+      setWindowResize(window.innerWidth);
+    };
+    var debouncedHandleResize = debounce(changeWidth, 200);
+    window.addEventListener('resize', debouncedHandleResize);
+    return function () {
+      return window.removeEventListener('resize', debouncedHandleResize);
+    };
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    var newMainImageWidth;
+    if (containerWidth <= 700) {
+      setFollowImgColumns(0);
+      newMainImageWidth = containerWidth;
+    } else if (containerWidth >= 650 && containerWidth < 960) {
+      setFollowImgColumns(1);
+      newMainImageWidth = containerWidth * 0.68;
+    } else if (containerWidth >= 960 && containerWidth < 1215) {
+      setFollowImgColumns(2);
+      newMainImageWidth = containerWidth * 0.513;
+    } else if (containerWidth >= 1215 && containerWidth < 1480) {
+      setFollowImgColumns(2);
+      newMainImageWidth = containerWidth * 0.51;
+    } else {
+      setFollowImgColumns(3);
+      newMainImageWidth = containerWidth * 0.41;
+    }
+    setMainImageWidth(Math.round(newMainImageWidth));
+  }, [containerWidth]);
+  (0, _react.useEffect)(function () {
+    setCarouselHeight(Math.round(mainImageWidth * 0.562));
+  }, [mainImageWidth]);
+  (0, _react.useEffect)(function () {
+    setFollowingImgWidth(Math.round((carouselHeight / 2 - 16) * 1.77));
+  }, [carouselHeight]);
+  (0, _react.useEffect)(function () {
+    var emptyArray = [];
+    for (var i = 0; i < followImgColumns * 2; i++) {
+      emptyArray.push('');
+    }
+    if (emptyArray) setEmptyImgArray(emptyArray);
+  }, [followImgColumns, windowResize]);
+  var toggleFullscreen = function toggleFullscreen() {
+    if (otherButton || [].concat(_toConsumableArray(video), _toConsumableArray(video360), _toConsumableArray(imgWithCover), _toConsumableArray(bluePrintsWithCover)).length === 0) {
+      return;
+    }
+    if (allPictures.length === 0) {
+      setTabSelected(video.length > 0 ? 'videos' : video360.length > 0 ? 'video360' : '');
+    }
+    setFullscreen(true);
+  };
+  var debounce = function debounce(func, wait) {
+    var timeout;
+    var executedFunction = function executedFunction() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var later = function later() {
+        clearTimeout(timeout);
+        func.apply(void 0, args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+    return executedFunction;
+  };
+  var handleImageClickToFullscreen = function handleImageClickToFullscreen(url) {
+    var imagesMap = images.map(function (img) {
+      return {
+        url: img,
+        type: 'fotos'
+      };
+    });
+    if (frontCoverImg) imagesMap.unshift({
+      url: frontCoverImg,
+      type: 'fotos'
+    });
+    var planosMap = planos.map(function (img) {
+      return {
+        url: img,
+        type: 'planos'
+      };
+    });
+    if (frontCoverBlueprints) {
+      planosMap.unshift({
+        url: frontCoverBlueprints,
+        type: 'planos'
+      });
+    }
+    var allFiles = [].concat(_toConsumableArray(imagesMap), _toConsumableArray(planosMap));
+    var fileFiltered = allFiles.filter(function (img) {
+      return img.url === url;
+    })[0];
+    if (!fileFiltered) {
+      return;
+    }
+    if (fileFiltered.type === 'fotos') {
+      for (var i = 0; i < imgWithCover.length; i++) {
+        if (imgWithCover[i] === fileFiltered.url) {
+          setIndex(i);
+          break;
+        }
+      }
+    } else {
+      for (var _i = 0; _i < bluePrintsWithCover.length; _i++) {
+        if (bluePrintsWithCover[_i] === fileFiltered.url) {
+          setIndex(_i);
+          break;
+        }
+      }
+    }
+    setTabSelected(fileFiltered.type);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    __css: {
+      position: 'relative',
+      width: '100%'
+    },
+    ref: carouselContainerRef
+  }, !containerWidth ? /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "gallerySkeletonsContainer"
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "mainImageContainer",
+    backgroundColor: _theme["default"].colors.neutralGray8,
+    borderRadius: 16,
+    __css: {
+      height: mainImageWidthSkeleton * 0.562
+    },
+    ref: mainImageSkeletonRef
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    height: "100%",
+    width: "100%",
+    borderRadius: 12
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    __css: {
+      maxHeight: mainImageWidthSkeleton * 0.562
+    },
+    className: "followingSkeletonImagesContainer"
+  }, Array(6).fill().map(function (el, index) {
+    return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+      key: "key".concat(index),
+      borderRadius: 12,
+      backgroundColor: _theme["default"].colors.neutralGray8
+    });
+  }))) : !otherComponent ? /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    height: "".concat(containerWidth >= 786 ? carouselHeight : containerWidth * 0.562, "px"),
+    __css: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'start',
+      width: '100%'
+    }
+  }, containerWidth < 786 ? /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    __css: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_SliderSwap.SliderSwap, {
+    files: allPictures,
+    setFullscreen: setFullscreen,
+    toggleFullscreen: toggleFullscreen,
+    otherButton: otherButton,
+    handleImageClickToFullscreen: handleImageClickToFullscreen,
+    setIndex: setIndex,
+    setURLOpenFullscreen: setURLOpenFullscreen
+  }), !otherButton && containerWidth > 300 && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    __css: {
+      bottom: '6px'
+    },
+    className: "buttonsMainImageSlider"
+  }, /*#__PURE__*/_react["default"].createElement(_ButtonsMainImage.ButtonsMainImage, {
+    video: video,
+    video360: (video.length === 0 || showOtherButtonsGalleryMobile) && video360,
+    images: showOtherButtonsGalleryMobile && images,
+    imgWithCover: showOtherButtonsGalleryMobile && imgWithCover,
+    planos: showOtherButtonsGalleryMobile && planos,
+    frontCoverBlueprints: showOtherButtonsGalleryMobile && frontCoverBlueprints,
+    setTabSelected: setTabSelected,
+    setIndex: setIndex,
+    setFullscreen: setFullscreen,
+    tabTextsDict: tabTextsDict
+  }))) : /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({}, props, {
+    __css: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '16px',
+      height: '100%'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_ImageCard.ImageCard, {
+    onClick: function onClick() {
+      toggleFullscreen();
+      handleImageClickToFullscreen(Images[0]);
+    },
+    className: "firstTabImg",
+    position: 'relative',
+    height: '100%',
+    width: "".concat(followImgColumns === 0 ? containerWidth : mainImageWidth, "px"),
+    minWidth: followImgColumns === 0 ? containerWidth : 0,
+    url: Images[0]
+  }, !Images[0] && /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-propiedades",
+    fontSize: "34px",
+    color: _theme["default"].colors.neutralGray4
+  }), otherButton ? /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "buttonsMainImgContainer"
+  }, otherButton) : /*#__PURE__*/_react["default"].createElement(_ButtonsMainImage.ButtonsMainImage, {
+    video: video,
+    video360: video360,
+    images: images,
+    imgWithCover: imgWithCover,
+    planos: planos,
+    frontCoverBlueprints: frontCoverBlueprints,
+    setTabSelected: setTabSelected,
+    setIndex: setIndex,
+    setFullscreen: setFullscreen,
+    tabTextsDict: tabTextsDict
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    __css: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      alignItems: 'start',
+      flexWrap: 'wrap',
+      gap: '16px',
+      height: '100%'
+    }
+  }, emptyImgArray.map(function (img, index) {
+    return /*#__PURE__*/_react["default"].createElement(_ImageCard.ImageCard, {
+      onClick: function onClick() {
+        toggleFullscreen();
+        handleImageClickToFullscreen(Images[index + 1] ? Images[index + 1] : Images[0]);
+      },
+      width: "".concat(followingImgWidth, "px"),
+      maxHeight: carouselHeight / 2 - 8,
+      className: "followingImg",
+      url: Images[index + 1] ? Images[index + 1] : '',
+      key: index
+    }, !Images[index + 1] ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      icon: "icon-propiedades",
+      fontSize: "24px",
+      color: _theme["default"].colors.neutralGray4
+    }) : index + 1 === followImgColumns * 2 && allPictures.length > followImgColumns * 2 && allPictures.length - 1 - followImgColumns * 2 + planos.length > 0 && allPictures.length - 1 - followImgColumns * 2 > 0 && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+      __css: {
+        borderRadius: '50%',
+        position: 'absolute',
+        width: '46px',
+        height: '46px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: _theme["default"].colors.neutralGray8,
+        opacity: '0.8',
+        color: _theme["default"].colors.black,
+        fontFamily: 'Nunito Sans',
+        fontSize: '14px',
+        fontWeight: '700'
+      }
+    }, "+".concat(allPictures.length - 1 - followImgColumns * 2)));
+  })))) : /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    onClick: toggleFullscreen
+  }, otherComponent), /*#__PURE__*/_react["default"].createElement(_FullScreen.FullScreen, {
+    fullscreen: fullscreen,
+    setFullscreen: setFullscreen,
+    tabContainers: tabContainers,
+    tabSelected: tabSelected,
+    setTabSelected: setTabSelected,
+    index: index,
+    setIndex: setIndex,
+    videos: video,
+    fotos: imgWithCover,
+    planos: bluePrintsWithCover,
+    video360: video360,
+    bluePrintsWithCover: bluePrintsWithCover,
+    URLOpenFullscreen: URLOpenFullscreen,
+    handleImageClickToFullscreen: handleImageClickToFullscreen,
+    tabTextsDict: tabTextsDict
+  }));
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@quintoandar-tokko/carousel",
+  "version": "1.0.54",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib",
+    "styles",
+    "components"
+  ],
+  "dependencies": {
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/button": "^1.2.371",
+    "@quintoandar-tokko/hooks": "^1.2.308",
+    "@quintoandar-tokko/text": "^1.2.287",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3c5995a3482c9cd1b428a69e135c934c37bce2ae"
+}