From 14fe4977db8ce804cb8223118992611586e39e1a Mon Sep 17 00:00:00 2001 From: lisaavikarii Date: Wed, 6 Jul 2022 08:08:30 +0200 Subject: [PATCH] preStepsCount set --- example/package-lock.json | 26 +++++++++---------- package.json | 2 +- src/components/gantt/gantt.tsx | 12 ++++++--- .../other/horizontal-scroll.module.css | 7 ++--- src/helpers/bar-helper.ts | 11 +++----- src/helpers/date-helper.ts | 22 +++++++++++----- src/types/public-types.ts | 1 + 7 files changed, 45 insertions(+), 36 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 2e108ff..d5c5e54 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -24,16 +24,16 @@ "devDependencies": {} }, "..": { - "version": "0.3.8", + "version": "0.3.9", "license": "MIT", "devDependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", - "@testing-library/user-event": "^13.1.8", + "@testing-library/user-event": "^14.2.1", "@types/jest": "^27.5.1", "@types/node": "^15.0.1", "@types/react": "^18.0.5", - "@types/react-dom": "^18.0.1", + "@types/react-dom": "^18.0.5", "cross-env": "^7.0.3", "gh-pages": "^3.1.0", "microbundle-crl": "^0.13.11", @@ -42,11 +42,11 @@ "postcss-flexbugs-fixes": "^5.0.2", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.6.0", - "prettier": "^2.5.1", - "react": "^18.1.0", - "react-dom": "^18.1.0", + "prettier": "^2.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-scripts": "^5.0.1", - "typescript": "^4.6.4" + "typescript": "^4.7.4" }, "engines": { "node": ">=10" @@ -381,11 +381,11 @@ "requires": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", - "@testing-library/user-event": "^13.1.8", + "@testing-library/user-event": "^14.2.1", "@types/jest": "^27.5.1", "@types/node": "^15.0.1", "@types/react": "^18.0.5", - "@types/react-dom": "^18.0.1", + "@types/react-dom": "^18.0.5", "cross-env": "^7.0.3", "gh-pages": "^3.1.0", "microbundle-crl": "^0.13.11", @@ -394,11 +394,11 @@ "postcss-flexbugs-fixes": "^5.0.2", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.6.0", - "prettier": "^2.5.1", - "react": "^18.1.0", - "react-dom": "^18.1.0", + "prettier": "^2.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-scripts": "^5.0.1", - "typescript": "^4.6.4" + "typescript": "^4.7.4" }, "dependencies": { "@testing-library/jest-dom": { diff --git a/package.json b/package.json index 4de25b4..a0097ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gantt-task-react", - "version": "0.3.8", + "version": "0.3.9", "description": "Interactive Gantt Chart for React with TypeScript.", "author": "MaTeMaTuK ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index ffcdcff..b90483f 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -20,9 +20,9 @@ import { BarTask } from "../../types/bar-task"; import { convertToBarTasks } from "../../helpers/bar-helper"; import { GanttEvent } from "../../types/gantt-task-actions"; import { DateSetup } from "../../types/date-setup"; -import styles from "./gantt.module.css"; import { HorizontalScroll } from "../other/horizontal-scroll"; import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper"; +import styles from "./gantt.module.css"; export const Gantt: React.FunctionComponent = ({ tasks, @@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent = ({ rowHeight = 50, ganttHeight = 0, viewMode = ViewMode.Day, + preStepsCount = 1, locale = "en-GB", barFill = 60, barCornerRadius = 3, @@ -68,7 +69,7 @@ export const Gantt: React.FunctionComponent = ({ const wrapperRef = useRef(null); const taskListRef = useRef(null); const [dateSetup, setDateSetup] = useState(() => { - const [startDate, endDate] = ganttDateRange(tasks, viewMode); + const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount); return { viewMode, dates: seedDates(startDate, endDate, viewMode) }; }); const [currentViewDate, setCurrentViewDate] = useState( @@ -106,7 +107,11 @@ export const Gantt: React.FunctionComponent = ({ filteredTasks = tasks; } filteredTasks = filteredTasks.sort(sortTasks); - const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode); + const [startDate, endDate] = ganttDateRange( + filteredTasks, + viewMode, + preStepsCount + ); let newDates = seedDates(startDate, endDate, viewMode); if (rtl) { newDates = newDates.reverse(); @@ -140,6 +145,7 @@ export const Gantt: React.FunctionComponent = ({ }, [ tasks, viewMode, + preStepsCount, rowHeight, barCornerRadius, columnWidth, diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css index 84edeae..fd848a7 100644 --- a/src/components/other/horizontal-scroll.module.css +++ b/src/components/other/horizontal-scroll.module.css @@ -6,7 +6,7 @@ /*iPad*/ height: 1.1rem; } -.scrollWrapper::-webkit-scrollbar { +/*.scrollWrapper::-webkit-scrollbar { width: 1.1rem; height: 1.1rem; } @@ -27,10 +27,7 @@ background-clip: padding-box; } @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { - .scrollWrapper { - -webkit-overflow-scrolling: touch; - } -} +}*/ .scroll { height: 1px; } diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts index 79143e9..ba5f987 100644 --- a/src/helpers/bar-helper.ts +++ b/src/helpers/bar-helper.ts @@ -246,16 +246,13 @@ const convertToMilestone = ( }; }; -const taskXCoordinate = ( - xDate: Date, - dates: Date[], - columnWidth: number -) => { +const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => { const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1; const remainderMillis = xDate.getTime() - dates[index].getTime(); - const percentOfInterval = remainderMillis / (dates[index + 1 ].getTime() - dates[index].getTime()); - const x = index * columnWidth + (percentOfInterval * columnWidth); + const percentOfInterval = + remainderMillis / (dates[index + 1].getTime() - dates[index].getTime()); + const x = index * columnWidth + percentOfInterval * columnWidth; return x; }; const taskXCoordinateRTL = ( diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index c141459..58e7647 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -69,7 +69,11 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => { return newDate; }; -export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => { +export const ganttDateRange = ( + tasks: Task[], + viewMode: ViewMode, + preStepsCount: number +) => { let newStartDate: Date = tasks[0].start; let newEndDate: Date = tasks[0].start; for (const task of tasks) { @@ -82,39 +86,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => { } switch (viewMode) { case ViewMode.Month: - newStartDate = addToDate(newStartDate, -1, "month"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month"); newStartDate = startOfDate(newStartDate, "month"); newEndDate = addToDate(newEndDate, 1, "year"); newEndDate = startOfDate(newEndDate, "year"); break; case ViewMode.Week: newStartDate = startOfDate(newStartDate, "day"); + newStartDate = addToDate( + getMonday(newStartDate), + -7 * preStepsCount, + "day" + ); newEndDate = startOfDate(newEndDate, "day"); - newStartDate = addToDate(getMonday(newStartDate), -7, "day"); newEndDate = addToDate(newEndDate, 1.5, "month"); break; case ViewMode.Day: newStartDate = startOfDate(newStartDate, "day"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day"); newEndDate = startOfDate(newEndDate, "day"); - newStartDate = addToDate(newStartDate, -1, "day"); newEndDate = addToDate(newEndDate, 19, "day"); break; case ViewMode.QuarterDay: newStartDate = startOfDate(newStartDate, "day"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day"); newEndDate = startOfDate(newEndDate, "day"); - newStartDate = addToDate(newStartDate, -1, "day"); newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6 break; case ViewMode.HalfDay: newStartDate = startOfDate(newStartDate, "day"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day"); newEndDate = startOfDate(newEndDate, "day"); - newStartDate = addToDate(newStartDate, -1, "day"); newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12 break; case ViewMode.Hour: newStartDate = startOfDate(newStartDate, "hour"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); newEndDate = startOfDate(newEndDate, "day"); - newStartDate = addToDate(newStartDate, -1, "hour"); newEndDate = addToDate(newEndDate, 1, "day"); break; } diff --git a/src/types/public-types.ts b/src/types/public-types.ts index 9b52a91..edd2fd1 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -75,6 +75,7 @@ export interface EventOption { export interface DisplayOption { viewMode?: ViewMode; viewDate?: Date; + preStepsCount?: number; /** * Specifies the month name language. Able formats: ISO 639-2, Java Locale */