fix: move gestures into body component

src/SchedulerBody/SchedulerBody.tsx

@@ -19,6 +19,7 @@ import {
 } from "./NowMarker";
 import { DefaultResourceLabel, ResourceLabelProps } from "./ResourceLabel";
 
+import { useSchedulerGestures } from "../controller/gestureControls";
 import {
   DefaultSchedulerEntry,
   SchedulerEntryProps,
@@ -51,6 +52,7 @@ export interface SchedulerBodyProps<TData, TResource> {
   gridLabelSize: number;
   totalGridSize: number;
   tz?: string;
+  enableGestures?: boolean;
 }
 
 const SchedulerEntries = <TData, TResource>({
@@ -219,9 +221,10 @@ export function SchedulerBody<TData, TResource>({
   totalGridSize,
   gridLabelSize,
   tz,
+  enableGestures,
 }: SchedulerBodyProps<TData, TResource>) {
   const localBodyRef = useRef<HTMLDivElement | null>(null);
-
+  useSchedulerGestures(controller, localBodyRef, enableGestures);
   const getResourceId = useStringAccessor(resourceIdField);
   const getDataResourceId = useStringArrayAccessor(dataResourceIdField);
   const getStartDate = useDateAccessor(startDateField);

src/controller/controller.ts

@@ -45,7 +45,6 @@ export interface SchedulerController<TData, TResource> {
   firstSelectedMoment: Dayjs | null;
   lastSelectedMoment: Dayjs | null;
 
-  bodyRef: HTMLDivElement | null;
   selectedMoments: Record<
     string,
     Record<string, { isSelected: boolean } | undefined> | undefined
@@ -246,7 +245,6 @@ export function useSchedulerController<TData, TResource>({
 > {
   const controller = useRef(
     proxy<SchedulerController<TData, TResource>>({
-      bodyRef: null,
       calculateDistancePercentage: () => 0,
       displayUnit: "day",
       firstSelectedMoment: null,

src/controller/gestureControls.ts

@@ -1,25 +1,12 @@
 import { useGesture } from "@use-gesture/react";
-import { useEffect, useRef } from "react";
-import { subscribeKey } from "valtio/utils";
 import { SchedulerController } from "./controller";
 
 export const useSchedulerGestures = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   controller: SchedulerController<any, any>,
+  bodyRef: React.MutableRefObject<HTMLDivElement | null>,
+  enabled?: boolean,
 ) => {
-  const artificialRef = useRef(controller.bodyRef);
-
-  useEffect(() => {
-    const unsubscribe = subscribeKey(controller, "bodyRef", (value) => {
-      artificialRef.current = value;
-      console.log(artificialRef.current);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [controller]);
-
   useGesture(
     {
       // @ts-expect-error we don't need x, but unpacking is just so much more elegant
@@ -64,9 +51,10 @@ export const useSchedulerGestures = (
       },
     },
     {
-      target: artificialRef,
+      target: bodyRef,
       eventOptions: { passive: false },
       move: { threshold: 1 },
+      enabled: enabled ?? false,
     },
   );
 };

src/index.ts

@@ -8,7 +8,7 @@ export type {
   SchedulerControllerParams,
   SchedulerDisplayUnit,
 } from "./controller/controller";
-export { useSchedulerGestures } from "./controller/gestureControls";
+
 export type { OnSelectFn } from "./controller/selectControls";
 export { Scheduler } from "./Scheduler/Scheduler";
 export type { SchedulerProps } from "./Scheduler/Scheduler";

stories/Gestures.stories.tsx

@@ -1,9 +1,5 @@
 import dayjs from "dayjs";
-import {
-  Scheduler,
-  useSchedulerController,
-  useSchedulerGestures,
-} from "mantine-resource-timeline";
+import { Scheduler, useSchedulerController } from "mantine-resource-timeline";
 import { useMemo } from "react";
 
 export function GestureControls() {
@@ -27,7 +23,6 @@ export function GestureControls() {
     (typeof data)[number],
     (typeof resources)[number]
   >({});
-  useSchedulerGestures(controller);
 
   return (
     <Scheduler
@@ -39,7 +34,8 @@ export function GestureControls() {
       endDateAccessor="endDate"
       resourceIdAccessor="resourceId"
       startDateAccessor="startDate"
-    ></Scheduler>
+      enableGestures
+    />
   );
 }