Merge pull request #9 from MaTeMaTuK/dev

new version update
MaTeMaTuK · May 17, 2021 · ad2f242 · ad2f242
2 parents 605b7fc e4a2cc0
commit ad2f242
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 140 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 1,6 @@
 {
  "name": "gantt-task-react",
- "version": "0.3.1",
  "version": "0.3.2",
  "description": "Interactive Gantt Chart for React with TypeScript.",
  "author": "MaTeMaTuK <[email protected]>",
  "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

diff --git a/src/components/gantt/gantt.module.css b/src/components/gantt/gantt.module.css
@@ -17,4 17,5 @@
  margin: 0;
  list-style: none;
  outline: none;
  position: relative;
 }
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
@@ -6,7 6,7 @@ import { CalendarProps } from "../calendar/calendar";
 import { TaskGanttContentProps } from "./task-gantt-content";
 import { TaskListHeaderDefault } from "../task-list/task-list-header";
 import { TaskListTableDefault } from "../task-list/task-list-table";
-import { StandardTooltipContent } from "../other/tooltip";
 import { StandardTooltipContent, Tooltip } from "../other/tooltip";
 import { VerticalScroll } from "../other/vertical-scroll";
 import { TaskListProps, TaskList } from "../task-list/task-list";
 import { TaskGantt } from "./task-gantt";
@@ -56,14 56,15 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 }) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const taskListRef = useRef<HTMLDivElement>(null);
- const verticalGanttContainerRef = useRef<HTMLDivElement>(null);
  const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
  const [startDate, endDate] = ganttDateRange(tasks, viewMode);
  return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
  });
 
  const [taskHeight, setTaskHeight] = useState((rowHeight * barFill) / 100);
  const [taskListWidth, setTaskListWidth] = useState(0);
  const [svgContainerWidth, setSvgContainerWidth] = useState(0);
  const [svgContainerHeight, setSvgContainerHeight] = useState(ganttHeight);
  const [barTasks, setBarTasks] = useState<BarTask[]>([]);
  const [ganttEvent, setGanttEvent] = useState<GanttEvent>({
  action: "",
@@ -76,7 77,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
  const [scrollX, setScrollX] = useState(0);
  const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
 
- const svgHeight = rowHeight * barTasks.length;
  const svgWidth = dateSetup.dates.length * columnWidth;
  const ganttFullHeight = barTasks.length * rowHeight;
 
@@ -170,10 170,27 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
  }, [rowHeight, barFill, taskHeight]);
 
  useEffect(() => {
  if (!listCellWidth) {
  setTaskListWidth(0);
  }
  if (taskListRef.current) {
  setTaskListWidth(taskListRef.current.offsetWidth);
  }
- }, [taskListRef]);
  }, [taskListRef, listCellWidth]);
 
  useEffect(() => {
  if (wrapperRef.current) {
  setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
  }
  }, [wrapperRef, taskListWidth]);
 
  useEffect(() => {
  if (ganttHeight) {
  setSvgContainerHeight(ganttHeight   headerHeight);
  } else {
  setSvgContainerHeight(tasks.length * rowHeight   headerHeight);
  }
  }, [ganttHeight, tasks]);
 
  // scroll events
  useEffect(() => {
@@ -326,7 343,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
  fontFamily,
  fontSize,
  arrowIndent,
- svgHeight,
  svgWidth,
  setGanttEvent,
  setFailedTask,
@@ -335,7 351,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
  onProgressChange,
  onDoubleClick,
  onDelete,
- TooltipContent,
  };
 
  const tableProps: TaskListProps = {
@@ -371,8 386,23 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
  ganttHeight={ganttHeight}
  scrollY={scrollY}
  scrollX={scrollX}
- verticalGanttContainerRef={verticalGanttContainerRef}
  />
  {ganttEvent.changedTask && (
  <Tooltip
  arrowIndent={arrowIndent}
  rowHeight={rowHeight}
  svgContainerHeight={svgContainerHeight}
  svgContainerWidth={svgContainerWidth}
  fontFamily={fontFamily}
  fontSize={fontSize}
  scrollX={scrollX}
  scrollY={scrollY}
  task={ganttEvent.changedTask}
  headerHeight={headerHeight}
  taskListWidth={taskListWidth}
  TooltipContent={TooltipContent}
  />
  )}
  <VerticalScroll
  ganttFullHeight={ganttFullHeight}
  ganttHeight={ganttHeight}

diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx
@@ -1,9 1,8 @@
 import React, { useEffect, useState } from "react";
-import { Task, EventOption } from "../../types/public-types";
 import { EventOption } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
 import { Arrow } from "../other/arrow";
 import { handleTaskBySVGMouseEvent } from "../../helpers/bar-helper";
-import { Tooltip } from "../other/tooltip";
 import { isKeyboardEvent } from "../../helpers/other-helper";
 import { TaskItem } from "../task-item/task-item";
 import {
@@ -21,12 20,7 @@ export type TaskGanttContentProps = {
  columnWidth: number;
  timeStep: number;
  svg?: React.RefObject<SVGSVGElement>;
- svgHeight: number;
  svgWidth: number;
- displayXStartEndpoint?: {
- start: number;
- end: number;
- };
  taskHeight: number;
  arrowColor: string;
  arrowIndent: number;
@@ -35,11 29,6 @@ export type TaskGanttContentProps = {
  setGanttEvent: (value: GanttEvent) => void;
  setFailedTask: (value: BarTask | null) => void;
  setSelectedTask: (taskId: string) => void;
- TooltipContent: React.FC<{
- task: Task;
- fontSize: string;
- fontFamily: string;
- }>;
 } & EventOption;
 
 export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
@@ -51,8 40,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
  columnWidth,
  timeStep,
  svg,
- svgHeight,
- displayXStartEndpoint,
  taskHeight,
  arrowColor,
  arrowIndent,
@@ -65,7 52,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
  onProgressChange,
  onDoubleClick,
  onDelete,
- TooltipContent,
 }) => {
  const point = svg?.current?.createSVGPoint();
  const [xStep, setXStep] = useState(0);
@@ -292,20 278,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
  );
  })}
  </g>
- <g className="toolTip">
- {ganttEvent.changedTask && displayXStartEndpoint && (
- <Tooltip
- arrowIndent={arrowIndent}
- rowHeight={rowHeight}
- svgHeight={svgHeight}
- displayXStartEndpoint={displayXStartEndpoint}
- task={ganttEvent.changedTask}
- fontFamily={fontFamily}
- fontSize={fontSize}
- TooltipContent={TooltipContent}
- />
- )}
- </g>
  </g>
  );
 };
diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx
@@ -1,4 1,4 @@
-import React, { useRef, useEffect, useState } from "react";
 import React, { useRef, useEffect } from "react";
 import { GridProps, Grid } from "../grid/grid";
 import { CalendarProps, Calendar } from "../calendar/calendar";
 import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
@@ -11,7 11,6 @@ export type TaskGanttProps = {
  ganttHeight: number;
  scrollY: number;
  scrollX: number;
- verticalGanttContainerRef: React.RefObject<HTMLDivElement>;
 };
 export const TaskGantt: React.FC<TaskGanttProps> = ({
  gridProps,
@@ -20,15 19,11 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
  ganttHeight,
  scrollY,
  scrollX,
- verticalGanttContainerRef,
 }) => {
  const ganttSVGRef = useRef<SVGSVGElement>(null);
  const horizontalContainerRef = useRef<HTMLDivElement>(null);
- const [displayXStartEndpoint, setDisplayXStartEndpoint] = useState({
- start: 0,
- end: 0,
- });
- const newBarProps = { ...barProps, svg: ganttSVGRef, displayXStartEndpoint };
  const verticalGanttContainerRef = useRef<HTMLDivElement>(null);
  const newBarProps = { ...barProps, svg: ganttSVGRef };
 
  useEffect(() => {
  if (horizontalContainerRef.current) {
@@ -39,13 34,8 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
  useEffect(() => {
  if (verticalGanttContainerRef.current) {
  verticalGanttContainerRef.current.scrollLeft = scrollX;
- setDisplayXStartEndpoint({
- start: scrollX,
- end: verticalGanttContainerRef.current.clientWidth   scrollX,
- });
  }
- // verticalContainerRef.current?.clientWidth need for resize window tracking
- }, [scrollX, verticalGanttContainerRef.current?.clientWidth]);
  }, [scrollX]);
 
  return (
  <div

diff --git a/src/components/other/tooltip.module.css b/src/components/other/tooltip.module.css
@@ -11,5 11,20 @@
 }
 
 .tooltipDetailsContainer {
- display: table;
  position: absolute;
  display: flex;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
 
 .tooltipDetailsContainerHidden {
  visibility: hidden;
  position: absolute;
  display: flex;
  pointer-events: none;
 }