gantt-task-react-powern 0.3.11 → 0.4.0

package/dist/components/task-item/bar/bar-display.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 declare type BarDisplayProps = {
     x: number;
     y: number;
+    actualX1: number;
+    actualX2: number;
+    startProgressWidth: number;
+    endProgressWidth: number;
     width: number;
     height: number;
     isSelected: boolean;
@@ -9,6 +13,7 @@ declare type BarDisplayProps = {
     progressWidth: number;
     barCornerRadius: number;
     styles: {
+        taskProgressColor?: string;
         backgroundColor: string;
         backgroundSelectedColor: string;
         progressColor: string;

package/dist/components/task-list/task-list-table.d.ts

@@ -10,4 +10,5 @@ export declare const TaskListTableDefault: React.FC<{
     selectedTaskId: string;
     setSelectedTask: (taskId: string) => void;
     onExpanderClick: (task: Task) => void;
+    taskLabelRenderer?: (Task: Task) => React.ReactNode;
 }>;

package/dist/components/task-list/task-list.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { EventOption } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
 import { Task } from "../../types/public-types";
 export declare type TaskListProps = {
@@ -16,6 +17,7 @@ export declare type TaskListProps = {
     selectedTask: BarTask | undefined;
     setSelectedTask: (task: string) => void;
     onExpanderClick: (task: Task) => void;
+    taskLabelRenderer?: (Task: Task) => React.ReactNode;
     TaskListHeader: React.FC<{
         headerHeight: number;
         rowWidth: string;
@@ -32,6 +34,7 @@ export declare type TaskListProps = {
         selectedTaskId: string;
         setSelectedTask: (taskId: string) => void;
         onExpanderClick: (task: Task) => void;
+        taskLabelRenderer?: (Task: Task) => React.ReactNode;
     }>;
-};
+} & EventOption;
 export declare const TaskList: React.FC<TaskListProps>;

package/dist/index.css

@@ -231,30 +231,6 @@
           user-select: none;
 }
 
-._3zRJQ {
-  fill: #fff;
-  text-anchor: middle;
-  font-weight: lighter;
-  dominant-baseline: central;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-}
-
-._3KcaM {
-  fill: #555;
-  text-anchor: start;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-}
-
 ._CZjuD {
   overflow: hidden;
   font-size: 0;

package/dist/index.js

@@ -21,6 +21,10 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -343,7 +347,11 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
       locale = _ref.locale,
-      onExpanderClick = _ref.onExpanderClick;
+      onExpanderClick = _ref.onExpanderClick,
+      _ref$taskLabelRendere = _ref.taskLabelRenderer,
+      taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
+    return " " + t.name;
+  } : _ref$taskLabelRendere;
   var toLocaleDateString = React.useMemo(function () {
     return toLocaleDateStringFactory(locale);
   }, [locale]);
@@ -388,7 +396,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
         minWidth: rowWidth,
         maxWidth: rowWidth
       }
-    }, "\xA0", t.name), React__default.createElement("div", {
+    }, taskLabelRenderer(t)), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: rowWidth,
@@ -560,7 +568,8 @@ var TaskList = function TaskList(_ref) {
       taskListRef = _ref.taskListRef,
       horizontalContainerClass = _ref.horizontalContainerClass,
       TaskListHeader = _ref.TaskListHeader,
-      TaskListTable = _ref.TaskListTable;
+      TaskListTable = _ref.TaskListTable,
+      taskLabelRenderer = _ref.taskLabelRenderer;
   var horizontalContainerRef = React.useRef(null);
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -583,7 +592,8 @@ var TaskList = function TaskList(_ref) {
     locale: locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask: setSelectedTask,
-    onExpanderClick: onExpanderClick
+    onExpanderClick: onExpanderClick,
+    taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", {
     ref: taskListRef
@@ -1145,15 +1155,25 @@ var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth
 var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
   var x1;
   var x2;
+  var actualx1;
+  var actualx2;
+  var progressStartWidth;
+  var progressEndWidth;
 
   if (rtl) {
     x2 = taskXCoordinateRTL(task.start, dates, columnWidth);
     x1 = taskXCoordinateRTL(task.end, dates, columnWidth);
+    actualx1 = taskXCoordinateRTL(task.actualStart, dates, columnWidth);
+    actualx2 = taskXCoordinateRTL(task.actualEnd, dates, columnWidth);
   } else {
     x1 = taskXCoordinate(task.start, dates, columnWidth);
     x2 = taskXCoordinate(task.end, dates, columnWidth);
+    actualx1 = taskXCoordinate(task.actualStart, dates, columnWidth);
+    actualx2 = taskXCoordinate(task.actualEnd, dates, columnWidth);
   }
 
+  progressStartWidth = Math.abs(actualx1 - x1);
+  progressEndWidth = Math.abs(actualx2 - x2);
   var typeInternal = task.type;
 
   if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
@@ -1161,7 +1181,7 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     x2 = x1 + handleWidth * 2;
   }
 
-  var _progressWithByParams = progressWithByParams(x1, x2, task.progress, rtl),
+  var _progressWithByParams = progressWithByParams(actualx1, actualx2, task.progress, rtl),
       progressWidth = _progressWithByParams[0],
       progressX = _progressWithByParams[1];
 
@@ -1179,6 +1199,10 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     typeInternal: typeInternal,
     x1: x1,
     x2: x2,
+    actualx1: actualx1,
+    actualx2: actualx2,
+    progressStartWidth: progressStartWidth,
+    progressEndWidth: progressEndWidth,
     y: y,
     index: index,
     progressX: progressX,
@@ -1210,6 +1234,10 @@ var convertToMilestone = function convertToMilestone(task, index, dates, columnW
     end: task.start,
     x1: x1,
     x2: x2,
+    actualx1: x1,
+    actualx2: x2,
+    progressStartWidth: 0,
+    progressEndWidth: 0,
     y: y,
     index: index,
     progressX: 0,
@@ -1533,6 +1561,8 @@ var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31E
 var BarDisplay = function BarDisplay(_ref) {
   var x = _ref.x,
       y = _ref.y,
+      actualX1 = _ref.actualX1,
+      actualX2 = _ref.actualX2,
       width = _ref.width,
       height = _ref.height,
       isSelected = _ref.isSelected,
@@ -1556,16 +1586,24 @@ var BarDisplay = function BarDisplay(_ref) {
     x: x,
     width: width,
     y: y,
-    height: height,
+    height: height / 2,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: getBarColor(),
     className: styles$6.barBackground
+  }), React__default.createElement("rect", {
+    x: actualX1,
+    width: actualX2 - actualX1,
+    y: y + height / 2,
+    height: height / 2,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: styles.taskProgressColor
   }), React__default.createElement("rect", {
     x: progressX,
     width: progressWidth,
-    y: y,
-    height: height,
+    y: y + height / 2,
+    height: height / 2,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: getProcessColor()
@@ -1592,13 +1630,9 @@ var BarDateHandle = function BarDateHandle(_ref) {
 };
 
 var BarProgressHandle = function BarProgressHandle(_ref) {
-  var progressPoint = _ref.progressPoint,
-      onMouseDown = _ref.onMouseDown;
-  return React__default.createElement("polygon", {
-    className: styles$6.barHandle,
-    points: progressPoint,
-    onMouseDown: onMouseDown
-  });
+  _objectDestructuringEmpty(_ref);
+
+  return React__default.createElement("div", null);
 };
 
 var Bar = function Bar(_ref) {
@@ -1616,6 +1650,10 @@ var Bar = function Bar(_ref) {
   }, React__default.createElement(BarDisplay, {
     x: task.x1,
     y: task.y,
+    actualX1: task.actualx1,
+    actualX2: task.actualx2,
+    startProgressWidth: task.progressStartWidth,
+    endProgressWidth: task.progressEndWidth,
     width: task.x2 - task.x1,
     height: task.height,
     progressX: task.progressX,
@@ -1667,6 +1705,10 @@ var BarSmall = function BarSmall(_ref) {
   }, React__default.createElement(BarDisplay, {
     x: task.x1,
     y: task.y,
+    actualX1: task.actualx1,
+    actualX2: task.actualx2,
+    startProgressWidth: task.progressStartWidth,
+    endProgressWidth: task.progressEndWidth,
     width: task.x2 - task.x1,
     height: task.height,
     progressX: task.progressX,
@@ -1769,28 +1811,17 @@ var Project = function Project(_ref) {
   }));
 };
 
-var style = {"barLabel":"_3zRJQ","barLabelOutside":"_3KcaM"};
-
 var TaskItem = function TaskItem(props) {
   var _props = _extends({}, props),
       task = _props.task,
-      arrowIndent = _props.arrowIndent,
       isDelete = _props.isDelete,
-      taskHeight = _props.taskHeight,
       isSelected = _props.isSelected,
-      rtl = _props.rtl,
       onEventStart = _props.onEventStart;
 
-  var textRef = React.useRef(null);
-
   var _useState = React.useState(React__default.createElement("div", null)),
       taskItem = _useState[0],
       setTaskItem = _useState[1];
 
-  var _useState2 = React.useState(true),
-      isTextInside = _useState2[0],
-      setIsTextInside = _useState2[1];
-
   React.useEffect(function () {
     switch (task.typeInternal) {
       case "milestone":
@@ -1810,27 +1841,6 @@ var TaskItem = function TaskItem(props) {
         break;
     }
   }, [task, isSelected]);
-  React.useEffect(function () {
-    if (textRef.current) {
-      setIsTextInside(textRef.current.getBBox().width < task.x2 - task.x1);
-    }
-  }, [textRef, task]);
-
-  var getX = function getX() {
-    var width = task.x2 - task.x1;
-    var hasChild = task.barChildren.length > 0;
-
-    if (isTextInside) {
-      return task.x1 + width * 0.5;
-    }
-
-    if (rtl && textRef.current) {
-      return task.x1 - textRef.current.getBBox().width - arrowIndent * +hasChild - arrowIndent * 0.2;
-    } else {
-      return task.x1 + width + arrowIndent * +hasChild + arrowIndent * 0.2;
-    }
-  };
-
   return React__default.createElement("g", {
     onKeyDown: function onKeyDown(e) {
       switch (e.key) {
@@ -1858,12 +1868,7 @@ var TaskItem = function TaskItem(props) {
     onFocus: function onFocus() {
       onEventStart("select", task);
     }
-  }, taskItem, React__default.createElement("text", {
-    x: getX(),
-    y: task.y + taskHeight * 0.5,
-    className: isTextInside ? style.barLabel :  style.barLabelOutside,
-    ref: textRef
-  }, task.name));
+  }, taskItem);
 };
 
 var TaskGanttContent = function TaskGanttContent(_ref) {
@@ -2286,7 +2291,8 @@ var Gantt = function Gantt(_ref) {
       onClick = _ref.onClick,
       onDelete = _ref.onDelete,
       onSelect = _ref.onSelect,
-      onExpanderClick = _ref.onExpanderClick;
+      onExpanderClick = _ref.onExpanderClick,
+      taskLabelRenderer = _ref.taskLabelRenderer;
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
 
@@ -2658,8 +2664,10 @@ var Gantt = function Gantt(_ref) {
     taskListRef: taskListRef,
     setSelectedTask: handleSelectedTask,
     onExpanderClick: handleExpanderClick,
+    onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
-    TaskListTable: TaskListTable
+    TaskListTable: TaskListTable,
+    taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$9.wrapper,