1- import React , { useCallback , useMemo } from 'react' ;
1+ import React , { useCallback , useMemo , useRef } from 'react' ;
22import { View } from 'react-native' ;
33import type { PointerEvent } from 'react-native' ;
44import type PressableProps from '@components/Pressable/GenericPressable/types' ;
55import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback' ;
6+ import useDragAndDrop from '@hooks/useDragAndDrop' ;
67import useLocalize from '@hooks/useLocalize' ;
78import useThemeStyles from '@hooks/useThemeStyles' ;
89import CONST from '@src/CONST' ;
10+ import htmlDivElementRef from '@src/types/utils/htmlDivElementRef' ;
11+ import viewRef from '@src/types/utils/viewRef' ;
912
1013type TransparentOverlayProps = {
1114 onPress : ( ) => void ;
@@ -16,6 +19,13 @@ type OnPressHandler = PressableProps['onPress'];
1619function TransparentOverlay ( { onPress : onPressProp } : TransparentOverlayProps ) {
1720 const { translate} = useLocalize ( ) ;
1821 const styles = useThemeStyles ( ) ;
22+ const dropZone = useRef < HTMLDivElement | View > ( null ) ;
23+
24+ const { isDraggingOver} = useDragAndDrop ( {
25+ // eslint-disable-next-line react-compiler/react-compiler
26+ dropZone : htmlDivElementRef ( dropZone ) ,
27+ onDrop : ( ) => { } ,
28+ } ) ;
1929
2030 const onPress = useCallback < NonNullable < OnPressHandler > > (
2131 ( event ) => {
@@ -41,7 +51,9 @@ function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
4151 return (
4252 < View
4353 onPointerDown = { handlePointerDown }
44- style = { styles . fullScreen }
54+ style = { [ styles . fullScreen , isDraggingOver && styles . dNone ] }
55+ // eslint-disable-next-line react-compiler/react-compiler
56+ ref = { viewRef ( dropZone ) }
4557 >
4658 < PressableWithoutFeedback
4759 onPress = { onPress }
0 commit comments