gantt-task-react-powern 0.3.11 → 0.4.0

package/dist/index.modern.js

@@ -18,6 +18,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);
@@ -342,7 +346,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 = useMemo(function () {
     return toLocaleDateStringFactory(locale);
   }, [locale]);
@@ -387,7 +395,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
         minWidth: rowWidth,
         maxWidth: rowWidth
       }
-    }, "\xA0", t.name), React.createElement("div", {
+    }, taskLabelRenderer(t)), React.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: rowWidth,
@@ -559,7 +567,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 = useRef(null);
   useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -582,7 +591,8 @@ var TaskList = function TaskList(_ref) {
     locale: locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask: setSelectedTask,
-    onExpanderClick: onExpanderClick
+    onExpanderClick: onExpanderClick,
+    taskLabelRenderer: taskLabelRenderer
   };
   return React.createElement("div", {
     ref: taskListRef
@@ -1144,15 +1154,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) {
@@ -1160,7 +1180,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];
 
@@ -1178,6 +1198,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,
@@ -1209,6 +1233,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,
@@ -1532,6 +1560,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,
@@ -1555,16 +1585,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.createElement("rect", {
+    x: actualX1,
+    width: actualX2 - actualX1,
+    y: y + height / 2,
+    height: height / 2,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: styles.taskProgressColor
   }), React.createElement("rect", {
     x: progressX,
     width: progressWidth,
-    y: y,
-    height: height,
+    y: y + height / 2,
+    height: height / 2,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: getProcessColor()
@@ -1591,13 +1629,9 @@ var BarDateHandle = function BarDateHandle(_ref) {
 };
 
 var BarProgressHandle = function BarProgressHandle(_ref) {
-  var progressPoint = _ref.progressPoint,
-      onMouseDown = _ref.onMouseDown;
-  return React.createElement("polygon", {
-    className: styles$6.barHandle,
-    points: progressPoint,
-    onMouseDown: onMouseDown
-  });
+  _objectDestructuringEmpty(_ref);
+
+  return React.createElement("div", null);
 };
 
 var Bar = function Bar(_ref) {
@@ -1615,6 +1649,10 @@ var Bar = function Bar(_ref) {
   }, React.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,
@@ -1666,6 +1704,10 @@ var BarSmall = function BarSmall(_ref) {
   }, React.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,
@@ -1768,28 +1810,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 = useRef(null);
-
   var _useState = useState(React.createElement("div", null)),
       taskItem = _useState[0],
       setTaskItem = _useState[1];
 
-  var _useState2 = useState(true),
-      isTextInside = _useState2[0],
-      setIsTextInside = _useState2[1];
-
   useEffect(function () {
     switch (task.typeInternal) {
       case "milestone":
@@ -1809,27 +1840,6 @@ var TaskItem = function TaskItem(props) {
         break;
     }
   }, [task, isSelected]);
-  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.createElement("g", {
     onKeyDown: function onKeyDown(e) {
       switch (e.key) {
@@ -1857,12 +1867,7 @@ var TaskItem = function TaskItem(props) {
     onFocus: function onFocus() {
       onEventStart("select", task);
     }
-  }, taskItem, React.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) {
@@ -2285,7 +2290,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 = useRef(null);
   var taskListRef = useRef(null);
 
@@ -2657,8 +2663,10 @@ var Gantt = function Gantt(_ref) {
     taskListRef: taskListRef,
     setSelectedTask: handleSelectedTask,
     onExpanderClick: handleExpanderClick,
+    onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
-    TaskListTable: TaskListTable
+    TaskListTable: TaskListTable,
+    taskLabelRenderer: taskLabelRenderer
   };
   return React.createElement("div", null, React.createElement("div", {
     className: styles$9.wrapper,