Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable Drag & Drop by default #24536

Merged
merged 12 commits into from
Aug 22, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import styles from '../../../../styles/styles';
import CONST from '../../../../CONST';
import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback';
import useLocalize from '../../../../hooks/useLocalize';
import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';

const propTypes = {
/* State from useNavigationBuilder */
Expand Down Expand Up @@ -53,28 +52,26 @@ function ThreePaneView(props) {
);
}
if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
const Wrapper = props.state.index === i ? NoDropZone : React.Fragment;
return (
<Wrapper key={route.key}>
<View
style={[
styles.flexRow,
styles.pAbsolute,
styles.w100,
styles.h100,
StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.shadow, CONST.RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY),
StyleUtils.displayIfTrue(props.state.index === i),
]}
>
<PressableWithoutFeedback
style={[styles.flex1]}
onPress={() => props.navigation.goBack()}
accessibilityLabel={translate('common.close')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
/>
<View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
</View>
</Wrapper>
<View
key={route.key}
style={[
styles.flexRow,
styles.pAbsolute,
styles.w100,
styles.h100,
StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.shadow, CONST.RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY),
StyleUtils.displayIfTrue(props.state.index === i),
]}
>
<PressableWithoutFeedback
style={[styles.flex1]}
onPress={() => props.navigation.goBack()}
accessibilityLabel={translate('common.close')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
/>
<View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
</View>
);
}
return (
Expand Down
10 changes: 10 additions & 0 deletions web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,14 @@
</div>
</div>
</body>
<script>
function dropDragListener(){
event.preventDefault();
event.dataTransfer.dropEffect = 'none';
}
document.addEventListener('dragover', dropDragListener);
document.addEventListener('dragenter', dropDragListener);
document.addEventListener('dragleave', dropDragListener);
document.addEventListener('drop', dropDragListener);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ginsuma Instead of here, can't we add it inside our App file? This would be more of a react way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allroundexperts We should add it for the web platform only.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a platform specific hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allroundexperts I moved it to inside App.js file.

</script>
</html>
Loading