From 78b9f1d2cb5841674c55d988d756423d6e0b01ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Fri, 4 Aug 2023 13:27:32 +0200 Subject: [PATCH 1/6] create context to freeze scroll when editing the message and turn off the scroll animation on focus --- .../report/ReportActionItemMessageEdit.js | 10 ++- .../ReportActionListFrozenScrollContext.js | 7 ++ src/pages/home/report/ReportActionsList.js | 84 ++++++++++--------- 3 files changed, 61 insertions(+), 40 deletions(-) create mode 100644 src/pages/home/report/ReportActionListFrozenScrollContext.js diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 54c5fec4533e..11289b869cd6 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -1,5 +1,5 @@ import lodashGet from 'lodash/get'; -import React, {useState, useRef, useMemo, useEffect, useCallback} from 'react'; +import React, {useState, useRef, useMemo, useEffect, useCallback, useContext} from 'react'; import {InteractionManager, Keyboard, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; @@ -36,6 +36,7 @@ import useKeyboardState from '../../../hooks/useKeyboardState'; import useWindowDimensions from '../../../hooks/useWindowDimensions'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; +import ReportActionListFrozenScrollContext from "./ReportActionListFrozenScrollContext"; const propTypes = { /** All the data of the action */ @@ -102,6 +103,8 @@ function ReportActionItemMessageEdit(props) { const isFocusedRef = useRef(false); const insertedEmojis = useRef([]); + const {setShouldFreezeScroll} = useContext(ReportActionListFrozenScrollContext) + useEffect(() => { // required for keeping last state of isFocused variable isFocusedRef.current = isFocused; @@ -200,6 +203,7 @@ function ReportActionItemMessageEdit(props) { * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content. */ const deleteDraft = useCallback(() => { + setShouldFreezeScroll(false); debouncedSaveDraft.cancel(); Report.saveReportActionDraft(props.reportID, props.action.reportActionID, ''); ComposerActions.setShouldShowComposeInput(true); @@ -322,11 +326,13 @@ function ReportActionItemMessageEdit(props) { style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]} onFocus={() => { setIsFocused(true); - reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); + setShouldFreezeScroll(true); + reportScrollManager.scrollToIndex({animated: false, index: props.index}, true); ComposerActions.setShouldShowComposeInput(false); }} onBlur={(event) => { setIsFocused(false); + setShouldFreezeScroll(false); const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering diff --git a/src/pages/home/report/ReportActionListFrozenScrollContext.js b/src/pages/home/report/ReportActionListFrozenScrollContext.js new file mode 100644 index 000000000000..f94dcb77d03e --- /dev/null +++ b/src/pages/home/report/ReportActionListFrozenScrollContext.js @@ -0,0 +1,7 @@ +import React from "react"; + +const ReportActionListFrozenScrollContext = React.createContext({ + setShouldFreezeScroll: () => {}, +}); + +export default ReportActionListFrozenScrollContext; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index e8d861fc2ef6..27ff790d2b43 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -22,6 +22,7 @@ import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; +import ReportActionListFrozenScrollContext from "./ReportActionListFrozenScrollContext"; const propTypes = { /** Position of the "New" line marker */ @@ -97,6 +98,7 @@ function ReportActionsList(props) { opacity.value = withTiming(1, {duration: 100}); }, [opacity]); const [skeletonViewHeight, setSkeletonViewHeight] = useState(0); + const [shouldFreezeScroll, setShouldFreezeScroll] = useState(false); const windowHeight = props.windowHeight; @@ -171,44 +173,50 @@ function ReportActionsList(props) { return ( - { - if (props.report.isLoadingMoreReportActions) { - return ; - } - - // Make sure the oldest report action loaded is not the first. This is so we do not show the - // skeleton view above the created action in a newly generated optimistic chat or one with not - // that many comments. - const lastReportAction = _.last(props.sortedReportActions) || {}; - if (props.report.isLoadingReportActions && lastReportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) { - return ( - - ); - } - return null; - }} - keyboardShouldPersistTaps="handled" - onLayout={(event) => { - setSkeletonViewHeight(event.nativeEvent.layout.height); - props.onLayout(event); - }} - onScroll={props.onScroll} - extraData={extraData} - /> + + { + if (props.report.isLoadingMoreReportActions) { + return ; + } + + // Make sure the oldest report action loaded is not the first. This is so we do not show the + // skeleton view above the created action in a newly generated optimistic chat or one with not + // that many comments. + const lastReportAction = _.last(props.sortedReportActions) || {}; + if (props.report.isLoadingReportActions && lastReportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) { + return ( + + ); + } + return null; + }} + keyboardShouldPersistTaps="handled" + onLayout={(event) => { + setSkeletonViewHeight(event.nativeEvent.layout.height); + props.onLayout(event); + }} + onScroll={props.onScroll} + extraData={extraData} + maintainVisibleContentPosition={shouldFreezeScroll ? { + minIndexForVisible: 1, + } : null} + /> + ); } From 9ff6e31828938b4fcbe54f62d83d293719b32f00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 21 Aug 2023 10:13:34 +0200 Subject: [PATCH 2/6] refactor of ScrollFrozen context --- src/hooks/useFrozenScroll.js | 10 + src/pages/home/ReportScreen.js | 178 +++++++++--------- .../report/ReportActionItemMessageEdit.js | 8 +- .../ReportActionListFrozenScrollContext.js | 70 ++++++- src/pages/home/report/ReportActionsList.js | 17 +- 5 files changed, 178 insertions(+), 105 deletions(-) create mode 100644 src/hooks/useFrozenScroll.js diff --git a/src/hooks/useFrozenScroll.js b/src/hooks/useFrozenScroll.js new file mode 100644 index 000000000000..1961b6cb6120 --- /dev/null +++ b/src/hooks/useFrozenScroll.js @@ -0,0 +1,10 @@ +import {useContext} from 'react'; +import {ReportActionListFrozenScrollContext} from "../pages/home/report/ReportActionListFrozenScrollContext"; + +/** + * Hook for getting current state of scroll freeze and a function to set whether the scroll should be frozen + * @returns {Object} + */ +export default function useFrozenScroll() { + return useContext(ReportActionListFrozenScrollContext); +} diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index c859bc6b8f05..34dd45dd1657 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -37,6 +37,7 @@ import * as ComposerActions from '../../libs/actions/Composer'; import ReportScreenContext from './ReportScreenContext'; import TaskHeaderActionButton from '../../components/TaskHeaderActionButton'; import DragAndDropProvider from '../../components/DragAndDrop/Provider'; +import {ReportActionListFrozenScrollContextProvider} from "./report/ReportActionListFrozenScrollContext"; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -289,103 +290,106 @@ class ReportScreen extends React.Component { reactionListRef: this.reactionListRef, }} > - - + - - {headerView} - {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && ( - - - - + + {headerView} + {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && ( + + + + + - - )} - - {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( - - )} - - { - // Rounding this value for comparison because they can look like this: 411.9999694824219 - const skeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height); - - // Only set state when the height changes to avoid unnecessary renders - if (reportActionsListViewHeight === skeletonViewContainerHeight) return; - - // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it - // takes up so we can set the skeleton view container height. - if (skeletonViewContainerHeight === 0) { - return; - } - reportActionsListViewHeight = skeletonViewContainerHeight; - this.setState({skeletonViewContainerHeight}); - }} - > - {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && ( - )} - - {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then - we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && ( - - )} - - {this.isReportReadyForDisplay() && ( - <> - + {Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( + + )} + + { + // Rounding this value for comparison because they can look like this: 411.9999694824219 + const skeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height); + + // Only set state when the height changes to avoid unnecessary renders + if (reportActionsListViewHeight === skeletonViewContainerHeight) return; + + // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it + // takes up so we can set the skeleton view container height. + if (skeletonViewContainerHeight === 0) { + return; + } + reportActionsListViewHeight = skeletonViewContainerHeight; + this.setState({skeletonViewContainerHeight}); + }} + > + {this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading && ( + - - )} + )} - {!this.isReportReadyForDisplay() && ( - - )} - - - - + {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then + we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} + {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && ( + + )} + + {this.isReportReadyForDisplay() && ( + <> + + + )} + + {!this.isReportReadyForDisplay() && ( + + )} + + + + + ); } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 88b07eac09c4..c02efffcaf78 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -1,5 +1,5 @@ import lodashGet from 'lodash/get'; -import React, {useState, useRef, useMemo, useEffect, useCallback, useContext} from 'react'; +import React, {useState, useRef, useMemo, useEffect, useCallback} from 'react'; import {InteractionManager, Keyboard, View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; @@ -37,7 +37,7 @@ import useWindowDimensions from '../../../hooks/useWindowDimensions'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import focusWithDelay from '../../../libs/focusWithDelay'; -import ReportActionListFrozenScrollContext from "./ReportActionListFrozenScrollContext"; +import useFrozenScroll from "../../../hooks/useFrozenScroll"; const propTypes = { /** All the data of the action */ @@ -104,7 +104,7 @@ function ReportActionItemMessageEdit(props) { const isFocusedRef = useRef(false); const insertedEmojis = useRef([]); - const {setShouldFreezeScroll} = useContext(ReportActionListFrozenScrollContext) + const {setShouldFreezeScroll} = useFrozenScroll(); useEffect(() => { // required for keeping last state of isFocused variable @@ -217,7 +217,7 @@ function ReportActionItemMessageEdit(props) { keyboardDidHideListener.remove(); }); } - }, [props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID, reportScrollManager]); + }, [setShouldFreezeScroll, props.action.reportActionID, debouncedSaveDraft, props.index, props.reportID, reportScrollManager]); /** * Save the draft of the comment to be the new comment message. This will take the comment out of "edit mode" with diff --git a/src/pages/home/report/ReportActionListFrozenScrollContext.js b/src/pages/home/report/ReportActionListFrozenScrollContext.js index f94dcb77d03e..59d488f8cab6 100644 --- a/src/pages/home/report/ReportActionListFrozenScrollContext.js +++ b/src/pages/home/report/ReportActionListFrozenScrollContext.js @@ -1,7 +1,67 @@ -import React from "react"; +import React, {createContext, forwardRef, useMemo, useState} from "react"; +import PropTypes from "prop-types"; +import getComponentDisplayName from "../../../libs/getComponentDisplayName"; -const ReportActionListFrozenScrollContext = React.createContext({ - setShouldFreezeScroll: () => {}, -}); -export default ReportActionListFrozenScrollContext; +const withScrollFrozenPropTypes = { + /** flag determining if we should freeze the scroll */ + shouldFreezeScroll: PropTypes.bool, + + /** Function to update the state */ + setShouldFreezeScroll: PropTypes.func, +}; + +const ReportActionListFrozenScrollContext = createContext(null); + + +function ReportActionListFrozenScrollContextProvider(props) { + const [shouldFreezeScroll, setShouldFreezeScroll] = useState(false); + + /** + * The context this component exposes to child components + * @returns {Object} flag and a flag setter + */ + const contextValue = useMemo( + () => ({ + shouldFreezeScroll, + setShouldFreezeScroll, + }), + [shouldFreezeScroll, setShouldFreezeScroll], + ); + + return {props.children}; +} + +ReportActionListFrozenScrollContextProvider.displayName = 'ReportActionListFrozenScrollContextProvider'; +ReportActionListFrozenScrollContextProvider.propTypes = { + /** Actual content wrapped by this component */ + children: PropTypes.node.isRequired, +}; + +function withScrollFrozen(WrappedComponent) { + const WithScrollFrozenState = forwardRef((props, ref) => ( + + {(scrollFrozenProps) => + + } + + )); + + WithScrollFrozenState.displayName = `WithScrollFrozenState(${getComponentDisplayName(WrappedComponent)})`; + return WithScrollFrozenState; +} + + +export { + ReportActionListFrozenScrollContext, + ReportActionListFrozenScrollContextProvider, + withScrollFrozenPropTypes, + withScrollFrozen +}; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index c100a141efe3..d342d4562d7a 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -20,7 +20,7 @@ import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; import withLocalize from '../../../components/withLocalize'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; -import ReportActionListFrozenScrollContext from "./ReportActionListFrozenScrollContext"; +import useFrozenScroll from "../../../hooks/useFrozenScroll"; const propTypes = { /** Position of the "New" line marker */ @@ -83,6 +83,10 @@ function keyExtractor(item) { return item.reportActionID; } +const maintainVisibleContentPositionOptions = { + minIndexForVisible: 1, +} + function ReportActionsList(props) { const reportScrollManager = useReportScrollManager(); const opacity = useSharedValue(0); @@ -93,8 +97,7 @@ function ReportActionsList(props) { opacity.value = withTiming(1, {duration: 100}); }, [opacity]); const [skeletonViewHeight, setSkeletonViewHeight] = useState(0); - const [shouldFreezeScroll, setShouldFreezeScroll] = useState(false); - + const {shouldFreezeScroll} = useFrozenScroll(); const windowHeight = props.windowHeight; /** @@ -164,13 +167,12 @@ function ReportActionsList(props) { return ( - - ); } From 3a93dd351895f41346195f76bed2c3a36e1606f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Thu, 21 Sep 2023 11:01:22 +0200 Subject: [PATCH 3/6] bring animation of the scroll back --- src/pages/home/ReportScreen.js | 32 +++++++++---------- .../report/ReportActionItemMessageEdit.js | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 167a100ff718..2a7fcef861d7 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -134,22 +134,22 @@ function getReportID(route) { } function ReportScreen({ - betas, - route, - report, - reportActions, - accountManagerReportID, - personalDetails, - policies, - translate, - network, - isSmallScreenWidth, - isSidebarLoaded, - viewportOffsetTop, - isComposerFullSize, - errors, - currentReportID, - }) { + betas, + route, + report, + reportActions, + accountManagerReportID, + personalDetails, + policies, + translate, + network, + isSmallScreenWidth, + isSidebarLoaded, + viewportOffsetTop, + isComposerFullSize, + errors, + currentReportID, +}) { const firstRenderRef = useRef(true); const flatListRef = useRef(); const reactionListRef = useRef(); diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index f655da9c3949..90b34d21092e 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -385,9 +385,9 @@ function ReportActionItemMessageEdit(props) { maxLines={isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]} onFocus={() => { + reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); setIsFocused(true); setShouldFreezeScroll(true); - reportScrollManager.scrollToIndex({animated: true, index: props.index}, true); setShouldShowComposeInputKeyboardAware(false); // Clear active report action when another action gets focused From 292a4a6d2c8b24aa14b5c731e8bdea28280f077c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Fri, 22 Sep 2023 16:33:37 +0200 Subject: [PATCH 4/6] fix indents --- src/pages/home/ReportScreen.js | 167 +++++++++++++++++---------------- 1 file changed, 84 insertions(+), 83 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index c5eb7f0b68fd..72cac9566ab8 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -358,99 +358,100 @@ function ReportScreen({ }} > - - - - {headerView} - {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( - - - - + + {headerView} + {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( + + + + + - - )} - - {Boolean(accountManagerReportID) && ReportUtils.isConciergeChatReport(report) && isBannerVisible && ( - - )} - - { - // Rounding this value for comparison because they can look like this: 411.9999694824219 - const newSkeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height); - - // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it - // takes up so we can set the skeleton view container height. - if (newSkeletonViewContainerHeight === 0) { - return; - } - setSkeletonViewContainerHeight(newSkeletonViewContainerHeight); - }} - > - {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && ( - )} - - {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then - we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && } - - {isReportReadyForDisplay && ( - <> - + {Boolean(accountManagerReportID) && ReportUtils.isConciergeChatReport(report) && isBannerVisible && ( + + )} + + { + // Rounding this value for comparison because they can look like this: 411.9999694824219 + const newSkeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height); + + // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it + // takes up so we can set the skeleton view container height. + if (newSkeletonViewContainerHeight === 0) { + return; + } + setSkeletonViewContainerHeight(newSkeletonViewContainerHeight); + }} + > + {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && ( + - - )} + )} - {!isReportReadyForDisplay && ( - - )} - - - - - + {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then + we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} + {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && + } + + {isReportReadyForDisplay && ( + <> + + + )} + + {!isReportReadyForDisplay && ( + + )} + + + + + ); } From bd95a39e0242c41d29ab3832f0fe8982f648bb68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 25 Sep 2023 21:30:07 +0200 Subject: [PATCH 5/6] fix import --- src/pages/home/ReportScreen.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 72cac9566ab8..bb0c14ce7db9 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,6 +39,7 @@ import DragAndDropProvider from '../../components/DragAndDrop/Provider'; import usePrevious from '../../hooks/usePrevious'; import CONST from '../../CONST'; import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../../components/withCurrentReportID'; +import {ReportActionListFrozenScrollContextProvider} from "./report/ReportActionListFrozenScrollContext"; const propTypes = { /** Navigation route context info provided by react navigation */ From ae3fab67e249d0e31f79657d0f0a20e3790b4757 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Fri, 29 Sep 2023 01:22:39 +0200 Subject: [PATCH 6/6] prettier fix --- src/hooks/useFrozenScroll.js | 2 +- src/pages/home/ReportScreen.js | 7 ++-- .../report/ReportActionItemMessageEdit.js | 2 +- .../ReportActionListFrozenScrollContext.js | 37 +++++++------------ src/pages/home/report/ReportActionsList.js | 4 +- 5 files changed, 21 insertions(+), 31 deletions(-) diff --git a/src/hooks/useFrozenScroll.js b/src/hooks/useFrozenScroll.js index 1961b6cb6120..a37dcbf1ee4a 100644 --- a/src/hooks/useFrozenScroll.js +++ b/src/hooks/useFrozenScroll.js @@ -1,5 +1,5 @@ import {useContext} from 'react'; -import {ReportActionListFrozenScrollContext} from "../pages/home/report/ReportActionListFrozenScrollContext"; +import {ReportActionListFrozenScrollContext} from '../pages/home/report/ReportActionListFrozenScrollContext'; /** * Hook for getting current state of scroll freeze and a function to set whether the scroll should be frozen diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 100615b836c4..83c10f6e4f1e 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,7 +39,7 @@ import DragAndDropProvider from '../../components/DragAndDrop/Provider'; import usePrevious from '../../hooks/usePrevious'; import CONST from '../../CONST'; import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../../components/withCurrentReportID'; -import {ReportActionListFrozenScrollContextProvider} from "./report/ReportActionListFrozenScrollContext"; +import {ReportActionListFrozenScrollContextProvider} from './report/ReportActionListFrozenScrollContext'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -382,7 +382,7 @@ function ReportScreen({ - + @@ -425,8 +425,7 @@ function ReportScreen({ {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */} - {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && - } + {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && } {isReportReadyForDisplay && ( <> diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 489784201ccf..dfd2758f8f42 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -40,7 +40,7 @@ import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction'; import focusWithDelay from '../../../libs/focusWithDelay'; import ONYXKEYS from '../../../ONYXKEYS'; import * as Browser from '../../../libs/Browser'; -import useFrozenScroll from "../../../hooks/useFrozenScroll"; +import useFrozenScroll from '../../../hooks/useFrozenScroll'; const propTypes = { /** All the data of the action */ diff --git a/src/pages/home/report/ReportActionListFrozenScrollContext.js b/src/pages/home/report/ReportActionListFrozenScrollContext.js index 59d488f8cab6..7e8fef346a90 100644 --- a/src/pages/home/report/ReportActionListFrozenScrollContext.js +++ b/src/pages/home/report/ReportActionListFrozenScrollContext.js @@ -1,7 +1,6 @@ -import React, {createContext, forwardRef, useMemo, useState} from "react"; -import PropTypes from "prop-types"; -import getComponentDisplayName from "../../../libs/getComponentDisplayName"; - +import React, {createContext, forwardRef, useMemo, useState} from 'react'; +import PropTypes from 'prop-types'; +import getComponentDisplayName from '../../../libs/getComponentDisplayName'; const withScrollFrozenPropTypes = { /** flag determining if we should freeze the scroll */ @@ -13,7 +12,6 @@ const withScrollFrozenPropTypes = { const ReportActionListFrozenScrollContext = createContext(null); - function ReportActionListFrozenScrollContextProvider(props) { const [shouldFreezeScroll, setShouldFreezeScroll] = useState(false); @@ -29,8 +27,7 @@ function ReportActionListFrozenScrollContextProvider(props) { [shouldFreezeScroll, setShouldFreezeScroll], ); - return {props.children}; + return {props.children}; } ReportActionListFrozenScrollContextProvider.displayName = 'ReportActionListFrozenScrollContextProvider'; @@ -42,15 +39,15 @@ ReportActionListFrozenScrollContextProvider.propTypes = { function withScrollFrozen(WrappedComponent) { const WithScrollFrozenState = forwardRef((props, ref) => ( - {(scrollFrozenProps) => - - } + {(scrollFrozenProps) => ( + + )} )); @@ -58,10 +55,4 @@ function withScrollFrozen(WrappedComponent) { return WithScrollFrozenState; } - -export { - ReportActionListFrozenScrollContext, - ReportActionListFrozenScrollContextProvider, - withScrollFrozenPropTypes, - withScrollFrozen -}; +export {ReportActionListFrozenScrollContext, ReportActionListFrozenScrollContextProvider, withScrollFrozenPropTypes, withScrollFrozen}; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 9571dd0c1701..4520f4f42f76 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -21,7 +21,7 @@ import reportPropTypes from '../../reportPropTypes'; import FloatingMessageCounter from './FloatingMessageCounter'; import ReportActionsListItemRenderer from './ReportActionsListItemRenderer'; import reportActionPropTypes from './reportActionPropTypes'; -import useFrozenScroll from "../../../hooks/useFrozenScroll"; +import useFrozenScroll from '../../../hooks/useFrozenScroll'; const propTypes = { /** The report currently being looked at */ @@ -93,7 +93,7 @@ function keyExtractor(item) { const maintainVisibleContentPositionOptions = { minIndexForVisible: 1, -} +}; function isMessageUnread(message, lastReadTime) { return Boolean(message && lastReadTime && message.created && lastReadTime < message.created);