gantt-task-react - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

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

@@ -14,2 +14,3 @@ import React from "react";
     dates: Date[];
+    selectedTask: string;
     rowHeight: number;
@@ -31,2 +32,3 @@ barCornerRadius: number;
     fontFamily: string;
+    setSelectedTask: (taskId: string) => void;
     TooltipContent: React.FC<{
@@ -33,0 +35,0 @@ task: Task;

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

@@ -10,2 +10,4 @@ import React from "react";
     tasks: Task[];
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
 }>;

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

@@ -14,2 +14,4 @@ import React from "react";
     horizontalContainerClass?: string;
+    selectedTaskId: string;
+    setSelectedTask: (taskId: string) => void;
     TaskListHeader: React.FC<{
@@ -28,4 +30,6 @@ headerHeight: number;
         tasks: Task[];
+        selectedTaskId: string;
+        setSelectedTask: (taskId: string) => void;
     }>;
 };
 export declare const TaskList: React.FC<TaskListProps>;

dist/index.js

@@ -403,2 +403,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       tasks = _ref.tasks,
+      selectedTaskId = _ref.selectedTaskId,
+      setSelectedTask = _ref.setSelectedTask,
       locale = _ref.locale,
@@ -427,3 +429,5 @@ ganttHeight = _ref.ganttHeight,
     tasks: tasks,
-    locale: locale
+    locale: locale,
+    selectedTaskId: selectedTaskId,
+    setSelectedTask: setSelectedTask
   };
@@ -1141,2 +1145,3 @@ return React__default.createElement("div", null, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
       dates = _ref.dates,
+      selectedTask = _ref.selectedTask,
       rowHeight = _ref.rowHeight,
@@ -1158,2 +1163,3 @@ barCornerRadius = _ref.barCornerRadius,
       fontSize = _ref.fontSize,
+      setSelectedTask = _ref.setSelectedTask,
       onTasksChange = _ref.onTasksChange,
@@ -1164,3 +1170,2 @@ onDateChange = _ref.onDateChange,
       onTaskDelete = _ref.onTaskDelete,
-      onSelect = _ref.onSelect,
       TooltipContent = _ref.TooltipContent;
@@ -1180,21 +1185,17 @@ var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
   var _useState3 = React.useState(null),
-      selectedTask = _useState3[0],
-      setSelectedTask = _useState3[1];
+      failedTask = _useState3[0],
+      setFailedTask = _useState3[1];
 
-  var _useState4 = React.useState(null),
-      failedTask = _useState4[0],
-      setFailedTask = _useState4[1];
+  var _useState4 = React.useState(0),
+      xStep = _useState4[0],
+      setXStep = _useState4[1];
 
   var _useState5 = React.useState(0),
-      xStep = _useState5[0],
-      setXStep = _useState5[1];
+      initEventX1Delta = _useState5[0],
+      setInitEventX1Delta = _useState5[1];
 
-  var _useState6 = React.useState(0),
-      initEventX1Delta = _useState6[0],
-      setInitEventX1Delta = _useState6[1];
+  var _useState6 = React.useState(false),
+      isMoving = _useState6[0],
+      setIsMoving = _useState6[1];
 
-  var _useState7 = React.useState(false),
-      isMoving = _useState7[0],
-      setIsMoving = _useState7[1];
-
   React.useEffect(function () {
@@ -1332,11 +1333,3 @@ var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
           if (action === "select") {
-            if (selectedTask && onSelect) {
-              onSelect(selectedTask, false);
-            }
-
-            setSelectedTask(task);
-
-            if (onSelect) {
-              onSelect(task, true);
-            }
+            setSelectedTask(task.id);
           }
@@ -1356,3 +1349,3 @@ } else return function () {
                             onTasksChange(newTasks);
-                            !!onSelect && onSelect(task, false);
+                            setSelectedTask("");
                           }
@@ -1444,3 +1437,3 @@ });
       key: task.id,
-      isSelected: task.id === (selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.id)
+      isSelected: task.id === selectedTask
     });
@@ -1572,14 +1565,18 @@ })), React__default.createElement("g", {
 
-  var _useState2 = React.useState(0),
-      scrollY = _useState2[0],
-      setScrollY = _useState2[1];
+  var _useState2 = React.useState(""),
+      selectedTask = _useState2[0],
+      setSelectedTask = _useState2[1];
 
   var _useState3 = React.useState(0),
-      scrollX = _useState3[0],
-      setScrollX = _useState3[1];
+      scrollY = _useState3[0],
+      setScrollY = _useState3[1];
 
-  var _useState4 = React.useState(false),
-      ignoreScrollEvent = _useState4[0],
-      setIgnoreScrollEvent = _useState4[1];
+  var _useState4 = React.useState(0),
+      scrollX = _useState4[0],
+      setScrollX = _useState4[1];
 
+  var _useState5 = React.useState(false),
+      ignoreScrollEvent = _useState5[0],
+      setIgnoreScrollEvent = _useState5[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1590,3 +1587,3 @@ startDate = _ganttDateRange[0],
   var dates = seedDates(startDate, endDate, viewMode);
-  var svgHeight = rowHeight * tasks.length;
+  var svgHeight = rowHeight * ganttTasks.length;
   var gridWidth = dates.length * columnWidth;
@@ -1697,2 +1694,36 @@ var ganttFullHeight = ganttTasks.length * rowHeight;
 
+  var handleSelectedTask = function handleSelectedTask(taskId) {
+    var newSelectedTask = ganttTasks.find(function (t) {
+      return t.id === taskId;
+    });
+
+    if (newSelectedTask) {
+      if (onSelect) {
+        var oldSelectedTask = ganttTasks.find(function (t) {
+          return t.id === selectedTask;
+        });
+
+        if (oldSelectedTask) {
+          onSelect(oldSelectedTask, false);
+        }
+
+        onSelect(newSelectedTask, true);
+      }
+
+      setSelectedTask(newSelectedTask.id);
+    } else {
+      if (onSelect) {
+        var _oldSelectedTask = ganttTasks.find(function (t) {
+          return t.id === selectedTask;
+        });
+
+        if (_oldSelectedTask) {
+          onSelect(_oldSelectedTask, false);
+        }
+      }
+
+      setSelectedTask("");
+    }
+  };
+
   var gridProps = {
@@ -1717,2 +1748,4 @@ columnWidth: columnWidth,
     tasks: ganttTasks,
+    selectedTask: selectedTask,
+    setSelectedTask: handleSelectedTask,
     rowHeight: rowHeight,
@@ -1739,3 +1772,2 @@ barCornerRadius: barCornerRadius,
     onTaskDelete: onTaskDelete,
-    onSelect: onSelect,
     TooltipContent: TooltipContent
@@ -1754,2 +1786,4 @@ };
     horizontalContainerClass: styles$4.horizontalContainer,
+    selectedTaskId: selectedTask,
+    setSelectedTask: setSelectedTask,
     TaskListHeader: TaskListHeader,
@@ -1756,0 +1790,0 @@ TaskListTable: TaskListTable

dist/index.modern.js

@@ -402,2 +402,4 @@ import React, { useRef, useState, useEffect } from 'react';
       tasks = _ref.tasks,
+      selectedTaskId = _ref.selectedTaskId,
+      setSelectedTask = _ref.setSelectedTask,
       locale = _ref.locale,
@@ -426,3 +428,5 @@ ganttHeight = _ref.ganttHeight,
     tasks: tasks,
-    locale: locale
+    locale: locale,
+    selectedTaskId: selectedTaskId,
+    setSelectedTask: setSelectedTask
   };
@@ -1140,2 +1144,3 @@ return React.createElement("div", null, React.createElement(TaskListHeader, Object.assign({}, headerProps)), React.createElement("div", {
       dates = _ref.dates,
+      selectedTask = _ref.selectedTask,
       rowHeight = _ref.rowHeight,
@@ -1157,2 +1162,3 @@ barCornerRadius = _ref.barCornerRadius,
       fontSize = _ref.fontSize,
+      setSelectedTask = _ref.setSelectedTask,
       onTasksChange = _ref.onTasksChange,
@@ -1163,3 +1169,2 @@ onDateChange = _ref.onDateChange,
       onTaskDelete = _ref.onTaskDelete,
-      onSelect = _ref.onSelect,
       TooltipContent = _ref.TooltipContent;
@@ -1179,21 +1184,17 @@ var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
   var _useState3 = useState(null),
-      selectedTask = _useState3[0],
-      setSelectedTask = _useState3[1];
+      failedTask = _useState3[0],
+      setFailedTask = _useState3[1];
 
-  var _useState4 = useState(null),
-      failedTask = _useState4[0],
-      setFailedTask = _useState4[1];
+  var _useState4 = useState(0),
+      xStep = _useState4[0],
+      setXStep = _useState4[1];
 
   var _useState5 = useState(0),
-      xStep = _useState5[0],
-      setXStep = _useState5[1];
+      initEventX1Delta = _useState5[0],
+      setInitEventX1Delta = _useState5[1];
 
-  var _useState6 = useState(0),
-      initEventX1Delta = _useState6[0],
-      setInitEventX1Delta = _useState6[1];
+  var _useState6 = useState(false),
+      isMoving = _useState6[0],
+      setIsMoving = _useState6[1];
 
-  var _useState7 = useState(false),
-      isMoving = _useState7[0],
-      setIsMoving = _useState7[1];
-
   useEffect(function () {
@@ -1331,11 +1332,3 @@ var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
           if (action === "select") {
-            if (selectedTask && onSelect) {
-              onSelect(selectedTask, false);
-            }
-
-            setSelectedTask(task);
-
-            if (onSelect) {
-              onSelect(task, true);
-            }
+            setSelectedTask(task.id);
           }
@@ -1355,3 +1348,3 @@ } else return function () {
                             onTasksChange(newTasks);
-                            !!onSelect && onSelect(task, false);
+                            setSelectedTask("");
                           }
@@ -1443,3 +1436,3 @@ });
       key: task.id,
-      isSelected: task.id === (selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.id)
+      isSelected: task.id === selectedTask
     });
@@ -1571,14 +1564,18 @@ })), React.createElement("g", {
 
-  var _useState2 = useState(0),
-      scrollY = _useState2[0],
-      setScrollY = _useState2[1];
+  var _useState2 = useState(""),
+      selectedTask = _useState2[0],
+      setSelectedTask = _useState2[1];
 
   var _useState3 = useState(0),
-      scrollX = _useState3[0],
-      setScrollX = _useState3[1];
+      scrollY = _useState3[0],
+      setScrollY = _useState3[1];
 
-  var _useState4 = useState(false),
-      ignoreScrollEvent = _useState4[0],
-      setIgnoreScrollEvent = _useState4[1];
+  var _useState4 = useState(0),
+      scrollX = _useState4[0],
+      setScrollX = _useState4[1];
 
+  var _useState5 = useState(false),
+      ignoreScrollEvent = _useState5[0],
+      setIgnoreScrollEvent = _useState5[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1589,3 +1586,3 @@ startDate = _ganttDateRange[0],
   var dates = seedDates(startDate, endDate, viewMode);
-  var svgHeight = rowHeight * tasks.length;
+  var svgHeight = rowHeight * ganttTasks.length;
   var gridWidth = dates.length * columnWidth;
@@ -1696,2 +1693,36 @@ var ganttFullHeight = ganttTasks.length * rowHeight;
 
+  var handleSelectedTask = function handleSelectedTask(taskId) {
+    var newSelectedTask = ganttTasks.find(function (t) {
+      return t.id === taskId;
+    });
+
+    if (newSelectedTask) {
+      if (onSelect) {
+        var oldSelectedTask = ganttTasks.find(function (t) {
+          return t.id === selectedTask;
+        });
+
+        if (oldSelectedTask) {
+          onSelect(oldSelectedTask, false);
+        }
+
+        onSelect(newSelectedTask, true);
+      }
+
+      setSelectedTask(newSelectedTask.id);
+    } else {
+      if (onSelect) {
+        var _oldSelectedTask = ganttTasks.find(function (t) {
+          return t.id === selectedTask;
+        });
+
+        if (_oldSelectedTask) {
+          onSelect(_oldSelectedTask, false);
+        }
+      }
+
+      setSelectedTask("");
+    }
+  };
+
   var gridProps = {
@@ -1716,2 +1747,4 @@ columnWidth: columnWidth,
     tasks: ganttTasks,
+    selectedTask: selectedTask,
+    setSelectedTask: handleSelectedTask,
     rowHeight: rowHeight,
@@ -1738,3 +1771,2 @@ barCornerRadius: barCornerRadius,
     onTaskDelete: onTaskDelete,
-    onSelect: onSelect,
     TooltipContent: TooltipContent
@@ -1753,2 +1785,4 @@ };
     horizontalContainerClass: styles$4.horizontalContainer,
+    selectedTaskId: selectedTask,
+    setSelectedTask: setSelectedTask,
     TaskListHeader: TaskListHeader,
@@ -1755,0 +1789,0 @@ TaskListTable: TaskListTable

dist/types/public-types.d.ts

@@ -101,2 +101,7 @@ /// <reference types="react" />
         tasks: Task[];
+        selectedTaskId: string;
+        /**
+         * Sets selected task by id
+         */
+        setSelectedTask: (taskId: string) => void;
     }>;
@@ -103,0 +108,0 @@ }

package.json

 {
   "name": "gantt-task-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Interactive Gantt Chart for React with TypeScript.",
@@ -5,0 +5,0 @@ "author": "MaTeMaTuK <[e-mail]>",

README.md

@@ -115,3 +115,3 @@ # gantt-task-react
 - 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[]; }>;`
+- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;`
 
@@ -118,0 +118,0 @@ ### Task

No alert changes

Improved metrics

Total package byte prevSize

435352

increased by1.49%

Lines of code

3778

increased by1.92%

No dependency changes