From a8627f43bce38dbc6fdbe602f68dbfd95b0bee21 Mon Sep 17 00:00:00 2001 From: luciob Date: Wed, 20 Sep 2023 14:17:59 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20[Grid]=20Added=20min=20sa?= =?UTF-8?q?fe=20dimensions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #85 --- src/@contexts/Timeline.tsx | 14 ++++++++------ src/@utils/dimensions.ts | 4 ++++ src/@utils/resources.ts | 2 -- src/@utils/time-resolution.ts | 28 ++++++++++++++-------------- 4 files changed, 26 insertions(+), 22 deletions(-) create mode 100644 src/@utils/dimensions.ts diff --git a/src/@contexts/Timeline.tsx b/src/@contexts/Timeline.tsx index b64ef4d..0da082f 100644 --- 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 new file mode 100644 index 0000000..1a48deb --- /dev/null +++ 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 index eb75f11..f32c549 100644 --- 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 index ce7bd85..218363a 100644 --- 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",