gantt-task-react-v 1.5.15 → 1.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,7 +34,6 @@ export type TaskListProps = {
34
34
  scrollToBottomStep: () => void;
35
35
  scrollToTask: (task: Task) => void;
36
36
  scrollToTopStep: () => void;
37
- selectTask: (taskId: string) => void;
38
37
  selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
39
38
  selectedIdsMirror: Readonly<Record<string, true>>;
40
39
  taskListContainerRef: RefObject<HTMLDivElement>;
@@ -10207,7 +10207,6 @@ const TaskListTableRowInner = forwardRef(
10207
10207
  onDoubleClick,
10208
10208
  onExpanderClick,
10209
10209
  scrollToTask,
10210
- selectTask,
10211
10210
  selectTaskOnMouseDown,
10212
10211
  style: style2,
10213
10212
  task,
@@ -10225,15 +10224,22 @@ const TaskListTableRowInner = forwardRef(
10225
10224
  if (task.type !== "empty") {
10226
10225
  scrollToTask(task);
10227
10226
  }
10228
- if (event.detail < 2) {
10229
- selectTaskOnMouseDown(task.id, event);
10230
- if (onClick) {
10231
- onClick(task);
10232
- }
10227
+ selectTaskOnMouseDown(task.id, event);
10228
+ if (onClick) {
10229
+ onClick(task);
10233
10230
  }
10234
10231
  },
10235
10232
  [onClick, scrollToTask, selectTaskOnMouseDown, task]
10236
10233
  );
10234
+ const onRootDoubleClick = useCallback(
10235
+ (event) => {
10236
+ if (onDoubleClick) {
10237
+ event.preventDefault();
10238
+ onDoubleClick(task);
10239
+ }
10240
+ },
10241
+ [onDoubleClick, task]
10242
+ );
10237
10243
  const onContextMenu = useCallback(
10238
10244
  (event) => {
10239
10245
  event.preventDefault();
@@ -10244,14 +10250,6 @@ const TaskListTableRowInner = forwardRef(
10244
10250
  },
10245
10251
  [handleOpenContextMenu, task]
10246
10252
  );
10247
- const onRootDoubleClick = useCallback(() => {
10248
- if (task.type !== "empty") {
10249
- selectTask(task.id);
10250
- if (onDoubleClick) {
10251
- onDoubleClick(task);
10252
- }
10253
- }
10254
- }, [onDoubleClick, selectTask, task]);
10255
10253
  const dependencies = useMemo(() => {
10256
10254
  const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
10257
10255
  if (!dependenciesAtLevel) {
@@ -10933,7 +10931,6 @@ const TaskListInner = ({
10933
10931
  onExpanderClick,
10934
10932
  onClick,
10935
10933
  onDoubleClick,
10936
- selectTask,
10937
10934
  scrollToTask,
10938
10935
  selectTaskOnMouseDown,
10939
10936
  selectedIdsMirror,
@@ -11004,7 +11001,6 @@ const TaskListInner = ({
11004
11001
  onDoubleClick,
11005
11002
  onExpanderClick,
11006
11003
  scrollToTask,
11007
- selectTask,
11008
11004
  selectTaskOnMouseDown,
11009
11005
  task,
11010
11006
  depth
@@ -11028,7 +11024,6 @@ const TaskListInner = ({
11028
11024
  mapTaskToNestedIndex,
11029
11025
  onClick,
11030
11026
  onDoubleClick,
11031
- selectTask,
11032
11027
  onExpanderClick,
11033
11028
  scrollToTask,
11034
11029
  selectTaskOnMouseDown,
@@ -19502,15 +19497,15 @@ const GanttLoaderInner = ({ loading }) => {
19502
19497
  return /* @__PURE__ */ jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
19503
19498
  };
19504
19499
  const GanttLoader = memo(GanttLoaderInner);
19505
- const overlay = "_overlay_hyem8_1";
19506
- const drawer = "_drawer_hyem8_19";
19507
- const drawer_open = "_drawer_open_hyem8_51";
19508
- const header = "_header_hyem8_59";
19509
- const title = "_title_hyem8_77";
19510
- const closeButton = "_closeButton_hyem8_97";
19511
- const body = "_body_hyem8_131";
19512
- const goToTaskBar = "_goToTaskBar_hyem8_145";
19513
- const goToTaskButton = "_goToTaskButton_hyem8_159";
19500
+ const overlay = "_overlay_1fu4j_1";
19501
+ const drawer = "_drawer_1fu4j_9";
19502
+ const drawer_open = "_drawer_open_1fu4j_43";
19503
+ const header = "_header_1fu4j_51";
19504
+ const title = "_title_1fu4j_69";
19505
+ const closeButton = "_closeButton_1fu4j_89";
19506
+ const body = "_body_1fu4j_123";
19507
+ const goToTaskBar = "_goToTaskBar_1fu4j_137";
19508
+ const goToTaskButton = "_goToTaskButton_1fu4j_151";
19514
19509
  const styles = {
19515
19510
  overlay,
19516
19511
  drawer,
@@ -19529,13 +19524,6 @@ const GanttDrawerInner = ({
19529
19524
  onGoToTask,
19530
19525
  renderContent
19531
19526
  }) => {
19532
- const handleOverlayClick = useCallback(
19533
- (e) => {
19534
- e.stopPropagation();
19535
- onClose();
19536
- },
19537
- [onClose]
19538
- );
19539
19527
  const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
19540
19528
  const goToTaskIds = [];
19541
19529
  if ((data == null ? void 0 : data.type) === "task") {
@@ -19543,42 +19531,62 @@ const GanttDrawerInner = ({
19543
19531
  } else if ((data == null ? void 0 : data.type) === "arrow") {
19544
19532
  goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
19545
19533
  }
19546
- return /* @__PURE__ */ jsxs(Fragment, { children: [
19547
- data && /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
19548
- /* @__PURE__ */ jsxs(
19549
- "div",
19550
- {
19551
- className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19552
- style: { width },
19553
- children: [
19554
- /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
19555
- /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
19556
- /* @__PURE__ */ jsx(
19534
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
19535
+ "div",
19536
+ {
19537
+ className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19538
+ style: { width },
19539
+ children: [
19540
+ /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
19541
+ /* @__PURE__ */ jsx("span", { className: styles.title, children: title2 }),
19542
+ /* @__PURE__ */ jsx(
19543
+ "button",
19544
+ {
19545
+ className: styles.closeButton,
19546
+ onClick: onClose,
19547
+ "aria-label": "Close drawer",
19548
+ type: "button",
19549
+ children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
19550
+ "path",
19551
+ {
19552
+ d: "M12 4L4 12M4 4l8 8",
19553
+ stroke: "currentColor",
19554
+ strokeWidth: "1.5",
19555
+ strokeLinecap: "round"
19556
+ }
19557
+ ) })
19558
+ }
19559
+ )
19560
+ ] }),
19561
+ /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
19562
+ data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
19563
+ data.type === "task" && /* @__PURE__ */ jsxs(
19557
19564
  "button",
19558
19565
  {
19559
- className: styles.closeButton,
19560
- onClick: onClose,
19561
- "aria-label": "Close drawer",
19566
+ className: styles.goToTaskButton,
19567
+ onClick: () => onGoToTask(data.task.id),
19562
19568
  type: "button",
19563
- children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
19564
- "path",
19565
- {
19566
- d: "M12 4L4 12M4 4l8 8",
19567
- stroke: "currentColor",
19568
- strokeWidth: "1.5",
19569
- strokeLinecap: "round"
19570
- }
19571
- ) })
19569
+ children: [
19570
+ /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19571
+ "path",
19572
+ {
19573
+ d: "M2 7h10M8 3l4 4-4 4",
19574
+ stroke: "currentColor",
19575
+ strokeWidth: "1.5",
19576
+ strokeLinecap: "round",
19577
+ strokeLinejoin: "round"
19578
+ }
19579
+ ) }),
19580
+ "Go to Task"
19581
+ ]
19572
19582
  }
19573
- )
19574
- ] }),
19575
- /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
19576
- data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
19577
- data.type === "task" && /* @__PURE__ */ jsxs(
19583
+ ),
19584
+ data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
19585
+ /* @__PURE__ */ jsxs(
19578
19586
  "button",
19579
19587
  {
19580
19588
  className: styles.goToTaskButton,
19581
- onClick: () => onGoToTask(data.task.id),
19589
+ onClick: () => onGoToTask(data.taskFrom.id),
19582
19590
  type: "button",
19583
19591
  children: [
19584
19592
  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
@@ -19591,63 +19599,40 @@ const GanttDrawerInner = ({
19591
19599
  strokeLinejoin: "round"
19592
19600
  }
19593
19601
  ) }),
19594
- "Go to Task"
19602
+ "Go to ",
19603
+ data.taskFrom.name
19595
19604
  ]
19596
19605
  }
19597
19606
  ),
19598
- data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
19599
- /* @__PURE__ */ jsxs(
19600
- "button",
19601
- {
19602
- className: styles.goToTaskButton,
19603
- onClick: () => onGoToTask(data.taskFrom.id),
19604
- type: "button",
19605
- children: [
19606
- /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19607
- "path",
19608
- {
19609
- d: "M2 7h10M8 3l4 4-4 4",
19610
- stroke: "currentColor",
19611
- strokeWidth: "1.5",
19612
- strokeLinecap: "round",
19613
- strokeLinejoin: "round"
19614
- }
19615
- ) }),
19616
- "Go to ",
19617
- data.taskFrom.name
19618
- ]
19619
- }
19620
- ),
19621
- /* @__PURE__ */ jsxs(
19622
- "button",
19623
- {
19624
- className: styles.goToTaskButton,
19625
- onClick: () => onGoToTask(data.taskTo.id),
19626
- type: "button",
19627
- children: [
19628
- /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19629
- "path",
19630
- {
19631
- d: "M2 7h10M8 3l4 4-4 4",
19632
- stroke: "currentColor",
19633
- strokeWidth: "1.5",
19634
- strokeLinecap: "round",
19635
- strokeLinejoin: "round"
19636
- }
19637
- ) }),
19638
- "Go to ",
19639
- data.taskTo.name
19640
- ]
19641
- }
19642
- )
19643
- ] })
19644
- ] }),
19645
- data && renderContent ? renderContent(data) : null
19646
- ] })
19647
- ]
19648
- }
19649
- )
19650
- ] });
19607
+ /* @__PURE__ */ jsxs(
19608
+ "button",
19609
+ {
19610
+ className: styles.goToTaskButton,
19611
+ onClick: () => onGoToTask(data.taskTo.id),
19612
+ type: "button",
19613
+ children: [
19614
+ /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
19615
+ "path",
19616
+ {
19617
+ d: "M2 7h10M8 3l4 4-4 4",
19618
+ stroke: "currentColor",
19619
+ strokeWidth: "1.5",
19620
+ strokeLinecap: "round",
19621
+ strokeLinejoin: "round"
19622
+ }
19623
+ ) }),
19624
+ "Go to ",
19625
+ data.taskTo.name
19626
+ ]
19627
+ }
19628
+ )
19629
+ ] })
19630
+ ] }),
19631
+ data && renderContent ? renderContent(data) : null
19632
+ ] })
19633
+ ]
19634
+ }
19635
+ ) });
19651
19636
  };
19652
19637
  const GanttDrawer = memo(GanttDrawerInner);
19653
19638
  const Gantt = (props) => {
@@ -19676,6 +19661,8 @@ const Gantt = (props) => {
19676
19661
  onSelectTaskIds,
19677
19662
  // Invoked when user right-clicks a row in the task list
19678
19663
  onRowContextMenu,
19664
+ onClickTaskRow,
19665
+ onDoubleClickTaskRow,
19679
19666
  onWheel,
19680
19667
  roundEndDate: clientRoundEndDate = defaultRoundEndDate,
19681
19668
  roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -20847,28 +20834,26 @@ const Gantt = (props) => {
20847
20834
  },
20848
20835
  [enableDrawer, taskBar]
20849
20836
  );
20850
- const handleTaskListRowClick = useCallback(
20837
+ const handleTaskRowClick = useCallback(
20851
20838
  (task) => {
20852
- if (taskList.onClickRow) {
20853
- taskList.onClickRow(task);
20839
+ if (onClickTaskRow) {
20840
+ onClickTaskRow(task);
20854
20841
  }
20855
20842
  },
20856
- [taskList]
20843
+ [onClickTaskRow]
20857
20844
  );
20858
- const handleTaskListRowDoubleClick = useCallback(
20845
+ const handleTaskRowDoubleClick = useCallback(
20859
20846
  (task) => {
20860
- if (task.type !== "empty") {
20861
- if (enableDrawer) {
20862
- setActiveArrowKey(null);
20863
- setActiveTaskId(task.id);
20864
- setDrawerData({ type: "task", task });
20865
- }
20847
+ if (enableDrawer && task.type !== "empty") {
20848
+ setActiveArrowKey(null);
20849
+ setActiveTaskId(task.id);
20850
+ setDrawerData({ type: "task", task });
20866
20851
  }
20867
- if (taskList.onDoubleClickRow) {
20868
- taskList.onDoubleClickRow(task);
20852
+ if (onDoubleClickTaskRow) {
20853
+ onDoubleClickTaskRow(task);
20869
20854
  }
20870
20855
  },
20871
- [enableDrawer, taskList]
20856
+ [enableDrawer, onDoubleClickTaskRow]
20872
20857
  );
20873
20858
  const handleDrawerClose = useCallback(() => {
20874
20859
  setDrawerData(null);
@@ -21214,12 +21199,11 @@ const Gantt = (props) => {
21214
21199
  handleMoveTasksInside,
21215
21200
  handleOpenContextMenu: handleOpenContextMenuForRow,
21216
21201
  mapTaskToNestedIndex,
21217
- onClick: handleTaskListRowClick,
21218
- onDoubleClick: handleTaskListRowDoubleClick,
21202
+ onClick: handleTaskRowClick,
21203
+ onDoubleClick: handleTaskRowDoubleClick,
21219
21204
  onExpanderClick,
21220
21205
  scrollToBottomStep,
21221
21206
  scrollToTopStep,
21222
- selectTask,
21223
21207
  selectTaskOnMouseDown,
21224
21208
  selectedIdsMirror,
21225
21209
  scrollToTask,
@@ -21246,14 +21230,13 @@ const Gantt = (props) => {
21246
21230
  handleMoveTaskBefore,
21247
21231
  handleMoveTasksInside,
21248
21232
  handleOpenContextMenuForRow,
21249
- handleTaskListRowClick,
21250
- handleTaskListRowDoubleClick,
21233
+ handleTaskRowClick,
21234
+ handleTaskRowDoubleClick,
21251
21235
  mapTaskToNestedIndex,
21252
21236
  onExpanderClick,
21253
21237
  scrollToBottomStep,
21254
21238
  scrollToTask,
21255
21239
  scrollToTopStep,
21256
- selectTask,
21257
21240
  selectTaskOnMouseDown,
21258
21241
  selectedIdsMirror,
21259
21242
  taskList,
@@ -10224,7 +10224,6 @@
10224
10224
  onDoubleClick,
10225
10225
  onExpanderClick,
10226
10226
  scrollToTask,
10227
- selectTask,
10228
10227
  selectTaskOnMouseDown,
10229
10228
  style: style2,
10230
10229
  task,
@@ -10242,15 +10241,22 @@
10242
10241
  if (task.type !== "empty") {
10243
10242
  scrollToTask(task);
10244
10243
  }
10245
- if (event.detail < 2) {
10246
- selectTaskOnMouseDown(task.id, event);
10247
- if (onClick) {
10248
- onClick(task);
10249
- }
10244
+ selectTaskOnMouseDown(task.id, event);
10245
+ if (onClick) {
10246
+ onClick(task);
10250
10247
  }
10251
10248
  },
10252
10249
  [onClick, scrollToTask, selectTaskOnMouseDown, task]
10253
10250
  );
10251
+ const onRootDoubleClick = React.useCallback(
10252
+ (event) => {
10253
+ if (onDoubleClick) {
10254
+ event.preventDefault();
10255
+ onDoubleClick(task);
10256
+ }
10257
+ },
10258
+ [onDoubleClick, task]
10259
+ );
10254
10260
  const onContextMenu = React.useCallback(
10255
10261
  (event) => {
10256
10262
  event.preventDefault();
@@ -10261,14 +10267,6 @@
10261
10267
  },
10262
10268
  [handleOpenContextMenu, task]
10263
10269
  );
10264
- const onRootDoubleClick = React.useCallback(() => {
10265
- if (task.type !== "empty") {
10266
- selectTask(task.id);
10267
- if (onDoubleClick) {
10268
- onDoubleClick(task);
10269
- }
10270
- }
10271
- }, [onDoubleClick, selectTask, task]);
10272
10270
  const dependencies = React.useMemo(() => {
10273
10271
  const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
10274
10272
  if (!dependenciesAtLevel) {
@@ -10950,7 +10948,6 @@
10950
10948
  onExpanderClick,
10951
10949
  onClick,
10952
10950
  onDoubleClick,
10953
- selectTask,
10954
10951
  scrollToTask,
10955
10952
  selectTaskOnMouseDown,
10956
10953
  selectedIdsMirror,
@@ -11021,7 +11018,6 @@
11021
11018
  onDoubleClick,
11022
11019
  onExpanderClick,
11023
11020
  scrollToTask,
11024
- selectTask,
11025
11021
  selectTaskOnMouseDown,
11026
11022
  task,
11027
11023
  depth
@@ -11045,7 +11041,6 @@
11045
11041
  mapTaskToNestedIndex,
11046
11042
  onClick,
11047
11043
  onDoubleClick,
11048
- selectTask,
11049
11044
  onExpanderClick,
11050
11045
  scrollToTask,
11051
11046
  selectTaskOnMouseDown,
@@ -19519,15 +19514,15 @@
19519
19514
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$1.loader} ${loading ? "" : styles$1.loaderHidden}` });
19520
19515
  };
19521
19516
  const GanttLoader = React.memo(GanttLoaderInner);
19522
- const overlay = "_overlay_hyem8_1";
19523
- const drawer = "_drawer_hyem8_19";
19524
- const drawer_open = "_drawer_open_hyem8_51";
19525
- const header = "_header_hyem8_59";
19526
- const title = "_title_hyem8_77";
19527
- const closeButton = "_closeButton_hyem8_97";
19528
- const body = "_body_hyem8_131";
19529
- const goToTaskBar = "_goToTaskBar_hyem8_145";
19530
- const goToTaskButton = "_goToTaskButton_hyem8_159";
19517
+ const overlay = "_overlay_1fu4j_1";
19518
+ const drawer = "_drawer_1fu4j_9";
19519
+ const drawer_open = "_drawer_open_1fu4j_43";
19520
+ const header = "_header_1fu4j_51";
19521
+ const title = "_title_1fu4j_69";
19522
+ const closeButton = "_closeButton_1fu4j_89";
19523
+ const body = "_body_1fu4j_123";
19524
+ const goToTaskBar = "_goToTaskBar_1fu4j_137";
19525
+ const goToTaskButton = "_goToTaskButton_1fu4j_151";
19531
19526
  const styles = {
19532
19527
  overlay,
19533
19528
  drawer,
@@ -19546,13 +19541,6 @@
19546
19541
  onGoToTask,
19547
19542
  renderContent
19548
19543
  }) => {
19549
- const handleOverlayClick = React.useCallback(
19550
- (e) => {
19551
- e.stopPropagation();
19552
- onClose();
19553
- },
19554
- [onClose]
19555
- );
19556
19544
  const title2 = (data == null ? void 0 : data.type) === "task" ? data.task.name : (data == null ? void 0 : data.type) === "arrow" ? `${data.taskFrom.name} → ${data.taskTo.name}` : "";
19557
19545
  const goToTaskIds = [];
19558
19546
  if ((data == null ? void 0 : data.type) === "task") {
@@ -19560,42 +19548,62 @@
19560
19548
  } else if ((data == null ? void 0 : data.type) === "arrow") {
19561
19549
  goToTaskIds.push(data.taskFrom.id, data.taskTo.id);
19562
19550
  }
19563
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19564
- data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.overlay, onClick: handleOverlayClick }),
19565
- /* @__PURE__ */ jsxRuntime.jsxs(
19566
- "div",
19567
- {
19568
- className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19569
- style: { width },
19570
- children: [
19571
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
19572
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.title, children: title2 }),
19573
- /* @__PURE__ */ jsxRuntime.jsx(
19551
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
19552
+ "div",
19553
+ {
19554
+ className: `${styles.drawer}${data ? ` ${styles.drawer_open}` : ""}`,
19555
+ style: { width },
19556
+ children: [
19557
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
19558
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.title, children: title2 }),
19559
+ /* @__PURE__ */ jsxRuntime.jsx(
19560
+ "button",
19561
+ {
19562
+ className: styles.closeButton,
19563
+ onClick: onClose,
19564
+ "aria-label": "Close drawer",
19565
+ type: "button",
19566
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19567
+ "path",
19568
+ {
19569
+ d: "M12 4L4 12M4 4l8 8",
19570
+ stroke: "currentColor",
19571
+ strokeWidth: "1.5",
19572
+ strokeLinecap: "round"
19573
+ }
19574
+ ) })
19575
+ }
19576
+ )
19577
+ ] }),
19578
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
19579
+ data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
19580
+ data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
19574
19581
  "button",
19575
19582
  {
19576
- className: styles.closeButton,
19577
- onClick: onClose,
19578
- "aria-label": "Close drawer",
19583
+ className: styles.goToTaskButton,
19584
+ onClick: () => onGoToTask(data.task.id),
19579
19585
  type: "button",
19580
- children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19581
- "path",
19582
- {
19583
- d: "M12 4L4 12M4 4l8 8",
19584
- stroke: "currentColor",
19585
- strokeWidth: "1.5",
19586
- strokeLinecap: "round"
19587
- }
19588
- ) })
19586
+ children: [
19587
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19588
+ "path",
19589
+ {
19590
+ d: "M2 7h10M8 3l4 4-4 4",
19591
+ stroke: "currentColor",
19592
+ strokeWidth: "1.5",
19593
+ strokeLinecap: "round",
19594
+ strokeLinejoin: "round"
19595
+ }
19596
+ ) }),
19597
+ "Go to Task"
19598
+ ]
19589
19599
  }
19590
- )
19591
- ] }),
19592
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
19593
- data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
19594
- data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
19600
+ ),
19601
+ data.type === "arrow" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19602
+ /* @__PURE__ */ jsxRuntime.jsxs(
19595
19603
  "button",
19596
19604
  {
19597
19605
  className: styles.goToTaskButton,
19598
- onClick: () => onGoToTask(data.task.id),
19606
+ onClick: () => onGoToTask(data.taskFrom.id),
19599
19607
  type: "button",
19600
19608
  children: [
19601
19609
  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19608,63 +19616,40 @@
19608
19616
  strokeLinejoin: "round"
19609
19617
  }
19610
19618
  ) }),
19611
- "Go to Task"
19619
+ "Go to ",
19620
+ data.taskFrom.name
19612
19621
  ]
19613
19622
  }
19614
19623
  ),
19615
- data.type === "arrow" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
19616
- /* @__PURE__ */ jsxRuntime.jsxs(
19617
- "button",
19618
- {
19619
- className: styles.goToTaskButton,
19620
- onClick: () => onGoToTask(data.taskFrom.id),
19621
- type: "button",
19622
- children: [
19623
- /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19624
- "path",
19625
- {
19626
- d: "M2 7h10M8 3l4 4-4 4",
19627
- stroke: "currentColor",
19628
- strokeWidth: "1.5",
19629
- strokeLinecap: "round",
19630
- strokeLinejoin: "round"
19631
- }
19632
- ) }),
19633
- "Go to ",
19634
- data.taskFrom.name
19635
- ]
19636
- }
19637
- ),
19638
- /* @__PURE__ */ jsxRuntime.jsxs(
19639
- "button",
19640
- {
19641
- className: styles.goToTaskButton,
19642
- onClick: () => onGoToTask(data.taskTo.id),
19643
- type: "button",
19644
- children: [
19645
- /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19646
- "path",
19647
- {
19648
- d: "M2 7h10M8 3l4 4-4 4",
19649
- stroke: "currentColor",
19650
- strokeWidth: "1.5",
19651
- strokeLinecap: "round",
19652
- strokeLinejoin: "round"
19653
- }
19654
- ) }),
19655
- "Go to ",
19656
- data.taskTo.name
19657
- ]
19658
- }
19659
- )
19660
- ] })
19661
- ] }),
19662
- data && renderContent ? renderContent(data) : null
19663
- ] })
19664
- ]
19665
- }
19666
- )
19667
- ] });
19624
+ /* @__PURE__ */ jsxRuntime.jsxs(
19625
+ "button",
19626
+ {
19627
+ className: styles.goToTaskButton,
19628
+ onClick: () => onGoToTask(data.taskTo.id),
19629
+ type: "button",
19630
+ children: [
19631
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
19632
+ "path",
19633
+ {
19634
+ d: "M2 7h10M8 3l4 4-4 4",
19635
+ stroke: "currentColor",
19636
+ strokeWidth: "1.5",
19637
+ strokeLinecap: "round",
19638
+ strokeLinejoin: "round"
19639
+ }
19640
+ ) }),
19641
+ "Go to ",
19642
+ data.taskTo.name
19643
+ ]
19644
+ }
19645
+ )
19646
+ ] })
19647
+ ] }),
19648
+ data && renderContent ? renderContent(data) : null
19649
+ ] })
19650
+ ]
19651
+ }
19652
+ ) });
19668
19653
  };
19669
19654
  const GanttDrawer = React.memo(GanttDrawerInner);
19670
19655
  const Gantt = (props) => {
@@ -19693,6 +19678,8 @@
19693
19678
  onSelectTaskIds,
19694
19679
  // Invoked when user right-clicks a row in the task list
19695
19680
  onRowContextMenu,
19681
+ onClickTaskRow,
19682
+ onDoubleClickTaskRow,
19696
19683
  onWheel,
19697
19684
  roundEndDate: clientRoundEndDate = defaultRoundEndDate,
19698
19685
  roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -20864,28 +20851,26 @@
20864
20851
  },
20865
20852
  [enableDrawer, taskBar]
20866
20853
  );
20867
- const handleTaskListRowClick = React.useCallback(
20854
+ const handleTaskRowClick = React.useCallback(
20868
20855
  (task) => {
20869
- if (taskList.onClickRow) {
20870
- taskList.onClickRow(task);
20856
+ if (onClickTaskRow) {
20857
+ onClickTaskRow(task);
20871
20858
  }
20872
20859
  },
20873
- [taskList]
20860
+ [onClickTaskRow]
20874
20861
  );
20875
- const handleTaskListRowDoubleClick = React.useCallback(
20862
+ const handleTaskRowDoubleClick = React.useCallback(
20876
20863
  (task) => {
20877
- if (task.type !== "empty") {
20878
- if (enableDrawer) {
20879
- setActiveArrowKey(null);
20880
- setActiveTaskId(task.id);
20881
- setDrawerData({ type: "task", task });
20882
- }
20864
+ if (enableDrawer && task.type !== "empty") {
20865
+ setActiveArrowKey(null);
20866
+ setActiveTaskId(task.id);
20867
+ setDrawerData({ type: "task", task });
20883
20868
  }
20884
- if (taskList.onDoubleClickRow) {
20885
- taskList.onDoubleClickRow(task);
20869
+ if (onDoubleClickTaskRow) {
20870
+ onDoubleClickTaskRow(task);
20886
20871
  }
20887
20872
  },
20888
- [enableDrawer, taskList]
20873
+ [enableDrawer, onDoubleClickTaskRow]
20889
20874
  );
20890
20875
  const handleDrawerClose = React.useCallback(() => {
20891
20876
  setDrawerData(null);
@@ -21231,12 +21216,11 @@
21231
21216
  handleMoveTasksInside,
21232
21217
  handleOpenContextMenu: handleOpenContextMenuForRow,
21233
21218
  mapTaskToNestedIndex,
21234
- onClick: handleTaskListRowClick,
21235
- onDoubleClick: handleTaskListRowDoubleClick,
21219
+ onClick: handleTaskRowClick,
21220
+ onDoubleClick: handleTaskRowDoubleClick,
21236
21221
  onExpanderClick,
21237
21222
  scrollToBottomStep,
21238
21223
  scrollToTopStep,
21239
- selectTask,
21240
21224
  selectTaskOnMouseDown,
21241
21225
  selectedIdsMirror,
21242
21226
  scrollToTask,
@@ -21263,14 +21247,13 @@
21263
21247
  handleMoveTaskBefore,
21264
21248
  handleMoveTasksInside,
21265
21249
  handleOpenContextMenuForRow,
21266
- handleTaskListRowClick,
21267
- handleTaskListRowDoubleClick,
21250
+ handleTaskRowClick,
21251
+ handleTaskRowDoubleClick,
21268
21252
  mapTaskToNestedIndex,
21269
21253
  onExpanderClick,
21270
21254
  scrollToBottomStep,
21271
21255
  scrollToTask,
21272
21256
  scrollToTopStep,
21273
- selectTask,
21274
21257
  selectTaskOnMouseDown,
21275
21258
  selectedIdsMirror,
21276
21259
  taskList,
package/dist/style.css CHANGED
@@ -845,16 +845,11 @@
845
845
  ._loaderHidden_covn4_49 {
846
846
  display: none;
847
847
  }
848
- ._overlay_hyem8_1 {
849
- position: absolute;
850
- top: 0;
851
- left: 0;
852
- right: 0;
853
- bottom: 0;
854
- z-index: 998;
848
+ ._overlay_1fu4j_1 {
849
+ display: none;
855
850
  }
856
851
 
857
- ._drawer_hyem8_19 {
852
+ ._drawer_1fu4j_9 {
858
853
  position: absolute;
859
854
  top: 0;
860
855
  right: 0;
@@ -868,13 +863,14 @@
868
863
  overflow: hidden;
869
864
  transform: translateX(100%);
870
865
  transition: transform 0.25s ease;
866
+ pointer-events: auto;
871
867
  }
872
868
 
873
- ._drawer_open_hyem8_51 {
869
+ ._drawer_open_1fu4j_43 {
874
870
  transform: translateX(0);
875
871
  }
876
872
 
877
- ._header_hyem8_59 {
873
+ ._header_1fu4j_51 {
878
874
  display: flex;
879
875
  align-items: center;
880
876
  justify-content: space-between;
@@ -883,7 +879,7 @@
883
879
  flex-shrink: 0;
884
880
  }
885
881
 
886
- ._title_hyem8_77 {
882
+ ._title_1fu4j_69 {
887
883
  font-weight: 600;
888
884
  font-size: 14px;
889
885
  color: var(--gantt-drawer-title-color, #333);
@@ -893,7 +889,7 @@
893
889
  white-space: nowrap;
894
890
  }
895
891
 
896
- ._closeButton_hyem8_97 {
892
+ ._closeButton_1fu4j_89 {
897
893
  background: none;
898
894
  border: none;
899
895
  cursor: pointer;
@@ -906,25 +902,25 @@
906
902
  transition: background 0.15s ease;
907
903
  }
908
904
 
909
- ._closeButton_hyem8_97:hover {
905
+ ._closeButton_1fu4j_89:hover {
910
906
  background: var(--gantt-drawer-close-hover-bg, #f0f0f0);
911
907
  }
912
908
 
913
- ._body_hyem8_131 {
909
+ ._body_1fu4j_123 {
914
910
  flex: 1;
915
911
  overflow-y: auto;
916
912
  overflow-x: hidden;
917
913
  padding: 16px;
918
914
  }
919
915
 
920
- ._goToTaskBar_hyem8_145 {
916
+ ._goToTaskBar_1fu4j_137 {
921
917
  display: flex;
922
918
  flex-wrap: wrap;
923
919
  gap: 8px;
924
920
  margin-bottom: 12px;
925
921
  }
926
922
 
927
- ._goToTaskButton_hyem8_159 {
923
+ ._goToTaskButton_1fu4j_151 {
928
924
  display: inline-flex;
929
925
  align-items: center;
930
926
  gap: 6px;
@@ -943,6 +939,6 @@
943
939
  transition: background 0.15s ease;
944
940
  }
945
941
 
946
- ._goToTaskButton_hyem8_159:hover {
942
+ ._goToTaskButton_1fu4j_151:hover {
947
943
  background: var(--gantt-drawer-go-to-hover-bg, #bbdefb);
948
944
  }
@@ -187,7 +187,6 @@ export type TaskListTableRowProps = {
187
187
  onDoubleClick?: (task: RenderTask) => void;
188
188
  onExpanderClick: (task: Task) => void;
189
189
  scrollToTask: (task: Task) => void;
190
- selectTask: (taskId: string) => void;
191
190
  selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
192
191
  style?: CSSProperties;
193
192
  task: RenderTask;
@@ -184,16 +184,6 @@ export interface GanttTaskListProps {
184
184
  * Render bottom table content
185
185
  */
186
186
  tableBottom?: TableRenderBottomProps;
187
- /**
188
- * Invokes on single click on a task list row.
189
- * Receives the full task data of the clicked row.
190
- */
191
- onClickRow?: (task: RenderTask) => void;
192
- /**
193
- * Invokes on double-click on a task list row.
194
- * Receives the full task data of the double-clicked row.
195
- */
196
- onDoubleClickRow?: (task: RenderTask) => void;
197
187
  }
198
188
  export interface TableRenderBottomProps {
199
189
  height?: number;
@@ -418,6 +408,14 @@ export interface GanttProps {
418
408
  * Set to a task id to scroll both horizontally and vertically to that task.
419
409
  */
420
410
  scrollToTaskId?: TaskId;
411
+ /**
412
+ * Invokes on single click on a task list row. Receives the task data.
413
+ */
414
+ onClickTaskRow?: (task: RenderTask) => void;
415
+ /**
416
+ * Invokes on double click on a task list row. Receives the task data.
417
+ */
418
+ onDoubleClickTaskRow?: (task: RenderTask) => void;
421
419
  /**
422
420
  * Drawer panel options for task/arrow click
423
421
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gantt-task-react-v",
3
- "version": "1.5.15",
3
+ "version": "1.5.17",
4
4
  "description": "Interactive Gantt Chart for React with TypeScript.",
5
5
  "author": "aguilanbon",
6
6
  "homepage": "https://github.com/aguilanbon/gantt-task-react-v",