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

Merge branch 'main' into add-viewmode-year

Browse Source
This commit is contained in:
MaTeMaTuK 2022-07-10 14:24:09 +02:00 committed by GitHub
commit 66edcfc7c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 13754 additions and 36099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc
View File

@ -1,13 +1,6 @@
{
"parser": "@typescript-eslint/parser",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react",
"plugin:@typescript-eslint/eslint-recommended"
],
"extends": ["react-app", "react-app/jest"],
"plugins": ["@typescript-eslint"],
"env": {
"node": true

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}

3
README.md
View File

@ -44,6 +44,7 @@ You may handle actions
onTaskDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
onClick={onClick}
/>
```
@ -72,6 +73,7 @@ npm start
| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
| onSelect | (task: Task, isSelected: boolean) => void | Specifies the function to be executed on the taskbar select or unselect event. |
| onDoubleClick | (task: Task) => void | Specifies the function to be executed on the taskbar onDoubleClick event. |
| onClick | (task: Task) => void | Specifies the function to be executed on the taskbar onClick event. |
| onDelete\* | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed on the taskbar on Delete button press event. |
| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished. |
@ -86,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, Year. |
| 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. |

28733
example/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
example/package.json
View File

@ -24,7 +24,6 @@
"react-scripts": "file:../node_modules/react-scripts"
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
},
"browserslist": {
"production": [

16
example/src/App.test.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})
it("renders without crashing", () => {
const div = document.createElement("div");
const root = createRoot(div);
root.render(<App />);
});

8
example/src/App.tsx
View File

@ -54,6 +54,10 @@ const App = () => {
alert("On Double Click event Id:" + task.id);
};
const handleClick = (task: Task) => {
console.log("On Click event Id:" + task.id);
};
const handleSelect = (task: Task, isSelected: boolean) => {
console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
};
@ -64,7 +68,7 @@ const App = () => {
};
return (
<div>
<div className="Wrapper">
<ViewSwitcher
onViewModeChange={viewMode => setView(viewMode)}
onViewListChange={setIsChecked}
@ -78,6 +82,7 @@ const App = () => {
onDelete={handleTaskDelete}
onProgressChange={handleProgressChange}
onDoubleClick={handleDblClick}
onClick={handleClick}
onSelect={handleSelect}
onExpanderClick={handleExpanderClick}
listCellWidth={isChecked ? "155px" : ""}
@ -91,6 +96,7 @@ const App = () => {
onDelete={handleTaskDelete}
onProgressChange={handleProgressChange}
onDoubleClick={handleDblClick}
onClick={handleClick}
onSelect={handleSelect}
onExpanderClick={handleExpanderClick}
listCellWidth={isChecked ? "155px" : ""}

2
example/src/components/view-switcher.tsx
View File

@ -6,7 +6,7 @@ type ViewSwitcherProps = {
onViewListChange: (isChecked: boolean) => void;
onViewModeChange: (viewMode: ViewMode) => void;
};
export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
onViewModeChange,
onViewListChange,
isChecked,

3
example/src/index.css
View File

@ -1,3 +1,6 @@
.Wrapper {
margin-bottom: 2rem;
}
.ViewContainer {
list-style: none;
-ms-box-orient: horizontal;

6
example/src/index.tsx
View File

@ -1,7 +1,9 @@
import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);

20787
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
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",
@ -36,41 +36,29 @@
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^17.0.2"
"react": "^18.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.8",
"@types/jest": "^26.0.23",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.2.1",
"@types/jest": "^27.5.1",
"@types/node": "^15.0.1",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.9.1",
"babel-eslint": "^10.0.3",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.5",
"cross-env": "^7.0.3",
"eslint-config-prettier": "^6.15.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-standard": "^4.1.0",
"gh-pages": "^3.1.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^2.5.1",
"npm-run-all": "^4.1.5",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.2.3",
"prettier": "^2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"typescript": "^4.5.4"
"postcss-preset-env": "^7.6.0",
"prettier": "^2.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.4"
},
"files": [
"dist"

9
src/components/calendar/calendar.tsx
View File

@ -285,16 +285,17 @@ export const Calendar: React.FC<CalendarProps> = ({
{bottomValue}
</text>
);
if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
const displayDate = dates[i - 1];
const topValue = `${getLocalDayOfWeek(
date,
displayDate,
locale,
"long"
)}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
)}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
const topPosition = (date.getHours() - 24) / 2;
topValues.push(
<TopPartOfCalendar
key={topValue + date.getFullYear()}
key={topValue + displayDate.getFullYear()}
value={topValue}
x1Line={columnWidth * i}
y1Line={0}

47
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,
@ -60,6 +61,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
onDateChange,
onProgressChange,
onDoubleClick,
onClick,
onDelete,
onSelect,
onExpanderClick,
@ -67,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>(
@ -105,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();
@ -139,6 +145,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
}, [
tasks,
viewMode,
preStepsCount,
rowHeight,
barCornerRadius,
columnWidth,
@ -182,6 +189,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
viewDate,
columnWidth,
dateSetup.dates,
dateSetup.viewMode,
viewMode,
currentViewDate,
setCurrentViewDate,
@ -244,7 +252,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
} else {
setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
}
}, [ganttHeight, tasks]);
}, [ganttHeight, tasks, headerHeight, rowHeight]);
// scroll events
useEffect(() => {
@ -276,30 +284,38 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
};
// subscribe if scroll is necessary
if (wrapperRef.current) {
wrapperRef.current.addEventListener("wheel", handleWheel, {
passive: false,
});
}
wrapperRef.current?.addEventListener("wheel", handleWheel, {
passive: false,
});
return () => {
if (wrapperRef.current) {
wrapperRef.current.removeEventListener("wheel", handleWheel);
}
wrapperRef.current?.removeEventListener("wheel", handleWheel);
};
}, [wrapperRef.current, scrollY, scrollX, ganttHeight, svgWidth, rtl]);
}, [
wrapperRef,
scrollY,
scrollX,
ganttHeight,
svgWidth,
rtl,
ganttFullHeight,
]);
const handleScrollY = (event: SyntheticEvent<HTMLDivElement>) => {
if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
setScrollY(event.currentTarget.scrollTop);
setIgnoreScrollEvent(true);
} else {
setIgnoreScrollEvent(false);
}
setIgnoreScrollEvent(false);
};
const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
setScrollX(event.currentTarget.scrollLeft);
setIgnoreScrollEvent(true);
} else {
setIgnoreScrollEvent(false);
}
setIgnoreScrollEvent(false);
};
/**
@ -411,6 +427,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
onDateChange,
onProgressChange,
onDoubleClick,
onClick,
onDelete,
};

7
src/components/gantt/task-gantt-content.tsx
View File

@ -53,6 +53,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
onDateChange,
onProgressChange,
onDoubleClick,
onClick,
onDelete,
}) => {
const point = svg?.current?.createSVGPoint();
@ -185,6 +186,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
onDateChange,
svg,
isMoving,
point,
rtl,
setFailedTask,
setGanttEvent,
]);
/**
@ -230,6 +235,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
}
} else if (action === "dblclick") {
!!onDoubleClick && onDoubleClick(task);
} else if (action === "click") {
!!onClick && onClick(task);
}
// Change task event start
else if (action === "move") {

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

@ -1,4 +1,33 @@
.scroll {
.scrollWrapper {
overflow: auto;
max-width: 100%;
/*firefox*/
scrollbar-width: thin;
/*iPad*/
height: 1.2rem;
}
.scrollWrapper::-webkit-scrollbar {
width: 1.1rem;
height: 1.1rem;
}
.scrollWrapper::-webkit-scrollbar-corner {
background: transparent;
}
.scrollWrapper::-webkit-scrollbar-thumb {
border: 6px solid transparent;
background: rgba(0, 0, 0, 0.2);
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
border-radius: 10px;
background-clip: padding-box;
}
.scrollWrapper::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
background: rgba(0, 0, 0, 0.3);
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
background-clip: padding-box;
}
@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}
.scroll {
height: 1px;
}

4
src/components/other/horizontal-scroll.tsx
View File

@ -24,11 +24,11 @@ export const HorizontalScroll: React.FC<{
? `0px ${taskListWidth}px 0px 0px`
: `0px 0px 0px ${taskListWidth}px`,
}}
className={styles.scroll}
className={styles.scrollWrapper}
onScroll={onScroll}
ref={scrollRef}
>
<div style={{ width: svgWidth, height: 1 }} />
<div style={{ width: svgWidth }} className={styles.scroll} />
</div>
);
};

3
src/components/other/tooltip.tsx
View File

@ -84,7 +84,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
setRelatedX(newRelatedX);
}
}, [
tooltipRef.current,
tooltipRef,
task,
arrowIndent,
scrollX,
@ -94,6 +94,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
rowHeight,
svgContainerHeight,
svgContainerWidth,
rtl,
]);
return (

24
src/components/other/vertical-scroll.module.css
View File

@ -1,5 +1,27 @@
.scroll {
overflow: hidden auto;
width: 17px;
width: 1rem;
flex-shrink: 0;
/*firefox*/
scrollbar-width: thin;
}
.scroll::-webkit-scrollbar {
width: 1.1rem;
height: 1.1rem;
}
.scroll::-webkit-scrollbar-corner {
background: transparent;
}
.scroll::-webkit-scrollbar-thumb {
border: 6px solid transparent;
background: rgba(0, 0, 0, 0.2);
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
border-radius: 10px;
background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
background: rgba(0, 0, 0, 0.3);
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
background-clip: padding-box;
}

2
src/components/other/vertical-scroll.tsx
View File

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

3
src/components/task-item/task-item.tsx
View File

@ -100,6 +100,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
onDoubleClick={e => {
onEventStart("dblclick", task, e);
}}
onClick={e => {
onEventStart("click", task, e);
}}
onFocus={() => {
onEventStart("select", task);
}}

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

@ -22,17 +22,11 @@ export const convertToBarTasks = (
milestoneBackgroundColor: string,
milestoneBackgroundSelectedColor: string
) => {
const dateDelta =
dates[1].getTime() -
dates[0].getTime() -
dates[1].getTimezoneOffset() * 60 * 1000 +
dates[0].getTimezoneOffset() * 60 * 1000;
let barTasks = tasks.map((t, i) => {
return convertToBarTask(
t,
i,
dates,
dateDelta,
columnWidth,
rowHeight,
taskHeight,
@ -71,7 +65,6 @@ const convertToBarTask = (
task: Task,
index: number,
dates: Date[],
dateDelta: number,
columnWidth: number,
rowHeight: number,
taskHeight: number,
@ -96,7 +89,6 @@ const convertToBarTask = (
task,
index,
dates,
dateDelta,
columnWidth,
rowHeight,
taskHeight,
@ -111,7 +103,6 @@ const convertToBarTask = (
task,
index,
dates,
dateDelta,
columnWidth,
rowHeight,
taskHeight,
@ -129,7 +120,6 @@ const convertToBarTask = (
task,
index,
dates,
dateDelta,
columnWidth,
rowHeight,
taskHeight,
@ -150,7 +140,6 @@ const convertToBar = (
task: Task,
index: number,
dates: Date[],
dateDelta: number,
columnWidth: number,
rowHeight: number,
taskHeight: number,
@ -165,11 +154,11 @@ const convertToBar = (
let x1: number;
let x2: number;
if (rtl) {
x2 = taskXCoordinateRTL(task.start, dates, dateDelta, columnWidth);
x1 = taskXCoordinateRTL(task.end, dates, dateDelta, columnWidth);
x2 = taskXCoordinateRTL(task.start, dates, columnWidth);
x1 = taskXCoordinateRTL(task.end, dates, columnWidth);
} else {
x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
x1 = taskXCoordinate(task.start, dates, columnWidth);
x2 = taskXCoordinate(task.end, dates, columnWidth);
}
let typeInternal: TaskTypeInternal = task.type;
if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
@ -215,7 +204,6 @@ const convertToMilestone = (
task: Task,
index: number,
dates: Date[],
dateDelta: number,
columnWidth: number,
rowHeight: number,
taskHeight: number,
@ -224,7 +212,7 @@ const convertToMilestone = (
milestoneBackgroundColor: string,
milestoneBackgroundSelectedColor: string
): BarTask => {
const x = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
const x = taskXCoordinate(task.start, dates, columnWidth);
const y = taskYCoordinate(index, rowHeight, taskHeight);
const x1 = x - taskHeight * 0.5;
@ -258,37 +246,21 @@ const convertToMilestone = (
};
};
const taskXCoordinate = (
xDate: Date,
dates: Date[],
dateDelta: number,
columnWidth: number
) => {
const index = ~~(
(xDate.getTime() -
dates[0].getTime() +
xDate.getTimezoneOffset() -
dates[0].getTimezoneOffset()) /
dateDelta
);
const x = Math.round(
(index +
(xDate.getTime() -
dates[index].getTime() -
xDate.getTimezoneOffset() * 60 * 1000 +
dates[index].getTimezoneOffset() * 60 * 1000) /
dateDelta) *
columnWidth
);
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;
return x;
};
const taskXCoordinateRTL = (
xDate: Date,
dates: Date[],
dateDelta: number,
columnWidth: number
) => {
let x = taskXCoordinate(xDate, dates, dateDelta, columnWidth);
let x = taskXCoordinate(xDate, dates, columnWidth);
x += columnWidth;
return x;
};

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) {
@ -88,39 +92,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
newEndDate = startOfDate(newEndDate, "year");
break;
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;
}

9
src/helpers/other-helper.ts
View File

@ -40,11 +40,10 @@ function getChildren(taskList: Task[], task: Task) {
} else {
tasks = taskList.filter(t => t.project && t.project === task.id);
}
const taskChildren = tasks.reduce(
(children: Task[], t) =>
children.concat(children, getChildren(taskList, t)),
[]
);
var taskChildren: Task[] = [];
tasks.forEach(t => {
taskChildren.push(...getChildren(taskList, t));
})
tasks = tasks.concat(tasks, taskChildren);
return tasks;
}

9
src/test/gant.test.tsx
View File

@ -1,11 +1,12 @@
import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import { Gantt } from "../index";
describe("gantt", () => {
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(
const root = createRoot(div);
root.render(
<Gantt
tasks={[
{
@ -17,9 +18,7 @@ describe("gantt", () => {
type: "task",
},
]}
/>,
div
/>
);
ReactDOM.unmountComponentAtNode(div);
});
});

1
src/types/gantt-task-actions.ts
View File

@ -6,6 +6,7 @@ export type GanttContentMoveAction =
| "mouseleave"
| "delete"
| "dblclick"
| "click"
| "select"
| ""
| BarMoveAction;

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

@ -45,6 +45,10 @@ export interface EventOption {
* Invokes on bar double click.
*/
onDoubleClick?: (task: Task) => void;
/**
* Invokes on bar click.
*/
onClick?: (task: Task) => void;
/**
* Invokes on end and start time change. Chart undoes operation if method return false or error.
*/
@ -72,6 +76,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
*/