hide related feature

README.md

@@ -135,6 +135,7 @@ npm start
 | 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.                                                                                  |
 
 \*Required
 

example/package-lock.json

@@ -104,9 +104,9 @@
           }
         },
         "@types/node": {
-          "version": "16.4.10",
+          "version": "16.4.13",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.10.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
-          "integrity": "sha512-TmVHsm43br64js9BqHWqiDZA+xMtbUpI1MBIA0EyiBmoV9pcEYFOSdj5fr6enZNfh4fChh+AGOLIzGwJnkshyQ=="
+          "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg=="
         },
         "@types/testing-library__jest-dom": {
           "version": "5.14.1",
@@ -179,9 +179,9 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "core-js-pure": {
-          "version": "3.16.0",
+          "version": "3.16.1",
-          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.0.tgz",
+          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.1.tgz",
-          "integrity": "sha512-wzlhZNepF/QA9yvx3ePDgNGudU5KDB8lu/TRPKelYA/QtSnkS/cLl2W+TIdEX1FAFcBr0YpY7tPDlcmXJ7AyiQ=="
+          "integrity": "sha512-TyofCdMzx0KMhi84mVRS8rL1XsRk2SPUNz2azmth53iRN0/08Uim9fdhQTaZTG1LqaXHYVci4RDHka6WrXfnvg=="
         },
         "css": {
           "version": "3.0.0",
@@ -436,9 +436,9 @@
           }
         },
         "@types/node": {
-          "version": "16.4.10",
+          "version": "16.4.13",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.10.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
-          "integrity": "sha512-TmVHsm43br64js9BqHWqiDZA+xMtbUpI1MBIA0EyiBmoV9pcEYFOSdj5fr6enZNfh4fChh+AGOLIzGwJnkshyQ=="
+          "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg=="
         },
         "@types/yargs": {
           "version": "15.0.14",
@@ -534,14 +534,14 @@
           "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
         "core-js-pure": {
-          "version": "3.16.0",
+          "version": "3.16.1",
-          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.0.tgz",
+          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.1.tgz",
-          "integrity": "sha512-wzlhZNepF/QA9yvx3ePDgNGudU5KDB8lu/TRPKelYA/QtSnkS/cLl2W+TIdEX1FAFcBr0YpY7tPDlcmXJ7AyiQ=="
+          "integrity": "sha512-TyofCdMzx0KMhi84mVRS8rL1XsRk2SPUNz2azmth53iRN0/08Uim9fdhQTaZTG1LqaXHYVci4RDHka6WrXfnvg=="
         },
         "dom-accessibility-api": {
-          "version": "0.5.6",
+          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz",
+          "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz",
-          "integrity": "sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw=="
+          "integrity": "sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA=="
         },
         "escape-string-regexp": {
           "version": "1.0.5",
@@ -681,9 +681,9 @@
           }
         },
         "@types/node": {
-          "version": "16.4.10",
+          "version": "16.4.13",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.10.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
-          "integrity": "sha512-TmVHsm43br64js9BqHWqiDZA+xMtbUpI1MBIA0EyiBmoV9pcEYFOSdj5fr6enZNfh4fChh+AGOLIzGwJnkshyQ=="
+          "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg=="
         },
         "@types/yargs": {
           "version": "15.0.14",
@@ -828,9 +828,9 @@
           "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
         },
         "@types/react": {
-          "version": "17.0.15",
+          "version": "17.0.16",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.16.tgz",
-          "integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
+          "integrity": "sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==",
           "requires": {
             "@types/prop-types": "*",
             "@types/scheduler": "*",

example/src/App.tsx

@@ -16,7 +16,7 @@ const App = () => {
     columnWidth = 250;
   }
 
-  const onTaskChange = (task: Task) => {
+  const handleTaskChange = (task: Task) => {
     console.log("On date change Id:" + task.id);
     let newTasks = tasks.map(t => (t.id === task.id ? task : t));
     if (task.project) {
@@ -35,7 +35,7 @@ const App = () => {
     setTasks(newTasks);
   };
 
-  const onTaskDelete = (task: Task) => {
+  const handleTaskDelete = (task: Task) => {
     const conf = window.confirm("Are you sure about " + task.name + " ?");
     if (conf) {
       setTasks(tasks.filter(t => t.id !== task.id));
@@ -43,19 +43,24 @@ const App = () => {
     return conf;
   };
 
-  const onProgressChange = async (task: Task) => {
+  const handleProgressChange = async (task: Task) => {
     setTasks(tasks.map(t => (t.id === task.id ? task : t)));
     console.log("On progress change Id:" + task.id);
   };
 
-  const onDblClick = (task: Task) => {
+  const handleDblClick = (task: Task) => {
     alert("On Double Click event Id:" + task.id);
   };
 
-  const onSelect = (task: Task, isSelected: boolean) => {
+  const handleSelect = (task: Task, isSelected: boolean) => {
     console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
   };
 
+  const handleExpanderClick = (task: Task) => {
+    setTasks(tasks.map(t => (t.id === task.id ? task : t)));
+    console.log("On expander click Id:" + task.id);
+  };
+
   return (
     <div>
       <ViewSwitcher
@@ -67,11 +72,12 @@ const App = () => {
       <Gantt
         tasks={tasks}
         viewMode={view}
-        onDateChange={onTaskChange}
+        onDateChange={handleTaskChange}
-        onDelete={onTaskDelete}
+        onDelete={handleTaskDelete}
-        onProgressChange={onProgressChange}
+        onProgressChange={handleProgressChange}
-        onDoubleClick={onDblClick}
+        onDoubleClick={handleDblClick}
-        onSelect={onSelect}
+        onSelect={handleSelect}
+        onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
       />
@@ -79,11 +85,12 @@ const App = () => {
       <Gantt
         tasks={tasks}
         viewMode={view}
-        onDateChange={onTaskChange}
+        onDateChange={handleTaskChange}
-        onDelete={onTaskDelete}
+        onDelete={handleTaskDelete}
-        onProgressChange={onProgressChange}
+        onProgressChange={handleProgressChange}
-        onDoubleClick={onDblClick}
+        onDoubleClick={handleDblClick}
-        onSelect={onSelect}
+        onSelect={handleSelect}
+        onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         ganttHeight={300}
         columnWidth={columnWidth}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/gantt/gantt.tsx

@@ -1,5 +1,5 @@
 import React, { useState, SyntheticEvent, useRef, useEffect } from "react";
-import { ViewMode, GanttProps } from "../../types/public-types";
+import { ViewMode, GanttProps, Task } from "../../types/public-types";
 import { GridProps } from "../grid/grid";
 import { ganttDateRange, seedDates } from "../../helpers/date-helper";
 import { CalendarProps } from "../calendar/calendar";
@@ -16,6 +16,7 @@ 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 } from "../../helpers/other-helper";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -54,6 +55,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDoubleClick,
   onDelete,
   onSelect,
+  onExpanderClick,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
@@ -83,7 +85,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   // task change events
   useEffect(() => {
-    const [startDate, endDate] = ganttDateRange(tasks, viewMode);
+    const filteredTasks = removeHiddenTasks(tasks);
+    const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
       newDates = newDates.reverse();
@@ -94,7 +97,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     setDateSetup({ dates: newDates, viewMode });
     setBarTasks(
       convertToBarTasks(
-        tasks,
+        filteredTasks,
         newDates,
         columnWidth,
         rowHeight,
@@ -322,7 +325,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
     setSelectedTask(newSelectedTask);
   };
-
+  const handleExpanderClick = (task: Task) => {
+    if (onExpanderClick && task.hideChildren !== undefined) {
+      onExpanderClick({ ...task, hideChildren: !task.hideChildren });
+    }
+  };
   const gridProps: GridProps = {
     columnWidth,
     svgWidth,
@@ -380,6 +387,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     selectedTask,
     taskListRef,
     setSelectedTask: handleSelectedTask,
+    onExpanderClick: handleExpanderClick,
     TaskListHeader,
     TaskListTable,
   };

src/components/task-list/task-list-table.module.css

@@ -20,3 +20,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.taskListNameWrapper {
+  display: flex;
+}
+
+.taskListExpander {
+  color: rgb(86 86 86);
+  font-size: 0.6rem;
+  padding: 0.15rem 0.2rem 0rem 0.2rem;
+  user-select: none;
+  cursor: pointer;
+}
+.taskListEmptyExpander {
+  font-size: 0.6rem;
+  padding-left: 1rem;
+  user-select: none;
+}

src/components/task-list/task-list-table.tsx

@@ -11,7 +11,16 @@ export const TaskListTableDefault: React.FC<{
   tasks: Task[];
   selectedTaskId: string;
   setSelectedTask: (taskId: string) => void;
-}> = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, locale }) => {
+  onExpanderClick: (task: Task) => void;
+}> = ({
+  rowHeight,
+  rowWidth,
+  tasks,
+  fontFamily,
+  fontSize,
+  locale,
+  onExpanderClick,
+}) => {
   const dateTimeOptions: Intl.DateTimeFormatOptions = {
     weekday: "short",
     year: "numeric",
@@ -27,6 +36,13 @@ export const TaskListTableDefault: React.FC<{
       }}
     >
       {tasks.map(t => {
+        let expanderSymbol = "";
+        if (t.hideChildren === false) {
+          expanderSymbol = "▼";
+        } else if (t.hideChildren === true) {
+          expanderSymbol = "▶";
+        }
+
         return (
           <div
             className={styles.taskListTableRow}
@@ -41,7 +57,19 @@ export const TaskListTableDefault: React.FC<{
               }}
               title={t.name}
             >
-              &nbsp;{t.name}
+              <div className={styles.taskListNameWrapper}>
+                <div
+                  className={
+                    expanderSymbol
+                      ? styles.taskListExpander
+                      : styles.taskListEmptyExpander
+                  }
+                  onClick={() => onExpanderClick(t)}
+                >
+                  {expanderSymbol}
+                </div>
+                <div>{t.name}</div>
+              </div>
             </div>
             <div
               className={styles.taskListCell}

src/components/task-list/task-list.tsx

@@ -16,6 +16,7 @@ export type TaskListProps = {
   horizontalContainerClass?: string;
   selectedTask: BarTask | undefined;
   setSelectedTask: (task: string) => void;
+  onExpanderClick: (task: Task) => void;
   TaskListHeader: React.FC<{
     headerHeight: number;
     rowWidth: string;
@@ -31,6 +32,7 @@ export type TaskListProps = {
     tasks: Task[];
     selectedTaskId: string;
     setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
   }>;
 };
 
@@ -44,6 +46,7 @@ export const TaskList: React.FC<TaskListProps> = ({
   tasks,
   selectedTask,
   setSelectedTask,
+  onExpanderClick,
   locale,
   ganttHeight,
   taskListRef,
@@ -74,6 +77,7 @@ export const TaskList: React.FC<TaskListProps> = ({
     locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask,
+    onExpanderClick,
   };
 
   return (

src/helpers/bar-helper.ts

@@ -63,6 +63,19 @@ export const convertToBarTasks = (
     }
     return task;
   });
+  // normalize flags for hideChildren
+  barTasks = barTasks.map(task => {
+    if (task.barChildren.length > 0) {
+      if (!task.hideChildren) {
+        task.hideChildren = false;
+      }
+    } else if (!task.hideChildren && task.type === "project") {
+      task.hideChildren = false;
+    } else if (!task.hideChildren) {
+      task.hideChildren = undefined;
+    }
+    return task;
+  });
 
   return barTasks;
 };

src/helpers/other-helper.ts

@@ -16,3 +16,33 @@ export function isMouseEvent(
 export function isBarTask(task: Task | BarTask): task is BarTask {
   return (task as BarTask).x1 !== undefined;
 }
+
+export function removeHiddenTasks(tasks: Task[]) {
+  const groupedTasks = tasks.filter(t => t.hideChildren);
+  if (groupedTasks.length > 0) {
+    for (let i = 0; groupedTasks.length > i; i++) {
+      const groupedTask = groupedTasks[i];
+      const children = getChildren(tasks, groupedTask);
+      tasks = tasks.filter(t => children.indexOf(t) === -1);
+    }
+  }
+  return tasks;
+}
+
+function getChildren(taskList: Task[], task: Task) {
+  let tasks: Task[] = [];
+  if (task.type !== "project") {
+    tasks = taskList.filter(
+      t => t.dependencies && t.dependencies.indexOf(task.id) !== -1
+    );
+  } else {
+    tasks = taskList.filter(t => t.project && t.project === task.id);
+  }
+  const taskChildren = tasks.reduce(
+    (children: Task[], t) =>
+      children.concat(children, getChildren(taskList, t)),
+    []
+  );
+  tasks = tasks.concat(tasks, taskChildren);
+  return tasks;
+}

src/helpers/reducer.ts

@@ -1,26 +0,0 @@
-export function foo() {
-  return 1;
-}
-// import { BarTask } from "../types/bar-task";
-// export type TaskListAction =
-//   | { type: GanttContentMoveAction; task: BarTask }
-//   | { type: "update"; tasks: BarTask[] };
-
-// export type TaskListState = {
-//   tasks: BarTask[];
-//   changedTask?: BarTask;
-//   originalTask?: BarTask;
-//   selectedTask?: BarTask;
-//   activeAction: GanttContentMoveAction;
-// };
-
-// export function taskListReducer(state: TaskListState, action: TaskListAction) {
-//   switch (action.type) {
-//     case "update":
-//       return { ...state, tasks: action.tasks };
-//     case "select":
-//       return { ...state, selectedTask: action.task };
-//     default:
-//       return state;
-//   }
-// }

src/types/public-types.ts

@@ -26,6 +26,7 @@ export interface Task {
   isDisabled?: boolean;
   project?: string;
   dependencies?: string[];
+  hideChildren?: boolean;
 }
 
 export interface EventOption {
@@ -57,6 +58,10 @@ export interface EventOption {
    * Invokes on delete selected task. Chart undoes operation if method return false or error.
    */
   onDelete?: (task: Task) => void | boolean | Promise<void> | Promise<boolean>;
+  /**
+   * Invokes on expander on task list
+   */
+  onExpanderClick?: (task: Task) => void;
 }
 
 export interface DisplayOption {
@@ -119,6 +124,7 @@ export interface StylingOption {
      * Sets selected task by id
      */
     setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
   }>;
 }