gantt-task-react - npm Package Compare versions

Comparing version 0.0.5 to 0.1.1

dist/components/Bar/bar.d.ts

 import React from "react";
-import { Task } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
@@ -8,3 +7,2 @@ import { GanttContentMoveAction } from "../Gantt/gantt-content";
     arrowIndent: number;
-    onDoubleClick?: (task: Task) => any;
     isProgressChangeable: boolean;
@@ -11,0 +9,0 @@ isDateChangeable: boolean;

dist/components/Gantt/gantt-content.d.ts

@@ -5,3 +5,3 @@ import React from "react";
 import { BarMoveAction } from "../../helpers/bar-helper";
-export declare type GanttContentMoveAction = "mouseenter" | "mouseleave" | "delete" | BarMoveAction;
+export declare type GanttContentMoveAction = "mouseenter" | "mouseleave" | "delete" | "dblclick" | BarMoveAction;
 export declare type BarEvent = {
@@ -31,3 +31,4 @@ selectedTask?: BarTask;
     getTooltipContent?: (task: Task, fontSize: string, fontFamily: string) => JSX.Element;
+    onTasksDateChange: (tasks: Task[]) => void;
 } & EventOption;
 export declare const GanttContent: React.FC<GanttContentProps>;

dist/helpers/bar-helper.d.ts

 import { Task } from "../types/public-types";
 import { BarTask } from "../types/bar-task";
-export declare const convertToBarTasks: (tasks: Task[], dates: Date[], dateDelta: number, columnWidth: number, rowHeight: number, taskHeight: number, headerHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask[];
+export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, barFill: number, headerHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask[];
 export declare const convertToBarTask: (task: Task, index: number, dates: Date[], dateDelta: number, columnWidth: number, rowHeight: number, taskHeight: number, headerHeight: number, barCornerRadius: number, handleWidth: number, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string) => BarTask;
@@ -5,0 +5,0 @@ export declare const taskXCoordinate: (xDate: Date, dates: Date[], dateDelta: number, columnWidth: number) => number;

dist/helpers/other-helper.d.ts

 /// <reference types="react" />
+import { BarTask } from "../types/bar-task";
+import { Task } from "../types/public-types";
 export declare function isKeyboardEvent(event: React.MouseEvent | React.KeyboardEvent): event is React.KeyboardEvent;
+export declare function isBarTask(task: Task | BarTask): task is BarTask;

dist/index.js

@@ -108,2 +108,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       newStartDate = addToDate(newStartDate, -1, "month");
+      newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
@@ -604,3 +605,5 @@ newEndDate = startOfDate(newEndDate, "year");
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+  var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
+  var taskHeight = rowHeight * barFill / 100;
   var barTasks = tasks.map(function (t, i) {
@@ -771,3 +774,2 @@ return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
       arrowIndent = _ref.arrowIndent,
-      _onDoubleClick = _ref.onDoubleClick,
       isProgressChangeable = _ref.isProgressChangeable,
@@ -786,4 +788,4 @@ isDateChangeable = _ref.isDateChangeable,
     className: styles$2.barWrapper,
-    onDoubleClick: function onDoubleClick() {
-      !!_onDoubleClick && _onDoubleClick(task);
+    onDoubleClick: function onDoubleClick(e) {
+      onEventStart(e, "dblclick", task);
     },
@@ -940,6 +942,6 @@ tabIndex: 0,
   var tasks = _ref.tasks,
+      dates = _ref.dates,
       rowHeight = _ref.rowHeight,
       barCornerRadius = _ref.barCornerRadius,
       columnWidth = _ref.columnWidth,
-      dates = _ref.dates,
       barFill = _ref.barFill,
@@ -952,8 +954,9 @@ barProgressColor = _ref.barProgressColor,
       handleWidth = _ref.handleWidth,
+      timeStep = _ref.timeStep,
+      svg = _ref.svg,
       arrowColor = _ref.arrowColor,
-      timeStep = _ref.timeStep,
+      arrowIndent = _ref.arrowIndent,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
-      arrowIndent = _ref.arrowIndent,
-      svg = _ref.svg,
+      onTasksDateChange = _ref.onTasksDateChange,
       onDateChange = _ref.onDateChange,
@@ -991,51 +994,67 @@ onProgressChange = _ref.onProgressChange,
     var newXStep = timeStep * columnWidth / dateDelta;
-
-    if (newXStep !== xStep) {
-      setXStep(newXStep);
-    }
-  }, [columnWidth, dates, timeStep, xStep]);
+    setXStep(newXStep);
+  }, [columnWidth, dates, timeStep]);
   React.useEffect(function () {
-    var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    var taskHeight = rowHeight * barFill / 100;
-    setBarTasks(convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
+    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
   }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
   var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
-    if (isKeyboardEvent(event)) {
-      if (action === "delete") {
-        setBarTasks(barTasks.filter(function (t) {
-          var _barEvent$selectedTas;
+    try {
+      return Promise.resolve(function () {
+        if (isKeyboardEvent(event)) {
+          var _temp3 = function () {
+            if (action === "delete") {
+              var _temp4 = function () {
+                if (onTaskDelete) {
+                  return Promise.resolve(onTaskDelete(selectedTask)).then(function () {
+                    var newTasks = barTasks.filter(function (t) {
+                      var _barEvent$selectedTas;
 
-          return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
-        }));
-      }
-    } else if (action === "mouseenter") {
-      if (!barEvent.action) {
-        setBarEvent({
-          action: action,
-          selectedTask: selectedTask
-        });
-      }
-    } else if (action === "mouseleave") {
-      if (barEvent.action === "mouseenter") {
-        setBarEvent({
-          action: ""
-        });
-      }
-    } else if (action === "move") {
-      var _svg$current$getScree;
+                      return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+                    });
+                    onTasksDateChange(newTasks);
+                  });
+                }
+              }();
 
-      if (!svg.current || !point) return;
-      point.x = event.clientX;
-      var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
-      setInitEventX1Delta(cursor.x - selectedTask.x1);
-      setBarEvent({
-        action: action,
-        selectedTask: selectedTask
-      });
-    } else {
-      setBarEvent({
-        action: action,
-        selectedTask: selectedTask
-      });
+              if (_temp4 && _temp4.then) return _temp4.then(function () {});
+            }
+          }();
+
+          if (_temp3 && _temp3.then) return _temp3.then(function () {});
+        } else if (action === "mouseenter") {
+          if (!barEvent.action) {
+            setBarEvent({
+              action: action,
+              selectedTask: selectedTask
+            });
+          }
+        } else if (action === "mouseleave") {
+          if (barEvent.action === "mouseenter") {
+            setBarEvent({
+              action: ""
+            });
+          }
+        } else if (action === "move") {
+          var _svg$current$getScree;
+
+          if (!svg.current || !point) return;
+          point.x = event.clientX;
+          var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+          setInitEventX1Delta(cursor.x - selectedTask.x1);
+          setBarEvent({
+            action: action,
+            selectedTask: selectedTask
+          });
+        } else if (action === "dblclick") {
+          !!onDoubleClick && onDoubleClick(selectedTask);
+        } else {
+          setBarEvent({
+            action: action,
+            selectedTask: selectedTask
+          });
+        }
+      }());
+    } catch (e) {
+      return Promise.reject(e);
     }
@@ -1077,2 +1096,11 @@ };
 
+        var _temp8 = function _temp8() {
+          svg.current.removeEventListener("mousemove", handleMouseMove);
+          svg.current.removeEventListener("mouseup", handleMouseUp);
+          setBarEvent({
+            action: ""
+          });
+          setIsMoving(false);
+        };
+
         var selectedTask = barEvent.selectedTask,
@@ -1088,15 +1116,22 @@ action = barEvent.action;
 
-        if ((action === "move" || action === "end" || action === "start") && onDateChange) {
-          onDateChange(changedTask);
-        } else if (onProgressChange) {
-          onProgressChange(changedTask);
-        }
+        var _temp9 = function () {
+          if ((action === "move" || action === "end" || action === "start") && onDateChange) {
+            return Promise.resolve(onDateChange(changedTask)).then(function () {
+              var newTasks = barTasks.map(function (t) {
+                return t.id === changedTask.id ? changedTask : t;
+              });
+              onTasksDateChange(newTasks);
+            });
+          } else {
+            var _temp10 = function () {
+              if (onProgressChange) {
+                return Promise.resolve(onProgressChange(changedTask)).then(function () {});
+              }
+            }();
 
-        svg.current.removeEventListener("mousemove", handleMouseMove);
-        svg.current.removeEventListener("mouseup", handleMouseUp);
-        setBarEvent({
-          action: ""
-        });
-        setIsMoving(false);
-        return Promise.resolve();
+            if (_temp10 && _temp10.then) return _temp10.then(function () {});
+          }
+        }();
+
+        return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp8) : _temp8(_temp9));
       } catch (e) {
@@ -1138,3 +1173,2 @@ return Promise.reject(e);
       isProgressChangeable: !!onProgressChange && !task.isDisabled,
-      onDoubleClick: onDoubleClick,
       isDateChangeable: !!onDateChange && !task.isDisabled,
@@ -1200,4 +1234,9 @@ isDelete: !!onTaskDelete && !task.isDisabled,
       getTooltipContent = _ref.getTooltipContent;
+  var svg = React.useRef(null);
 
-  var _ganttDateRange = ganttDateRange(tasks, viewMode),
+  var _useState = React.useState(tasks),
+      ganttTasks = _useState[0],
+      setGanttTasks = _useState[1];
+
+  var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
       startDate = _ganttDateRange[0],
@@ -1207,7 +1246,11 @@ endDate = _ganttDateRange[1];
   var dates = seedDates(startDate, endDate, viewMode);
-  var svg = React.useRef(null);
+
+  var handleOnTasksChange = function handleOnTasksChange(tasks) {
+    setGanttTasks(tasks);
+  };
+
   var gridProps = {
     columnWidth: columnWidth,
     gridWidth: dates.length * columnWidth,
-    tasks: tasks,
+    tasks: ganttTasks,
     rowHeight: rowHeight,
@@ -1228,3 +1271,3 @@ headerHeight: headerHeight,
   var barProps = {
-    tasks: tasks,
+    tasks: ganttTasks,
     rowHeight: rowHeight,
@@ -1241,4 +1284,4 @@ barCornerRadius: barCornerRadius,
     handleWidth: handleWidth,
+    arrowColor: arrowColor,
     timeStep: timeStep,
-    arrowColor: arrowColor,
     fontFamily: fontFamily,
@@ -1248,2 +1291,3 @@ fontSize: fontSize,
     svg: svg,
+    onTasksDateChange: handleOnTasksChange,
     onDateChange: onDateChange,
@@ -1250,0 +1294,0 @@ onProgressChange: onProgressChange,

dist/index.modern.js

@@ -107,2 +107,3 @@ import React, { useRef, useState, useEffect } from 'react';
       newStartDate = addToDate(newStartDate, -1, "month");
+      newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
@@ -603,3 +604,5 @@ newEndDate = startOfDate(newEndDate, "year");
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+  var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
+  var taskHeight = rowHeight * barFill / 100;
   var barTasks = tasks.map(function (t, i) {
@@ -770,3 +773,2 @@ return convertToBarTask(t, i, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
       arrowIndent = _ref.arrowIndent,
-      _onDoubleClick = _ref.onDoubleClick,
       isProgressChangeable = _ref.isProgressChangeable,
@@ -785,4 +787,4 @@ isDateChangeable = _ref.isDateChangeable,
     className: styles$2.barWrapper,
-    onDoubleClick: function onDoubleClick() {
-      !!_onDoubleClick && _onDoubleClick(task);
+    onDoubleClick: function onDoubleClick(e) {
+      onEventStart(e, "dblclick", task);
     },
@@ -939,6 +941,6 @@ tabIndex: 0,
   var tasks = _ref.tasks,
+      dates = _ref.dates,
       rowHeight = _ref.rowHeight,
       barCornerRadius = _ref.barCornerRadius,
       columnWidth = _ref.columnWidth,
-      dates = _ref.dates,
       barFill = _ref.barFill,
@@ -951,8 +953,9 @@ barProgressColor = _ref.barProgressColor,
       handleWidth = _ref.handleWidth,
+      timeStep = _ref.timeStep,
+      svg = _ref.svg,
       arrowColor = _ref.arrowColor,
-      timeStep = _ref.timeStep,
+      arrowIndent = _ref.arrowIndent,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
-      arrowIndent = _ref.arrowIndent,
-      svg = _ref.svg,
+      onTasksDateChange = _ref.onTasksDateChange,
       onDateChange = _ref.onDateChange,
@@ -990,51 +993,67 @@ onProgressChange = _ref.onProgressChange,
     var newXStep = timeStep * columnWidth / dateDelta;
-
-    if (newXStep !== xStep) {
-      setXStep(newXStep);
-    }
-  }, [columnWidth, dates, timeStep, xStep]);
+    setXStep(newXStep);
+  }, [columnWidth, dates, timeStep]);
   useEffect(function () {
-    var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    var taskHeight = rowHeight * barFill / 100;
-    setBarTasks(convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
+    setBarTasks(convertToBarTasks(tasks, dates, columnWidth, rowHeight, barFill, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
   }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
   var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
-    if (isKeyboardEvent(event)) {
-      if (action === "delete") {
-        setBarTasks(barTasks.filter(function (t) {
-          var _barEvent$selectedTas;
+    try {
+      return Promise.resolve(function () {
+        if (isKeyboardEvent(event)) {
+          var _temp3 = function () {
+            if (action === "delete") {
+              var _temp4 = function () {
+                if (onTaskDelete) {
+                  return Promise.resolve(onTaskDelete(selectedTask)).then(function () {
+                    var newTasks = barTasks.filter(function (t) {
+                      var _barEvent$selectedTas;
 
-          return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
-        }));
-      }
-    } else if (action === "mouseenter") {
-      if (!barEvent.action) {
-        setBarEvent({
-          action: action,
-          selectedTask: selectedTask
-        });
-      }
-    } else if (action === "mouseleave") {
-      if (barEvent.action === "mouseenter") {
-        setBarEvent({
-          action: ""
-        });
-      }
-    } else if (action === "move") {
-      var _svg$current$getScree;
+                      return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+                    });
+                    onTasksDateChange(newTasks);
+                  });
+                }
+              }();
 
-      if (!svg.current || !point) return;
-      point.x = event.clientX;
-      var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
-      setInitEventX1Delta(cursor.x - selectedTask.x1);
-      setBarEvent({
-        action: action,
-        selectedTask: selectedTask
-      });
-    } else {
-      setBarEvent({
-        action: action,
-        selectedTask: selectedTask
-      });
+              if (_temp4 && _temp4.then) return _temp4.then(function () {});
+            }
+          }();
+
+          if (_temp3 && _temp3.then) return _temp3.then(function () {});
+        } else if (action === "mouseenter") {
+          if (!barEvent.action) {
+            setBarEvent({
+              action: action,
+              selectedTask: selectedTask
+            });
+          }
+        } else if (action === "mouseleave") {
+          if (barEvent.action === "mouseenter") {
+            setBarEvent({
+              action: ""
+            });
+          }
+        } else if (action === "move") {
+          var _svg$current$getScree;
+
+          if (!svg.current || !point) return;
+          point.x = event.clientX;
+          var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+          setInitEventX1Delta(cursor.x - selectedTask.x1);
+          setBarEvent({
+            action: action,
+            selectedTask: selectedTask
+          });
+        } else if (action === "dblclick") {
+          !!onDoubleClick && onDoubleClick(selectedTask);
+        } else {
+          setBarEvent({
+            action: action,
+            selectedTask: selectedTask
+          });
+        }
+      }());
+    } catch (e) {
+      return Promise.reject(e);
     }
@@ -1076,2 +1095,11 @@ };
 
+        var _temp8 = function _temp8() {
+          svg.current.removeEventListener("mousemove", handleMouseMove);
+          svg.current.removeEventListener("mouseup", handleMouseUp);
+          setBarEvent({
+            action: ""
+          });
+          setIsMoving(false);
+        };
+
         var selectedTask = barEvent.selectedTask,
@@ -1087,15 +1115,22 @@ action = barEvent.action;
 
-        if ((action === "move" || action === "end" || action === "start") && onDateChange) {
-          onDateChange(changedTask);
-        } else if (onProgressChange) {
-          onProgressChange(changedTask);
-        }
+        var _temp9 = function () {
+          if ((action === "move" || action === "end" || action === "start") && onDateChange) {
+            return Promise.resolve(onDateChange(changedTask)).then(function () {
+              var newTasks = barTasks.map(function (t) {
+                return t.id === changedTask.id ? changedTask : t;
+              });
+              onTasksDateChange(newTasks);
+            });
+          } else {
+            var _temp10 = function () {
+              if (onProgressChange) {
+                return Promise.resolve(onProgressChange(changedTask)).then(function () {});
+              }
+            }();
 
-        svg.current.removeEventListener("mousemove", handleMouseMove);
-        svg.current.removeEventListener("mouseup", handleMouseUp);
-        setBarEvent({
-          action: ""
-        });
-        setIsMoving(false);
-        return Promise.resolve();
+            if (_temp10 && _temp10.then) return _temp10.then(function () {});
+          }
+        }();
+
+        return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp8) : _temp8(_temp9));
       } catch (e) {
@@ -1137,3 +1172,2 @@ return Promise.reject(e);
       isProgressChangeable: !!onProgressChange && !task.isDisabled,
-      onDoubleClick: onDoubleClick,
       isDateChangeable: !!onDateChange && !task.isDisabled,
@@ -1199,4 +1233,9 @@ isDelete: !!onTaskDelete && !task.isDisabled,
       getTooltipContent = _ref.getTooltipContent;
+  var svg = useRef(null);
 
-  var _ganttDateRange = ganttDateRange(tasks, viewMode),
+  var _useState = useState(tasks),
+      ganttTasks = _useState[0],
+      setGanttTasks = _useState[1];
+
+  var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
       startDate = _ganttDateRange[0],
@@ -1206,7 +1245,11 @@ endDate = _ganttDateRange[1];
   var dates = seedDates(startDate, endDate, viewMode);
-  var svg = useRef(null);
+
+  var handleOnTasksChange = function handleOnTasksChange(tasks) {
+    setGanttTasks(tasks);
+  };
+
   var gridProps = {
     columnWidth: columnWidth,
     gridWidth: dates.length * columnWidth,
-    tasks: tasks,
+    tasks: ganttTasks,
     rowHeight: rowHeight,
@@ -1227,3 +1270,3 @@ headerHeight: headerHeight,
   var barProps = {
-    tasks: tasks,
+    tasks: ganttTasks,
     rowHeight: rowHeight,
@@ -1240,4 +1283,4 @@ barCornerRadius: barCornerRadius,
     handleWidth: handleWidth,
+    arrowColor: arrowColor,
     timeStep: timeStep,
-    arrowColor: arrowColor,
     fontFamily: fontFamily,
@@ -1247,2 +1290,3 @@ fontSize: fontSize,
     svg: svg,
+    onTasksDateChange: handleOnTasksChange,
     onDateChange: onDateChange,
@@ -1249,0 +1293,0 @@ onProgressChange: onProgressChange,

dist/types/public-types.d.ts

@@ -33,3 +33,3 @@ /// <reference types="react" />
     timeStep?: number;
-    onDoubleClick?: (task: Task) => any;
+    onDoubleClick?: (task: Task) => void;
     onDateChange?: (task: Task) => void | Promise<any>;
@@ -36,0 +36,0 @@ onProgressChange?: (task: Task) => void | Promise<any>;

package.json

 {
   "name": "gantt-task-react",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "description": "Interactive Gantt Chart for React with TypeScript.",
@@ -42,3 +42,2 @@ "author": "MaTeMaTuK <[e-mail]>",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.7.0",
@@ -54,3 +53,3 @@ "eslint-config-standard": "^14.1.0",
     "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
@@ -60,3 +59,3 @@ "prettier": "^2.0.4",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^3.4.3",
     "typescript": "^3.8.3"
@@ -63,0 +62,0 @@ },

README.md

@@ -61,26 +61,70 @@ # gantt-task-react
 
-| Parameter Name                  | Type      | Required | Description                                        |
-| :------------------------------ | :-------- | :------- | :------------------------------------------------- |
-| tasks                           | Task      | Yes      | Tasks array.                                       |
-| [EventOption](#EventOption)     | interface | No       | Specifies gantt events.                            |
-| [DisplayOption](#DisplayOption) | interface | No       | Specifies view type and display timeline language. |
-| StylingOption                   | interface | No       | Specifies chart and global tasks styles            |
+| 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                              | Required | Description                                                                           |
-| :--------------- | :-------------------------------- | :------- | :------------------------------------------------------------------------------------ |
-| onDoubleClick    | (task: Task) => any               | No       | Specifies the function to be executed on the bar`s onDoubleClick event.               |
-| onTaskDelete     | (task: Task) => void/Promise<any> | No       | Specifies the function to be executed on the bar`s on Delete button press event.      |
-| onDateChange     | (task: Task) => void/Promise<any> | No       | Specifies the function to be executed when drag bar`s event on timeline has finished. |
-| onProgressChange | (task: Task) => void/Promise<any> | No       | Specifies the function to be executed when drag bar`s progress event has finished.    |
-| timeStep         | number                            | No       | A time step value for onDateChange. Specify in milliseconds.                          |
+| Parameter Name   | Type                              | Description                                                                             |
+| :--------------- | :-------------------------------- | :-------------------------------------------------------------------------------------- |
+| onDoubleClick    | (task: Task) => any               | Specifies the function to be executed on the taskbar onDoubleClick event.               |
+| onTaskDelete     | (task: Task) => void/Promise<any> | Specifies the function to be executed on the taskbar on Delete button press event.      |
+| onDateChange     | (task: Task) => void/Promise<any> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
+| onProgressChange | (task: Task) => void/Promise<any> | Specifies the function to be executed when drag taskbar progress event has finished.    |
+| timeStep         | number                            | A time step value for onDateChange. Specify in milliseconds.                            |
 
 ### DisplayOption
 
-| Parameter Name | Type   | Required | Description                                                                                     |
-| :------------- | :----- | :------- | :---------------------------------------------------------------------------------------------- |
-| viewMode       | enum   | No       | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
-| locale         | string | No       | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                        |
+| Parameter Name | Type   | Description                                                                                     |
+| :------------- | :----- | :---------------------------------------------------------------------------------------------- |
+| viewMode       | enum   | Specifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
+| locale         | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                        |
 
-Work in progress
+### StylingOption
+
+| Parameter Name             | Type   | Description                                                             |
+| :------------------------- | :----- | :---------------------------------------------------------------------- |
+| headerHeight               | number | Specifies the header height.                                            |
+| columnWidth                | number | Specifies the time period width.                                        |
+| 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.         |
+| 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.                         |
+| getTooltipContent          | \*\*   | Specifies the Tooltip for selected taskbar.                             |
+
+[\*\*`(task:Task, fontSize:string , fontFamily:string) => JSX.Element;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/07dfeddd4d96ecc418619cad9cd9ba3c31bb82a8/src/components/Other/tooltip.tsx#L47)
+
+### Task
+
+| Parameter Name | Type   | Description                                                                                           |
+| :------------- | :----- | :---------------------------------------------------------------------------------------------------- |
+| id\*           | string | Task id.                                                                                              |
+| name\*         | string | Task display name.                                                                                    |
+| start\*        | Date   | Task start date.                                                                                      |
+| end\*          | Date   | Task end date.                                                                                        |
+| progress\*     | number | Task progress. Sets in percent from 0 to 100.                                                         |
+| 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.                                                              |
+
+\*Required
+
+## License
+
+[MIT](https://oss.ninja/mit/jaredpalmer/)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

289223

increased by3.66%

Dev dependency count

28

decreased by-3.45%

Number of package files

28

increased by7.69%

Lines of code

2657

increased by3.1%

Number of lines in readme file

130

increased by51.16%

No dependency changes