gantt-task-react-powern 0.3.12 → 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/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);
@@ -1151,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) {
@@ -1167,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];
 
@@ -1185,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,
@@ -1216,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,
@@ -1539,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,
@@ -1562,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()
@@ -1598,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) {
@@ -1622,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,
@@ -1673,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,
@@ -1775,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":
@@ -1816,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) {
@@ -1864,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) {