Add layering functionality when editing tags

1 files changed, 14 insertions, 15 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..1253fed4 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;
@@ -147,18 +147,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) => {