Skip to content

Commit

Permalink
Merge pull request #16 from MaTeMaTuK/dev
Browse files Browse the repository at this point in the history
hide related feature
  • Loading branch information
MaTeMaTuK authored Aug 9, 2021
2 parents b316776 + 49c013f commit dfccce4
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 69 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
42 changes: 21 additions & 21 deletions example/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 22 additions & 15 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -35,27 +35,32 @@ 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));
}
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
Expand All @@ -67,23 +72,25 @@ const App = () => {
<Gantt
tasks={tasks}
viewMode={view}
onDateChange={onTaskChange}
onDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
onSelect={onSelect}
onDateChange={handleTaskChange}
onDelete={handleTaskDelete}
onProgressChange={handleProgressChange}
onDoubleClick={handleDblClick}
onSelect={handleSelect}
onExpanderClick={handleExpanderClick}
listCellWidth={isChecked ? "155px" : ""}
columnWidth={columnWidth}
/>
<h3>Gantt With Limited Height</h3>
<Gantt
tasks={tasks}
viewMode={view}
onDateChange={onTaskChange}
onDelete={onTaskDelete}
onProgressChange={onProgressChange}
onDoubleClick={onDblClick}
onSelect={onSelect}
onDateChange={handleTaskChange}
onDelete={handleTaskDelete}
onProgressChange={handleProgressChange}
onDoubleClick={handleDblClick}
onSelect={handleSelect}
onExpanderClick={handleExpanderClick}
listCellWidth={isChecked ? "155px" : ""}
ganttHeight={300}
columnWidth={columnWidth}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
16 changes: 12 additions & 4 deletions src/components/gantt/gantt.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -54,6 +55,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
onDoubleClick,
onDelete,
onSelect,
onExpanderClick,
}) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const taskListRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -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();
Expand All @@ -94,7 +97,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
setDateSetup({ dates: newDates, viewMode });
setBarTasks(
convertToBarTasks(
tasks,
filteredTasks,
newDates,
columnWidth,
rowHeight,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -380,6 +387,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
selectedTask,
taskListRef,
setSelectedTask: handleSelectedTask,
onExpanderClick: handleExpanderClick,
TaskListHeader,
TaskListTable,
};
Expand Down
16 changes: 16 additions & 0 deletions src/components/task-list/task-list-table.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
32 changes: 30 additions & 2 deletions src/components/task-list/task-list-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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}
Expand All @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions src/components/task-list/task-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -31,6 +32,7 @@ export type TaskListProps = {
tasks: Task[];
selectedTaskId: string;
setSelectedTask: (taskId: string) => void;
onExpanderClick: (task: Task) => void;
}>;
};

Expand All @@ -44,6 +46,7 @@ export const TaskList: React.FC<TaskListProps> = ({
tasks,
selectedTask,
setSelectedTask,
onExpanderClick,
locale,
ganttHeight,
taskListRef,
Expand Down Expand Up @@ -74,6 +77,7 @@ export const TaskList: React.FC<TaskListProps> = ({
locale,
selectedTaskId: selectedTaskId,
setSelectedTask,
onExpanderClick,
};

return (
Expand Down
13 changes: 13 additions & 0 deletions src/helpers/bar-helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down
Loading

0 comments on commit dfccce4

Please sign in to comment.