[WINDOW]: update gap property to not apply margins to the edge elements. (#155)

Author: leebeydoun

.changeset/weak-trainers-know.md

@@ -0,0 +1,5 @@
+---
+"@resembli/react-virtualized-window": patch
+---
+
+Change gap margins to no longer be applied to the first and last element.

book/.vitebook/theme/index.ts

@@ -1,3 +1,5 @@
 import Theme from "@vitebook/theme-default"
 
+import "./main.css"
+
 export default Theme

book/.vitebook/theme/main.css

@@ -0,0 +1,16 @@
+.page.__vbk__ {
+  height: 100%;
+}
+
+.page__container.__vbk__ {
+  width: 100%;
+  height: 100%;
+}
+
+.page__container.__vbk__ .__vbk__ {
+  width: 95%;
+  height: 95%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

book/package.json

@@ -10,22 +10,24 @@
     "preview": "vitebook preview"
   },
   "dependencies": {
+    "@resembli/react-virtualized-window": "workspace:^",
+    "@stitches/core": "^1.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "preact": "^10.5.14",
-    "preact-render-to-string": "^5.1.19",
     "@preact/preset-vite": "^2.1.7",
     "@prefresh/vite": "^2.2.6",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.10",
     "@vitebook/client": "^0.22.0",
-    "@vitebook/markdown-preact": "^0.22.0",
     "@vitebook/core": "^0.22.0",
+    "@vitebook/markdown-preact": "^0.22.0",
     "@vitebook/preact": "^0.22.0",
     "@vitebook/theme-default": "^0.22.0",
+    "preact": "^10.5.14",
+    "preact-render-to-string": "^5.1.19",
     "svelte": "^3.43.1",
     "typescript": "^4.4.0",
     "vite": "^2.7.0"

book/src/Button/Button.story.tsx

@@ -0,0 +1,89 @@
+import { css } from "@stitches/core"
+import type { PageMeta } from "@vitebook/client"
+import { Variant } from "@vitebook/preact"
+import { ControlsAddon } from "@vitebook/preact/addons"
+import { useState } from "react"
+
+import { Grid } from "@resembli/react-virtualized-window"
+
+export const __pageMeta: PageMeta = {
+  title: "Grid",
+  description: "Grid Playground",
+}
+
+const data = Array.from({ length: 1000 }, (_, row) => {
+  return Array.from({ length: 100 }, (_, column) => {
+    return [row, column]
+  })
+})
+
+const itemClass = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "black",
+  variants: {
+    odd: {
+      true: {
+        backgroundColor: "darkblue",
+      },
+    },
+  },
+})
+
+function GridPlayground() {
+  const [gap, setGap] = useState(10)
+
+  return (
+    <>
+      <Variant name="Default" description="Default Grid">
+        <Grid
+          rtl
+          data={data}
+          defaultRowHeight={100}
+          defaultColumnWidth={100}
+          gap={gap}
+          style={{ background: "red" }}
+        >
+          {({ data, style }) => (
+            <div style={style} className={itemClass({ odd: (data[0] + data[1]) % 2 === 1 })}>
+              {data[0]},{data[1]}
+            </div>
+          )}
+        </Grid>
+      </Variant>
+      <Variant name="Half W/H" description="Half width and height">
+        <Grid
+          data={data}
+          defaultRowHeight={50}
+          defaultColumnWidth={50}
+          width="50%"
+          height="50%"
+          gap={gap}
+        >
+          {({ data, style }) => (
+            <div style={style} className={itemClass({ odd: (data[0] + data[1]) % 2 === 1 })}>
+              {data[0]},{data[1]}
+            </div>
+          )}
+        </Grid>
+      </Variant>
+
+      <ControlsAddon>
+        <label>
+          Gap
+          <input
+            type="number"
+            title="Gap"
+            onChange={(e) => setGap(Number.parseInt(e.target.value))}
+            value={gap}
+          />
+        </label>
+      </ControlsAddon>
+    </>
+  )
+}
+
+GridPlayground.displayName = "GridPlayground"
+
+export default GridPlayground

book/src/Button/Button.tsx

@@ -2,12 +2,7 @@ import * as React from "react"
 
 import { SizingDiv } from "../SizingDiv"
 import { StickyDiv } from "../StickyDiv"
-import {
-  getHorizontalGap,
-  getHorizontalMarginStyling,
-  getVerticalGap,
-  getVerticalMarginStyling,
-} from "../itemGapUtilities"
+import { getHorizontalGap, getVerticalGap } from "../itemGapUtilities"
 import type { NumberOrPercent, VirtualWindowBaseProps } from "../types"
 import { useDataDimension } from "../useDataDimension"
 import { useIndicesForDimensions } from "../useDimensionIndices"
@@ -127,7 +122,6 @@ export function Grid<T>({
 
   const scrollableItems = React.useMemo(
     function Items() {
-      const verticalMarginStyles = getVerticalMarginStyling(gap)
       return (
         <>
           <div style={{ height: runningHeight }}></div>
@@ -144,8 +138,8 @@ export function Grid<T>({
                   key={cellKey}
                   itemWidth={itemWidth}
                   Component={children}
-                  rtl={rtl}
-                  itemGap={gap}
+                  marginLeft={rtl || j + horiStart === 0 ? 0 : horizontalGap}
+                  marginRight={!rtl || j + horiStart === 0 ? 0 : horizontalGap}
                   itemProps={cell}
                   column={horiStart + j}
                   row={vertStart + i}
@@ -161,7 +155,8 @@ export function Grid<T>({
                   height: itemHeight,
                   minHeight: itemHeight,
                   maxHeight: itemHeight,
-                  ...verticalMarginStyles,
+                  marginTop: i + vertStart === 0 ? 0 : verticalGap,
+                  marginBottom: i + vertStart === data.length - 1 ? 0 : verticalGap,
                 }}
               >
                 <div style={{ width: runningWidth }} />
@@ -177,15 +172,16 @@ export function Grid<T>({
       data,
       dataHeights,
       dataWidths,
-      gap,
       getKey,
       horiEnd,
       horiStart,
+      horizontalGap,
       rtl,
       runningHeight,
       runningWidth,
       vertEnd,
       vertStart,
+      verticalGap,
     ],
   )
 
@@ -241,33 +237,33 @@ export function Grid<T>({
 
 type RenderItemsProps<T> = {
   Component: GridProps<T>["children"]
-  itemGap: GridProps<T>["gap"]
   itemProps: T
   itemWidth: number
   column: number
   row: number
-  rtl?: boolean
+  marginLeft: number
+  marginRight: number
 }
 
 const RenderItem = function <T>({
   Component,
-  itemGap,
-  rtl,
   itemProps,
   itemWidth,
   column,
   row,
+  marginRight,
+  marginLeft,
 }: RenderItemsProps<T>) {
   const itemStyles = React.useMemo(() => {
-    const marginStyling = getHorizontalMarginStyling(itemGap, rtl)
     return {
       width: itemWidth,
       minWidth: itemWidth,
       maxWidth: itemWidth,
       height: "100%",
-      ...marginStyling,
+      marginLeft,
+      marginRight,
     }
-  }, [rtl, itemGap, itemWidth])
+  }, [itemWidth, marginLeft, marginRight])
 
   const cellMeta = React.useMemo<CellMeta>(() => ({ row, column }), [column, row])
 

book/src/Button/docs.md

@@ -1,24 +1,5 @@
 import type { ItemGap } from "./types"
 
-export function getVerticalMarginStyling(itemGap?: ItemGap) {
-  if (!itemGap) return { marginTop: 0, marginBottom: 0 }
-
-  const gap = getVerticalGap(itemGap)
-
-  return { marginTop: gap, marginBottom: gap }
-}
-
-export function getHorizontalMarginStyling(itemGap?: ItemGap, rtl?: boolean) {
-  if (!itemGap) return { marginLeft: 0, marginRight: 0 }
-
-  const gap = getHorizontalGap(itemGap)
-
-  return {
-    marginLeft: rtl ? 0 : gap,
-    marginRight: rtl ? gap : 0,
-  }
-}
-
 export function getVerticalGap(itemGap?: ItemGap) {
   return typeof itemGap === "number" ? itemGap : itemGap?.vertical ?? 0
 }