added arrow key handler, cleaned up function and helper text

Expensify · Jul 20, 2022 · ecd2675 · ecd2675
1 parent 5886c90
commit ecd2675
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -62,17 +62,24 @@ class AttachmentCarousel extends React.Component {
         };
 
         this.cycleThroughAttachments = this.cycleThroughAttachments.bind(this);
+        this.handleArrowPress = this.handleArrowPress.bind(this);
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleArrowPress);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleArrowPress);
     }
 
     /**
      * increments or decrements the index to get another selected item
-     * @param {Boolean} shouldDecrement
+     * @param {Number} deltaSlide
     */
-    cycleThroughAttachments(shouldDecrement) {
-        this.setState((prevState) => {
-            const attachments = prevState.attachments;
-            const page = prevState.page;
-            const nextIndex = shouldDecrement ? page - 1 : page + 1;
+    cycleThroughAttachments(deltaSlide) {
+        this.setState(({attachments, page}) => {
+            const nextIndex = page + deltaSlide;
             this.props.onArrowPress(attachments[nextIndex]);
 
             return {
@@ -83,6 +90,20 @@ class AttachmentCarousel extends React.Component {
         });
     }
 
+    /**
+     * Listens for keyboard shortcuts and applies the action
+     *
+     * @param {Object} e
+     */
+    handleArrowPress(e) {
+        if (e.key === 'ArrowLeft' && !this.state.isBackDisabled) {
+            this.cycleThroughAttachments(-1);
+        }
+        if (e.key === 'ArrowRight' && !this.state.isForwardDisabled) {
+            this.cycleThroughAttachments(1);
+        }
+    }
+
     render() {
         return (
             <View style={[styles.attachmentModalArrowsContainer]}>
@@ -91,15 +112,15 @@ class AttachmentCarousel extends React.Component {
                     icon={Expensicons.BackArrow}
                     iconFill={themeColors.text}
                     iconStyles={[styles.mr0]}
-                    onPress={() => this.cycleThroughAttachments(true)}
+                    onPress={() => this.cycleThroughAttachments(-1)}
                     isDisabled={this.state.isBackDisabled}
                 />
                 <Button
                     medium
                     icon={Expensicons.ArrowRight}
                     iconFill={themeColors.text}
                     iconStyles={[styles.mr0]}
-                    onPress={() => this.cycleThroughAttachments(false)}
+                    onPress={() => this.cycleThroughAttachments(1)}
                     isDisabled={this.state.isForwardDisabled}
                 />
             </View>

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -104,7 +104,7 @@ class AttachmentModal extends PureComponent {
     }
 
     /**
-     * callback in used in AttachmentCarousel to delegate when a user presses an arrow
+     * Helps to navigate between next/previous attachments
      * @param {Object} attachmentItem
      */
     onArrowPress(attachmentItem) {