fixes for comments

src/CONST.js

@@ -736,14 +736,15 @@ const CONST = {
         // eslint-disable-next-line max-len
         HYPERLINK: /^(?:(?:(?:https?|ftp):\/\/)?)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i,
 
+        // eslint-disable-next-line max-len, no-misleading-character-class
+        EMOJIS: /(?:\uD83D(?:\uDC41\u200D\uD83D\uDDE8|\uDC68\u200D\uD83D[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC69\u200D\uD83D\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
+
         TAX_ID: /^\d{9}$/,
         NON_NUMERIC: /\D/g,
 
         // Extract attachment's source from the data's html string
         ATTACHMENT_DATA: /(data-expensify-source|data-name)="([^"]+)"/g,
 
-        // eslint-disable-next-line max-len, no-misleading-character-class
-        EMOJIS: /(?:\uD83D(?:\uDC41\u200D\uD83D\uDDE8|\uDC68\u200D\uD83D[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC69\u200D\uD83D\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
         EMOJI_NAME: /:[\w+-]+:/g,
         EMOJI_SUGGESTIONS: /:[a-zA-Z]{1,20}(\s[a-zA-Z]{0,20})?$/,
     },

src/components/AttachmentCarousel.js

@@ -24,13 +24,13 @@ const propTypes = {
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
     /** Callback to update the parent modal's state with a sourceUrl and name from the attachments array */
-    onArrowPress: PropTypes.func,
+    onNavigate: PropTypes.func,
 };
 
 const defaultProps = {
     sourceURL: '',
     reportActions: {},
-    onArrowPress: () => {},
+    onNavigate: () => {},
 };
 
 class AttachmentCarousel extends React.Component {
@@ -128,7 +128,7 @@ class AttachmentCarousel extends React.Component {
         this.setState(({attachments, page}) => {
             const nextIndex = page + deltaSlide;
             const {sourceURL, file} = this.getAttachment(attachments[nextIndex]);
-            this.props.onArrowPress({sourceURL, file});
+            this.props.onNavigate({sourceURL, file});
             return {
                 page: nextIndex,
                 sourceURL,
@@ -178,9 +178,9 @@ class AttachmentCarousel extends React.Component {
                     canSwipeLeft={!this.state.isBackDisabled}
                     canSwipeRight={!this.state.isForwardDisabled}
                     onPress={() => this.canUseTouchScreen && this.onShowArrow(!this.state.showArrows)}
-                    onSwipe={this.cycleThroughAttachments}
+                    onCycleThroughAttachments={this.cycleThroughAttachments}
                 >
-                    <AttachmentView onPDFPress={() => this.onShowArrow(!this.state.showArrows)} sourceURL={this.state.sourceURL} file={this.state.file} />
+                    <AttachmentView onPress={() => this.onShowArrow(!this.state.showArrows)} sourceURL={this.state.sourceURL} file={this.state.file} />
                 </Carousel>
 
             </View>

src/components/AttachmentModal.js

@@ -12,10 +12,10 @@ import AttachmentView from './AttachmentView';
 import AttachmentCarousel from './AttachmentCarousel';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import * as FileUtils from '../libs/fileDownload/FileUtils';
 import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
-import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import Button from './Button';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
@@ -91,7 +91,7 @@ class AttachmentModal extends PureComponent {
 
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
-        this.onArrowPress = this.onArrowPress.bind(this);
+        this.onNavigate = this.onNavigate.bind(this);
         this.validateAndDisplayFileToUpload = this.validateAndDisplayFileToUpload.bind(this);
         this.updateConfirmButtonVisibility = this.updateConfirmButtonVisibility.bind(this);
     }
@@ -115,10 +115,10 @@ class AttachmentModal extends PureComponent {
 
     /**
      * Helps to navigate between next/previous attachments
-     * @param {Object} {sourceURL, file}
+     * @param {Object} param
      */
-    onArrowPress({sourceURL, file}) {
-        this.setState({sourceURL, file});
+    onNavigate(param) {
+        this.setState(param);
     }
 
     /**
@@ -294,7 +294,7 @@ class AttachmentModal extends PureComponent {
                             <AttachmentCarousel
                                 showArrows={this.state.showArrows}
                                 reportId={this.state.reportId}
-                                onArrowPress={this.onArrowPress}
+                                onNavigate={this.onNavigate}
                                 sourceURL={this.props.sourceURL}
                             />
                         ) : (this.state.sourceURL

src/components/AttachmentView.js

@@ -28,8 +28,8 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
-    /** Function for native pdf to handle toggling arrows */
-    onPDFPress: PropTypes.func,
+    /** Function for handle on press */
+    onPress: PropTypes.func,
 
     /** Notify parent that the UI should be modified to accommodate keyboard */
     onToggleKeyboard: PropTypes.func,
@@ -43,7 +43,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
-    onPDFPress: () => {},
+    onPress: () => {},
     onToggleKeyboard: () => {},
 };
 
@@ -54,7 +54,7 @@ const AttachmentView = (props) => {
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
         return (
             <PDFView
-                onPress={props.onPDFPress}
+                onPress={props.onPress}
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}

src/components/Carousel/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Pressable} from 'react-native';
-import canUseTouchScreen from '../../libs/canUseTouchscreen';
 
 const propTypes = {
     /** handles onPress events with a callback  */
@@ -30,21 +29,14 @@ class Carousel extends React.Component {
     constructor(props) {
         super(props);
 
-        this.canUseTouchScreen = canUseTouchScreen();
         this.handleKeyPress = this.handleKeyPress.bind(this);
     }
 
     componentDidMount() {
-        if (this.canUseTouchScreen) {
-            return;
-        }
         document.addEventListener('keydown', this.handleKeyPress);
     }
 
     componentWillUnmount() {
-        if (this.canUseTouchScreen) {
-            return;
-        }
         document.removeEventListener('keydown', this.handleKeyPress);
     }
 

src/components/Carousel/index.native.js

@@ -8,7 +8,7 @@ const propTypes = {
     children: PropTypes.element.isRequired,
 
     /** Callback to fire when swiping left or right */
-    onSwipe: PropTypes.func,
+    onCycleThroughAttachments: PropTypes.func,
 
     /** Callback to handle a press event because PanResponder will intercept all gestures */
     onPress: PropTypes.func,
@@ -19,7 +19,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    onSwipe: () => {},
+    onCycleThroughAttachments: () => {},
     onPress: () => {},
     canSwipeLeft: false,
     canSwipeRight: false,
@@ -38,7 +38,6 @@ class Carousel extends Component {
             }], {useNativeDriver: false})(event, gestureState),
 
             onPanResponderRelease: (event, gestureState) => {
-                // For swiping through images, I needed to catch a single press to hide the arrows
                 if (gestureState.dx === 0 && gestureState.dy === 0) {
                     return this.props.onPress();
                 }
@@ -55,7 +54,7 @@ class Carousel extends Component {
                         return;
                     }
 
-                    this.props.onSwipe(deltaSlide);
+                    this.props.onCycleThroughAttachments(deltaSlide);
                     this.pan.setValue(slideLength);
                     Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: 0}).start();
                 });