From f83a9b365065115ab16c8211237d4bbf340ab746 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 10 Jul 2023 12:30:56 +0700 Subject: [PATCH 01/10] update attachment modal dynamically --- src/components/AttachmentCarousel/index.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 85f3abcc90aa..cf2434c0748c 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -12,6 +12,7 @@ import Button from '../Button'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import AttachmentView from '../AttachmentView'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; +import Navigation from '../../libs/Navigation/Navigation'; import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes'; @@ -73,6 +74,18 @@ class AttachmentCarousel extends React.Component { this.autoHideArrow(); } + componentDidUpdate(prevProps) { + if (_.isEqual(prevProps.reportActions, this.props.reportActions)) { + return; + } + // const { + // page, + // attachments, + // } = this.createInitialState(); + + this.setState(this.createInitialState()) + } + /** * Calculate items layout information to optimize scrolling performance * @param {*} data @@ -191,7 +204,8 @@ class AttachmentCarousel extends React.Component { const page = _.findIndex(attachments, (a) => a.source === this.props.source); if (page === -1) { - throw new Error('Attachment not found'); + Navigation.dismissModal(); + return; } // Update the parent modal's state with the source and name from the mapped attachments From 4dd20d40a6a9a1f122e99d554001e07b518f57d7 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 10 Jul 2023 15:35:04 +0700 Subject: [PATCH 02/10] refactor condition --- src/components/AttachmentCarousel/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index cf2434c0748c..4983f3fcf8b1 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -78,12 +78,13 @@ class AttachmentCarousel extends React.Component { if (_.isEqual(prevProps.reportActions, this.props.reportActions)) { return; } - // const { - // page, - // attachments, - // } = this.createInitialState(); - - this.setState(this.createInitialState()) + const nextState = this.createInitialState(); + if (!_.isEmpty(nextState)) { + const {attachments} = nextState; + this.setState({ + attachments, + }); + } } /** From 0aa8469697fd0b3a7ca1b2dac2a459c84abc0847 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 10 Jul 2023 21:10:30 +0700 Subject: [PATCH 03/10] fix/21334 --- src/components/AttachmentCarousel/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 4983f3fcf8b1..7048334b4353 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -80,10 +80,8 @@ class AttachmentCarousel extends React.Component { } const nextState = this.createInitialState(); if (!_.isEmpty(nextState)) { - const {attachments} = nextState; - this.setState({ - attachments, - }); + const {attachments, page} = nextState; + this.setState({attachments, page}); } } From 10517e87b6f1e3d7e6be6127fd08868d8f13c824 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sat, 15 Jul 2023 08:27:44 +0700 Subject: [PATCH 04/10] fix bug --- src/components/AttachmentCarousel/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 7048334b4353..64ec2401cab6 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -55,6 +55,7 @@ class AttachmentCarousel extends React.Component { // To facilitate paging through the attachments, we want to consider an item "viewable" when it is // more than 90% visible. When that happens we update the page index in the state. itemVisiblePercentThreshold: 95, + // waitForInteraction: true }; this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this); @@ -81,7 +82,12 @@ class AttachmentCarousel extends React.Component { const nextState = this.createInitialState(); if (!_.isEmpty(nextState)) { const {attachments, page} = nextState; - this.setState({attachments, page}); + this.setState({attachments, page}, () => { + if (!this.scrollRef || !this.scrollRef.current) { + return; + } + this.scrollRef.current.scrollToIndex({index: this.state.page, animated: this.canUseTouchScreen}); + }); } } @@ -199,12 +205,12 @@ class AttachmentCarousel extends React.Component { // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically) if (this.canUseTouchScreen) { attachments.reverse(); + return; } const page = _.findIndex(attachments, (a) => a.source === this.props.source); if (page === -1) { Navigation.dismissModal(); - return; } // Update the parent modal's state with the source and name from the mapped attachments @@ -257,6 +263,7 @@ class AttachmentCarousel extends React.Component { } const page = entry.index; + this.props.onNavigate(entry.item); this.setState({page, isZoomed: false, activeSource: entry.item.source}); } From 1e58e5b18fd0da0340e94a4c850bddd527184e74 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 19 Jul 2023 09:56:45 +0700 Subject: [PATCH 05/10] format code --- src/components/AttachmentCarousel/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 64ec2401cab6..aa6a927c4e9d 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -263,7 +263,6 @@ class AttachmentCarousel extends React.Component { } const page = entry.index; - this.props.onNavigate(entry.item); this.setState({page, isZoomed: false, activeSource: entry.item.source}); } From ee6af347bc24151338159773971d74e04359602d Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 19 Jul 2023 10:15:14 +0700 Subject: [PATCH 06/10] fix lint --- src/components/AttachmentCarousel/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index aa6a927c4e9d..b8e88fa25d3a 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -205,7 +205,6 @@ class AttachmentCarousel extends React.Component { // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically) if (this.canUseTouchScreen) { attachments.reverse(); - return; } const page = _.findIndex(attachments, (a) => a.source === this.props.source); From 402f106c34877aaefb9697570b123d930544b42d Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 19 Jul 2023 10:16:27 +0700 Subject: [PATCH 07/10] return when dissmiss the modal --- src/components/AttachmentCarousel/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index b8e88fa25d3a..29ad8d50eba4 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -210,6 +210,7 @@ class AttachmentCarousel extends React.Component { const page = _.findIndex(attachments, (a) => a.source === this.props.source); if (page === -1) { Navigation.dismissModal(); + return } // Update the parent modal's state with the source and name from the mapped attachments From 0109bb317033c7f363a47faa34e01468cdb72e26 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 19 Jul 2023 10:23:04 +0700 Subject: [PATCH 08/10] fix prettier --- src/components/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 29ad8d50eba4..d743ae09f572 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -210,7 +210,7 @@ class AttachmentCarousel extends React.Component { const page = _.findIndex(attachments, (a) => a.source === this.props.source); if (page === -1) { Navigation.dismissModal(); - return + return; } // Update the parent modal's state with the source and name from the mapped attachments From acf054725be3073daeb35b60925441436be99d8e Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 24 Jul 2023 09:31:38 +0700 Subject: [PATCH 09/10] aviod animated in native when dynamic update --- src/components/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index d743ae09f572..4b0cc1c57105 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -86,7 +86,7 @@ class AttachmentCarousel extends React.Component { if (!this.scrollRef || !this.scrollRef.current) { return; } - this.scrollRef.current.scrollToIndex({index: this.state.page, animated: this.canUseTouchScreen}); + this.scrollRef.current.scrollToIndex({index: this.state.page, animated: false}); }); } } From cda6d8d0e61bef33c4032b8576d31349f913edc8 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 24 Jul 2023 09:34:40 +0700 Subject: [PATCH 10/10] remove comment line --- src/components/AttachmentCarousel/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 4b0cc1c57105..bbdeb4564f91 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -55,7 +55,6 @@ class AttachmentCarousel extends React.Component { // To facilitate paging through the attachments, we want to consider an item "viewable" when it is // more than 90% visible. When that happens we update the page index in the state. itemVisiblePercentThreshold: 95, - // waitForInteraction: true }; this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);