logitude-dashboard-library 1.2.15 → 1.2.18

package/dist/index.js

@@ -1021,6 +1021,9 @@ var DashboardDesigner = function DashboardDesigner() {
   }]),
       widgetComponents = _useState3[0];
 
+  var array12 = Array.from({
+    length: 12
+  }).fill(null);
   var savedLayouts = getFromStorage("grid-layout");
   var savedWidgets = getFromStorage("grid-widgets");
 
@@ -1030,32 +1033,40 @@ var DashboardDesigner = function DashboardDesigner() {
       layouts = _useState4[0],
       setLayouts = _useState4[1];
 
-  var _useState5 = React.useState(false),
-      setShowMsg = _useState5[1];
+  var _useState5 = React.useState(Array.from({
+    length: 10
+  }).fill(null)),
+      placeholderRowsArray = _useState5[0],
+      setplaceholderRowsArray = _useState5[1];
 
-  var _useState6 = React.useState(undefined),
-      dateFilter = _useState6[0];
+  var _useState6 = React.useState(false),
+      setShowMsg = _useState6[1];
 
-  var _useState7 = React.useState(false),
-      displayDialog = _useState7[0],
-      setDisplayDialog = _useState7[1];
+  var _useState7 = React.useState(undefined),
+      dateFilter = _useState7[0];
 
-  var _useState8 = React.useState("");
+  var _useState8 = React.useState(false),
+      displayDialog = _useState8[0],
+      setDisplayDialog = _useState8[1];
 
-  var _useState9 = React.useState(savedWidgets || []),
-      widgets = _useState9[0],
-      setWidgets = _useState9[1];
+  var _useState9 = React.useState("");
 
-  var _useState10 = React.useState(10),
-      placeholderRows = _useState10[0],
-      setPlaceholderRows = _useState10[1];
+  var _useState10 = React.useState(savedWidgets || []),
+      widgets = _useState10[0],
+      setWidgets = _useState10[1];
 
-  var _useState11 = React.useState(),
-      selectedWidget = _useState11[0];
+  var _useState11 = React.useState(10),
+      setPlaceholderRows = _useState11[1];
 
-  var _useState12 = React.useState(null),
-      widgetToEdit = _useState12[0],
-      setWidgetToEdit = _useState12[1];
+  var _useState12 = React.useState(),
+      selectedWidget = _useState12[0];
+
+  var _useState13 = React.useState(null),
+      widgetToEdit = _useState13[0],
+      setWidgetToEdit = _useState13[1];
+
+  var dashboardContainer = React.createRef();
+  var dimensions = useRefDimensions(dashboardContainer);
 
   var renderPageHeader = function renderPageHeader() {
     return React__default.createElement("header", {
@@ -1086,34 +1097,6 @@ var DashboardDesigner = function DashboardDesigner() {
     toggleDialog();
   }
 
-  function renderGridWidgetsPlaceholder() {
-    console.log(placeholderRows);
-    return React__default.createElement("div", {
-      className: "dl-grid dl-grid--bordered"
-    }, [].concat(Array(placeholderRows)).map(function (e, i) {
-      return [].concat(Array(layoutGridProps.cols.lg)).map(function (e, i) {
-        return React__default.createElement("div", {
-          key: i,
-          style: {
-            height: layoutGridProps.rowHeight
-          }
-        });
-      });
-    }));
-  }
-
-  function renderLayoutGrid(layout) {
-    return React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, layoutGridProps, {
-      layouts: layouts,
-      compactType: "vertical",
-      onLayoutChange: function onLayoutChange(layout, layouts) {
-        return _onLayoutChange(layout, layouts);
-      }
-    }), _.map(layout, function (el) {
-      return renderWidgetComponent(el);
-    }));
-  }
-
   function _onLayoutChange(layout, layouts) {
     console.log(layout, layouts);
     saveToStorage("grid-layout", layouts);
@@ -1121,20 +1104,6 @@ var DashboardDesigner = function DashboardDesigner() {
     setLayouts(layouts);
   }
 
-  function renderWidgetComponent(el) {
-    var widget = FindWidget(el);
-    return React__default.createElement("div", {
-      key: el.i
-    }, React__default.createElement(WidgetCard, {
-      key: el.i,
-      widget: widget,
-      el: el,
-      dateFilter: dateFilter,
-      editBtnClicked: editWidget,
-      deleteBtnClicked: deletePanel
-    }));
-  }
-
   function deletePanel(i) {
     var layout = layouts["lg"];
     var itemIndex = layout.findIndex(function (d) {
@@ -1296,10 +1265,6 @@ var DashboardDesigner = function DashboardDesigner() {
     return Math.floor(Math.random() * (max - min + 1)) + min;
   }
 
-  React.useEffect(function () {
-    UpdatePlaceholderDimensions();
-  });
-
   function UpdatePlaceholderDimensions() {
     var _gridLayout$;
 
@@ -1310,6 +1275,9 @@ var DashboardDesigner = function DashboardDesigner() {
     var newPlaceholderRows = Math.floor(gridElementHeight / layoutGridProps.rowHeight);
     newPlaceholderRows = newPlaceholderRows < minimumPlaceholderRowsCount ? 10 : newPlaceholderRows;
     setPlaceholderRows(newPlaceholderRows);
+    setplaceholderRowsArray(Array.from({
+      length: newPlaceholderRows
+    }).fill(null));
   }
 
   return React__default.createElement("div", {
@@ -1321,8 +1289,41 @@ var DashboardDesigner = function DashboardDesigner() {
   }, renderPageHeader()), React__default.createElement("div", {
     className: "dl-row dl-content"
   }, React__default.createElement("div", {
-    className: "dl-grid-container"
-  }, renderGridWidgetsPlaceholder(), renderLayoutGrid(layouts["lg"])))), renderNewWidgetDialog());
+    className: "dl-grid-container",
+    ref: dashboardContainer
+  }, React__default.createElement("div", {
+    className: "dl-grid dl-grid--bordered"
+  }, placeholderRowsArray.map(function (e, i) {
+    return array12.map(function (e, i) {
+      return React__default.createElement("div", {
+        key: i,
+        style: {
+          height: layoutGridProps.rowHeight
+        }
+      });
+    });
+  })), React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, layoutGridProps, {
+    layouts: layouts,
+    width: dimensions.width,
+    compactType: "vertical",
+    onWidthChange: function onWidthChange() {
+      return UpdatePlaceholderDimensions();
+    },
+    onLayoutChange: function onLayoutChange(layout, layouts) {
+      return _onLayoutChange(layout, layouts);
+    }
+  }), layouts["lg"].map(function (el) {
+    return React__default.createElement("div", {
+      key: el.i
+    }, React__default.createElement(WidgetCard, {
+      key: el.i,
+      widget: FindWidget(el),
+      el: el,
+      dateFilter: dateFilter,
+      editBtnClicked: editWidget,
+      deleteBtnClicked: deletePanel
+    }));
+  }))))), renderNewWidgetDialog());
 };
 
 var layoutGridProps = {
@@ -1357,6 +1358,30 @@ var WidgetTypes = [{
   Disabled: true
 }];
 
+var useRefDimensions = function useRefDimensions(ref) {
+  var _useState14 = React.useState({
+    width: 1,
+    height: 2
+  }),
+      dimensions = _useState14[0],
+      setDimensions = _useState14[1];
+
+  React__default.useEffect(function () {
+    if (ref.current) {
+      var current = ref.current;
+      var boundingRect = current.getBoundingClientRect();
+      var width = boundingRect.width,
+          height = boundingRect.height;
+      if (dimensions.width != width) setDimensions({
+        width: Math.round(width),
+        height: Math.round(height)
+      });
+      console.log(width);
+    }
+  }, [ref]);
+  return dimensions;
+};
+
 var Dashboard = function Dashboard(props) {
   localStorage.setItem("token", props === null || props === void 0 ? void 0 : props.token);
   return React.createElement("div", {