WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

preStepsCount set

Browse Source
This commit is contained in:
lisaavikarii 2022-07-06 08:08:30 +02:00
parent b785b92e30
commit 14fe4977db
7 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
example/package-lock.json generated
View File

@ -24,16 +24,16 @@
"devDependencies": {} "devDependencies": {}
}, },
"..": { "..": {
"version": "0.3.8", "version": "0.3.9",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@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/jest": "^27.5.1",
"@types/node": "^15.0.1", "@types/node": "^15.0.1",
"@types/react": "^18.0.5", "@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1", "@types/react-dom": "^18.0.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"microbundle-crl": "^0.13.11", "microbundle-crl": "^0.13.11",
@ -42,11 +42,11 @@
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-normalize": "^10.0.1", "postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.6.0", "postcss-preset-env": "^7.6.0",
"prettier": "^2.5.1", "prettier": "^2.7.1",
"react": "^18.1.0", "react": "^18.2.0",
"react-dom": "^18.1.0", "react-dom": "^18.2.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"typescript": "^4.6.4" "typescript": "^4.7.4"
}, },
"engines": { "engines": {
"node": ">=10" "node": ">=10"
@ -381,11 +381,11 @@
"requires": { "requires": {
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@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/jest": "^27.5.1",
"@types/node": "^15.0.1", "@types/node": "^15.0.1",
"@types/react": "^18.0.5", "@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1", "@types/react-dom": "^18.0.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"microbundle-crl": "^0.13.11", "microbundle-crl": "^0.13.11",
@ -394,11 +394,11 @@
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-normalize": "^10.0.1", "postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.6.0", "postcss-preset-env": "^7.6.0",
"prettier": "^2.5.1", "prettier": "^2.7.1",
"react": "^18.1.0", "react": "^18.2.0",
"react-dom": "^18.1.0", "react-dom": "^18.2.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"typescript": "^4.6.4" "typescript": "^4.7.4"
}, },
"dependencies": { "dependencies": {
"@testing-library/jest-dom": { "@testing-library/jest-dom": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "gantt-task-react", "name": "gantt-task-react",
"version": "0.3.8", "version": "0.3.9",
"description": "Interactive Gantt Chart for React with TypeScript.", "description": "Interactive Gantt Chart for React with TypeScript.",
"author": "MaTeMaTuK <maksym.vikarii@gmail.com>", "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
"homepage": "https://github.com/MaTeMaTuK/gantt-task-react", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

12
src/components/gantt/gantt.tsx
View File

@ -20,9 +20,9 @@ import { BarTask } from "../../types/bar-task";
import { convertToBarTasks } from "../../helpers/bar-helper"; import { convertToBarTasks } from "../../helpers/bar-helper";
import { GanttEvent } from "../../types/gantt-task-actions"; import { GanttEvent } from "../../types/gantt-task-actions";
import { DateSetup } from "../../types/date-setup"; import { DateSetup } from "../../types/date-setup";
import styles from "./gantt.module.css";
import { HorizontalScroll } from "../other/horizontal-scroll"; import { HorizontalScroll } from "../other/horizontal-scroll";
import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper"; import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
import styles from "./gantt.module.css";
export const Gantt: React.FunctionComponent<GanttProps> = ({ export const Gantt: React.FunctionComponent<GanttProps> = ({
tasks, tasks,
@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
rowHeight = 50, rowHeight = 50,
ganttHeight = 0, ganttHeight = 0,
viewMode = ViewMode.Day, viewMode = ViewMode.Day,
preStepsCount = 1,
locale = "en-GB", locale = "en-GB",
barFill = 60, barFill = 60,
barCornerRadius = 3, barCornerRadius = 3,
@ -68,7 +69,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const taskListRef = useRef<HTMLDivElement>(null); const taskListRef = useRef<HTMLDivElement>(null);
const [dateSetup, setDateSetup] = useState<DateSetup>(() => { const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
const [startDate, endDate] = ganttDateRange(tasks, viewMode); const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount);
return { viewMode, dates: seedDates(startDate, endDate, viewMode) }; return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
}); });
const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>( const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
@ -106,7 +107,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
filteredTasks = tasks; filteredTasks = tasks;
} }
filteredTasks = filteredTasks.sort(sortTasks); filteredTasks = filteredTasks.sort(sortTasks);
const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode); const [startDate, endDate] = ganttDateRange(
filteredTasks,
viewMode,
preStepsCount
);
let newDates = seedDates(startDate, endDate, viewMode); let newDates = seedDates(startDate, endDate, viewMode);
if (rtl) { if (rtl) {
newDates = newDates.reverse(); newDates = newDates.reverse();
@ -140,6 +145,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
}, [ }, [
tasks, tasks,
viewMode, viewMode,
preStepsCount,
rowHeight, rowHeight,
barCornerRadius, barCornerRadius,
columnWidth, columnWidth,

7
src/components/other/horizontal-scroll.module.css
View File

@ -6,7 +6,7 @@
/*iPad*/ /*iPad*/
height: 1.1rem; height: 1.1rem;
} }
.scrollWrapper::-webkit-scrollbar { /*.scrollWrapper::-webkit-scrollbar {
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
} }
@ -27,10 +27,7 @@
background-clip: padding-box; background-clip: padding-box;
} }
@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
.scrollWrapper { }*/
-webkit-overflow-scrolling: touch;
}
}
.scroll { .scroll {
height: 1px; height: 1px;
} }

11
src/helpers/bar-helper.ts
View File

@ -246,16 +246,13 @@ const convertToMilestone = (
}; };
}; };
const taskXCoordinate = ( const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => {
xDate: Date,
dates: Date[],
columnWidth: number
) => {
const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1; const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
const remainderMillis = xDate.getTime() - dates[index].getTime(); const remainderMillis = xDate.getTime() - dates[index].getTime();
const percentOfInterval = remainderMillis / (dates[index + 1 ].getTime() - dates[index].getTime()); const percentOfInterval =
const x = index * columnWidth + (percentOfInterval * columnWidth); remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
const x = index * columnWidth + percentOfInterval * columnWidth;
return x; return x;
}; };
const taskXCoordinateRTL = ( const taskXCoordinateRTL = (

22
src/helpers/date-helper.ts
View File

@ -69,7 +69,11 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => {
return newDate; 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 newStartDate: Date = tasks[0].start;
let newEndDate: Date = tasks[0].start; let newEndDate: Date = tasks[0].start;
for (const task of tasks) { for (const task of tasks) {
@ -82,39 +86,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
} }
switch (viewMode) { switch (viewMode) {
case ViewMode.Month: case ViewMode.Month:
newStartDate = addToDate(newStartDate, -1, "month"); newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
newStartDate = startOfDate(newStartDate, "month"); newStartDate = startOfDate(newStartDate, "month");
newEndDate = addToDate(newEndDate, 1, "year"); newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "year"); newEndDate = startOfDate(newEndDate, "year");
break; break;
case ViewMode.Week: case ViewMode.Week:
newStartDate = startOfDate(newStartDate, "day"); newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(
getMonday(newStartDate),
-7 * preStepsCount,
"day"
);
newEndDate = startOfDate(newEndDate, "day"); newEndDate = startOfDate(newEndDate, "day");
newStartDate = addToDate(getMonday(newStartDate), -7, "day");
newEndDate = addToDate(newEndDate, 1.5, "month"); newEndDate = addToDate(newEndDate, 1.5, "month");
break; break;
case ViewMode.Day: case ViewMode.Day:
newStartDate = startOfDate(newStartDate, "day"); newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day"); newEndDate = startOfDate(newEndDate, "day");
newStartDate = addToDate(newStartDate, -1, "day");
newEndDate = addToDate(newEndDate, 19, "day"); newEndDate = addToDate(newEndDate, 19, "day");
break; break;
case ViewMode.QuarterDay: case ViewMode.QuarterDay:
newStartDate = startOfDate(newStartDate, "day"); newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day"); newEndDate = startOfDate(newEndDate, "day");
newStartDate = addToDate(newStartDate, -1, "day");
newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6 newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
break; break;
case ViewMode.HalfDay: case ViewMode.HalfDay:
newStartDate = startOfDate(newStartDate, "day"); newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day"); newEndDate = startOfDate(newEndDate, "day");
newStartDate = addToDate(newStartDate, -1, "day");
newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12 newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
break; break;
case ViewMode.Hour: case ViewMode.Hour:
newStartDate = startOfDate(newStartDate, "hour"); newStartDate = startOfDate(newStartDate, "hour");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
newEndDate = startOfDate(newEndDate, "day"); newEndDate = startOfDate(newEndDate, "day");
newStartDate = addToDate(newStartDate, -1, "hour");
newEndDate = addToDate(newEndDate, 1, "day"); newEndDate = addToDate(newEndDate, 1, "day");
break; break;
} }

1
src/types/public-types.ts
View File

@ -75,6 +75,7 @@ export interface EventOption {
export interface DisplayOption { export interface DisplayOption {
viewMode?: ViewMode; viewMode?: ViewMode;
viewDate?: Date; viewDate?: Date;
preStepsCount?: number;
/** /**
* Specifies the month name language. Able formats: ISO 639-2, Java Locale * Specifies the month name language. Able formats: ISO 639-2, Java Locale
*/ */