small bar init

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

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  progressWithByParams,
+  getProgressPoint,
+} from "../../../helpers/bar-helper";
+import { BarDisplay } from "./bar-display";
+import { BarProgressHandle } from "./bar-progress-handle";
+import { TaskItemProps } from "../task-item";
+import styles from "./bar.module.css";
+
+export const BarSmall: React.FC<TaskItemProps> = ({
+  task,
+  isProgressChangeable,
+  isDateChangeable,
+  onEventStart,
+  isSelected,
+}) => {
+  const progressWidth = progressWithByParams(task.x1, task.x2, task.progress);
+  const progressPoint = getProgressPoint(
+    progressWidth + task.x1,
+    task.y,
+    task.height
+  );
+  return (
+    <g className={styles.barWrapper} tabIndex={0}>
+      <BarDisplay
+        x={task.x1}
+        y={task.y}
+        width={task.x2 - task.x1}
+        height={task.height}
+        progressWidth={progressWidth}
+        barCornerRadius={task.barCornerRadius}
+        styles={task.styles}
+        isSelected={isSelected}
+        onMouseDown={e => {
+          isDateChangeable && onEventStart("move", task, e);
+        }}
+      />
+      <g className="handleGroup">
+        {isProgressChangeable && (
+          <BarProgressHandle
+            progressPoint={progressPoint}
+            onMouseDown={e => {
+              onEventStart("progress", task, e);
+            }}
+          />
+        )}
+      </g>
+    </g>
+  );
+};

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { BarTask } from "../../types/bar-task";
 import { GanttContentMoveAction } from "../../types/gantt-task-actions";
 import { Bar } from "./bar/bar";
+import { BarSmall } from "./bar/bar-small";
 import { Milestone } from "./milestone/milestone";
 import { Project } from "./project/project";
 import style from "./task-list.module.css";
@@ -37,13 +38,16 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
   const [isTextInside, setIsTextInside] = useState(true);
 
   useEffect(() => {
-    switch (task.type) {
+    switch (task.typeInternal) {
       case "milestone":
         setTaskItem(<Milestone {...props} />);
         break;
       case "project":
         setTaskItem(<Project {...props} />);
         break;
+      case "smalltask":
+        setTaskItem(<BarSmall {...props} />);
+        break;
       default:
         setTaskItem(<Bar {...props} />);
         break;

src/helpers/bar-helper.ts

@@ -1,5 +1,5 @@
 import { Task } from "../types/public-types";
-import { BarTask } from "../types/bar-task";
+import { BarTask, TaskTypeInternal } from "../types/bar-task";
 import { BarMoveAction } from "../types/gantt-task-actions";
 
 export const convertToBarTasks = (
@@ -158,7 +158,7 @@ const convertToBar = (
 ): BarTask => {
   debugger;
   const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
-  const x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
+  let x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
   const y = taskYCoordinate(index, rowHeight, taskHeight);
 
   const styles = {
@@ -168,8 +168,14 @@ const convertToBar = (
     progressSelectedColor: barProgressSelectedColor,
     ...task.styles,
   };
+  let typeInternal: TaskTypeInternal = task.type;
+  if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
+    typeInternal = "smalltask";
+    x2 = x1 + handleWidth * 2;
+  }
   return {
     ...task,
+    typeInternal,
     x1,
     x2,
     y,
@@ -218,6 +224,7 @@ const convertToMilestone = (
     index,
     barCornerRadius,
     handleWidth,
+    typeInternal: task.type,
     progress: 0,
     height: rotatedHeight,
     barChildren: [],

src/types/bar-task.ts

@@ -1,7 +1,8 @@
-import { Task } from "./public-types";
+import { Task, TaskType } from "./public-types";
 
 export interface BarTask extends Task {
   index: number;
+  typeInternal: TaskTypeInternal;
   x1: number;
   x2: number;
   y: number;
@@ -16,3 +17,5 @@ export interface BarTask extends Task {
     progressSelectedColor: string;
   };
 }
+
+export type TaskTypeInternal = TaskType | "smalltask";