From 9fc6464f6c5be0c453d2094b505c93f1c2d62447 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 6 Sep 2023 11:50:31 +0700 Subject: [PATCH 1/3] fix: 25709 drop container does not add opacity to entire height of the drawer --- .../Provider/dragAndDropProviderPropTypes.js | 2 ++ src/components/DragAndDrop/Provider/index.js | 8 ++++++-- src/components/HeaderGap/index.desktop.js | 3 ++- src/components/ScreenWrapper/index.js | 2 +- src/components/ScreenWrapper/propTypes.js | 4 ++++ src/pages/iou/MoneyRequestSelectorPage.js | 19 +++++++++++++++++-- 6 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js b/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js index d9cc806e9012..9cefeeb2368f 100644 --- a/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js +++ b/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js @@ -6,4 +6,6 @@ export default { /** Should this dropZone be disabled? */ isDisabled: PropTypes.bool, + + setIsDraggingOver: PropTypes.func, }; diff --git a/src/components/DragAndDrop/Provider/index.js b/src/components/DragAndDrop/Provider/index.js index 89b0f47a830d..6408f6dbfbfa 100644 --- a/src/components/DragAndDrop/Provider/index.js +++ b/src/components/DragAndDrop/Provider/index.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useCallback} from 'react'; +import React, {useRef, useCallback, useEffect} from 'react'; import {View} from 'react-native'; import {PortalHost} from '@gorhom/portal'; import Str from 'expensify-common/lib/str'; @@ -17,7 +17,7 @@ function shouldAcceptDrop(event) { return _.some(event.dataTransfer.types, (type) => type === 'Files'); } -function DragAndDropProvider({children, isDisabled = false}) { +function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver = () => {}}) { const dropZone = useRef(null); const dropZoneID = useRef(Str.guid('drag-n-drop')); @@ -33,6 +33,10 @@ function DragAndDropProvider({children, isDisabled = false}) { isDisabled, }); + useEffect(() => { + setIsDraggingOver(isDraggingOver); + }, [isDraggingOver, setIsDraggingOver]); + return ( ; + // eslint-disable-next-line react/prop-types + return ; } } diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index ebdd79f586e1..f760e5d5aeb4 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -124,7 +124,7 @@ class ScreenWrapper extends React.Component { style={styles.flex1} enabled={this.props.shouldEnablePickerAvoiding} > - + {this.props.environment === CONST.ENVIRONMENT.DEV && } {this.props.environment === CONST.ENVIRONMENT.DEV && } { diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 7162ca074f43..83033d9e97b7 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -36,6 +36,9 @@ const propTypes = { /** Whether to use the maxHeight (true) or use the 100% of the height (false) */ shouldEnableMaxHeight: PropTypes.bool, + /** Array of additional styles for header gap */ + headerGapStyles: PropTypes.arrayOf(PropTypes.object), + ...windowDimensionsPropTypes, ...environmentPropTypes, @@ -59,6 +62,7 @@ const defaultProps = { shouldEnablePickerAvoiding: true, shouldShowOfflineIndicator: true, offlineIndicatorStyle: [], + headerGapStyles: [], }; export {propTypes, defaultProps}; diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js index 2a2f3674cdfd..a2b75cb8866a 100644 --- a/src/pages/iou/MoneyRequestSelectorPage.js +++ b/src/pages/iou/MoneyRequestSelectorPage.js @@ -1,6 +1,6 @@ import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import React from 'react'; +import React, {useState} from 'react'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import ONYXKEYS from '../../ONYXKEYS'; @@ -21,6 +21,7 @@ import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator'; import NewRequestAmountPage from './steps/NewRequestAmountPage'; import reportPropTypes from '../reportPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; +import themeColors from '../../styles/themes/default'; const propTypes = { /** React Navigation route */ @@ -48,6 +49,8 @@ const defaultProps = { }; function MoneyRequestSelectorPage(props) { + const [isDraggingOver, setIsDraggingOver] = useState(false); + const iouType = lodashGet(props.route, 'params.iouType', ''); const reportID = lodashGet(props.route, 'params.reportID', ''); const {translate} = useLocalize(); @@ -70,10 +73,22 @@ function MoneyRequestSelectorPage(props) { {({safeAreaPaddingBottomStyle}) => ( - + Date: Thu, 7 Sep 2023 14:45:40 +0700 Subject: [PATCH 2/3] fix: add propsType --- .../Provider/dragAndDropProviderPropTypes.js | 1 + src/components/HeaderGap/index.desktop.js | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js b/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js index 9cefeeb2368f..82e503456f7d 100644 --- a/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js +++ b/src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js @@ -7,5 +7,6 @@ export default { /** Should this dropZone be disabled? */ isDisabled: PropTypes.bool, + /** Indicate that users are dragging file or not */ setIsDraggingOver: PropTypes.func, }; diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js index 889af5c21e5b..5d63f6a64313 100644 --- a/src/components/HeaderGap/index.desktop.js +++ b/src/components/HeaderGap/index.desktop.js @@ -1,10 +1,22 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; +import PropTypes from 'prop-types'; import styles from '../../styles/styles'; -export default class HeaderGap extends PureComponent { +const propTypes = { + /** Styles to apply to the HeaderGap */ + // eslint-disable-next-line react/forbid-prop-types + styles: PropTypes.arrayOf(PropTypes.object), +}; + +class HeaderGap extends PureComponent { render() { - // eslint-disable-next-line react/prop-types return ; } } + +HeaderGap.propTypes = propTypes; +HeaderGap.defaultProps = { + styles: [] +}; +export default HeaderGap; From 809d56c78c0d6696ee3b65269e4b99f5e8a726a7 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 8 Sep 2023 09:39:42 +0700 Subject: [PATCH 3/3] fix: lint --- src/components/HeaderGap/index.desktop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js index 5d63f6a64313..6b47f56516de 100644 --- a/src/components/HeaderGap/index.desktop.js +++ b/src/components/HeaderGap/index.desktop.js @@ -17,6 +17,6 @@ class HeaderGap extends PureComponent { HeaderGap.propTypes = propTypes; HeaderGap.defaultProps = { - styles: [] + styles: [], }; export default HeaderGap;