moved everything into carousel

Expensify · Jul 20, 2022 · ad64a2f · ad64a2f
1 parent b741616
commit ad64a2f
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 79 deletions.
diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'lodash';
 import Button from './Button';
 import * as Expensicons from './Icon/Expensicons';
 import styles from '../styles/styles';
+import AttachmentView from './AttachmentView';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import themeColors from '../styles/themes/default';
 import reportActionPropTypes from '../pages/home/report/reportActionPropTypes';
 import canUseTouchScreen from '../libs/canUseTouchscreen';
@@ -22,16 +24,12 @@ const propTypes = {
 
     /** Callback to update the parent modal's state with a sourceUrl and name from the attachments array */
     onArrowPress: PropTypes.func,
-
-    /** Hides arrows if set to false */
-    showArrows: PropTypes.bool,
 };
 
 const defaultProps = {
     sourceURL: '',
-    reportActions: {},
     onArrowPress: () => {},
-    showArrows: true,
+    reportActions: {},
 };
 
 class AttachmentCarousel extends React.Component {
@@ -58,43 +56,71 @@ class AttachmentCarousel extends React.Component {
             }
             return attachmentsAccumulator;
         }, []);
-
+        const {sourceURL, file} = this.getAttachment(attachments[page]);
         this.state = {
             page,
             attachments,
+            sourceURL,
+            file,
+            showArrows: !canUseTouchScreen(),
             isBackDisabled: page === 0,
             isForwardDisabled: page === attachments.length - 1,
         };
 
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
         this.handleArrowPress = this.handleArrowPress.bind(this);
+        this.onShowArrow = this.onShowArrow.bind(this);
     }
 
     componentDidMount() {
-        if(canUseTouchScreen) {
-            return
+        if (canUseTouchScreen()) {
+            return;
         }
         document.addEventListener('keydown', this.handleArrowPress);
     }
 
     componentWillUnmount() {
-        if(canUseTouchScreen()) {
-            return
+        if (canUseTouchScreen()) {
+            return;
         }
         document.removeEventListener('keydown', this.handleArrowPress);
     }
 
+    /**
+     * Toggles the visibility of the arrows on mouse hover
+     * @param {Boolean} showArrows
+     */
+    onShowArrow(showArrows) {
+        this.setState({showArrows});
+    }
+
+    /**
+     * Helps to navigate between next/previous attachments
+     * @param {Object} attachmentItem
+     * @returns {Object}
+     */
+    getAttachment(attachmentItem) {
+        const sourceURL = _.get(attachmentItem, 'sourceURL', '');
+        const file = _.get(attachmentItem, 'file', {name: ''});
+        return {
+            sourceURL: addEncryptedAuthTokenToURL(sourceURL),
+            file,
+        };
+    }
+
     /**
      * increments or decrements the index to get another selected item
      * @param {Number} deltaSlide
     */
     cycleThroughAttachments(deltaSlide) {
         this.setState(({attachments, page}) => {
             const nextIndex = page + deltaSlide;
-            this.props.onArrowPress(attachments[nextIndex]);
-
+            const {sourceURL, file} = this.getAttachment(attachments[nextIndex]);
+            this.props.onArrowPress({sourceURL, file});
             return {
                 page: nextIndex,
+                sourceURL,
+                file,
                 isBackDisabled: nextIndex === 0,
                 isForwardDisabled: nextIndex === attachments.length - 1,
             };
@@ -116,30 +142,38 @@ class AttachmentCarousel extends React.Component {
     }
 
     render() {
-        const styling = [styles.attachmentModalArrowsContainer];
-        if (!this.props.showArrows) {
-            styling.push(styles.attachmentModalArrowsHidden);
-        }
-
         return (
-            <View style={styling}>
-                <Button
-                    medium
-                    icon={Expensicons.BackArrow}
-                    iconFill={themeColors.text}
-                    iconStyles={[styles.mr0]}
-                    onPress={() => this.cycleThroughAttachments(-1)}
-                    isDisabled={this.state.isBackDisabled}
-                />
-                <Button
-                    medium
-                    icon={Expensicons.ArrowRight}
-                    iconFill={themeColors.text}
-                    iconStyles={[styles.mr0]}
-                    onPress={() => this.cycleThroughAttachments(1)}
-                    isDisabled={this.state.isForwardDisabled}
-                />
-            </View>
+            <Pressable
+                style={[styles.attachmentModalArrowsContainer]}
+                onPress={() => canUseTouchScreen() && this.onShowArrow(!this.state.showArrows)}
+                onMouseEnter={() => this.onShowArrow(true)}
+                onMouseLeave={() => this.onShowArrow(false)}
+            >
+                {this.state.showArrows && (
+                    <>
+                        <Button
+                            medium
+                            style={[styles.leftAttachmentArrow]}
+                            icon={Expensicons.BackArrow}
+                            iconFill={themeColors.text}
+                            iconStyles={[styles.mr0, {PointerEvent: 'auto'}]}
+                            onPress={() => this.cycleThroughAttachments(-1)}
+                            isDisabled={this.state.isBackDisabled}
+                        />
+                        <Button
+                            medium
+                            style={[styles.rightAttachmentArrow]}
+                            icon={Expensicons.ArrowRight}
+                            iconFill={themeColors.text}
+                            iconStyles={[styles.mr0, {PointerEvent: 'auto'}]}
+                            onPress={() => this.cycleThroughAttachments(1)}
+                            isDisabled={this.state.isForwardDisabled}
+                        />
+                    </>
+                )}
+                <AttachmentView sourceURL={this.state.sourceURL} file={this.state.file} />
+            </Pressable>
+
         );
     }
 }

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Pressable, View} from 'react-native';
+import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import _ from 'lodash';
@@ -11,8 +11,8 @@ import AttachmentView from './AttachmentView';
 import AttachmentCarousel from './AttachmentCarousel';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import Button from './Button';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
@@ -85,7 +85,6 @@ class AttachmentModal extends PureComponent {
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.isValidSize = this.isValidSize.bind(this);
         this.onArrowPress = this.onArrowPress.bind(this);
-        this.onShowArrow = this.onShowArrow.bind(this);
     }
 
     // this prevents a bug in iOS that would show the last image before closing then opening on a new image
@@ -107,22 +106,12 @@ class AttachmentModal extends PureComponent {
 
     /**
      * Helps to navigate between next/previous attachments
-     * @param {Object} attachmentItem
+     * @param {Object} {sourceURL, file}
      */
-    onArrowPress(attachmentItem) {
-        const sourceURL = lodashGet(attachmentItem, 'sourceURL', '');
-        const file = lodashGet(attachmentItem, 'file', {name: ''});
+    onArrowPress({sourceURL, file}) {
         this.setState({sourceURL, file});
     }
 
-    /**
-     * Toggles the visibility of the arrows on mouse hover
-     * @param {Boolean} showArrows
-     */
-    onShowArrow(showArrows) {
-        this.setState({showArrows});
-    }
-
     /**
      * If our attachment is a PDF, return the unswipeable Modal type.
      * @param {String} sourceUrl
@@ -220,27 +209,21 @@ class AttachmentModal extends PureComponent {
                             />
                         ) : ''}
                     />
-                    <Pressable
-                        style={attachmentViewStyles}
-                        onPress={() => this.onShowArrow(!this.state.showArrows)} 
-                        onMouseEnter={() => this.onShowArrow(true)}
-                        onMouseLeave={() => this.onShowArrow(false)}
-                    >
-                        <>
-                            <AttachmentView sourceURL={sourceURL} file={this.state.file} />
-                            {this.state.reportId && (
-                                <AttachmentCarousel
-                                    showArrows={this.state.showArrows}
-                                    reportId={this.state.reportId}
-                                    onArrowPress={this.onArrowPress}
-                                    sourceURL={this.state.sourceURL}
-                                />
-                            )}
-                        </>
-                    </Pressable>
-
+                    <View style={attachmentViewStyles}>
+                        {this.state.reportId ? (
+                            <AttachmentCarousel
+                                showArrows={this.state.showArrows}
+                                reportId={this.state.reportId}
+                                onArrowPress={this.onArrowPress}
+                                sourceURL={this.state.sourceURL}
+                            />
+                        ) : (this.state.sourceURL
+                            && <AttachmentView sourceURL={this.state.sourceURL} file={this.state.file} />
+                        )}
+                    </View>
                     {/* If we have an onConfirm method show a confirmation button */}
-                    {this.props.onConfirm && (
+                    {this.props.onConfirm
+                        && (
                         <Button
                             success
                             style={[styles.buttonConfirm]}
@@ -249,7 +232,7 @@ class AttachmentModal extends PureComponent {
                             onPress={this.submitAndClose}
                             pressOnEnter
                         />
-                    )}
+                        )}
                 </Modal>
                 <ConfirmModal
                     title={this.props.translate('attachmentPicker.attachmentTooLarge')}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2013,16 +2013,22 @@ const styles = {
     },
 
     attachmentModalArrowsContainer: {
-        width: '90%',
+        display: 'flex',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+
+    leftAttachmentArrow: {
+        zIndex: 22,
         position: 'absolute',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        flexDirection: 'row',
-        opacity: 1,
+        left: 32,
     },
 
-    attachmentModalArrowsHidden: {
-        opacity: 0,
+    rightAttachmentArrow: {
+        zIndex: 22,
+        position: 'absolute',
+        right: 32,
     },
 
     detailsPageSectionVersion: {