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

Merge pull request #84 from MaTeMaTuK/dev

Browse Source 
Dev
This commit is contained in:
MaTeMaTuK 2022-07-10 14:15:08 +02:00 committed by GitHub
commit 62783f25b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

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

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
example/src/App.tsx
View File

@ -66,7 +66,7 @@ const App = () => {
};
return (
<div>
<div className="Wrapper">
<ViewSwitcher
onViewModeChange={viewMode => setView(viewMode)}
onViewListChange={setIsChecked}

3
example/src/index.css
View File

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

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,

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

@ -4,7 +4,7 @@
/*firefox*/
scrollbar-width: thin;
/*iPad*/
height: 1.1rem;
height: 1.2rem;
}
.scrollWrapper::-webkit-scrollbar {
width: 1.1rem;
@ -27,9 +27,6 @@
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;

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

@ -1,6 +1,6 @@
.scroll {
overflow: hidden auto;
width: 17px;
width: 1rem;
flex-shrink: 0;
/*firefox*/
scrollbar-width: thin;

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}

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