set up event handlers and styling to show arrow on mouse over

JediWattson · Jul 20, 2022 · e38f4a8 · e38f4a8
1 parent ecd2675
commit e38f4a8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -21,12 +21,15 @@ 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 */
 };
 
 const defaultProps = {
     sourceURL: '',
     reportActions: {},
     onArrowPress: () => {},
+    showArrows: true,
 };
 
 class AttachmentCarousel extends React.Component {
@@ -105,8 +108,13 @@ class AttachmentCarousel extends React.Component {
     }
 
     render() {
+        const styling = [styles.attachmentModalArrowsContainer]
+        if (!this.props.showArrows) {
+            styling.push(styles.attachmentModalArrowsHidden)
+        }
+
         return (
-            <View style={[styles.attachmentModalArrowsContainer]}>
+            <View style={styling}>
                 <Button
                     medium
                     icon={Expensicons.BackArrow}

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -75,6 +75,7 @@ class AttachmentModal extends PureComponent {
             isModalOpen: false,
             isConfirmModalOpen: false,
             reportId: null,
+            showArrows: false,
             file: {name: lodashGet(props, 'originalFileName', '')},
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
@@ -84,6 +85,7 @@ 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
@@ -113,6 +115,14 @@ class AttachmentModal extends PureComponent {
         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
@@ -210,11 +220,16 @@ class AttachmentModal extends PureComponent {
                             />
                         ) : ''}
                     />
-                    <View style={attachmentViewStyles}>
+                    <View 
+                        style={attachmentViewStyles} 
+                        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}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2018,6 +2018,11 @@ const styles = {
         justifyContent: 'space-between',
         alignItems: 'center',
         flexDirection: 'row',
+        opacity: 1,
+    },
+
+    attachmentModalArrowsHidden: {
+        opacity: 0
     },
 
     detailsPageSectionVersion: {