Refactor grid

src/components/grid/index.js

@@ -0,0 +1,41 @@
+import React, { useRef, useState, useEffect } from 'react'
+
+import * as S from './styles'
+
+const Grid = ({ children, gap, minWidth = 400 }) => {
+  const wrapper = useRef()
+  const [columnsNumber, setColumnsNumber] = useState(3)
+
+  const calculateColumnsNumber = () => {
+    setColumnsNumber(Math.floor(wrapper.current.offsetWidth / minWidth) || 1)
+  }
+
+  useEffect(() => {
+    calculateColumnsNumber()
+
+    window.addEventListener(`resize`, calculateColumnsNumber)
+    return () => window.removeEventListener(`resize`, calculateColumnsNumber)
+  }, [])
+
+  return (
+    <S.Wrapper ref={wrapper} gap={gap}>
+      {children
+        .reduce((columns, child, i) => {
+          columns[i % columnsNumber] = (
+            columns[i % columnsNumber] || []
+          ).concat(child)
+
+          return columns
+        }, [])
+        .map((column, i) => {
+          return (
+            <S.Column key={i} gap={gap}>
+              {column}
+            </S.Column>
+          )
+        })}
+    </S.Wrapper>
+  )
+}
+
+export default Grid

src/components/masonry/styles.js → src/components/grid/styles.js

@@ -3,11 +3,11 @@ import styled from 'styled-components'
 export const Wrapper = styled.div`
   display: grid;
   grid-auto-flow: column;
-  grid-gap: ${props => props.gap || `1em`};
+  grid-gap: ${({ gap }) => gap || `1em`};
 `
 
-export const Col = styled.div`
+export const Column = styled.div`
   display: grid;
-  grid-gap: ${props => props.gap || `1em`};
+  grid-gap: ${({ gap }) => gap || `1em`};
   grid-auto-rows: max-content;
 `

src/components/widgets/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Masonry from 'components/masonry'
+import Grid from 'components/grid'
 import Overview from 'docs/overview.mdx'
 import Other from 'docs/other.mdx'
 
@@ -8,7 +8,7 @@ import * as S from './styles'
 const Widgets = () => {
   return (
     <S.Wrapper>
-      <Masonry gap={'20px'}>
+      <Grid gap="20px">
         <S.Widget>
           <Overview />
         </S.Widget>
@@ -39,7 +39,7 @@ const Widgets = () => {
         <S.Widget>
           <Overview />
         </S.Widget>
-      </Masonry>
+      </Grid>
     </S.Wrapper>
   )
 }