responsive grid - clean up

Giphy · Jan 27, 2025 · 4a3aca2 · 4a3aca2
1 parent c39237a
commit 4a3aca2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/packages/react-components/src/components/grid.tsx b/packages/react-components/src/components/grid.tsx
@@ -91,14 +91,9 @@ class Grid extends PureComponent<Props, State> {
     unmounted: boolean = false
     paginator = gifPaginator(this.props.fetchGifs, this.state.gifs)
     static getDerivedStateFromProps: GetDerivedStateFromProps<Props, State> = (
-        { columns, gutter, width, externalGifs }: Props,
+        { externalGifs }: Props,
         prevState: State
     ) => {
-        const gutterOffset = gutter * (columns - 1)
-        const gifWidth = Math.floor((width - gutterOffset) / columns)
-        if (prevState.gifWidth !== gifWidth) {
-            return { gifWidth }
-        }
         if (externalGifs && externalGifs !== prevState.gifs) {
             return { gifs: externalGifs }
         }
@@ -181,14 +176,16 @@ class Grid extends PureComponent<Props, State> {
             loader: LoaderVisual = DotsLoader,
             fetchPriority,
         } = this.props
-        const { gifWidth, gifs, isError, isDoneFetching } = this.state
+        const { gifs, isError, isDoneFetching } = this.state
+
         const showLoader = !isDoneFetching
         const isFirstLoad = gifs.length === 0
-        let columnWidth = `${Math.floor((width - gutter * (columns - 1)) / columns)}px`
-        if (percentWidth) {
-            const gutterOffset = (gutter * (columns - 1)) / columns
-            columnWidth = `calc(${(gifWidth / width) * 100}% + ${gutterOffset}px)`
-        }
+
+        const totalGutterPx = gutter * (columns - 1)
+
+        // gif width to determin rendition and display size (when not percentage)
+        const gifWidth = (width - totalGutterPx) / columns
+
         // put gifs into their columns
         const sortedIntoColumns = getColumns(columns, columnOffsets, gifs, gifWidth)
         return (
@@ -208,7 +205,9 @@ class Grid extends PureComponent<Props, State> {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: gutter,
-                                    width: columnWidth,
+                                    width: percentWidth
+                                        ? `calc(${(width / columns) * 100}% + ${totalGutterPx / columns}px)`
+                                        : gifWidth,
                                     marginTop: columnOffsets?.[columnIndex],
                                 }}
                             >

diff --git a/packages/react-components/src/components/loader.tsx b/packages/react-components/src/components/loader.tsx
@@ -8,12 +8,11 @@ const bouncer = keyframes`
     transform: scale(1.75) translateY(-20px);
   }
 `
-const loaderHeight = 37
+const loaderHeight = 52
 const Container = styled.div`
     display: flex;
     align-items: center;
     height: ${loaderHeight}px;
-    padding-top: 15px;
     margin: 0 auto;
     text-align: center;
     justify-content: center;

diff --git a/packages/react-components/stories/grid.stories.tsx b/packages/react-components/stories/grid.stories.tsx
@@ -126,6 +126,16 @@ export const GridResponsiveContainer: Story = {
     },
 }
 
+export const GridResponsiveSmall: Story = {
+    args: {
+        percentWidth: '100%',
+        width: 100,
+        columns: 4,
+        gutter: 10,
+        containerStyles: { width: 800, backgroundColor: 'aquamarine' },
+    },
+}
+
 export const GridResponsiveContainerWithOffsets: Story = {
     args: {
         width: 1040,