Merge pull request Expensify#23072 from jczekalski/migrate-attachment…

…-carousel

Migrate AttachmentCarousel/index.js to function component

src/components/AttachmentCarousel/CarouselActions.js

@@ -46,7 +46,7 @@ function Carousel(props) {
             unsubscribeRightKey();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [props.onCycleThroughAttachments]);
 
     return null;
 }

src/components/AttachmentCarousel/attachmentCarouselPropTypes.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
+import reportPropTypes from '../../pages/reportPropTypes';
+
+const propTypes = {
+    /** source is used to determine the starting index in the array of attachments */
+    source: PropTypes.string,
+
+    /** Callback to update the parent modal's state with a source and name from the attachments array */
+    onNavigate: PropTypes.func,
+
+    /** Object of report actions for this report */
+    reportActions: PropTypes.shape(reportActionPropTypes),
+
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+};
+
+const defaultProps = {
+    source: '',
+    reportActions: {},
+    onNavigate: () => {},
+};
+
+export {propTypes, defaultProps};

src/components/AttachmentCarousel/createInitialState.js

@@ -0,0 +1,65 @@
+import _ from 'underscore';
+import {Parser as HtmlParser} from 'htmlparser2';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
+import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
+import CONST from '../../CONST';
+
+/**
+ * Constructs the initial component state from report actions
+ * @param {propTypes} props
+ * @returns {{page: Number, attachments: Array}}
+ */
+function createInitialState(props) {
+    const actions = [ReportActionsUtils.getParentReportAction(props.report), ...ReportActionsUtils.getSortedReportActions(_.values(props.reportActions))];
+    const attachments = [];
+
+    const htmlParser = new HtmlParser({
+        onopentag: (name, attribs) => {
+            if (name !== 'img' || !attribs.src) {
+                return;
+            }
+
+            const expensifySource = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
+
+            // By iterating actions in chronological order and prepending each attachment
+            // we ensure correct order of attachments even across actions with multiple attachments.
+            attachments.unshift({
+                source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
+                isAuthTokenRequired: Boolean(expensifySource),
+                file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
+            });
+        },
+    });
+
+    _.forEach(actions, (action, key) => {
+        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
+            return;
+        }
+        htmlParser.write(_.get(action, ['message', 0, 'html']));
+    });
+    htmlParser.end();
+
+    // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
+    // promotes the natural feeling of swiping left/right to go to the next/previous image
+    // We don't want to invert the list for desktop/web because this interferes with mouse
+    // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
+    if (DeviceCapabilities.canUseTouchScreen()) {
+        attachments.reverse();
+    }
+
+    const page = _.findIndex(attachments, (a) => a.source === props.source);
+    if (page === -1) {
+        throw new Error('Attachment not found');
+    }
+
+    // Update the parent modal's state with the source and name from the mapped attachments
+    props.onNavigate(attachments[page]);
+
+    return {
+        page,
+        attachments,
+    };
+}
+
+export default createInitialState;