From 14fe4977db8ce804cb8223118992611586e39e1a Mon Sep 17 00:00:00 2001 From: lisaavikarii Date: Wed, 6 Jul 2022 08:08:30 +0200 Subject: [PATCH 1/2] 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 2e108ff1..d5c5e547 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 4de25b48..a0097baa 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 ffcdcff2..b90483f3 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 84edeaee..fd848a7f 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 79143e9f..ba5f987c 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 c1414593..58e7647c 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 9b52a916..edd2fd13 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 */ From 3d49d4d56469f58ae07f13e7600e295f6e759303 Mon Sep 17 00:00:00 2001 From: lisaavikarii Date: Sun, 10 Jul 2022 14:14:27 +0200 Subject: [PATCH 2/2] scroll fix --- README.md | 1 + example/src/App.tsx | 2 +- example/src/index.css | 3 +++ src/components/other/horizontal-scroll.module.css | 6 +++--- src/components/other/vertical-scroll.module.css | 2 +- src/components/other/vertical-scroll.tsx | 2 +- 6 files changed, 10 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8732a55f..82cea665 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ npm start | :------------- | :------ | :---------------------------------------------------------------------------------------------------- | | viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. | | viewDate | date | Specifies display date and time for display. | +| preStepsCount | number | Specifies empty space before the fist task | | locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | | rtl | boolean | Sets rtl mode. | diff --git a/example/src/App.tsx b/example/src/App.tsx index 4faa22c8..f9360ef2 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -66,7 +66,7 @@ const App = () => { }; return ( -
+
setView(viewMode)} onViewListChange={setIsChecked} diff --git a/example/src/index.css b/example/src/index.css index 1e7e9de2..9fd1ea03 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -1,3 +1,6 @@ +.Wrapper { + margin-bottom: 2rem; +} .ViewContainer { list-style: none; -ms-box-orient: horizontal; diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css index fd848a7f..dcf787e5 100644 --- a/src/components/other/horizontal-scroll.module.css +++ b/src/components/other/horizontal-scroll.module.css @@ -4,9 +4,9 @@ /*firefox*/ scrollbar-width: thin; /*iPad*/ - height: 1.1rem; + height: 1.2rem; } -/*.scrollWrapper::-webkit-scrollbar { +.scrollWrapper::-webkit-scrollbar { width: 1.1rem; height: 1.1rem; } @@ -27,7 +27,7 @@ background-clip: padding-box; } @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { -}*/ +} .scroll { height: 1px; } diff --git a/src/components/other/vertical-scroll.module.css b/src/components/other/vertical-scroll.module.css index 7e9c654d..da55a2e2 100644 --- a/src/components/other/vertical-scroll.module.css +++ b/src/components/other/vertical-scroll.module.css @@ -1,6 +1,6 @@ .scroll { overflow: hidden auto; - width: 17px; + width: 1rem; flex-shrink: 0; /*firefox*/ scrollbar-width: thin; diff --git a/src/components/other/vertical-scroll.tsx b/src/components/other/vertical-scroll.tsx index 87b3f21e..d01d46ec 100644 --- a/src/components/other/vertical-scroll.tsx +++ b/src/components/other/vertical-scroll.tsx @@ -29,7 +29,7 @@ export const VerticalScroll: React.FC<{ style={{ height: ganttHeight, marginTop: headerHeight, - marginLeft: rtl ? "" : "-17px", + marginLeft: rtl ? "" : "-1rem", }} className={styles.scroll} onScroll={onScroll}