responsive grid - clean up

Giphy · Jan 28, 2025 · 2dfc0f2 · 2dfc0f2
1 parent c39237a
commit 2dfc0f2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/.changeset/silver-gorillas-look.md b/.changeset/silver-gorillas-look.md
@@ -1,5 +1,16 @@
 ---
-'@giphy/react-components': patch
+'@giphy/react-components': major
 ---
 
-responsive grid
+Responsive grid:
+
+Rewrite grid logic to support a `percentageWidth`, allowing the grid to be rendereded on the server.
+The `width` property still determines the rendition selection of the grid items, but the grid will scale to the percentage value provided (e.g. `100%`)
+
+Remove `useTransform` property:
+
+This was used to layout grid items and has been replaced by a new strategy
+
+Loader height:
+
+The loader style was using a padding to allow for its height, this was a bad approach as padding is not applied in flex containers.
diff --git a/packages/react-components/src/components/grid.tsx b/packages/react-components/src/components/grid.tsx
@@ -53,8 +53,9 @@ function getColumns(columns: number, columnOffsets: number[] | undefined, gifs:
     gifs.forEach((gif) => {
         // get the shortest column
         const columnTarget = columnHeights.indexOf(Math.min(...columnHeights))
-        const existingGifs = sorter[columnTarget] || []
-        sorter[columnTarget] = [...existingGifs, gif]
+        // add gif to column
+        sorter[columnTarget] = [...sorter[columnTarget], gif]
+        // add gif height to column height total
         columnHeights[columnTarget] += getGifHeight(gif, gifWidth)
     })
     return sorter
@@ -63,7 +64,6 @@ function getColumns(columns: number, columnOffsets: number[] | undefined, gifs:
 const defaultProps = Object.freeze({ gutter: 6, user: {}, initialGifs: [] })
 
 type State = {
-    gifWidth: number
     isFetching: boolean
     isError: boolean
     gifs: IGif[]
@@ -74,7 +74,6 @@ type State = {
 const initialState = Object.freeze({
     isFetching: false,
     isError: false,
-    gifWidth: 0,
     gifs: [] as IGif[],
     isLoaderVisible: false,
     isDoneFetching: false,
@@ -91,14 +90,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 +175,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 determine 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 +204,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 GridResponsiveLowRes: Story = {
+    args: {
+        percentWidth: '100%',
+        width: 100,
+        columns: 4,
+        gutter: 10,
+        containerStyles: { width: 800, backgroundColor: 'aquamarine' },
+    },
+}
+
 export const GridResponsiveContainerWithOffsets: Story = {
     args: {
         width: 1040,