Merge pull request #7580 from mananjadhav/feat/emoji-picker-in-edit-m…

…essage

PR 3: Adding EmojiPicker to the Edit Comment

src/components/EmojiPicker/index.js

@@ -13,6 +13,7 @@ class EmojiPicker extends React.Component {
         this.showEmojiPicker = this.showEmojiPicker.bind(this);
         this.selectEmoji = this.selectEmoji.bind(this);
         this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this);
+        this.measureEmojiPopoverAnchorPositionAndUpdateState = this.measureEmojiPopoverAnchorPositionAndUpdateState.bind(this);
         this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this);
         this.measureContent = this.measureContent.bind(this);
         this.onModalHide = () => {};
@@ -30,7 +31,7 @@ class EmojiPicker extends React.Component {
     }
 
     componentDidMount() {
-        this.emojiPopoverDimensionListener = Dimensions.addEventListener('change', this.measureEmojiPopoverAnchorPosition);
+        this.emojiPopoverDimensionListener = Dimensions.addEventListener('change', this.measureEmojiPopoverAnchorPositionAndUpdateState);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -62,6 +63,7 @@ class EmojiPicker extends React.Component {
     }
 
     hideEmojiPicker() {
+        this.emojiPopoverAnchor = null;
         this.setState({isEmojiPickerVisible: false});
     }
 
@@ -77,18 +79,24 @@ class EmojiPicker extends React.Component {
         this.onEmojiSelected = onEmojiSelected;
         this.emojiPopoverAnchor = emojiPopoverAnchor;
 
-        this.setState({isEmojiPickerVisible: true});
-        this.measureEmojiPopoverAnchorPosition();
+        this.measureEmojiPopoverAnchorPosition().then((emojiPopoverAnchorPosition) => {
+            this.setState({isEmojiPickerVisible: true, emojiPopoverAnchorPosition});
+        });
     }
 
     measureEmojiPopoverAnchorPosition() {
-        if (!this.emojiPopoverAnchor) {
-            return;
-        }
+        return new Promise((resolve) => {
+            if (!this.emojiPopoverAnchor) {
+                return resolve({horizontal: 0, vertical: 0});
+            }
+            this.emojiPopoverAnchor.measureInWindow((x, y, width) => resolve({horizontal: x + width, vertical: y}));
+        });
+    }
 
-        this.emojiPopoverAnchor.measureInWindow((x, y, width) => this.setState({
-            emojiPopoverAnchorPosition: {horizontal: x + width, vertical: y},
-        }));
+    measureEmojiPopoverAnchorPositionAndUpdateState() {
+        this.measureEmojiPopoverAnchorPosition().then((emojiPopoverAnchorPosition) => {
+            this.setState({emojiPopoverAnchorPosition});
+        });
     }
 
     /**
@@ -125,6 +133,7 @@ class EmojiPicker extends React.Component {
                 onModalShow={this.focusEmojiSearchInput}
                 onModalHide={this.onModalHide}
                 hideModalContentWhileAnimating
+                shouldSetModalVisibility={false}
                 animationInTiming={1}
                 animationOutTiming={1}
                 anchorPosition={{

src/pages/home/report/ReportActionItem.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
+import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import CONST from '../../../CONST';
@@ -144,6 +145,8 @@ class ReportActionItem extends Component {
                             reportID={this.props.reportID}
                             index={this.props.index}
                             ref={el => this.textInput = el}
+                            report={this.props.report}
+                            blockedFromConcierge={this.props.blockedFromConcierge}
                     />
                 );
         }
@@ -211,4 +214,12 @@ export default compose(
             return lodashGet(drafts, draftKey, '');
         },
     }),
+    withOnyx({
+        blockedFromConcierge: {
+            key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
+        },
+        report: {
+            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+        },
+    }),
 )(ReportActionItem);

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -14,8 +14,11 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import Button from '../../../components/Button';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
+import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
+import * as ReportUtils from '../../../libs/reportUtils';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
+import * as User from '../../../libs/actions/User';
 
 const propTypes = {
     /** All the data of the action */
@@ -33,6 +36,18 @@ const propTypes = {
     /** A ref to forward to the text input */
     forwardedRef: PropTypes.func,
 
+    /** The report currently being looked at */
+    report: PropTypes.shape({
+        /** Participants associated with current report */
+        participants: PropTypes.arrayOf(PropTypes.string),
+    }),
+
+    // The NVP describing a user's block status
+    blockedFromConcierge: PropTypes.shape({
+        // The date that the user will be unblocked
+        expiresAt: PropTypes.string,
+    }),
+
     /** Window Dimensions Props */
     ...windowDimensionsPropTypes,
 
@@ -42,6 +57,8 @@ const propTypes = {
 
 const defaultProps = {
     forwardedRef: () => {},
+    report: {},
+    blockedFromConcierge: {},
 };
 
 class ReportActionItemMessageEdit extends React.Component {
@@ -53,6 +70,7 @@ class ReportActionItemMessageEdit extends React.Component {
         this.publishDraft = this.publishDraft.bind(this);
         this.triggerSaveOrCancel = this.triggerSaveOrCancel.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
 
         const parser = new ExpensiMark();
         const draftMessage = parser.htmlToMarkdown(this.props.draftMessage);
@@ -139,6 +157,21 @@ class ReportActionItemMessageEdit extends React.Component {
         this.deleteDraft();
     }
 
+    /**
+     * @param {String} emoji
+     */
+    addEmojiToTextBox(emoji) {
+        const newComment = this.state.draft.slice(0, this.state.selection.start)
+            + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
+        this.setState(prevState => ({
+            selection: {
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
+            },
+        }));
+        this.updateDraft(newComment);
+    }
+
     /**
      * Key event handlers that short cut to saving/canceling.
      *
@@ -155,6 +188,10 @@ class ReportActionItemMessageEdit extends React.Component {
     }
 
     render() {
+        const shouldDisableEmojiPicker = (ReportUtils.chatIncludesConcierge(this.props.report)
+                                            && User.isBlockedFromConcierge(this.props.blockedFromConcierge))
+                                            || ReportUtils.isArchivedRoom(this.props.report);
+
         return (
             <View style={styles.chatItemMessage}>
                 <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor]}>
@@ -176,6 +213,14 @@ class ReportActionItemMessageEdit extends React.Component {
                         selection={this.state.selection}
                         onSelectionChange={this.onSelectionChange}
                     />
+                    <View style={styles.editChatItemEmojiWrapper}>
+                        <EmojiPickerButton
+                            isDisabled={shouldDisableEmojiPicker}
+                            onModalHide={() => InteractionManager.runAfterInteractions(() => this.textInput.focus())}
+                            onEmojiSelected={this.addEmojiToTextBox}
+                        />
+                    </View>
+
                 </View>
                 <View style={[styles.flexRow, styles.mt1]}>
                     <Button

src/styles/styles.js

@@ -1417,6 +1417,10 @@ const styles = {
         justifyContent: 'center',
     },
 
+    editChatItemEmojiWrapper: {
+        marginRight: 3,
+    },
+
     hoveredButton: {
         backgroundColor: themeColors.buttonHoveredBG,
     },