fix: 🐛 [Grid] Added min safe dimensions

✅ Closes: #85
melfore · Sep 20, 2023 · a8627f4 · a8627f4
1 parent b394824
commit a8627f4
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 22 deletions.
diff --git a/src/@contexts/Timeline.tsx b/src/@contexts/Timeline.tsx
@@ -1,11 +1,12 @@
 import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from "react";
 import { DateTime, Interval } from "luxon";
 
+import { DEFAULT_GRID_COLUMN_WIDTH, DEFAULT_GRID_ROW_HEIGHT, MINIMUM_GRID_ROW_HEIGHT } from "../@utils/dimensions";
 import { logDebug, logWarn } from "../@utils/logger";
-import { RESOURCE_HEADER, RESOURCE_HEADER_HEIGHT } from "../@utils/resources";
+import { RESOURCE_HEADER } from "../@utils/resources";
 import { filterOutOfInterval, TaskData } from "../@utils/tasks";
 import { TimeRange, toInterval } from "../@utils/time-range";
-import { DEFAULT_COLUMN_WIDTH, getResolutionData, Resolution, ResolutionData } from "../@utils/time-resolution";
+import { getResolutionData, Resolution, ResolutionData } from "../@utils/time-resolution";
 import { TimelineInput } from "../@utils/timeline";
 
 declare global {
@@ -65,7 +66,7 @@ const TIME_BLOCKS_PRELOAD = 5;
 
 export const TimelineProvider = ({
   children,
-  columnWidth: externalColumnWidth = DEFAULT_COLUMN_WIDTH,
+  columnWidth: externalColumnWidth,
   debug = false,
   displayTasksLabel = false,
   dragResolution: externalDragResolution,
@@ -76,7 +77,7 @@ export const TimelineProvider = ({
   range,
   resolution: externalResolution,
   resources: externalResources,
-  rowHeight: externalRowHeight = RESOURCE_HEADER_HEIGHT,
+  rowHeight: externalRowHeight,
   theme: externalTheme = "light",
 }: TimelineProviderProps) => {
   logWarn("TimelineProvider", `Debug ${debug ? "ON" : "OFF"}`);
@@ -118,7 +119,7 @@ export const TimelineProvider = ({
 
   const columnWidth = useMemo(() => {
     logDebug("TimelineProvider", "Calculating columnWidth...");
-    return !externalColumnWidth || externalColumnWidth < DEFAULT_COLUMN_WIDTH
+    return !externalColumnWidth || externalColumnWidth < DEFAULT_GRID_COLUMN_WIDTH
       ? resolution.columnSize
       : externalColumnWidth;
   }, [externalColumnWidth, resolution]);
@@ -130,7 +131,8 @@ export const TimelineProvider = ({
 
   const rowHeight = useMemo(() => {
     logDebug("TimelineProvider", "Calculating rowHeight...");
-    return externalRowHeight || RESOURCE_HEADER_HEIGHT;
+    const rowHeight = externalRowHeight || DEFAULT_GRID_ROW_HEIGHT;
+    return rowHeight < MINIMUM_GRID_ROW_HEIGHT ? MINIMUM_GRID_ROW_HEIGHT : rowHeight;
   }, [externalRowHeight]);
 
   const resourcesContentHeight = useMemo(() => {

diff --git a/src/@utils/dimensions.ts b/src/@utils/dimensions.ts
@@ -0,0 +1,4 @@
+export const DEFAULT_GRID_ROW_HEIGHT = 50;
+export const MINIMUM_GRID_ROW_HEIGHT = DEFAULT_GRID_ROW_HEIGHT / 2;
+
+export const DEFAULT_GRID_COLUMN_WIDTH = 60;
diff --git a/src/@utils/resources.ts b/src/@utils/resources.ts
@@ -13,8 +13,6 @@ export interface Resource {
   color: string;
 }
 
-export const RESOURCE_HEADER_HEIGHT = 50;
-
 export const RESOURCE_HEADER_WIDTH = 200;
 
 export const RESOURCE_HEADER: Resource = {

diff --git a/src/@utils/time-resolution.ts b/src/@utils/time-resolution.ts
@@ -1,5 +1,7 @@
 import { Interval } from "luxon";
 
+import { DEFAULT_GRID_COLUMN_WIDTH } from "./dimensions";
+
 type Scale = "minute" | "hour" | "day" | "week" | "month" | "year";
 
 export type Resolution =
@@ -28,88 +30,86 @@ type ResolutionsData = {
   [key in Resolution]: ResolutionData;
 };
 
-export const DEFAULT_COLUMN_WIDTH = 60;
-
 const RESOLUTIONS_DATA: ResolutionsData = {
   "1min": {
-    columnSize: DEFAULT_COLUMN_WIDTH / 2,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH / 2,
     label: "1 Minute",
     sizeInUnits: 1,
     unit: "minute",
     unitAbove: "hour",
   },
   "5min": {
-    columnSize: DEFAULT_COLUMN_WIDTH / 2,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH / 2,
     label: "5 Minutes",
     sizeInUnits: 5,
     unit: "minute",
     unitAbove: "hour",
   },
   "10min": {
-    columnSize: DEFAULT_COLUMN_WIDTH / 2,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH / 2,
     label: "10 Minutes",
     sizeInUnits: 10,
     unit: "minute",
     unitAbove: "hour",
   },
   "15min": {
-    columnSize: DEFAULT_COLUMN_WIDTH,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH,
     label: "15 Minutes",
     sizeInUnits: 15,
     unit: "minute",
     unitAbove: "hour",
   },
   "30min": {
-    columnSize: DEFAULT_COLUMN_WIDTH,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH,
     label: "30 Minutes",
     sizeInUnits: 30,
     unit: "minute",
     unitAbove: "hour",
   },
   "1hrs": {
-    columnSize: DEFAULT_COLUMN_WIDTH,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH,
     label: "1 Hour",
     sizeInUnits: 1,
     unit: "hour",
     unitAbove: "day",
   },
   "2hrs": {
-    columnSize: DEFAULT_COLUMN_WIDTH,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH,
     label: "2 Hours",
     sizeInUnits: 2,
     unit: "hour",
     unitAbove: "day",
   },
   "6hrs": {
-    columnSize: DEFAULT_COLUMN_WIDTH * 2,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH * 2,
     label: "1/4 of Day",
     sizeInUnits: 6,
     unit: "hour",
     unitAbove: "day",
   },
   "12hrs": {
-    columnSize: DEFAULT_COLUMN_WIDTH * 3,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH * 3,
     label: "1/2 of Day",
     sizeInUnits: 12,
     unit: "hour",
     unitAbove: "day",
   },
   "1day": {
-    columnSize: DEFAULT_COLUMN_WIDTH * 3,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH * 3,
     label: "1 Day",
     sizeInUnits: 1,
     unit: "day",
     unitAbove: "week",
   },
   "1week": {
-    columnSize: DEFAULT_COLUMN_WIDTH * 10,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH * 10,
     label: "1 Week",
     sizeInUnits: 1,
     unit: "week",
     unitAbove: "month",
   },
   "2weeks": {
-    columnSize: DEFAULT_COLUMN_WIDTH * 10,
+    columnSize: DEFAULT_GRID_COLUMN_WIDTH * 10,
     label: "2 Weeks",
     sizeInUnits: 2,
     unit: "week",