@tcn/ui 0.1.1 → 0.2.0

package/src/utils/dnd/context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import type { DragContainer } from './types.js';
+
+const defaultValue: DragContainer = {
+  registerHandle: () => {},
+  unregisterHandle: () => {},
+  isDragging: false,
+  position: { x: 0, y: 0 },
+};
+
+export const DragContainerContext = createContext<DragContainer>(defaultValue);
+
+export function useDragContainer(): DragContainer {
+  const context = useContext(DragContainerContext);
+
+  if (context === defaultValue) {
+    // biome-ignore lint/suspicious/noConsole: Let devs know if they're not using the context correctly
+    console.warn(
+      'useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events.'
+    );
+  }
+
+  return context;
+}

package/src/utils/dnd/draggable/draggable.module.css

@@ -0,0 +1,8 @@
+.draggable {
+  position: relative;
+}
+
+.draggable[data-is-draggable="true"] {
+  left: var(--position-x);
+  top: var(--position-y);
+}

package/src/utils/dnd/draggable/draggable.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo, type CSSProperties } from 'react';
+
+import { DragContainerContext } from '../context.js';
+import clsx from 'clsx';
+import { useMakeDragContainer } from '../hooks/use_drag_container.js';
+
+import styles from './draggable.module.css';
+
+export interface DraggableProps {
+  children: React.ReactElement;
+  draggable?: boolean;
+}
+
+export const Draggable: React.FC<DraggableProps> = ({
+  children,
+  draggable: isDraggable = true,
+}) => {
+  const context = useMakeDragContainer({});
+
+  const cssVariables = useMemo(
+    () =>
+      ({
+        '--position-x': `${context.position.x}px`,
+        '--position-y': `${context.position.y}px`,
+      }) as CSSProperties,
+
+    [context.position]
+  );
+
+  const clonedChildren = React.cloneElement(children, {
+    className: clsx('tcn-draggable', styles.draggable, children.props.className),
+    style: { ...cssVariables, ...children.props.style },
+    'data-is-dragging': context.isDragging,
+    'data-is-draggable': isDraggable,
+  });
+
+  return (
+    <DragContainerContext.Provider value={context}>
+      {clonedChildren}
+    </DragContainerContext.Provider>
+  );
+};

package/src/utils/dnd/handle.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { useDragContainer } from './context.js';
+import { useForkRef } from '../hooks/use_fork_ref.js';
+
+export interface DragHandleProps {
+  children: React.ReactElement;
+}
+
+export const DragHandle: React.FC<DragHandleProps> = ({ children }) => {
+  const { registerHandle, unregisterHandle } = useDragContainer();
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current == null) {
+      return;
+    }
+    registerHandle(ref);
+    return () => {
+      if (ref.current == null) {
+        return;
+      }
+      unregisterHandle(ref);
+    };
+  }, [registerHandle, unregisterHandle]);
+
+  const mergedRef = useForkRef(ref, children.props.ref);
+  return React.cloneElement(children, {
+    className: clsx('tcn-drag-handle', children.props.className),
+    ref: mergedRef,
+  });
+};

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -0,0 +1,42 @@
+import { useCallback, useRef, useState } from 'react';
+import { useDraggable } from './use_draggable.js';
+import type { Position } from '../../index.js';
+import type { DragContainer } from '../types.js';
+
+export interface UseDragContainerOptions {
+  initialPosition?: Position;
+}
+
+export function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {
+  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);
+  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });
+  const [position, setPosition] = useState(positionRef.current);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useDraggable({
+    handles: handles,
+    startDragCallback: () => {
+      setIsDragging(true);
+    },
+    dragCallback: (deltaX, deltaY) => {
+      setPosition({
+        x: positionRef.current.x + deltaX,
+        y: positionRef.current.y + deltaY,
+      });
+    },
+    endDragCallback: () => {
+      setIsDragging(false);
+      positionRef.current = position;
+    },
+  });
+
+  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {
+    setHandles(prev => [...prev, handle]);
+  }, []);
+
+  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {
+    setHandles(prev => prev.filter(h => h !== handle));
+  }, []);
+
+  return { registerHandle, unregisterHandle, position, isDragging };
+}

package/src/utils/{hooks → dnd/hooks}/use_draggable.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-interface DraggableOptions {
+export interface UseDraggableOptions {
   startDragCallback: (startX: number, startY: number) => void;
   dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
   endDragCallback: (
@@ -9,16 +9,10 @@ interface DraggableOptions {
     startX: number,
     startY: number
   ) => void;
+  handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;
 }
 
-// const handleRef: Ref<HTMLElement> = useDraggable(
-//   (startX: number, startY: number) => {},
-//   (deltaX: number, deltaY: number, startX: number, startY: number) => {},
-//   (deltaX: number, deltaY: number, startX: number, startY: number) => {}
-// );
-
-export function useDraggable(options: DraggableOptions) {
-  const ref = useRef<HTMLElement | null>(null);
+export function useDraggable(options: UseDraggableOptions) {
   const startDragCallbackRef = useRef(options.startDragCallback);
   startDragCallbackRef.current = options.startDragCallback;
   const dragCallbackRef = useRef(options.dragCallback);
@@ -27,7 +21,8 @@ export function useDraggable(options: DraggableOptions) {
   endDragCallbackRef.current = options.endDragCallback;
 
   useEffect(() => {
-    const element = ref.current;
+    const handles = options.handles;
+    if (handles === undefined) return;
     let startX = 0;
     let startY = 0;
 
@@ -58,17 +53,28 @@ export function useDraggable(options: DraggableOptions) {
       document.body.addEventListener('mouseleave', endDrag);
     }
 
-    if (element != null) {
-      element.addEventListener('mousedown', startDrag);
+    if (Array.isArray(handles)) {
+      for (const element of handles) {
+        if (element != null) {
+          element.current?.addEventListener('mousedown', startDrag);
+        }
+      }
+    } else {
+      handles?.current?.addEventListener('mousedown', startDrag);
     }
-
     return () => {
-      element?.removeEventListener('mousedown', startDrag);
+      if (Array.isArray(handles)) {
+        for (const element of handles) {
+          if (element != null) {
+            element.current?.removeEventListener('mousedown', startDrag);
+          }
+        }
+      } else {
+        handles?.current?.removeEventListener('mousedown', startDrag);
+      }
       document.body.removeEventListener('mousemove', drag);
       document.body.removeEventListener('mouseup', endDrag);
       document.body.removeEventListener('mouseleave', endDrag);
     };
-  }, []);
-
-  return ref;
+  }, [options.handles]);
 }

package/src/utils/dnd/types.ts

@@ -0,0 +1,6 @@
+export interface DragContainer {
+  registerHandle: (handle: React.RefObject<HTMLElement>) => void;
+  unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
+  isDragging: boolean;
+  position: { x: number; y: number };
+}

package/src/utils/index.ts

@@ -3,7 +3,7 @@ export * from './click_away_listener.js';
 export * from './scroll_away_listener.js';
 
 export * from './hooks/make_context_hook.js';
-export * from './hooks/use_draggable.js';
+export * from './dnd/hooks/use_draggable.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';

package/dist/title.module-B16de2jd.js

@@ -1,5 +0,0 @@
-import './title.css';const t = "_title_64bd0fd", s = { title: t };
-export {
-  s
-};
-//# sourceMappingURL=title.module-B16de2jd.js.map

package/dist/title.module-B16de2jd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"title.module-B16de2jd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utils/hooks/use_draggable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_draggable.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use_draggable.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,KACX,IAAI,CAAC;CACX;AAQD,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,wDAsDrD"}

package/dist/utils/hooks/use_draggable.js

@@ -1,30 +0,0 @@
-import { useRef as o, useEffect as g } from "react";
-function E(t) {
-  const s = o(null), m = o(t.startDragCallback);
-  m.current = t.startDragCallback;
-  const i = o(t.dragCallback);
-  i.current = t.dragCallback;
-  const v = o(t.endDragCallback);
-  return v.current = t.endDragCallback, g(() => {
-    const c = s.current;
-    let n = 0, r = 0;
-    function d(e) {
-      const l = e.clientX - n, u = e.clientY - r;
-      i.current(l, u, n, r);
-    }
-    function a(e) {
-      const l = e.clientX !== void 0 ? e.clientX - n : 0, u = e.clientY !== void 0 ? e.clientY - r : 0;
-      v.current(l, u, n, r), document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", a), document.body.removeEventListener("mouseleave", a);
-    }
-    function b(e) {
-      n = e.clientX, r = e.clientY, m.current(n, r), document.body.addEventListener("mousemove", d), document.body.addEventListener("mouseup", a), document.body.addEventListener("mouseleave", a);
-    }
-    return c?.addEventListener("mousedown", b), () => {
-      c?.removeEventListener("mousedown", b), document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", a), document.body.removeEventListener("mouseleave", a);
-    };
-  }, []), s;
-}
-export {
-  E as useDraggable
-};
-//# sourceMappingURL=use_draggable.js.map

package/dist/utils/hooks/use_draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_draggable.js","sources":["../../../src/utils/hooks/use_draggable.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface DraggableOptions {\n  startDragCallback: (startX: number, startY: number) => void;\n  dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;\n  endDragCallback: (\n    deltaX: number,\n    deltaY: number,\n    startX: number,\n    startY: number\n  ) => void;\n}\n\n// const handleRef: Ref<HTMLElement> = useDraggable(\n//   (startX: number, startY: number) => {},\n//   (deltaX: number, deltaY: number, startX: number, startY: number) => {},\n//   (deltaX: number, deltaY: number, startX: number, startY: number) => {}\n// );\n\nexport function useDraggable(options: DraggableOptions) {\n  const ref = useRef<HTMLElement | null>(null);\n  const startDragCallbackRef = useRef(options.startDragCallback);\n  startDragCallbackRef.current = options.startDragCallback;\n  const dragCallbackRef = useRef(options.dragCallback);\n  dragCallbackRef.current = options.dragCallback;\n  const endDragCallbackRef = useRef(options.endDragCallback);\n  endDragCallbackRef.current = options.endDragCallback;\n\n  useEffect(() => {\n    const element = ref.current;\n    let startX = 0;\n    let startY = 0;\n\n    function drag(event: MouseEvent) {\n      const deltaX = event.clientX - startX;\n      const deltaY = event.clientY - startY;\n\n      dragCallbackRef.current(deltaX, deltaY, startX, startY);\n    }\n\n    function endDrag(event: MouseEvent) {\n      const deltaX = event.clientX !== undefined ? event.clientX - startX : 0;\n      const deltaY = event.clientY !== undefined ? event.clientY - startY : 0;\n      endDragCallbackRef.current(deltaX, deltaY, startX, startY);\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    }\n\n    function startDrag(event: MouseEvent) {\n      startX = event.clientX;\n      startY = event.clientY;\n\n      startDragCallbackRef.current(startX, startY);\n\n      document.body.addEventListener('mousemove', drag);\n      document.body.addEventListener('mouseup', endDrag);\n      document.body.addEventListener('mouseleave', endDrag);\n    }\n\n    if (element != null) {\n      element.addEventListener('mousedown', startDrag);\n    }\n\n    return () => {\n      element?.removeEventListener('mousedown', startDrag);\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    };\n  }, []);\n\n  return ref;\n}\n"],"names":["useDraggable","options","ref","useRef","startDragCallbackRef","dragCallbackRef","endDragCallbackRef","useEffect","element","startX","startY","drag","event","deltaX","deltaY","endDrag","startDrag"],"mappings":";AAmBO,SAASA,EAAaC,GAA2B;AACtD,QAAMC,IAAMC,EAA2B,IAAI,GACrCC,IAAuBD,EAAOF,EAAQ,iBAAiB;AAC7D,EAAAG,EAAqB,UAAUH,EAAQ;AACvC,QAAMI,IAAkBF,EAAOF,EAAQ,YAAY;AACnD,EAAAI,EAAgB,UAAUJ,EAAQ;AAClC,QAAMK,IAAqBH,EAAOF,EAAQ,eAAe;AACzD,SAAAK,EAAmB,UAAUL,EAAQ,iBAErCM,EAAU,MAAM;AACd,UAAMC,IAAUN,EAAI;AACpB,QAAIO,IAAS,GACTC,IAAS;AAEb,aAASC,EAAKC,GAAmB;AAC/B,YAAMC,IAASD,EAAM,UAAUH,GACzBK,IAASF,EAAM,UAAUF;AAE/B,MAAAL,EAAgB,QAAQQ,GAAQC,GAAQL,GAAQC,CAAM;AAAA,IACxD;AAEA,aAASK,EAAQH,GAAmB;AAClC,YAAMC,IAASD,EAAM,YAAY,SAAYA,EAAM,UAAUH,IAAS,GAChEK,IAASF,EAAM,YAAY,SAAYA,EAAM,UAAUF,IAAS;AACtE,MAAAJ,EAAmB,QAAQO,GAAQC,GAAQL,GAAQC,CAAM,GACzD,SAAS,KAAK,oBAAoB,aAAaC,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAEA,aAASC,EAAUJ,GAAmB;AACpC,MAAAH,IAASG,EAAM,SACfF,IAASE,EAAM,SAEfR,EAAqB,QAAQK,GAAQC,CAAM,GAE3C,SAAS,KAAK,iBAAiB,aAAaC,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWI,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcA,CAAO;AAAA,IACtD;AAEA,WACEP,GAAQ,iBAAiB,aAAaQ,CAAS,GAG1C,MAAM;AACX,MAAAR,GAAS,oBAAoB,aAAaQ,CAAS,GACnD,SAAS,KAAK,oBAAoB,aAAaL,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEb;AACT;"}