From 14869acc0924364c2dd062f7dcda741097c86854 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Mon, 27 Feb 2023 22:50:26 +0530 Subject: [PATCH 01/15] modify util to return code and header --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 8 +++++--- .../EmojiPicker/EmojiPickerMenu/index.native.js | 8 +++++--- src/libs/EmojiUtils.js | 8 ++++---- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index e8d5d000d409..b2ab7b327bcf 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -64,13 +64,15 @@ class EmojiPickerMenu extends Component { ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex), this.props.frequentlyUsedEmojis) : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis); - // This is the actual header index starting at the first emoji and counting each one - this.headerIndices = EmojiUtils.getHeaderIndices(this.emojis); + // Get the header emojis along with the code and index. + // index is the actual header index starting at the first emoji and counting each one + this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis); // This is the indices of each header's Row // The positions are static, and are calculated as index/numColumns (8 in our case) // This is because each row of 8 emojis counts as one index to the flatlist - this.headerRowIndices = _.map(this.headerIndices, headerIndex => Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW)); + this.headerRowIndices = _.map(this.headerEmojis, (headerEmoji) => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); + this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300); this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this); diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index edf383eda1d8..e3be0b324007 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -51,13 +51,15 @@ class EmojiPickerMenu extends Component { this.emojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis); - // This is the actual header index starting at the first emoji and counting each one - this.headerIndices = EmojiUtils.getHeaderIndices(this.emojis); + // Get the header emojis along with the code and index. + // index is the actual header index starting at the first emoji and counting each one + this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis); + // This is the indices of each header's Row // The positions are static, and are calculated as index/numColumns (8 in our case) // This is because each row of 8 emojis counts as one index to the flatlist - this.headerRowIndices = _.map(this.headerIndices, headerIndex => Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW)); + this.headerRowIndices = _.map(this.headerEmojis, (headerEmoji) => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); this.renderItem = this.renderItem.bind(this); this.isMobileLandscape = this.isMobileLandscape.bind(this); diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index bee46547a3e8..d70c2e3a8f8b 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -84,15 +84,15 @@ function containsOnlyEmojis(message) { /** * Get the header indices based on the max emojis per row * @param {Object[]} emojis - * @returns {Number[]} + * @returns {Object[]} */ -function getHeaderIndices(emojis) { +function getHeaderEmojis(emojis) { const headerIndices = []; _.each(emojis, (emoji, index) => { if (!emoji.header) { return; } - headerIndices.push(index); + headerIndices.push({code: emoji.code, index}); }); return headerIndices; } @@ -246,7 +246,7 @@ function suggestEmojis(text, limit = 5) { } export { - getHeaderIndices, + getHeaderEmojis, mergeEmojisWithFrequentlyUsedEmojis, addToFrequentlyUsedEmojis, containsOnlyEmojis, From 640940168fdf58c57a5e06d647daa4318dec0800 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Mon, 27 Feb 2023 23:00:49 +0530 Subject: [PATCH 02/15] update categorybar props and tooltip handling --- .../EmojiPicker/CategoryShortcutBar.js | 11 ++++---- .../EmojiPicker/CategoryShortcutButton.js | 28 +++++++++++++------ .../EmojiPicker/EmojiPickerMenu/index.js | 2 +- .../EmojiPickerMenu/index.native.js | 2 +- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index abab8400ad06..fa54e03cb1b1 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -20,8 +20,8 @@ const propTypes = { /** The function to call when an emoji is selected */ onPress: PropTypes.func.isRequired, - /** The indices that the icons should link to */ - headerIndices: PropTypes.arrayOf(PropTypes.number).isRequired, + /** The emojis consisting emoji code and indices that the icons should link to */ + headerEmojis: PropTypes.arrayOf(PropTypes.number).isRequired, }; const CategoryShortcutBar = (props) => { @@ -29,17 +29,18 @@ const CategoryShortcutBar = (props) => { // If the user has frequently used emojis, there will be 9 headers, otherwise there will be 8 // Or for Windows OS there will be 8 headers, otherwise there will be 7 - if (props.headerIndices.length === 9 || (getOperatingSystem() === CONST.OS.WINDOWS && props.headerIndices.length === 8)) { + if (props.headerEmojis.length === 9 || (getOperatingSystem() === CONST.OS.WINDOWS && props.headerEmojis.length === 8)) { icons.unshift(FrequentlyUsed); } return ( - {_.map(props.headerIndices, (headerIndex, i) => ( + {_.map(props.headerEmojis, (headerEmoji, i) => ( props.onPress(headerIndex)} + onPress={() => props.onPress(headerEmoji.index)} key={`categoryShortcut${i}`} + code={headerEmoji.code} /> ))} diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 3b5d43f9b10d..e967fec2fe84 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -2,6 +2,8 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {Pressable, View} from 'react-native'; import Icon from '../Icon'; +import Tooltip from '../Tooltip'; +import withLocalize, { withLocalizePropTypes } from '../withLocalize'; import variables from '../../styles/variables'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -9,11 +11,16 @@ import getButtonState from '../../libs/getButtonState'; import themeColors from '../../styles/themes/default'; const propTypes = { + /** The emoji code of the category header */ + code: PropTypes.string.isRequired, + /** The icon representation of the category that this button links to */ icon: PropTypes.func.isRequired, /** The function to call when an emoji is selected */ onPress: PropTypes.func.isRequired, + + ...withLocalizePropTypes }; class CategoryShortcutButton extends PureComponent { @@ -26,6 +33,7 @@ class CategoryShortcutButton extends PureComponent { render() { return ( + this.setState({isHighlighted: true})} @@ -36,18 +44,20 @@ class CategoryShortcutButton extends PureComponent { this.state.isHighlighted && styles.emojiItemHighlighted, ])} > - - - + + + + + ); } } CategoryShortcutButton.propTypes = propTypes; -export default CategoryShortcutButton; +export default withLocalize(CategoryShortcutButton); diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index b2ab7b327bcf..39ca968e340d 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -490,7 +490,7 @@ class EmojiPickerMenu extends Component { )} {!isFiltered && ( )} diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index e3be0b324007..41fd76a2ba94 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -153,7 +153,7 @@ class EmojiPickerMenu extends Component { From 9751f8ba6f8478dabd70b9f57a1d596d391bc13f Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Mon, 27 Feb 2023 23:07:55 +0530 Subject: [PATCH 03/15] added the prop.code --- src/components/EmojiPicker/CategoryShortcutBar.js | 5 ++++- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index fa54e03cb1b1..6504e4d5204b 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -21,7 +21,10 @@ const propTypes = { onPress: PropTypes.func.isRequired, /** The emojis consisting emoji code and indices that the icons should link to */ - headerEmojis: PropTypes.arrayOf(PropTypes.number).isRequired, + headerEmojis: PropTypes.arrayOf(PropTypes.shape({ + code: PropTypes.string.isRequired, + index: PropTypes.number.isRequired, + })).isRequired, }; const CategoryShortcutBar = (props) => { diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index e967fec2fe84..f4110d622b86 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -44,7 +44,7 @@ class CategoryShortcutButton extends PureComponent { this.state.isHighlighted && styles.emojiItemHighlighted, ])} > - + Date: Mon, 27 Feb 2023 23:21:18 +0530 Subject: [PATCH 04/15] displace tooltip vertically --- src/components/EmojiPicker/CategoryShortcutButton.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index f4110d622b86..495d57c2eed7 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -33,7 +33,6 @@ class CategoryShortcutButton extends PureComponent { render() { return ( - this.setState({isHighlighted: true})} @@ -44,7 +43,7 @@ class CategoryShortcutButton extends PureComponent { this.state.isHighlighted && styles.emojiItemHighlighted, ])} > - + Date: Mon, 27 Feb 2023 23:46:10 +0530 Subject: [PATCH 05/15] lint fixes --- src/components/EmojiPicker/CategoryShortcutButton.js | 4 ++-- src/components/EmojiPicker/EmojiPickerMenu/index.js | 3 +-- src/components/EmojiPicker/EmojiPickerMenu/index.native.js | 3 +-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 495d57c2eed7..f9b06cb5719e 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {Pressable, View} from 'react-native'; import Icon from '../Icon'; import Tooltip from '../Tooltip'; -import withLocalize, { withLocalizePropTypes } from '../withLocalize'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import variables from '../../styles/variables'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -20,7 +20,7 @@ const propTypes = { /** The function to call when an emoji is selected */ onPress: PropTypes.func.isRequired, - ...withLocalizePropTypes + ...withLocalizePropTypes, }; class CategoryShortcutButton extends PureComponent { diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 39ca968e340d..c9fc9b414e32 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -71,8 +71,7 @@ class EmojiPickerMenu extends Component { // This is the indices of each header's Row // The positions are static, and are calculated as index/numColumns (8 in our case) // This is because each row of 8 emojis counts as one index to the flatlist - this.headerRowIndices = _.map(this.headerEmojis, (headerEmoji) => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); - + this.headerRowIndices = _.map(this.headerEmojis, headerEmoji => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300); this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this); diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index 41fd76a2ba94..e2780b815553 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -55,11 +55,10 @@ class EmojiPickerMenu extends Component { // index is the actual header index starting at the first emoji and counting each one this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis); - // This is the indices of each header's Row // The positions are static, and are calculated as index/numColumns (8 in our case) // This is because each row of 8 emojis counts as one index to the flatlist - this.headerRowIndices = _.map(this.headerEmojis, (headerEmoji) => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); + this.headerRowIndices = _.map(this.headerEmojis, headerEmoji => Math.floor(headerEmoji.index / CONST.EMOJI_NUM_PER_ROW)); this.renderItem = this.renderItem.bind(this); this.isMobileLandscape = this.isMobileLandscape.bind(this); From 4ab32568dbf9ee26120d4fb43da20cee6b2428ee Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Tue, 28 Feb 2023 00:05:09 +0530 Subject: [PATCH 06/15] refactor category bar imports --- assets/emojis.js | 17 ++++++++++++++++ .../EmojiPicker/CategoryShortcutBar.js | 20 ++----------------- src/libs/EmojiUtils.js | 4 +++- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/assets/emojis.js b/assets/emojis.js index cf3270a78fe4..d8fc68d0248a 100644 --- a/assets/emojis.js +++ b/assets/emojis.js @@ -1,3 +1,12 @@ +import Smiley from './images/emoji.svg'; +import AnimalsAndNature from './images/emojiCategoryIcons/plant.svg'; +import FoodAndDrink from './images/emojiCategoryIcons/hamburger.svg'; +import TravelAndPlaces from './images/emojiCategoryIcons/plane.svg'; +import Activities from './images/emojiCategoryIcons/soccer-ball.svg'; +import Objects from './images/emojiCategoryIcons/light-bulb.svg'; +import Symbols from './images/emojiCategoryIcons/peace-sign.svg'; +import Flags from './images/emojiCategoryIcons/flag.svg'; + /* * This list is generated from the code here https://github.com/github/gemoji/blob/master/db/emoji.json * Each code is then converted to hex by replacing the "U+" with "0x" @@ -68,6 +77,7 @@ const emojis = [ { code: 'smileysAndEmotion', header: true, + icon: Smiley }, { name: 'grinning', @@ -6965,6 +6975,7 @@ const emojis = [ { code: 'animalsAndNature', header: true, + icon: AnimalsAndNature }, { name: 'monkey_face', @@ -8138,6 +8149,7 @@ const emojis = [ { code: 'foodAndDrink', header: true, + icon: FoodAndDrink }, { name: 'grapes', @@ -9315,6 +9327,7 @@ const emojis = [ { code: 'travelAndPlaces', header: true, + icon: TravelAndPlaces }, { name: 'earth_africa', @@ -11434,6 +11447,7 @@ const emojis = [ { code: 'activities', header: true, + icon: Activities }, { name: 'jack_o_lantern', @@ -12271,6 +12285,7 @@ const emojis = [ { code: 'objects', header: true, + icon: Objects }, { name: 'eyeglasses', @@ -14600,6 +14615,7 @@ const emojis = [ { code: 'symbols', header: true, + icon: Symbols }, { name: 'atm', @@ -16590,6 +16606,7 @@ const emojis = [ { code: 'flags', header: true, + icon: Flags }, { name: 'checkered_flag', diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index 6504e4d5204b..79c74b661060 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -3,15 +3,6 @@ import PropTypes from 'prop-types'; import {View} from 'react-native'; import _ from 'underscore'; import styles from '../../styles/styles'; -import FrequentlyUsed from '../../../assets/images/history.svg'; -import Smiley from '../../../assets/images/emoji.svg'; -import AnimalsAndNature from '../../../assets/images/emojiCategoryIcons/plant.svg'; -import FoodAndDrink from '../../../assets/images/emojiCategoryIcons/hamburger.svg'; -import TravelAndPlaces from '../../../assets/images/emojiCategoryIcons/plane.svg'; -import Activities from '../../../assets/images/emojiCategoryIcons/soccer-ball.svg'; -import Objects from '../../../assets/images/emojiCategoryIcons/light-bulb.svg'; -import Symbols from '../../../assets/images/emojiCategoryIcons/peace-sign.svg'; -import Flags from '../../../assets/images/emojiCategoryIcons/flag.svg'; import CategoryShortcutButton from './CategoryShortcutButton'; import getOperatingSystem from '../../libs/getOperatingSystem'; import CONST from '../../CONST'; @@ -24,23 +15,16 @@ const propTypes = { headerEmojis: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired, index: PropTypes.number.isRequired, + icon: PropTypes.func.isRequired, })).isRequired, }; const CategoryShortcutBar = (props) => { - const icons = [Smiley, AnimalsAndNature, FoodAndDrink, TravelAndPlaces, Activities, Objects, Symbols, Flags]; - - // If the user has frequently used emojis, there will be 9 headers, otherwise there will be 8 - // Or for Windows OS there will be 8 headers, otherwise there will be 7 - if (props.headerEmojis.length === 9 || (getOperatingSystem() === CONST.OS.WINDOWS && props.headerEmojis.length === 8)) { - icons.unshift(FrequentlyUsed); - } - return ( {_.map(props.headerEmojis, (headerEmoji, i) => ( props.onPress(headerEmoji.index)} key={`categoryShortcut${i}`} code={headerEmoji.code} diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index d70c2e3a8f8b..3b12ae0133f5 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -5,6 +5,7 @@ import Str from 'expensify-common/lib/str'; import CONST from '../CONST'; import * as User from './actions/User'; import emojisTrie from './EmojiTrie'; +import FrequentlyUsed from './../../assets/images/history.svg'; /** * Get the unicode code of an emoji in base 16. @@ -92,7 +93,7 @@ function getHeaderEmojis(emojis) { if (!emoji.header) { return; } - headerIndices.push({code: emoji.code, index}); + headerIndices.push({code: emoji.code, index, icon: emoji.icon}); }); return headerIndices; } @@ -149,6 +150,7 @@ function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = []) let allEmojis = [{ header: true, code: 'frequentlyUsed', + icon: FrequentlyUsed }]; allEmojis = allEmojis.concat(frequentlyUsedEmojis, emojis); From cec24816e63f6de82d195bace5c80883ff26ba00 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Tue, 28 Feb 2023 00:30:52 +0530 Subject: [PATCH 07/15] lint fixes --- assets/emojis.js | 16 +++++----- .../EmojiPicker/CategoryShortcutBar.js | 29 +++++++++---------- src/libs/EmojiUtils.js | 4 +-- 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/assets/emojis.js b/assets/emojis.js index d8fc68d0248a..880cf7e32389 100644 --- a/assets/emojis.js +++ b/assets/emojis.js @@ -77,7 +77,7 @@ const emojis = [ { code: 'smileysAndEmotion', header: true, - icon: Smiley + icon: Smiley, }, { name: 'grinning', @@ -6975,7 +6975,7 @@ const emojis = [ { code: 'animalsAndNature', header: true, - icon: AnimalsAndNature + icon: AnimalsAndNature, }, { name: 'monkey_face', @@ -8149,7 +8149,7 @@ const emojis = [ { code: 'foodAndDrink', header: true, - icon: FoodAndDrink + icon: FoodAndDrink, }, { name: 'grapes', @@ -9327,7 +9327,7 @@ const emojis = [ { code: 'travelAndPlaces', header: true, - icon: TravelAndPlaces + icon: TravelAndPlaces, }, { name: 'earth_africa', @@ -11447,7 +11447,7 @@ const emojis = [ { code: 'activities', header: true, - icon: Activities + icon: Activities, }, { name: 'jack_o_lantern', @@ -12285,7 +12285,7 @@ const emojis = [ { code: 'objects', header: true, - icon: Objects + icon: Objects, }, { name: 'eyeglasses', @@ -14615,7 +14615,7 @@ const emojis = [ { code: 'symbols', header: true, - icon: Symbols + icon: Symbols, }, { name: 'atm', @@ -16606,7 +16606,7 @@ const emojis = [ { code: 'flags', header: true, - icon: Flags + icon: Flags, }, { name: 'checkered_flag', diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index 79c74b661060..2bd08bfd0543 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -4,8 +4,6 @@ import {View} from 'react-native'; import _ from 'underscore'; import styles from '../../styles/styles'; import CategoryShortcutButton from './CategoryShortcutButton'; -import getOperatingSystem from '../../libs/getOperatingSystem'; -import CONST from '../../CONST'; const propTypes = { /** The function to call when an emoji is selected */ @@ -19,20 +17,19 @@ const propTypes = { })).isRequired, }; -const CategoryShortcutBar = (props) => { - return ( - - {_.map(props.headerEmojis, (headerEmoji, i) => ( - props.onPress(headerEmoji.index)} - key={`categoryShortcut${i}`} - code={headerEmoji.code} - /> - ))} - - ); -}; +const CategoryShortcutBar = (props) => ( + + {_.map(props.headerEmojis, (headerEmoji, i) => ( + props.onPress(headerEmoji.index)} + key={`categoryShortcut${i}`} + code={headerEmoji.code} + /> + ))} + +); + CategoryShortcutBar.propTypes = propTypes; CategoryShortcutBar.displayName = 'CategoryShortcutBar'; diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index 3b12ae0133f5..e9be2d760d99 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str'; import CONST from '../CONST'; import * as User from './actions/User'; import emojisTrie from './EmojiTrie'; -import FrequentlyUsed from './../../assets/images/history.svg'; +import FrequentlyUsed from '../../assets/images/history.svg'; /** * Get the unicode code of an emoji in base 16. @@ -150,7 +150,7 @@ function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = []) let allEmojis = [{ header: true, code: 'frequentlyUsed', - icon: FrequentlyUsed + icon: FrequentlyUsed, }]; allEmojis = allEmojis.concat(frequentlyUsedEmojis, emojis); From 5802e4ce8aba20bf489a25e18ed93a6c5c7741d6 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Tue, 28 Feb 2023 00:39:50 +0530 Subject: [PATCH 08/15] lint fixes --- src/components/EmojiPicker/CategoryShortcutBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js index 2bd08bfd0543..8a6ef79f5044 100644 --- a/src/components/EmojiPicker/CategoryShortcutBar.js +++ b/src/components/EmojiPicker/CategoryShortcutBar.js @@ -17,7 +17,7 @@ const propTypes = { })).isRequired, }; -const CategoryShortcutBar = (props) => ( +const CategoryShortcutBar = props => ( {_.map(props.headerEmojis, (headerEmoji, i) => ( Date: Thu, 2 Mar 2023 00:24:31 +0530 Subject: [PATCH 09/15] wrap pressable with tooltip --- .../EmojiPicker/CategoryShortcutButton.js | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index f9b06cb5719e..26a60c26aeaf 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -33,27 +33,31 @@ class CategoryShortcutButton extends PureComponent { render() { return ( - this.setState({isHighlighted: true})} - onHoverOut={() => this.setState({isHighlighted: false})} - style={({pressed}) => ([ - StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), - styles.categoryShortcutButton, - this.state.isHighlighted && styles.emojiItemHighlighted, - ])} - > + - - - + this.setState({isHighlighted: true})} + onHoverOut={() => this.setState({isHighlighted: false})} + style={({pressed}) => ([ + StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), + + ])} + > + + + + + + - + + ); } } From f078abfb60bf99923049803512fb14a707536990 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 2 Mar 2023 00:29:08 +0530 Subject: [PATCH 10/15] lint fixes --- .../EmojiPicker/CategoryShortcutButton.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 26a60c26aeaf..25f5d653cf22 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -33,7 +33,7 @@ class CategoryShortcutButton extends PureComponent { render() { return ( - + this.setState({isHighlighted: false})} style={({pressed}) => ([ StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), - ])} > - - - - - + + + - ); } } From 7f97adf0f447ea518140f1bafaac777cb2ed1bdf Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 2 Mar 2023 00:32:34 +0530 Subject: [PATCH 11/15] updated comments --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +- src/components/EmojiPicker/EmojiPickerMenu/index.native.js | 2 +- src/libs/EmojiUtils.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 647170406bd1..c8dd15a4d373 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -64,7 +64,7 @@ class EmojiPickerMenu extends Component { ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex), this.props.frequentlyUsedEmojis) : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis); - // Get the header emojis along with the code and index. + // Get the header emojis along with the code, index and icon. // index is the actual header index starting at the first emoji and counting each one this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis); diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index e2780b815553..39591b369b14 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -51,7 +51,7 @@ class EmojiPickerMenu extends Component { this.emojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis); - // Get the header emojis along with the code and index. + // Get the header emojis along with the code, index and icon. // index is the actual header index starting at the first emoji and counting each one this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis); diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index e9be2d760d99..0e813076015a 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -83,7 +83,7 @@ function containsOnlyEmojis(message) { } /** - * Get the header indices based on the max emojis per row + * Get the header emojis with their code, icon and index * @param {Object[]} emojis * @returns {Object[]} */ From d46da19f70312e755d6f2ae5329cd8e53d3608e6 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 2 Mar 2023 11:31:50 +0530 Subject: [PATCH 12/15] fix the tooltip alignment --- .../EmojiPicker/CategoryShortcutButton.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 25f5d653cf22..a747f44ff4cf 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -33,27 +33,28 @@ class CategoryShortcutButton extends PureComponent { render() { return ( - - - this.setState({isHighlighted: true})} - onHoverOut={() => this.setState({isHighlighted: false})} - style={({pressed}) => ([ - StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), - ])} - > - - - - + this.setState({isHighlighted: true})} + onHoverOut={() => this.setState({isHighlighted: false})} + style={({pressed}) => ([ + StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), + styles.categoryShortcutButton, + this.state.isHighlighted && styles.emojiItemHighlighted, + ])} + > + + - + ); } } From 84ddd2f9de924cb66fdc5f2b6888be923c8fdba0 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 2 Mar 2023 11:35:58 +0530 Subject: [PATCH 13/15] styling update --- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- src/styles/styles.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index a747f44ff4cf..083a83a53451 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -1,6 +1,6 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {Pressable, View} from 'react-native'; +import {Pressable} from 'react-native'; import Icon from '../Icon'; import Tooltip from '../Tooltip'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; diff --git a/src/styles/styles.js b/src/styles/styles.js index d52e00cf9d90..598a900522f2 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1534,9 +1534,8 @@ const styles = { categoryShortcutButton: { flex: 1, borderRadius: 8, - paddingTop: 2, - paddingBottom: 2, height: CONST.EMOJI_PICKER_ITEM_HEIGHT, + alignItems: 'center', justifyContent: 'center', }, From aa53ea8588b4b820e61d0088e7fac4c1afc37bb1 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 2 Mar 2023 12:58:48 +0530 Subject: [PATCH 14/15] add 2px spacing --- src/components/EmojiPicker/CategoryShortcutButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 083a83a53451..53a15e4df2e6 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -46,6 +46,7 @@ class CategoryShortcutButton extends PureComponent { Date: Thu, 2 Mar 2023 19:04:33 +0530 Subject: [PATCH 15/15] update spacing to 4px --- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 53a15e4df2e6..2c5f061327ae 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -46,7 +46,7 @@ class CategoryShortcutButton extends PureComponent {