luna-one 3.1.395 → 3.1.396

package/dist/luna/components/BlockListItems/AppCards.js

@@ -80,10 +80,31 @@ var AppCards = function AppCards(_ref) {
   var GatsbyImage = content === null || content === void 0 ? void 0 : content.GatsbyImage;
   var Link = content === null || content === void 0 ? void 0 : content.Link;
   var allCards = content === null || content === void 0 ? void 0 : content.cards;
-  var arraysNeeded = 0;
-  var colClassName = "";
-  var isMobile = false;
-  var isPad = false;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      colClassName = _useState2[0],
+      setColClassName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      firstColumn = _useState4[0],
+      setFirstColumn = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      secondColumn = _useState6[0],
+      setSecondColumn = _useState6[1];
+
+  var _useState7 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      thirdColumn = _useState8[0],
+      setThirdColumn = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      height = _useState10[0],
+      setHeight = _useState10[1];
 
   var getWindowDimensions = function getWindowDimensions() {
     var width = 0;
@@ -103,72 +124,6 @@ var AppCards = function AppCards(_ref) {
     };
   };
 
-  var _getWindowDimensions = getWindowDimensions(),
-      width = _getWindowDimensions.width,
-      height = _getWindowDimensions.height;
-
-  var _useState = (0, _react.useState)({
-    height: height,
-    width: width
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      dimensions = _useState2[0],
-      setDimensions = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    var _getWindowDimensions2 = getWindowDimensions(),
-        width = _getWindowDimensions2.width,
-        height = _getWindowDimensions2.height;
-
-    setDimensions({
-      height: height,
-      width: width
-    });
-
-    if (typeof window !== "undefined") {
-      var handleResize = function handleResize() {
-        var _getWindowDimensions3 = getWindowDimensions(),
-            width = _getWindowDimensions3.width,
-            height = _getWindowDimensions3.height;
-
-        setDimensions({
-          height: height,
-          width: width
-        });
-      };
-
-      window.addEventListener("resize", handleResize);
-      return function () {
-        if (typeof window !== "undefined") {
-          window.removeEventListener("resize", handleResize);
-        }
-      };
-    }
-  }, []);
-
-  if (dimensions.width >= 1201) {
-    arraysNeeded = 3;
-    colClassName = "three-col";
-  } else if (dimensions.width <= 1200 && dimensions.width >= 801) {
-    arraysNeeded = 2;
-    colClassName = "two-col";
-    isPad = true;
-  } else if (dimensions.width <= 800) {
-    arraysNeeded = 1;
-    colClassName = "one-col";
-    isMobile = true;
-  }
-
-  var firstCol = [];
-  var secondCol = [];
-  var thirdCol = [];
-
-  for (var i in allCards) {
-    if (i % arraysNeeded === 0) firstCol.push(allCards[i]);
-    if (i % arraysNeeded - 1 === 0) secondCol.push(allCards[i]);
-    if (i % arraysNeeded - 2 === 0) thirdCol.push(allCards[i]);
-  }
-
   var renderAppCards = function renderAppCards(column) {
     if (column !== null && column !== void 0 && column.length) {
       return column.map(function (card, index) {
@@ -208,10 +163,64 @@ var AppCards = function AppCards(_ref) {
     return null;
   };
 
+  var setColumns = function setColumns(width) {
+    var arraysNeeded = 0;
+    var firstCol = [];
+    var secondCol = [];
+    var thirdCol = [];
+
+    if (width >= 1201) {
+      arraysNeeded = 3;
+      setColClassName("three-col");
+    } else if (width <= 1200 && width >= 801) {
+      arraysNeeded = 2;
+      setColClassName("two-col");
+    } else if (width <= 800) {
+      arraysNeeded = 1;
+      setColClassName("one-col");
+    }
+
+    for (var i in allCards) {
+      if (i % arraysNeeded === 0) firstCol.push(allCards[i]);
+      if (i % arraysNeeded - 1 === 0) secondCol.push(allCards[i]);
+      if (i % arraysNeeded - 2 === 0) thirdCol.push(allCards[i]);
+    }
+
+    setFirstColumn(renderAppCards(firstCol));
+    setSecondColumn(renderAppCards(secondCol));
+    setThirdColumn(renderAppCards(thirdCol));
+  };
+
+  (0, _react.useEffect)(function () {
+    var _getWindowDimensions = getWindowDimensions(),
+        width = _getWindowDimensions.width,
+        height = _getWindowDimensions.height;
+
+    setHeight(height);
+    setColumns(width);
+
+    if (typeof window !== "undefined") {
+      var handleResize = function handleResize() {
+        var _getWindowDimensions2 = getWindowDimensions(),
+            width = _getWindowDimensions2.width,
+            height = _getWindowDimensions2.height;
+
+        setHeight(height);
+        setColumns(width);
+      };
+
+      window.addEventListener("resize", handleResize);
+      return function () {
+        if (typeof window !== "undefined") {
+          window.removeEventListener("resize", handleResize);
+        }
+      };
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "ter-app-cards__primitives",
     style: {
-      height: !isMobile ? dimensions.height : 0
+      height: colClassName === "two-col" || colClassName === "three-col" ? height : 0
     }
   }), /*#__PURE__*/_react.default.createElement("h3", {
     className: "ter-app-cards__main-heading"
@@ -219,11 +228,11 @@ var AppCards = function AppCards(_ref) {
     className: "ter-app-cards"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: colClassName
-  }, renderAppCards(firstCol)), !isMobile ? /*#__PURE__*/_react.default.createElement("div", {
+  }, firstColumn), colClassName === "two-col" || colClassName === "three-col" ? /*#__PURE__*/_react.default.createElement("div", {
     className: colClassName
-  }, renderAppCards(secondCol)) : null, !isMobile && !isPad ? /*#__PURE__*/_react.default.createElement("div", {
+  }, secondColumn) : null, colClassName === "three-col" ? /*#__PURE__*/_react.default.createElement("div", {
     className: colClassName
-  }, renderAppCards(thirdCol)) : null));
+  }, thirdColumn) : null));
 };
 
 var _default = AppCards;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.395",
+  "version": "3.1.396",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",