PR 1: Moving EmojiPicker as an Independent Component

src/pages/home/report/EmojiPickerMenu/index.js → src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -3,20 +3,20 @@ import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import CONST from '../../../../CONST';
-import styles from '../../../../styles/styles';
-import * as StyleUtils from '../../../../styles/StyleUtils';
-import themeColors from '../../../../styles/themes/default';
-import emojis from '../../../../../assets/emojis';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import themeColors from '../../../styles/themes/default';
+import emojis from '../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../../../components/Text';
-import TextInputFocusable from '../../../../components/TextInputFocusable';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import compose from '../../../../libs/compose';
-import getOperatingSystem from '../../../../libs/getOperatingSystem';
+import Text from '../../Text';
+import TextInputFocusable from '../../TextInputFocusable';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
+import compose from '../../../libs/compose';
+import getOperatingSystem from '../../../libs/getOperatingSystem';
 import EmojiSkinToneList from '../EmojiSkinToneList';
-import * as EmojiUtils from '../../../../libs/EmojiUtils';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */

src/pages/home/report/EmojiPickerMenu/index.native.js → src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -1,16 +1,16 @@
 import React, {Component} from 'react';
 import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
-import compose from '../../../../libs/compose';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
-import CONST from '../../../../CONST';
-import styles from '../../../../styles/styles';
-import emojis from '../../../../../assets/emojis';
+import compose from '../../../libs/compose';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../withWindowDimensions';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+import emojis from '../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
-import Text from '../../../../components/Text';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import Text from '../../Text';
+import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
 import EmojiSkinToneList from '../EmojiSkinToneList';
-import * as EmojiUtils from '../../../../libs/EmojiUtils';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */

src/pages/home/report/EmojiPickerMenuItem.js → src/components/EmojiPicker/EmojiPickerMenuItem.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Pressable} from 'react-native';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import getButtonState from '../../../libs/getButtonState';
-import Hoverable from '../../../components/Hoverable';
-import Text from '../../../components/Text';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import getButtonState from '../../libs/getButtonState';
+import Hoverable from '../Hoverable';
+import Text from '../Text';
 
 const propTypes = {
     /** The unicode that is used to display the emoji */

src/pages/home/report/EmojiSkinToneList.js → src/components/EmojiPicker/EmojiSkinToneList.js

@@ -2,13 +2,12 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import * as Emojis from '../../../../assets/emojis';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Text from '../../../components/Text';
-import getSkinToneEmojiFromIndex from './EmojiPickerMenu/getSkinToneEmojiFromIndex';
+import styles from '../../styles/styles';
+import * as Emojis from '../../../assets/emojis';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Text from '../Text';
 import EmojiPickerMenuItem from './EmojiPickerMenuItem';
-
+import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex';
 
 const propTypes = {
 
@@ -52,7 +51,7 @@ class EmojiSkinToneList extends Component {
     render() {
         const selectedEmoji = getSkinToneEmojiFromIndex(this.props.preferredSkinTone);
         return (
-            <View style={[styles.flexRow, styles.p1, styles.ph4]}>
+            <View style={[styles.flexRow, styles.p1, styles.ph4, styles.emojiPickerContainer]}>
                 {
                     !this.state.isSkinToneListVisible && (
                         <Pressable

src/pages/home/report/EmojiPickerMenu/getSkinToneEmojiFromIndex.js → src/components/EmojiPicker/getSkinToneEmojiFromIndex.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import * as Emojis from '../../../../../assets/emojis';
+import * as Emojis from '../../../assets/emojis';
 
 /**
  * Fetch the emoji code of selected skinTone

src/components/EmojiPicker/index.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Pressable, Dimensions} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import compose from '../../libs/compose';
+import Popover from '../Popover';
+import Tooltip from '../Tooltip';
+import Icon from '../Icon';
+import ONYXKEYS from '../../ONYXKEYS';
+import EmojiPickerMenu from './EmojiPickerMenu';
+import * as StyleUtils from '../../styles/StyleUtils';
+import * as Expensicons from '../Icon/Expensicons';
+import * as User from '../../libs/actions/User';
+import * as EmojiUtils from '../../libs/EmojiUtils';
+import getButtonState from '../../libs/getButtonState';
+import styles from '../../styles/styles';
+import CONST from '../../CONST';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    /** Flag to disable the emoji picker button */
+    isDisabled: PropTypes.bool,
+
+    /** Callback on emoji popover hide */
+    onModalHide: PropTypes.func,
+
+    /** Callback on before showing emoji picker */
+    onBeforeShowEmojiPicker: PropTypes.func,
+
+    /** Callback on emoji selection */
+    onEmojiSelected: PropTypes.func.isRequired,
+    ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isDisabled: false,
+    onModalHide: () => {},
+    onBeforeShowEmojiPicker: () => {},
+};
+
+class EmojiPicker extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.hideEmojiPicker = this.hideEmojiPicker.bind(this);
+        this.showEmojiPicker = this.showEmojiPicker.bind(this);
+        this.selectEmoji = this.selectEmoji.bind(this);
+        this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this);
+        this.setPreferredSkinTone = this.setPreferredSkinTone.bind(this);
+        this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this);
+
+        this.state = {
+            isEmojiPickerVisible: false,
+
+            // The horizontal and vertical position (relative to the window) where the emoji popover will display.
+            emojiPopoverAnchorPosition: {
+                horizontal: 0,
+                vertical: 0,
+            },
+        };
+    }
+
+    componentDidMount() {
+        this.emojiPopoverDimensionListener = Dimensions.addEventListener('change', this.measureEmojiPopoverAnchorPosition);
+    }
+
+    componentWillUnmount() {
+        if (!this.emojiPopoverDimensionListener) {
+            return;
+        }
+        this.emojiPopoverDimensionListener.remove();
+    }
+
+    /**
+     * Update preferredSkinTone and sync with Onyx, NVP.
+     * @param {Number|String} skinTone
+     */
+    setPreferredSkinTone(skinTone) {
+        if (skinTone === this.props.preferredSkinTone) {
+            return;
+        }
+
+        User.setPreferredSkinTone(skinTone);
+    }
+
+    /**
+     * Callback for the emoji picker to add whatever emoji is chosen into the main input
+     *
+     * @param {String} emoji
+     * @param {Object} emojiObject
+     */
+    selectEmoji(emoji, emojiObject) {
+        EmojiUtils.addToFrequentlyUsedEmojis(this.props.frequentlyUsedEmojis, emojiObject);
+        this.hideEmojiPicker();
+        this.props.onEmojiSelected(emoji);
+    }
+
+    hideEmojiPicker() {
+        this.setState({isEmojiPickerVisible: false});
+    }
+
+    showEmojiPicker() {
+        if (_.isFunction(this.props.onBeforeShowEmojiPicker)) {
+            this.props.onBeforeShowEmojiPicker();
+        }
+        this.setState({isEmojiPickerVisible: true});
+    }
+
+    measureEmojiPopoverAnchorPosition() {
+        if (!this.emojiPopoverAnchor) {
+            return;
+        }
+
+        this.emojiPopoverAnchor.measureInWindow((x, y, width) => this.setState({
+            emojiPopoverAnchorPosition: {horizontal: x + width, vertical: y},
+        }));
+    }
+
+    /**
+     * Focus the search input in the emoji picker.
+     */
+    focusEmojiSearchInput() {
+        if (!this.emojiSearchInput) {
+            return;
+        }
+        this.emojiSearchInput.focus();
+    }
+
+    render() {
+        return (
+            <>
+                {
+
+                    // There is no way to disable animations and they are really laggy, because there are so many
+                    // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
+                }
+                <Popover
+                    isVisible={this.state.isEmojiPickerVisible}
+                    onClose={this.hideEmojiPicker}
+                    onModalShow={this.focusEmojiSearchInput}
+                    onModalHide={this.props.onModalHide}
+                    hideModalContentWhileAnimating
+                    animationInTiming={1}
+                    animationOutTiming={1}
+                    anchorPosition={{
+                        bottom: this.props.windowHeight - this.state.emojiPopoverAnchorPosition.vertical,
+                        left: this.state.emojiPopoverAnchorPosition.horizontal - CONST.EMOJI_PICKER_SIZE,
+                    }}
+                >
+                    <EmojiPickerMenu
+                        onEmojiSelected={this.selectEmoji}
+                        ref={el => this.emojiSearchInput = el}
+                        preferredSkinTone={this.props.preferredSkinTone}
+                        updatePreferredSkinTone={this.setPreferredSkinTone}
+                        frequentlyUsedEmojis={this.props.frequentlyUsedEmojis}
+                    />
+                </Popover>
+                <Pressable
+                    style={({hovered, pressed}) => ([
+                        styles.chatItemEmojiButton,
+                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
+                    ])}
+                    ref={el => this.emojiPopoverAnchor = el}
+                    onLayout={this.measureEmojiPopoverAnchorPosition}
+                    onPress={this.showEmojiPicker}
+                    disabled={this.props.isDisabled}
+                >
+                    {({hovered, pressed}) => (
+                        <Tooltip text={this.props.translate('reportActionCompose.emoji')}>
+                            <Icon
+                                src={Expensicons.Emoji}
+                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                            />
+                        </Tooltip>
+                    )}
+                </Pressable>
+            </>
+        );
+    }
+}
+
+EmojiPicker.propTypes = propTypes;
+EmojiPicker.defaultProps = defaultProps;
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withOnyx({
+        preferredSkinTone: {
+            key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
+        },
+        frequentlyUsedEmojis: {
+            key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
+        },
+    }),
+)(EmojiPicker);

src/libs/EmojiUtils.js

@@ -172,7 +172,6 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
     User.setFrequentlyUsedEmojis(frequentEmojiList);
 }
 
-
 export {
     isSingleEmoji,
     getDynamicHeaderIndices,

src/libs/actions/User.js

@@ -16,9 +16,9 @@ import redirectToSignIn from './SignInRedirect';
 import NameValuePair from './NameValuePair';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
-import getSkinToneEmojiFromIndex from '../../pages/home/report/EmojiPickerMenu/getSkinToneEmojiFromIndex';
 import * as CloseAccountActions from './CloseAccount';
 import * as Link from './Link';
+import getSkinToneEmojiFromIndex from '../../components/EmojiPicker/getSkinToneEmojiFromIndex';
 
 let sessionAuthToken = '';
 let sessionEmail = '';
@@ -230,17 +230,22 @@ function validateLogin(accountID, validateCode) {
 }
 
 /**
- * Checks if the expiresAt date of a user's ban is before right now
+ * Checks the blockedFromConcierge object to see if it has an expiresAt key,
+ * and if so whether the expiresAt date of a user's ban is before right now
  *
- * @param {String} expiresAt
- * @returns {boolean}
+ * @param {Object} blockedFromConcierge
+ * @returns {Boolean}
  */
-function isBlockedFromConcierge(expiresAt) {
-    if (!expiresAt) {
+function isBlockedFromConcierge(blockedFromConcierge) {
+    if (_.isEmpty(blockedFromConcierge)) {
         return false;
     }
 
-    return moment().isBefore(moment(expiresAt), 'day');
+    if (!blockedFromConcierge.expiresAt) {
+        return false;
+    }
+
+    return moment().isBefore(moment(blockedFromConcierge.expiresAt), 'day');
 }
 
 /**

src/libs/reportUtils.js

@@ -179,6 +179,16 @@ function isConciergeChatReport(report) {
         && report.participants[0] === CONST.EMAIL.CONCIERGE;
 }
 
+/**
+ * Returns true if Concierge is one of the chat participants (1:1 as well as group chats)
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function chatIncludesConcierge(report) {
+    return report.participants
+            && _.contains(report.participants, CONST.EMAIL.CONCIERGE);
+}
+
 /**
  * Returns true if there is any automated expensify account in emails
  * @param {Array} emails
@@ -246,4 +256,5 @@ export {
     hasExpensifyEmails,
     canShowReportRecipientLocalTime,
     formatReportLastMessageText,
+    chatIncludesConcierge,
 };

src/pages/RequestCallPage.js

@@ -285,7 +285,7 @@ class RequestCallPage extends Component {
     }
 
     render() {
-        const isBlockedFromConcierge = !_.isEmpty(this.props.blockedFromConcierge) && User.isBlockedFromConcierge(this.props.blockedFromConcierge.expiresAt);
+        const isBlockedFromConcierge = User.isBlockedFromConcierge(this.props.blockedFromConcierge);
 
         return (
             <ScreenWrapper>