From 73be910420842d4c1fb8bc8434cbc735c39a7a7a Mon Sep 17 00:00:00 2001 From: Tam Dao Date: Sat, 2 Sep 2023 06:26:35 +0700 Subject: [PATCH 1/4] Fix image loads on reesize window --- .../AttachmentCarouselCellRenderer.js | 23 +++++++++++++++ .../Attachments/AttachmentCarousel/index.js | 29 ++----------------- src/components/withWindowDimensions.js | 22 +++++++------- 3 files changed, 37 insertions(+), 37 deletions(-) create mode 100644 src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js new file mode 100644 index 000000000000..be59f6a834f5 --- /dev/null +++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {View, PixelRatio} from 'react-native'; +import useWindowDimensions from '../../../hooks/useWindowDimensions'; +import styles from '../../../styles/styles'; + +function AttachmentCarouselCellRenderer(props) { + const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); + const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true); + // eslint-disable-next-line react/prop-types + const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}]; + + return ( + + ); +} + +AttachmentCarouselCellRenderer.displayName = 'AttachmentCarouselCellRenderer'; + +export default React.memo(AttachmentCarouselCellRenderer); diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 53c2c840d95d..974fb5060f8f 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -14,11 +14,11 @@ import ONYXKEYS from '../../../ONYXKEYS'; import withLocalize from '../../withLocalize'; import compose from '../../../libs/compose'; import useCarouselArrows from './useCarouselArrows'; -import useWindowDimensions from '../../../hooks/useWindowDimensions'; import Navigation from '../../../libs/Navigation/Navigation'; import BlockingView from '../../BlockingViews/BlockingView'; import * as Illustrations from '../../Icon/Illustrations'; import variables from '../../../styles/variables'; +import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer'; const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen(); const viewabilityConfig = { @@ -30,8 +30,6 @@ const viewabilityConfig = { function AttachmentCarousel({report, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { const scrollRef = useRef(null); - const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); - const [containerWidth, setContainerWidth] = useState(0); const [page, setPage] = useState(0); const [attachments, setAttachments] = useState([]); @@ -117,29 +115,6 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl [containerWidth], ); - /** - * Defines how a container for a single attachment should be rendered - * @param {Object} cellRendererProps - * @returns {JSX.Element} - */ - const renderCell = useCallback( - (cellProps) => { - // Use window width instead of layout width to address the issue in https://github.com/Expensify/App/issues/17760 - // considering horizontal margin and border width in centered modal - const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true); - const style = [cellProps.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}]; - - return ( - - ); - }, - [isSmallScreenWidth, windowWidth], - ); - /** * Defines how a single attachment should be rendered * @param {Object} item @@ -212,7 +187,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl windowSize={5} maxToRenderPerBatch={3} data={attachments} - CellRendererComponent={renderCell} + CellRendererComponent={AttachmentCarouselCellRenderer} renderItem={renderItem} getItemLayout={getItemLayout} keyExtractor={(item) => item.source} diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js index 9ec9c5d4acbd..2290aff0f304 100644 --- a/src/components/withWindowDimensions.js +++ b/src/components/withWindowDimensions.js @@ -1,5 +1,6 @@ -import React, {forwardRef, createContext, useState, useEffect} from 'react'; +import React, {forwardRef, createContext, useState, useEffect, useCallback} from 'react'; import PropTypes from 'prop-types'; +import lodashDebounce from 'lodash/debounce'; import {Dimensions} from 'react-native'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import getComponentDisplayName from '../libs/getComponentDisplayName'; @@ -41,17 +42,18 @@ function WindowDimensionsProvider(props) { }; }); - useEffect(() => { - const onDimensionChange = (newDimensions) => { - const {window} = newDimensions; + const onDimensionChange = useCallback((newDimensions) => { + const {window} = newDimensions; + setWindowDimension({ + windowHeight: window.height, + windowWidth: window.width, + }); + }, []); - setWindowDimension({ - windowHeight: window.height, - windowWidth: window.width, - }); - }; + const onDimensionChangeDebounce = useCallback(lodashDebounce(onDimensionChange, 300), []); - const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChange); + useEffect(() => { + const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChangeDebounce); return () => { if (!dimensionsEventListener) { From 74a2652cb5b8fddce8b6b6c7a89d7a88c3cb214d Mon Sep 17 00:00:00 2001 From: Tam Dao Date: Sat, 2 Sep 2023 07:17:09 +0700 Subject: [PATCH 2/4] Add prop types into AttachmentCarouselCellRenderer component --- .../AttachmentCarouselCellRenderer.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js index be59f6a834f5..2c698d5c8a61 100644 --- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js +++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js @@ -1,12 +1,21 @@ import React from 'react'; +import PropTypes from 'prop-types'; import {View, PixelRatio} from 'react-native'; import useWindowDimensions from '../../../hooks/useWindowDimensions'; import styles from '../../../styles/styles'; +const propTypes = { + /** Cell Container styles */ + style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), +}; + +const defaultProps = { + style: [], +}; + function AttachmentCarouselCellRenderer(props) { const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true); - // eslint-disable-next-line react/prop-types const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}]; return ( @@ -18,6 +27,8 @@ function AttachmentCarouselCellRenderer(props) { ); } +AttachmentCarouselCellRenderer.propTypes = propTypes; +AttachmentCarouselCellRenderer.defaultProps = defaultProps; AttachmentCarouselCellRenderer.displayName = 'AttachmentCarouselCellRenderer'; export default React.memo(AttachmentCarouselCellRenderer); From bcc644c4140321453190497707a7e11d197ff122 Mon Sep 17 00:00:00 2001 From: Tam Dao Date: Tue, 5 Sep 2023 00:08:03 +0700 Subject: [PATCH 3/4] fix eslint warning --- src/components/withWindowDimensions.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js index 2290aff0f304..6feb81b957a8 100644 --- a/src/components/withWindowDimensions.js +++ b/src/components/withWindowDimensions.js @@ -42,17 +42,17 @@ function WindowDimensionsProvider(props) { }; }); - const onDimensionChange = useCallback((newDimensions) => { - const {window} = newDimensions; - setWindowDimension({ - windowHeight: window.height, - windowWidth: window.width, - }); - }, []); + useEffect(() => { + const onDimensionChange = (newDimensions) => { + const {window} = newDimensions; + setWindowDimension({ + windowHeight: window.height, + windowWidth: window.width, + }); + }; - const onDimensionChangeDebounce = useCallback(lodashDebounce(onDimensionChange, 300), []); + const onDimensionChangeDebounce = lodashDebounce(onDimensionChange, 300); - useEffect(() => { const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChangeDebounce); return () => { From e15c420419bf6de00a28e6bb419a30092eac531f Mon Sep 17 00:00:00 2001 From: Tam Dao Date: Tue, 12 Sep 2023 09:05:50 +0900 Subject: [PATCH 4/4] remove unused func --- src/components/withWindowDimensions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js index 6feb81b957a8..5ce39bbf2b42 100644 --- a/src/components/withWindowDimensions.js +++ b/src/components/withWindowDimensions.js @@ -1,4 +1,4 @@ -import React, {forwardRef, createContext, useState, useEffect, useCallback} from 'react'; +import React, {forwardRef, createContext, useState, useEffect} from 'react'; import PropTypes from 'prop-types'; import lodashDebounce from 'lodash/debounce'; import {Dimensions} from 'react-native';