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": {}
},
"..": {
"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": {

2
package.json
View File

@ -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 <maksym.vikarii@gmail.com>",
"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 { 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<GanttProps> = ({
tasks,
@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
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<GanttProps> = ({
const wrapperRef = useRef<HTMLDivElement>(null);
const taskListRef = useRef<HTMLDivElement>(null);
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) };
});
const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
@ -106,7 +107,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
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<GanttProps> = ({
}, [
tasks,
viewMode,
preStepsCount,
rowHeight,
barCornerRadius,
columnWidth,

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

@ -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;
}

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

@ -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 = (

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

@ -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;
}

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

@ -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
*/