fix: fixed bad behaviour of the responsive column calculation

askides · Jan 20, 2022 · 1307298 · 1307298
1 parent f9ae8cb
commit 1307298
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 31 deletions.
diff --git a/src/components/Plock.js b/src/components/Plock.js
@@ -6,12 +6,12 @@ const uuid = () => Math.random().toString(36).substring(2, 12);
  * Configuration for Plock.
  * This is a map of breakpoints to the number of columns to use for that breakpoint.
  *
- * const breakpoints = {
- *   sm: { size: 640, columns: 1 },
- *   md: { size: 768, columns: 2 },
- *   lg: { size: 1024, columns: 3 },
- *   xl: { size: 1280, columns: 4 },
- * };
+ * const breakpoints = [
+ *   { size: 640, columns: 1 },
+ *   { size: 768, columns: 2 },
+ *   { size: 1024, columns: 3 },
+ *   { size: 1280, columns: 4 },
+ * ];
  */
 
 export function useWindowWidth() {
@@ -36,20 +36,16 @@ export function Plock({ children, className, style, nColumns = 3, gap = 10 }) {
     if (typeof nColumns === "number") {
       columnsElements = Array.from({ length: nColumns }, (e) => []);
     } else {
-      // TODO: this is not correctly working
-      const closestWith = Object.keys(nColumns).reduce((prev, curr) => {
-        const { size } = nColumns[curr];
-        return Math.abs(size - width) < Math.abs(prev - width) ? size : prev;
-      }, 0);
+      let breakpoint = nColumns
+        .filter((el) => el.size <= width)
+        .sort((a, b) => a.size - b.size)
+        .pop();
 
-      const closest = Object.keys(nColumns).find(
-        (key) => nColumns[key].size === closestWith
-      );
+      if (!breakpoint) {
+        breakpoint = nColumns.sort((a, b) => a.size - b.size)[0];
+      }
 
-      columnsElements = Array.from(
-        { length: nColumns[closest].columns },
-        (e) => []
-      );
+      columnsElements = Array.from({ length: breakpoint.columns }, (e) => []);
     }
 
     React.Children.forEach(children, (child, index) => {

diff --git a/src/components/Plock.test.js b/src/components/Plock.test.js
@@ -1,6 +1,19 @@
+import matchMediaPolyfill from "mq-polyfill";
 import { render, screen } from "@testing-library/react";
 import { Plock } from "./Plock";
 
+beforeAll(() => {
+  matchMediaPolyfill(window);
+  window.resizeTo = function resizeTo(width, height) {
+    Object.assign(this, {
+      innerWidth: width,
+      innerHeight: height,
+      outerWidth: width,
+      outerHeight: height,
+    }).dispatchEvent(new this.Event("resize"));
+  };
+});
+
 it("should render the container", () => {
   render(<Plock />);
   const element = screen.getByTestId("plock-container");
@@ -111,17 +124,137 @@ it("should not override the default styles", () => {
   expect(element).toHaveStyle({ display: "grid" });
 });
 
-it("should be possibile to pass an object in the nColumns prop", () => {
-  const breakpoints = {
-    sm: { size: 640, columns: 1 },
-    md: { size: 768, columns: 2 },
-    lg: { size: 1024, columns: 3 },
-    xl: { size: 1280, columns: 4 },
-  };
+it("should be possibile to pass an array in the nColumns prop", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+});
+
+it("should render one column with a 500px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(500, 1000);
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(1);
+});
+
+it("should render one column with a 639px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(639, 1000);
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(1);
+});
+
+it("should render two columns with a 768px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(768, 1000);
 
   render(
     <Plock nColumns={breakpoints}>
       <div>I am a child on plock!</div>
     </Plock>
   );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(2);
+});
+
+it("should render two columns with a 800px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(800, 1000);
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(2);
+});
+
+it("should render three columns with a 1024px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(1024, 1000);
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(3);
+});
+
+it("should render six columns with a 1280px window", () => {
+  const breakpoints = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
+
+  window.resizeTo(1280, 1000);
+
+  render(
+    <Plock nColumns={breakpoints}>
+      <div>I am a child on plock!</div>
+    </Plock>
+  );
+
+  const columns = screen.getAllByTestId("plock-column");
+  expect(columns).toHaveLength(6);
 });
diff --git a/src/index.js b/src/index.js
@@ -3,12 +3,12 @@ import ReactDOM from "react-dom";
 import { Plock } from "./components";
 
 function App() {
-  const configuration = {
-    sm: { size: 640, columns: 1 },
-    md: { size: 768, columns: 2 },
-    lg: { size: 1024, columns: 3 },
-    xl: { size: 1280, columns: 6 },
-  };
+  const configuration = [
+    { size: 640, columns: 1 },
+    { size: 768, columns: 2 },
+    { size: 1024, columns: 3 },
+    { size: 1280, columns: 6 },
+  ];
 
   return (
     <Plock gap={20} nColumns={configuration}>