Merge pull request #449 from grusuTagg/tma883-Layered-Taggs

[TMA-883] Layered Tags

1 files changed, 18 insertions, 16 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..15ba3325 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -59,7 +59,7 @@ interface IProps {
   minY?: number;
   maxX?: number;
   maxY?: number;
-  onDragStart?: () => void;
+  onDragStart?: () => number;
 }
 
 export default function Draggable(props: IProps) {
@@ -103,8 +103,8 @@ export default function Draggable(props: IProps) {
   // Whether we're currently dragging or not
   const isDragging = React.useRef(false);
 
-  // const [zIndex, setZIndex] = React.useState(z);
-  const zIndex = z;
+  const [zIndex, setZIndex] = React.useState(z);
+  // const zIndex = z;
 
   const getBounds = React.useCallback(() => {
     const left = x + offsetFromStart.current.x;
@@ -136,7 +136,9 @@ export default function Draggable(props: IProps) {
       isDragging.current = false;
       if (onDragRelease) {
         onDragRelease(e, gestureState);
-        onRelease(e, true);
+      }
+      if (onRelease) {
+        onRelease(e, gestureState);
       }
       if (!shouldReverse) {
         pan.current.flattenOffset();
@@ -147,18 +149,17 @@ export default function Draggable(props: IProps) {
     [onDragRelease, shouldReverse, onRelease, reversePosition],
   );
 
-  const onPanResponderGrant = React.useCallback(
-    (_: GestureResponderEvent) => {
-      startBounds.current = getBounds();
-      isDragging.current = true;
-      if (!shouldReverse) {
-        pan.current.setOffset(offsetFromStart.current);
-        pan.current.setValue({x: 0, y: 0});
-      }
-      onDragStart();
-    },
-    [getBounds, shouldReverse],
-  );
+  const onPanResponderGrant = (_: GestureResponderEvent) => {
+    startBounds.current = getBounds();
+    isDragging.current = true;
+    if (!shouldReverse) {
+      pan.current.setOffset(offsetFromStart.current);
+      pan.current.setValue({x: 0, y: 0});
+    }
+    if (onDragStart) {
+      setZIndex(onDragStart());
+    }
+  };
 
   const handleOnDrag = React.useCallback(
     (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
@@ -194,6 +195,7 @@ export default function Draggable(props: IProps) {
         listener: handleOnDrag,
         useNativeDriver: false,
       }),
+      onPanResponderRelease,
       // onPanResponderRelease: (_) => {
       //   // console.log('end');
       //   // setZIndex(1);