Improved UX when pasting images and there is an error

src/CONST.js

@@ -171,6 +171,13 @@ const CONST = {
         PHONE_E164_PLUS: /^\+?[1-9]\d{1,14}$/,
         NON_ALPHA_NUMERIC: /[^A-Za-z0-9+]/g,
     },
+
+    GROWL: {
+        SUCCESS: 'success',
+        ERROR: 'error',
+        WARNING: 'warning',
+        DURATION: 2000,
+    },
 };
 
 export default CONST;

src/Expensify.js

@@ -16,6 +16,8 @@ import styles from './styles/styles';
 import PushNotification from './libs/Notification/PushNotification';
 import UpdateAppModal from './components/UpdateAppModal';
 import Visibility from './libs/Visibility';
+import GrowlNotification from './components/GrowlNotification';
+import {growlRef} from './libs/Growl';
 
 // Initialize the store when the app loads for the first time
 Onyx.init({
@@ -156,6 +158,7 @@ class Expensify extends PureComponent {
         }
         return (
             <>
+                <GrowlNotification ref={growlRef} />
                 {/* We include the modal for showing a new update at the top level so the option is always present. */}
                 {this.props.updateAvailable ? <UpdateAppModal /> : null}
                 <NavigationRoot authenticated={Boolean(this.getAuthToken())} />

src/libs/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js → src/components/GrowlNotification/GrowlNotificationContainer/GrowlNotificationContainerPropTypes.js

@@ -1,6 +1,6 @@
 import {Animated} from 'react-native';
 import PropTypes from 'prop-types';
-import {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import {windowDimensionsPropTypes} from '../../withWindowDimensions';
 
 const propTypes = {
     /** GrowlNotification content */

src/libs/GrowlNotification/GrowlNotificationContainer/index.js → src/components/GrowlNotification/GrowlNotificationContainer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated} from 'react-native';
 import styles from '../../../styles/styles';
-import withWindowDimensions from '../../../components/withWindowDimensions';
+import withWindowDimensions from '../../withWindowDimensions';
 import propTypes from './GrowlNotificationContainerPropTypes';
 
 const GrowlNotificationContainer = ({children, translateY, isSmallScreenWidth}) => (

src/components/GrowlNotification/GrowlNotificationContainer/index.native.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import styles, {getSafeAreaPadding} from '../../../styles/styles';
+import propTypes from './GrowlNotificationContainerPropTypes';
+
+const GrowlNotificationContainer = ({children, translateY}) => (
+    <SafeAreaInsetsContext.Consumer>
+        {insets => (
+            <Animated.View
+                style={[
+                    styles.growlNotificationContainer,
+                    getSafeAreaPadding(insets),
+                    styles.growlNotificationTranslateY(translateY),
+                ]}
+            >
+                {children}
+            </Animated.View>
+        )}
+    </SafeAreaInsetsContext.Consumer>
+);
+
+GrowlNotificationContainer.propTypes = propTypes;
+
+export default GrowlNotificationContainer;

src/libs/GrowlNotification/index.js → src/components/GrowlNotification/index.js

@@ -6,21 +6,22 @@ import {
     Directions, FlingGestureHandler, State, TouchableWithoutFeedback,
 } from 'react-native-gesture-handler';
 import colors from '../../styles/colors';
-import Icon from '../../components/Icon';
-import {Checkmark, Exclamation} from '../../components/Icon/Expensicons';
+import Icon from '../Icon';
+import {Checkmark, Exclamation} from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
+import CONST from '../../CONST';
 
 const types = {
-    success: {
+    [CONST.GROWL.SUCCESS]: {
         icon: Checkmark,
         iconColor: colors.green,
     },
-    error: {
+    [CONST.GROWL.ERROR]: {
         icon: Exclamation,
         iconColor: colors.red,
     },
-    warning: {
+    [CONST.GROWL.WARNING]: {
         icon: Exclamation,
         iconColor: colors.yellow,
     },
@@ -47,9 +48,9 @@ class GrowlNotification extends Component {
      *
      * @param {String} bodyText
      * @param {String} type
-     * @param {Number} duration - 2000
+     * @param {Number} duration
     */
-    show(bodyText, type, duration = 2000) {
+    show(bodyText, type, duration) {
         this.setState({
             bodyText,
             type,

src/components/TextInputFocusable/index.js

@@ -3,7 +3,9 @@ import {TextInput, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -108,6 +110,11 @@ class TextInputFocusable extends React.Component {
                 end: initialValue.length,
             },
         };
+        this.selection = {
+            start: initialValue.length,
+            end: initialValue.length,
+        };
+        this.saveSelection = this.saveSelection.bind(this);
     }
 
     componentDidMount() {
@@ -176,6 +183,17 @@ class TextInputFocusable extends React.Component {
         return newNumberOfLines;
     }
 
+    /**
+     * Keeps track of user cursor position on the Composer
+     *
+     * @param {{nativeEvent: {selection: any}}} event
+     * @memberof TextInputFocusable
+     */
+    saveSelection(event) {
+        this.selection = event.nativeEvent.selection;
+        this.props.onSelectionChange(event);
+    }
+
     /**
      * Check the paste event for an attachment, parse the data and
      * call onPasteFile from props with the selected file
@@ -185,13 +203,15 @@ class TextInputFocusable extends React.Component {
     checkForAttachment(event) {
         const {files, types} = event.clipboardData;
         const TEXT_HTML = 'text/html';
+        const TEXT_PLAIN = 'text/plain';
         if (files.length > 0) {
             // Prevent the default so we do not post the file name into the text box
             event.preventDefault();
             this.props.onPasteFile(event.clipboardData.files[0]);
         } else if (types.includes(TEXT_HTML)) {
             const domparser = new DOMParser();
             const embededImages = domparser.parseFromString(event.clipboardData.getData(TEXT_HTML), TEXT_HTML).images;
+            const pastedText = event.clipboardData.getData(TEXT_PLAIN);
             if (embededImages.length > 0) {
                 event.preventDefault();
                 fetch(embededImages[0].src)
@@ -208,9 +228,23 @@ class TextInputFocusable extends React.Component {
                         return new File([x], `pasted_image.${extension}`, {});
                     })
                     .then(this.props.onPasteFile)
-                    .catch((error) => {
+                    .catch(() => {
                         const errorDesc = this.props.translate('textInputFocusable.problemGettingImageYouPasted');
-                        alert(`${errorDesc}. \n${error.message}`);
+                        Growl.show(errorDesc, CONST.GROWL.ERROR);
+
+                        /*
+                        * Since we intercepted the user-triggered paste event to check for attachments,
+                        * we need to manually set the value and call the `onChangeText` handler.
+                        * Synthetically-triggered paste events do not affect the document's contents.
+                        * See https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event for more details.
+                        */
+                        const beforeCursorText = this.textInput.value.substring(0, this.selection.start);
+                        const afterCursorText = this.textInput.value.substring(this.selection.end);
+                        this.textInput.value = beforeCursorText + pastedText + afterCursorText;
+                        this.updateNumberOfLines();
+                        this.props.onChangeText(this.textInput.value);
+                        const newCursorPosition = beforeCursorText.length + pastedText.length;
+                        this.setState({selection: {start: newCursorPosition, end: newCursorPosition}});
                     });
             }
         }
@@ -247,12 +281,12 @@ class TextInputFocusable extends React.Component {
                 onChange={() => {
                     this.updateNumberOfLines();
                 }}
+                onSelectionChange={this.saveSelection}
                 numberOfLines={this.state.numberOfLines}
                 style={propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsWithoutStyles}
                 disabled={this.props.isDisabled}
-                onSelectionChange={this.props.onSelectionChange}
             />
         );
     }

src/libs/Growl.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import CONST from '../CONST';
+
+export const growlRef = React.createRef();
+
+/**
+ * Show the growl notification
+ *
+ * @param {String} bodyText
+ * @param {String} type
+ * @param {Number} [duration]
+*/
+function show(bodyText, type, duration = CONST.GROWL.DURATION) {
+    growlRef.current.show(bodyText, type, duration);
+}
+
+
+export default {show};

src/pages/settings/Profile/ProfilePage.js

@@ -29,8 +29,8 @@ import CreateMenu from '../../../components/CreateMenu';
 import Picker from '../../../components/Picker';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import GrowlNotification from '../../../libs/GrowlNotification';
 import Button from '../../../components/Button';
+import Growl from '../../../libs/Growl';
 
 const propTypes = {
     /* Onyx Props */
@@ -131,7 +131,6 @@ class ProfilePage extends Component {
         this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this);
         this.getLogins = this.getLogins.bind(this);
         this.createMenuItems = this.createMenuItems.bind(this);
-        this.growlNotification = undefined;
     }
 
     componentDidUpdate(prevProps) {
@@ -211,7 +210,7 @@ class ProfilePage extends Component {
             },
         });
 
-        this.growlNotification.show(this.props.translate('profilePage.growlMessageOnSave'), 'success', 3000);
+        Growl.show(this.props.translate('profilePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
     }
 
     /**
@@ -261,7 +260,6 @@ class ProfilePage extends Component {
 
         return (
             <ScreenWrapper>
-                <GrowlNotification ref={el => this.growlNotification = el} />
                 <HeaderWithCloseButton
                     title={this.props.translate('common.profile')}
                     shouldShowBackButton

src/styles/styles.js

@@ -1456,12 +1456,12 @@ const styles = {
         justifyContent: 'flex-start',
         position: 'absolute',
         width: '100%',
+        top: 20,
         ...spacing.ph5,
     },
 
     growlNotificationDesktopContainer: {
-        maxWidth: '380px',
-        top: '20px',
+        maxWidth: 380,
         right: 0,
         position: 'fixed',
     },