@ezraghzf/gantt-task-react 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Maksym Vikarii https://github.com/MaTeMaTuK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,152 @@
+# @ezraghzf/gantt-task-react
+
+## Interactive Gantt Chart for React with TypeScript.
+
+![example](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png)
+
+## [Live Demo](https://matematuk.github.io/gantt-task-react/)
+
+## Install
+
+```
+npm install @ezraghzf/gantt-task-react
+```
+
+## How to use it
+
+```javascript
+import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@ezraghzf/gantt-task-react';
+import "@ezraghzf/gantt-task-react/dist/index.css";
+
+let tasks: Task[] = [
+    {
+      start: new Date(2020, 1, 1),
+      end: new Date(2020, 1, 2),
+      name: 'Idea',
+      id: 'Task 0',
+      type:'task',
+      progress: 45,
+      isDisabled: true,
+      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
+    },
+    ...
+];
+<Gantt tasks={tasks} />
+```
+
+You may handle actions
+
+```javascript
+<Gantt
+  tasks={tasks}
+  viewMode={view}
+  onDateChange={onTaskChange}
+  onTaskDelete={onTaskDelete}
+  onProgressChange={onProgressChange}
+  onDoubleClick={onDblClick}
+  onClick={onClick}
+/>
+```
+
+## How to run example
+
+```
+cd ./example
+npm install
+npm start
+```
+
+## Gantt Configuration
+
+### GanttProps
+
+| Parameter Name                  | Type          | Description                                        |
+| :------------------------------ | :------------ | :------------------------------------------------- |
+| tasks\*                         | [Task](#Task) | Tasks array.                                       |
+| [EventOption](#EventOption)     | interface     | Specifies gantt events.                            |
+| [DisplayOption](#DisplayOption) | interface     | Specifies view type and display timeline language. |
+| [StylingOption](#StylingOption) | interface     | Specifies chart and global tasks styles            |
+
+### EventOption
+
+| Parameter Name     | Type                                                                          | Description                                                                             |
+| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| 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.    |
+| onExpanderClick\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |
+| timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
+
+\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
+
+### DisplayOption
+
+| Parameter Name | Type    | Description                                                                                                 |
+| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
+| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, 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.                                                                                              |
+
+### StylingOption
+
+| Parameter Name             | Type   | Description                                                                                    |
+| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
+| headerHeight               | number | Specifies the header height.                                                                   |
+| ganttHeight                | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
+| columnWidth                | number | Specifies the time period width.                                                               |
+| listCellWidth              | string | Specifies the task list cell width. Empty string is mean "no display".                         |
+| rowHeight                  | number | Specifies the task row height.                                                                 |
+| barCornerRadius            | number | Specifies the taskbar corner rounding.                                                         |
+| barFill                    | number | Specifies the taskbar occupation. Sets in percent from 0 to 100.                               |
+| handleWidth                | number | Specifies width the taskbar drag event control for start and end dates.                        |
+| fontFamily                 | string | Specifies the application font.                                                                |
+| fontSize                   | string | Specifies the application font size.                                                           |
+| barProgressColor           | string | Specifies the taskbar progress fill color globally.                                            |
+| barProgressSelectedColor   | string | Specifies the taskbar progress fill color globally on select.                                  |
+| barBackgroundColor         | string | Specifies the taskbar background fill color globally.                                          |
+| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.                                |
+| baselineBackgroundColor    | string | Specifies the baseline bar fill color globally.                                                |
+| arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |
+| arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |
+| todayColor                 | string | Specifies the current period column fill color.                                                |
+| TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |
+| TaskListHeader             |        | Specifies the task list Header view                                                            |
+| TaskListTable              |        | Specifies the task list Table view                                                             |
+
+- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
+- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
+- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;`
+
+### Task
+
+| Parameter Name | Type     | Description                                                                                           |
+| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
+| id\*           | string   | Task id.                                                                                              |
+| name\*         | string   | Task display name.                                                                                    |
+| type\*         | string   | Task display type: **task**, **milestone**, **project**                                               |
+| start\*        | Date     | Task start date.                                                                                      |
+| end\*          | Date     | Task end date.                                                                                        |
+| baselineStart  | Date     | Task baseline start date.                                                                             |
+| baselineEnd    | Date     | Task baseline end date.                                                                               |
+| progress\*     | number   | Task progress. Sets in percent from 0 to 100.                                                         |
+| dependencies   | string[] | Specifies the parent dependencies ids.                                                                |
+| styles         | object   | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |
+|                |          | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |
+|                |          | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |
+|                |          | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |
+|                |          | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |
+| isDisabled     | bool     | Disables all action for current task.                                                                 |
+| fontSize       | string   | Specifies the taskbar font size locally.                                                              |
+| project        | string   | Task project name                                                                                     |
+| hideChildren   | bool     | Hide children items. Parameter works with project type only                                           |
+
+\*Required
+
+## License
+
+[MIT](https://oss.ninja/mit/jaredpalmer/)

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ViewMode } from "../../types/public-types";
+import { DateSetup } from "../../types/date-setup";
+export declare type CalendarProps = {
+    dateSetup: DateSetup;
+    locale: string;
+    viewMode: ViewMode;
+    rtl: boolean;
+    headerHeight: number;
+    columnWidth: number;
+    fontFamily: string;
+    fontSize: string;
+    headerBordered?: boolean;
+    startDate?: Date;
+};
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/calendar/top-part-of-calendar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare type TopPartOfCalendarProps = {
+    value: string;
+    x1Line: number;
+    y1Line: number;
+    y2Line: number;
+    xText: number;
+    yText: number;
+};
+export declare const TopPartOfCalendar: React.FC<TopPartOfCalendarProps>;
+export {};

package/dist/components/gantt/gantt.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { GanttProps } from "../../types/public-types";
+export declare const Gantt: React.FunctionComponent<GanttProps>;

package/dist/components/gantt/task-gantt-content.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { EventOption } from "../../types/public-types";
+import { BarTask } from "../../types/bar-task";
+import { GanttEvent } from "../../types/gantt-task-actions";
+export declare type TaskGanttContentProps = {
+    tasks: BarTask[];
+    dates: Date[];
+    ganttEvent: GanttEvent;
+    selectedTask: BarTask | undefined;
+    rowHeight: number;
+    columnWidth: number;
+    timeStep: number;
+    svg?: React.RefObject<SVGSVGElement>;
+    svgWidth: number;
+    taskHeight: number;
+    arrowColor: string;
+    arrowIndent: number;
+    fontSize: string;
+    fontFamily: string;
+    rtl: boolean;
+    setGanttEvent: (value: GanttEvent) => void;
+    setFailedTask: (value: BarTask | null) => void;
+    setSelectedTask: (taskId: string) => void;
+} & EventOption;
+export declare const TaskGanttContent: React.FC<TaskGanttContentProps>;

package/dist/components/gantt/task-gantt.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { GridProps } from "../grid/grid";
+import { CalendarProps } from "../calendar/calendar";
+import { TaskGanttContentProps } from "./task-gantt-content";
+export declare type TaskGanttProps = {
+    gridProps: GridProps;
+    calendarProps: CalendarProps;
+    barProps: TaskGanttContentProps;
+    ganttHeight: number;
+    scrollY: number;
+    scrollX: number;
+};
+export declare const TaskGantt: React.FC<TaskGanttProps>;

package/dist/components/grid/grid-body.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Task } from "../../types/public-types";
+export declare type GridBodyProps = {
+    tasks: Task[];
+    dates: Date[];
+    svgWidth: number;
+    rowHeight: number;
+    columnWidth: number;
+    todayColor: string;
+    rtl: boolean;
+};
+export declare const GridBody: React.FC<GridBodyProps>;

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GridBodyProps } from "./grid-body";
+export declare type GridProps = GridBodyProps;
+export declare const Grid: React.FC<GridProps>;

package/dist/components/other/arrow.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { BarTask } from "../../types/bar-task";
+declare type ArrowProps = {
+    taskFrom: BarTask;
+    taskTo: BarTask;
+    rowHeight: number;
+    taskHeight: number;
+    arrowIndent: number;
+    rtl: boolean;
+};
+export declare const Arrow: React.FC<ArrowProps>;
+export {};

package/dist/components/other/horizontal-scroll.d.ts

@@ -0,0 +1,8 @@
+import React, { SyntheticEvent } from "react";
+export declare const HorizontalScroll: React.FC<{
+    scroll: number;
+    svgWidth: number;
+    taskListWidth: number;
+    rtl: boolean;
+    onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
+}>;

package/dist/components/other/tooltip.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { Task } from "../../types/public-types";
+import { BarTask } from "../../types/bar-task";
+export declare type TooltipProps = {
+    task: BarTask;
+    arrowIndent: number;
+    rtl: boolean;
+    svgContainerHeight: number;
+    svgContainerWidth: number;
+    svgWidth: number;
+    headerHeight: number;
+    taskListWidth: number;
+    scrollX: number;
+    scrollY: number;
+    rowHeight: number;
+    fontSize: string;
+    fontFamily: string;
+    TooltipContent: React.FC<{
+        task: Task;
+        fontSize: string;
+        fontFamily: string;
+    }>;
+};
+export declare const Tooltip: React.FC<TooltipProps>;
+export declare const StandardTooltipContent: React.FC<{
+    task: Task;
+    fontSize: string;
+    fontFamily: string;
+}>;

package/dist/components/other/vertical-scroll.d.ts

@@ -0,0 +1,9 @@
+import React, { SyntheticEvent } from "react";
+export declare const VerticalScroll: React.FC<{
+    scroll: number;
+    ganttHeight: number;
+    ganttFullHeight: number;
+    headerHeight: number;
+    rtl: boolean;
+    onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
+}>;

package/dist/components/task-item/bar/bar-date-handle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare type BarDateHandleProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    barCornerRadius: number;
+    onMouseDown: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+};
+export declare const BarDateHandle: React.FC<BarDateHandleProps>;
+export {};

package/dist/components/task-item/bar/bar-display.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+declare type BarDisplayProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    isSelected: boolean;
+    progressX: number;
+    progressWidth: number;
+    barCornerRadius: number;
+    styles: {
+        backgroundColor: string;
+        backgroundSelectedColor: string;
+        progressColor: string;
+        progressSelectedColor: string;
+    };
+    onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+};
+export declare const BarDisplay: React.FC<BarDisplayProps>;
+export {};

package/dist/components/task-item/bar/bar-progress-handle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type BarProgressHandleProps = {
+    progressPoint: string;
+    onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+};
+export declare const BarProgressHandle: React.FC<BarProgressHandleProps>;
+export {};

package/dist/components/task-item/bar/bar-small.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TaskItemProps } from "../task-item";
+export declare const BarSmall: React.FC<TaskItemProps>;

package/dist/components/task-item/bar/bar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TaskItemProps } from "../task-item";
+export declare const Bar: React.FC<TaskItemProps>;

package/dist/components/task-item/milestone/milestone.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TaskItemProps } from "../task-item";
+export declare const Milestone: React.FC<TaskItemProps>;

package/dist/components/task-item/project/project.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TaskItemProps } from "../task-item";
+export declare const Project: React.FC<TaskItemProps>;

package/dist/components/task-item/task-item.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { BarTask } from "../../types/bar-task";
+import { GanttContentMoveAction } from "../../types/gantt-task-actions";
+export declare type TaskItemProps = {
+    task: BarTask;
+    arrowIndent: number;
+    taskHeight: number;
+    isProgressChangeable: boolean;
+    isDateChangeable: boolean;
+    isDelete: boolean;
+    isSelected: boolean;
+    rtl: boolean;
+    onEventStart: (action: GanttContentMoveAction, selectedTask: BarTask, event?: React.MouseEvent | React.KeyboardEvent) => any;
+};
+export declare const TaskItem: React.FC<TaskItemProps>;

package/dist/components/task-list/task-list-header.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const TaskListHeaderDefault: React.FC<{
+    headerHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+}>;

package/dist/components/task-list/task-list-table.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Task } from "../../types/public-types";
+export declare const TaskListTableDefault: React.FC<{
+    rowHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    locale: string;
+    tasks: Task[];
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
+}>;

package/dist/components/task-list/task-list.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { BarTask } from "../../types/bar-task";
+import { Task } from "../../types/public-types";
+export declare type TaskListProps = {
+    headerHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    rowHeight: number;
+    ganttHeight: number;
+    scrollY: number;
+    locale: string;
+    tasks: Task[];
+    taskListRef: React.RefObject<HTMLDivElement>;
+    horizontalContainerClass?: string;
+    selectedTask: BarTask | undefined;
+    setSelectedTask: (task: string) => void;
+    onExpanderClick: (task: Task) => void;
+    TaskListHeader: React.FC<{
+        headerHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+    }>;
+    TaskListTable: React.FC<{
+        rowHeight: number;
+        rowWidth: string;
+        fontFamily: string;
+        fontSize: string;
+        locale: string;
+        tasks: Task[];
+        selectedTaskId: string;
+        setSelectedTask: (taskId: string) => void;
+        onExpanderClick: (task: Task) => void;
+    }>;
+};
+export declare const TaskList: React.FC<TaskListProps>;

package/dist/helpers/bar-helper.d.ts

@@ -0,0 +1,14 @@
+import { Task } from "../types/public-types";
+import { BarTask } from "../types/bar-task";
+import { BarMoveAction } from "../types/gantt-task-actions";
+export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, taskHeight: number, barCornerRadius: number, handleWidth: number, rtl: boolean, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string, projectProgressColor: string, projectProgressSelectedColor: string, projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, milestoneBackgroundSelectedColor: string, baselineBackgroundColor: string) => BarTask[];
+export declare const progressWithByParams: (taskX1: number, taskX2: number, progress: number, rtl: boolean) => number[];
+export declare const progressByProgressWidth: (progressWidth: number, barTask: BarTask) => number;
+export declare const getProgressPoint: (progressX: number, taskY: number, taskHeight: number) => string;
+/**
+ * Method handles event in real time(mousemove) and on finish(mouseup)
+ */
+export declare const handleTaskBySVGMouseEvent: (svgX: number, action: BarMoveAction, selectedTask: BarTask, xStep: number, timeStep: number, initEventX1Delta: number, rtl: boolean) => {
+    isChanged: boolean;
+    changedTask: BarTask;
+};

package/dist/helpers/date-helper.d.ts

@@ -0,0 +1,21 @@
+import { Task, ViewMode } from "../types/public-types";
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+import DateTimeFormat = Intl.DateTimeFormat;
+declare type DateHelperScales = "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond";
+export declare const getCachedDateTimeFormat: (locString: string | string[], opts?: DateTimeFormatOptions) => DateTimeFormat;
+export declare const addToDate: (date: Date, quantity: number, scale: DateHelperScales) => Date;
+export declare const startOfDate: (date: Date, scale: DateHelperScales) => Date;
+export declare const ganttDateRange: (tasks: Task[], viewMode: ViewMode, preStepsCount: number) => Date[];
+export declare const seedDates: (startDate: Date, endDate: Date, viewMode: ViewMode) => Date[];
+export declare const getLocaleMonth: (date: Date, locale: string) => string;
+export declare const getLocalDayOfWeek: (date: Date, locale: string, format?: "long" | "short" | "narrow" | undefined) => string;
+/**
+ * Returns monday of current week
+ * @param date date for modify
+ */
+export declare const getMonday: (date: Date) => Date;
+export declare const getWeekNumberFromDate: (date: Date, startDate: Date) => number;
+export declare const getWeekNumberISO8601: (date: Date) => string;
+export declare const getDaysInMonth: (month: number, year: number) => number;
+export declare const getWeekNumberInMonth: (date: Date) => number;
+export {};

package/dist/helpers/other-helper.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BarTask } from "../types/bar-task";
+import { Task } from "../types/public-types";
+export declare function isKeyboardEvent(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent): event is React.KeyboardEvent;
+export declare function isMouseEvent(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent): event is React.MouseEvent;
+export declare function isBarTask(task: Task | BarTask): task is BarTask;
+export declare function removeHiddenTasks(tasks: Task[]): Task[];
+export declare const sortTasks: (taskA: Task, taskB: Task) => 0 | 1 | -1;