Merge branch 'master' into UX-575-sidepanel-stories

acl-services · Mar 26, 2020 · 180a83a · 180a83a
2 parents 4b84bc9 + 8e268f7
commit 180a83a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 24 deletions.
diff --git a/packages/DataGrid/src/DataGrid.js b/packages/DataGrid/src/DataGrid.js
@@ -92,16 +92,17 @@ const DataGrid = React.forwardRef((props, ref) => {
   const overscanColumnCount = 2;
 
   const rowCount = data.length;
-
-  const { ColumnDefinitions, Basement, InfiniteScroll } = React.useMemo(() => {
-    const {
-      "DataGrid.ColumnDefinition": ColumnDefinitions,
-      "DataGrid.Basement": Basement,
-      "DataGrid.InfiniteScroll": InfiniteScroll,
-    } = extractChildren(children, ["DataGrid.ColumnDefinition", "DataGrid.Basement", "DataGrid.InfiniteScroll"]);
-
-    return { ColumnDefinitions, Basement, InfiniteScroll };
-  }, [children]);
+  const {
+    "DataGrid.ColumnDefinition": extractedColumnDefinitions,
+    "DataGrid.Basement": Basement,
+    "DataGrid.InfiniteScroll": InfiniteScroll,
+  } = extractChildren(children, ["DataGrid.ColumnDefinition", "DataGrid.Basement", "DataGrid.InfiniteScroll"]);
+
+  let ColumnDefinitions = extractedColumnDefinitions;
+  if (!Array.isArray(extractedColumnDefinitions)) {
+    // when there is only one component extracted function return the element not an array of elements
+    ColumnDefinitions = [extractedColumnDefinitions];
+  }
 
   const columnCount = ColumnDefinitions.length;
 
@@ -397,21 +398,23 @@ const DataGrid = React.forwardRef((props, ref) => {
     // Using lazy import because in some cases document.body is null but mouse-wheel
     // depends on document.body being not null. Therefore we need to lazy import the mouse-wheel library.
     import("mouse-wheel").then(module => {
-      const { default: mouseWheel } = module;
-      mouseWheel(refScrollGrid.current, (dx, dy, dz, event) => {
-        event.preventDefault();
-        refScrollGrid.current.scrollTo(refScrollGrid.current.scrollLeft + dx, refScrollGrid.current.scrollTop + dy);
-      });
-
-      mouseWheel(refScrollStickyColumns.current, (dx, dy, dz, event) => {
-        event.preventDefault();
-        refScrollStickyColumns.current.scrollTo(
-          refScrollStickyColumns.current.scrollLeft + dx,
-          refScrollStickyColumns.current.scrollTop + dy
-        );
-      });
+      if (Array.isArray(data) && data.length) {
+        const { default: mouseWheel } = module;
+        mouseWheel(refScrollGrid.current, (dx, dy, dz, event) => {
+          event.preventDefault();
+          refScrollGrid.current.scrollTo(refScrollGrid.current.scrollLeft + dx, refScrollGrid.current.scrollTop + dy);
+        });
+
+        mouseWheel(refScrollStickyColumns.current, (dx, dy, dz, event) => {
+          event.preventDefault();
+          refScrollStickyColumns.current.scrollTo(
+            refScrollStickyColumns.current.scrollLeft + dx,
+            refScrollStickyColumns.current.scrollTop + dy
+          );
+        });
+      }
     });
-  }, [gridId]);
+  }, [gridId, data]);
 
   const handleMouseOver = event => {
     highlightRow({ rowIndex: event.target.dataset.rowIndex });

diff --git a/packages/DataGrid/stories/DataGrid.oneColumn.stories.js b/packages/DataGrid/stories/DataGrid.oneColumn.stories.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import * as Sbook from "storybook/assets/styles/common.styles";
+import DataGrid from "../src";
+
+const data = [
+  {
+    name: "Josef Bican ‡",
+  },
+  {
+    name: "Romário",
+  },
+  {
+    name: "Pelé",
+  },
+];
+
+export function App() {
+  return (
+    <Sbook.Story>
+      <DataGrid data={data}>
+        <DataGrid.ColumnDefinition header="Name" cell="name" />
+      </DataGrid>
+    </Sbook.Story>
+  );
+}
+
+storiesOf("DataGrid / regular", module).add("One column", () => <App />);