@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/components/DraggableHeader.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableHeader = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DraggableHeader - Reusable draggable component based on JsModal's working implementation
+ *
+ * This component provides smooth drag functionality with proper boundary checking.
+ * It uses the same proven pattern from JsModal that works reliably.
+ */
+const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(function DraggableHeader({
+  children,
+  position,
+  onDragStart,
+  onDragEnd,
+  onTap,
+  containerBounds = _reactNative.Dimensions.get("window"),
+  elementSize = {
+    width: 100,
+    height: 50
+  },
+  minPosition = {
+    x: 0,
+    y: 0
+  },
+  style,
+  enabled = true
+}) {
+  const isDraggingRef = (0, _react.useRef)(false);
+  const dragDistanceRef = (0, _react.useRef)(0);
+  const touchOffsetRef = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => enabled,
+    onMoveShouldSetPanResponder: (_, g) => enabled && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
+    onPanResponderTerminationRequest: () => false,
+    // Resist touch steal
+
+    onPanResponderGrant: evt => {
+      isDraggingRef.current = false; // Start as not dragging
+      dragDistanceRef.current = 0;
+      // Don't call onDragStart immediately - wait to see if it's actually a drag
+
+      // Record where inside the bubble the user touched
+      touchOffsetRef.current = {
+        x: evt.nativeEvent.locationX,
+        y: evt.nativeEvent.locationY
+      };
+
+      // Stop any running timing/spring and capture final XY
+      position.stopAnimation(({
+        x,
+        y
+      }) => {
+        // Use that exact final value as the new offset for the gesture
+        position.setOffset({
+          x,
+          y
+        });
+        position.setValue({
+          x: 0,
+          y: 0
+        });
+      });
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Track total drag distance
+      const totalDistance = Math.abs(gestureState.dx) + Math.abs(gestureState.dy);
+      dragDistanceRef.current = totalDistance;
+
+      // Mark as dragging if moved more than 5 pixels
+      if (totalDistance > 5 && !isDraggingRef.current) {
+        isDraggingRef.current = true;
+        onDragStart?.(); // Call onDragStart only when we confirm it's a drag
+      }
+
+      // Use absolute finger anchoring for better grip feel
+      const x = evt.nativeEvent.pageX - touchOffsetRef.current.x;
+      const y = evt.nativeEvent.pageY - touchOffsetRef.current.y;
+
+      // When using absolute follow, use the value directly (no offset on move)
+      position.setOffset({
+        x: 0,
+        y: 0
+      });
+      position.setValue({
+        x,
+        y
+      });
+    },
+    onPanResponderRelease: () => {
+      // Get current position before any operations
+      const currentX = Number(JSON.stringify(position.x));
+      const currentY = Number(JSON.stringify(position.y));
+
+      // Check if it was a tap (minimal movement)
+      if (dragDistanceRef.current <= 5 && !isDraggingRef.current) {
+        // Reset position to current values without offset for tap
+        position.setOffset({
+          x: 0,
+          y: 0
+        });
+        position.setValue({
+          x: currentX,
+          y: currentY
+        });
+        onTap?.();
+        // No need to call onDragEnd since onDragStart was never called for a tap
+        return;
+      }
+
+      // Apply boundary constraints
+      const clampedX = Math.max(minPosition.x, Math.min(currentX, containerBounds.width - elementSize.width));
+      const clampedY = Math.max(minPosition.y, Math.min(currentY, containerBounds.height - elementSize.height));
+
+      // Set to clamped position
+      position.setValue({
+        x: clampedX,
+        y: clampedY
+      });
+      onDragEnd?.({
+        x: clampedX,
+        y: clampedY
+      });
+      isDraggingRef.current = false;
+    },
+    onPanResponderTerminate: () => {
+      isDraggingRef.current = false;
+      // No need to flattenOffset since we're using absolute positioning
+    }
+  }), [enabled, position, onDragStart, onDragEnd, onTap, containerBounds, elementSize, minPosition]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    ...panResponder.panHandlers,
+    children: children
+  });
+});