Merge pull request #5 from AquilesOliveiraDev/feature/allow-project-date-change

Add project date change option

Author: AquilesOliveiraDev

README.md

@@ -79,6 +79,7 @@ npm start
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
 | onExpanderClick\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |
 | timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
+| allowProjectDateChange           | boolean                                                                        | Allows change of project date
 
 \* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
 

src/components/gantt/gantt.tsx

@@ -70,6 +70,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onDelete,
   onSelect,
   onExpanderClick,
+  allowProjectDateChange,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
@@ -436,6 +437,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onClick,
     onClickLine,
     onDelete,
+    allowProjectDateChange
   };
 
   const tableProps: TaskListProps = {

src/components/gantt/task-gantt-content.tsx

@@ -56,6 +56,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onClick,
   onClickLine,
   onDelete,
+  allowProjectDateChange,
 }) => {
   const point = svg?.current?.createSVGPoint();
   const [xStep, setXStep] = useState(0);
@@ -285,6 +286,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         {tasks.map(task => {
           return (
             <TaskItem
+              allowProjectDateChange={allowProjectDateChange}
               task={task}
               arrowIndent={arrowIndent}
               taskHeight={taskHeight}

src/components/task-item/project/project.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TaskItemProps } from "../task-item";
 import styles from "./project.module.css";
 
-export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
+export const Project: React.FC<TaskItemProps> = ({ task, isSelected, onMouseDown }) => {
   const barColor = isSelected
     ? task.styles.backgroundSelectedColor
     : task.styles.backgroundColor;
@@ -29,7 +29,7 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
   ].join(",");
 
   return (
-    <g tabIndex={0} className={styles.projectWrapper}>
+    <g onMouseDown={onMouseDown} tabIndex={0} className={styles.projectWrapper}>
       <rect
         fill={barColor}
         x={task.x1}

src/components/task-item/task-item.tsx

@@ -16,11 +16,13 @@ export type TaskItemProps = {
   isDelete: boolean;
   isSelected: boolean;
   rtl: boolean;
+  allowProjectDateChange?: boolean;
   onEventStart: (
     action: GanttContentMoveAction,
     selectedTask: BarTask,
     event?: React.MouseEvent | React.KeyboardEvent
   ) => any;
+  onMouseDown?: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
 };
 
 export const TaskItem: React.FC<TaskItemProps> = props => {
@@ -30,7 +32,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
     isDelete,
     taskHeight,
     isSelected,
+    isDateChangeable,
     rtl,
+    allowProjectDateChange,
     onEventStart,
   } = {
     ...props,
@@ -45,7 +49,9 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
         setTaskItem(<Milestone {...props} />);
         break;
       case "project":
-        setTaskItem(<Project {...props} />);
+        setTaskItem(<Project  onMouseDown={e => 
+          isDateChangeable && allowProjectDateChange && onEventStart("move", task, e)
+        } {...props} />);
         break;
       case "smalltask":
         setTaskItem(<BarSmall {...props} />);

src/types/public-types.ts

@@ -83,6 +83,10 @@ export interface EventOption {
    * Invokes on expander on task list
    */
   onExpanderClick?: (task: Task) => void;
+  /**
+   * Allow project date change
+   */
+  allowProjectDateChange?: boolean;
 }
 
 export interface DisplayOption {