Fix zIndex draggable placement

1 files changed, 20 insertions, 10 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 409ca6de..59ea78f0 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -60,6 +60,7 @@ interface IProps {
   minY?: number;
   maxX?: number;
   maxY?: number;
+  onDragStart?: () => void;
 }
 
 export default function Draggable(props: IProps) {
@@ -89,6 +90,7 @@ export default function Draggable(props: IProps) {
     minY,
     maxX,
     maxY,
+    onDragStart,
   } = props;
 
   // The Animated object housing our xy value so that we can spring back
@@ -102,6 +104,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 getBounds = React.useCallback(() => {
     const left = x + offsetFromStart.current.x;
     const top = y + offsetFromStart.current.y;
@@ -151,6 +155,7 @@ export default function Draggable(props: IProps) {
         pan.current.setOffset(offsetFromStart.current);
         pan.current.setValue({x: 0, y: 0});
       }
+      onDragStart();
     },
     [getBounds, shouldReverse],
   );
@@ -183,12 +188,16 @@ export default function Draggable(props: IProps) {
       onMoveShouldSetPanResponderCapture: (_, gestureState) =>
         shouldStartDrag(gestureState),
       onPanResponderGrant,
+      // onPanResponderStart,
       onPanResponderMove: Animated.event([], {
         // Typed incorrectly https://reactnative.dev/docs/panresponder
         listener: handleOnDrag,
         useNativeDriver: false,
       }),
-      onPanResponderRelease,
+      onPanResponderRelease: (_) => {
+        console.log('end');
+        // setZIndex(1);
+      },
     });
   }, [
     handleOnDrag,
@@ -218,16 +227,17 @@ export default function Draggable(props: IProps) {
       left: 0,
       width: Window.width,
       height: Window.height,
-      zIndex: z,
+      elevation: zIndex,
+      zIndex: zIndex,
     };
-  }, []);
+  }, [zIndex]);
 
   const dragItemCss = React.useMemo(() => {
     const style: StyleProp<ViewStyle> = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
+      elevation: zIndex,
+      zIndex: zIndex,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;
@@ -248,7 +258,7 @@ export default function Draggable(props: IProps) {
       width: renderSize,
       height: renderSize,
     };
-  }, [children, isCircle, renderColor, renderSize, x, y, z]);
+  }, [children, isCircle, renderColor, renderSize, x, y, zIndex]);
 
   const touchableContent = React.useMemo(() => {
     if (children) {
@@ -312,10 +322,10 @@ export default function Draggable(props: IProps) {
           onLayout={handleOnLayout}
           style={dragItemCss}
           disabled={true}
-          onPress={onShortPressRelease}
-          onLongPress={onLongPress}
-          onPressIn={onPressIn}
-          onPressOut={handlePressOut}>
+          onPress={() => console.log('ere')}
+          onLongPress={() => console.log('eeee')}
+          onPressIn={() => console.log('HERE')}
+          onPressOut={() => console.log('reeee')}>
           {touchableContent}
         </TouchableOpacity>
       </Animated.View>