From 8baee4fdacc784d5fd02a30a1eef9e20d55fd789 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sat, 12 Jun 2021 01:30:46 +0530 Subject: [PATCH 1/7] feat: Dynamic emoji size --- .../EmojiPickerMenu/dynamicEmojiSize.js | 16 ++++++++++++ .../home/report/EmojiPickerMenu/index.js | 17 ++++++++++++- .../report/EmojiPickerMenu/index.native.js | 25 ++++++++++++++++++- src/pages/home/report/EmojiPickerMenuItem.js | 14 +++++++++-- src/styles/styles.js | 10 ++++++-- 5 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js diff --git a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js new file mode 100644 index 000000000000..e38ef569e9ba --- /dev/null +++ b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js @@ -0,0 +1,16 @@ +import styleVariables from '../../../../styles/variables'; + +const dynamicEmojiSize = (windowWidth) => { + if (windowWidth <= 320) { + return styleVariables.fontSizeSmall; + } + if ( + windowWidth <= 480 + ) { + return styleVariables.fontSizeNormal; + } + + return styleVariables.fontSizeLarge; +}; + +export default dynamicEmojiSize; diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index d7d19762a1b6..4ae10fa42f96 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -12,6 +12,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../compo import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import compose from '../../../../libs/compose'; import getOperatingSystem from '../../../../libs/getOperatingSystem'; +import dynamicEmojiSize from './dynamicEmojiSize'; const propTypes = { /** Function to add the selected emoji to the main compose text input */ @@ -72,6 +73,7 @@ class EmojiPickerMenu extends Component { headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, arePointerEventsDisabled: false, + emojiSize: dynamicEmojiSize(this.props.windowWidth), }; } @@ -86,6 +88,18 @@ class EmojiPickerMenu extends Component { this.setupEventHandlers(); } + + componentDidUpdate(prevProps) { + if ( + this.props.windowWidth !== prevProps.windowWidth + ) { + // eslint-disable-next-line react/no-did-update-set-state + this.setState({ + emojiSize: dynamicEmojiSize(this.props.windowWidth), + }); + } + } + componentWillUnmount() { this.cleanupEventHandlers(); } @@ -302,6 +316,7 @@ class EmojiPickerMenu extends Component { onHover={() => this.setState({highlightedIndex: index})} emoji={code} isHighlighted={index === this.state.highlightedIndex} + size={this.state.emojiSize} /> ); } @@ -333,7 +348,7 @@ class EmojiPickerMenu extends Component { keyExtractor={item => `emoji_picker_${item.code}`} numColumns={this.numColumns} style={styles.emojiPickerList} - extraData={[this.state.filteredEmojis, this.state.highlightedIndex]} + extraData={this.state} stickyHeaderIndices={this.state.headerIndices} onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y} /> diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index e6b9170fda9b..eee692e647ad 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -1,14 +1,19 @@ import React, {Component} from 'react'; import {View, FlatList, Text} 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 EmojiPickerMenuItem from '../EmojiPickerMenuItem'; +import dynamicEmojiSize from './dynamicEmojiSize'; const propTypes = { /** Function to add the selected emoji to the main compose text input */ onEmojiSelected: PropTypes.func.isRequired, + + ...windowDimensionsPropTypes, }; class EmojiPickerMenu extends Component { @@ -29,8 +34,24 @@ class EmojiPickerMenu extends Component { this.unfilteredHeaderIndices = [0, 33, 59, 87, 98, 120, 147]; this.renderItem = this.renderItem.bind(this); + + this.state = { + emojiSize: dynamicEmojiSize(this.props.windowWidth), + }; + } + + componentDidUpdate(prevProps) { + if ( + this.props.windowWidth !== prevProps.windowWidth + ) { + // eslint-disable-next-line react/no-did-update-set-state + this.setState({ + emojiSize: dynamicEmojiSize(this.props.windowWidth), + }); + } } + /** * Given an emoji item object, render a component based on its type. * Items with the code "SPACER" return nothing and are used to fill rows up to 8 @@ -56,6 +77,7 @@ class EmojiPickerMenu extends Component { ); } @@ -69,6 +91,7 @@ class EmojiPickerMenu extends Component { keyExtractor={item => (`emoji_picker_${item.code}`)} numColumns={this.numColumns} style={styles.emojiPickerList} + extraData={this.state} stickyHeaderIndices={this.unfilteredHeaderIndices} /> @@ -78,4 +101,4 @@ class EmojiPickerMenu extends Component { EmojiPickerMenu.propTypes = propTypes; -export default EmojiPickerMenu; +export default compose(withWindowDimensions)(EmojiPickerMenu); diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js index 5fc698a51203..cc5206670952 100644 --- a/src/pages/home/report/EmojiPickerMenuItem.js +++ b/src/pages/home/report/EmojiPickerMenuItem.js @@ -17,6 +17,8 @@ const propTypes = { /** Whether this menu item is currently highlighted or not */ isHighlighted: PropTypes.bool.isRequired, + + size: PropTypes.number.isRequired, }; const EmojiPickerMenuItem = props => ( @@ -26,17 +28,25 @@ const EmojiPickerMenuItem = props => ( pressed, }) => ([ styles.emojiItem, + styles.pv1, getButtonBackgroundColorStyle(getButtonState(false, pressed)), props.isHighlighted ? styles.emojiItemHighlighted : {}, + { + fontSize: props.size, + }, ])} > - {props.emoji} + + {props.emoji} + ); - EmojiPickerMenuItem.propTypes = propTypes; EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem'; diff --git a/src/styles/styles.js b/src/styles/styles.js index 170b7fea55c0..4f544805be6e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -909,15 +909,21 @@ const styles = { // Emoji Picker Styles emojiText: { fontFamily: fontFamily.GTA_BOLD, - fontSize: variables.iconSizeLarge, textAlign: 'center', ...spacing.pv1, ...spacing.ph2, }, + emojiExtraSmall: { + fontSize: variables.iconSizeExtraSmall, + }, + + emojiLarge: { + fontSize: variables.iconSizeLarge, + }, + emojiItem: { width: '12.5%', - height: 40, textAlign: 'center', borderRadius: 8, }, From 7fa65be5703a33aec13db7bc532e33f3a4b60161 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Mon, 14 Jun 2021 22:34:51 +0530 Subject: [PATCH 2/7] chore: Minor changes as per the PR review --- .../EmojiPickerMenu/dynamicEmojiSize.js | 11 ++--------- .../home/report/EmojiPickerMenu/index.js | 19 ++++++++++--------- .../report/EmojiPickerMenu/index.native.js | 18 ++++++++++-------- src/pages/home/report/EmojiPickerMenuItem.js | 1 + 4 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js index e38ef569e9ba..476eb77953f4 100644 --- a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js +++ b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js @@ -1,15 +1,8 @@ import styleVariables from '../../../../styles/variables'; const dynamicEmojiSize = (windowWidth) => { - if (windowWidth <= 320) { - return styleVariables.fontSizeSmall; - } - if ( - windowWidth <= 480 - ) { - return styleVariables.fontSizeNormal; - } - + if (windowWidth <= 320) { return styleVariables.fontSizeSmall; } + if (windowWidth <= 480) { return styleVariables.fontSizeNormal; } return styleVariables.fontSizeLarge; }; diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 4ae10fa42f96..d3f5b35c5522 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -88,22 +88,23 @@ class EmojiPickerMenu extends Component { this.setupEventHandlers(); } - componentDidUpdate(prevProps) { - if ( - this.props.windowWidth !== prevProps.windowWidth - ) { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - emojiSize: dynamicEmojiSize(this.props.windowWidth), - }); - } + if (this.props.windowWidth !== prevProps.windowWidth) { this.setDynamicEmojiSize(); } } componentWillUnmount() { this.cleanupEventHandlers(); } + /** + * Sets emoji size dynamically based on the window width + */ + setDynamicEmojiSize() { + this.setState({ + emojiSize: dynamicEmojiSize(this.props.windowWidth), + }); + } + /** * Setup and attach keypress/mouse handlers for highlight navigation. */ diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index eee692e647ad..0e058b493f8b 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -13,6 +13,7 @@ const propTypes = { /** Function to add the selected emoji to the main compose text input */ onEmojiSelected: PropTypes.func.isRequired, + /** Props related to the dimensions of the window */ ...windowDimensionsPropTypes, }; @@ -41,16 +42,17 @@ class EmojiPickerMenu extends Component { } componentDidUpdate(prevProps) { - if ( - this.props.windowWidth !== prevProps.windowWidth - ) { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - emojiSize: dynamicEmojiSize(this.props.windowWidth), - }); - } + if (this.props.windowWidth !== prevProps.windowWidth) { this.setDynamicEmojiSize(); } } + /** + * Sets emoji size dynamically based on the window width + */ + setDynamicEmojiSize() { + this.setState({ + emojiSize: dynamicEmojiSize(this.props.windowWidth), + }); + } /** * Given an emoji item object, render a component based on its type. diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js index cc5206670952..2ebc00371359 100644 --- a/src/pages/home/report/EmojiPickerMenuItem.js +++ b/src/pages/home/report/EmojiPickerMenuItem.js @@ -18,6 +18,7 @@ const propTypes = { /** Whether this menu item is currently highlighted or not */ isHighlighted: PropTypes.bool.isRequired, + /** Size of the emoji item */ size: PropTypes.number.isRequired, }; From 1f1956c20eedfc4de7ce96083600a1eef4fcb152 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Mon, 14 Jun 2021 22:36:18 +0530 Subject: [PATCH 3/7] chore: Minor js doc changes --- src/pages/home/report/EmojiPickerMenu/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index d3f5b35c5522..d011c089859b 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -21,6 +21,7 @@ const propTypes = { /** The ref to the search input (may be null on small screen widths) */ forwardedRef: PropTypes.func, + /** Props related to the dimensions of the window */ ...windowDimensionsPropTypes, ...withLocalizePropTypes, From 379b771b5fe9bf611a785fe05fd5ac6c3af278a0 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Mon, 14 Jun 2021 23:18:18 +0530 Subject: [PATCH 4/7] fix: Minor styling changes --- src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js | 8 ++++++-- src/pages/home/report/EmojiPickerMenu/index.js | 4 +++- src/pages/home/report/EmojiPickerMenu/index.native.js | 4 +++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js index 476eb77953f4..5f13c4aacb5e 100644 --- a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js +++ b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js @@ -1,8 +1,12 @@ import styleVariables from '../../../../styles/variables'; const dynamicEmojiSize = (windowWidth) => { - if (windowWidth <= 320) { return styleVariables.fontSizeSmall; } - if (windowWidth <= 480) { return styleVariables.fontSizeNormal; } + if (windowWidth <= 320) { + return styleVariables.fontSizeSmall; + } + if (windowWidth <= 480) { + return styleVariables.fontSizeNormal; + } return styleVariables.fontSizeLarge; }; diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index d011c089859b..fbd7292fdc71 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -90,7 +90,9 @@ class EmojiPickerMenu extends Component { } componentDidUpdate(prevProps) { - if (this.props.windowWidth !== prevProps.windowWidth) { this.setDynamicEmojiSize(); } + if (this.props.windowWidth !== prevProps.windowWidth) { + this.setDynamicEmojiSize(); + } } componentWillUnmount() { diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 0e058b493f8b..59d6b1e821b7 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -42,7 +42,9 @@ class EmojiPickerMenu extends Component { } componentDidUpdate(prevProps) { - if (this.props.windowWidth !== prevProps.windowWidth) { this.setDynamicEmojiSize(); } + if (this.props.windowWidth !== prevProps.windowWidth) { + this.setDynamicEmojiSize(); + } } /** From 156fe87dc8676ea7ec4228d3754b45d7022a0462 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Sun, 27 Jun 2021 18:08:09 +0530 Subject: [PATCH 5/7] feat: Emoji size fix --- .../home/report/EmojiPickerMenu/index.js | 23 ++++--------------- .../report/EmojiPickerMenu/index.native.js | 18 +-------------- src/pages/home/report/EmojiPickerMenuItem.js | 12 ++++------ 3 files changed, 10 insertions(+), 43 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index fbd7292fdc71..ced42248b2c8 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -74,7 +74,9 @@ class EmojiPickerMenu extends Component { headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, arePointerEventsDisabled: false, - emojiSize: dynamicEmojiSize(this.props.windowWidth), + emojiSize: { + fontSize: dynamicEmojiSize(this.props.windowWidth), + }, }; } @@ -89,25 +91,10 @@ class EmojiPickerMenu extends Component { this.setupEventHandlers(); } - componentDidUpdate(prevProps) { - if (this.props.windowWidth !== prevProps.windowWidth) { - this.setDynamicEmojiSize(); - } - } - componentWillUnmount() { this.cleanupEventHandlers(); } - /** - * Sets emoji size dynamically based on the window width - */ - setDynamicEmojiSize() { - this.setState({ - emojiSize: dynamicEmojiSize(this.props.windowWidth), - }); - } - /** * Setup and attach keypress/mouse handlers for highlight navigation. */ @@ -320,7 +307,7 @@ class EmojiPickerMenu extends Component { onHover={() => this.setState({highlightedIndex: index})} emoji={code} isHighlighted={index === this.state.highlightedIndex} - size={this.state.emojiSize} + emojiSize={this.state.emojiSize} /> ); } @@ -352,7 +339,7 @@ class EmojiPickerMenu extends Component { keyExtractor={item => `emoji_picker_${item.code}`} numColumns={this.numColumns} style={styles.emojiPickerList} - extraData={this.state} + extraData={[this.state.filteredEmojis, this.state.highlightedIndex]} stickyHeaderIndices={this.state.headerIndices} onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y} /> diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 59d6b1e821b7..527dd9f413ce 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -41,21 +41,6 @@ class EmojiPickerMenu extends Component { }; } - componentDidUpdate(prevProps) { - if (this.props.windowWidth !== prevProps.windowWidth) { - this.setDynamicEmojiSize(); - } - } - - /** - * Sets emoji size dynamically based on the window width - */ - setDynamicEmojiSize() { - this.setState({ - emojiSize: dynamicEmojiSize(this.props.windowWidth), - }); - } - /** * Given an emoji item object, render a component based on its type. * Items with the code "SPACER" return nothing and are used to fill rows up to 8 @@ -81,7 +66,7 @@ class EmojiPickerMenu extends Component { ); } @@ -95,7 +80,6 @@ class EmojiPickerMenu extends Component { keyExtractor={item => (`emoji_picker_${item.code}`)} numColumns={this.numColumns} style={styles.emojiPickerList} - extraData={this.state} stickyHeaderIndices={this.unfilteredHeaderIndices} /> diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js index 2ebc00371359..df5f1554dc0e 100644 --- a/src/pages/home/report/EmojiPickerMenuItem.js +++ b/src/pages/home/report/EmojiPickerMenuItem.js @@ -19,7 +19,9 @@ const propTypes = { isHighlighted: PropTypes.bool.isRequired, /** Size of the emoji item */ - size: PropTypes.number.isRequired, + emojiSize: PropTypes.shape({ + fontSize: PropTypes.number, + }).isRequired, }; const EmojiPickerMenuItem = props => ( @@ -32,16 +34,10 @@ const EmojiPickerMenuItem = props => ( styles.pv1, getButtonBackgroundColorStyle(getButtonState(false, pressed)), props.isHighlighted ? styles.emojiItemHighlighted : {}, - { - fontSize: props.size, - }, ])} > - + {props.emoji} From 734ee3ea112e87eac8b1a36dff6db10ef5e90459 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Mon, 28 Jun 2021 22:36:35 +0530 Subject: [PATCH 6/7] feat: Updated logic --- src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js | 6 +++--- src/pages/home/report/EmojiPickerMenu/index.native.js | 2 +- src/pages/home/report/EmojiPickerMenuItem.js | 8 ++++++-- src/styles/styles.js | 1 + 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js index 5f13c4aacb5e..0c76601ed061 100644 --- a/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js +++ b/src/pages/home/report/EmojiPickerMenu/dynamicEmojiSize.js @@ -2,12 +2,12 @@ import styleVariables from '../../../../styles/variables'; const dynamicEmojiSize = (windowWidth) => { if (windowWidth <= 320) { - return styleVariables.fontSizeSmall; + return styleVariables.iconSizeExtraSmall; } if (windowWidth <= 480) { - return styleVariables.fontSizeNormal; + return styleVariables.iconSizeNormal; } - return styleVariables.fontSizeLarge; + return styleVariables.iconSizeLarge; }; export default dynamicEmojiSize; diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 527dd9f413ce..dcef96a176a4 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -37,7 +37,7 @@ class EmojiPickerMenu extends Component { this.renderItem = this.renderItem.bind(this); this.state = { - emojiSize: dynamicEmojiSize(this.props.windowWidth), + emojiSize: {fontSize: dynamicEmojiSize(this.props.windowWidth)}, }; } diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js index df5f1554dc0e..558f89095da9 100644 --- a/src/pages/home/report/EmojiPickerMenuItem.js +++ b/src/pages/home/report/EmojiPickerMenuItem.js @@ -13,10 +13,10 @@ const propTypes = { onPress: PropTypes.func.isRequired, /** Handles what to do when we hover over this item with our cursor */ - onHover: PropTypes.func.isRequired, + onHover: PropTypes.func, /** Whether this menu item is currently highlighted or not */ - isHighlighted: PropTypes.bool.isRequired, + isHighlighted: PropTypes.bool, /** Size of the emoji item */ emojiSize: PropTypes.shape({ @@ -46,6 +46,10 @@ const EmojiPickerMenuItem = props => ( ); EmojiPickerMenuItem.propTypes = propTypes; EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem'; +EmojiPickerMenuItem.defaultProps = { + isHighlighted: false, + onHover: () => {}, +}; // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action. diff --git a/src/styles/styles.js b/src/styles/styles.js index 4f544805be6e..f63273ef5fe3 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -923,6 +923,7 @@ const styles = { }, emojiItem: { + flex: 1, width: '12.5%', textAlign: 'center', borderRadius: 8, From 0b34771e86a3ec34a1cb2700870ea44e28d88043 Mon Sep 17 00:00:00 2001 From: Pranshu Chittora Date: Thu, 1 Jul 2021 23:53:57 +0530 Subject: [PATCH 7/7] fix: Minor PR changes --- src/pages/home/report/EmojiPickerMenu/index.js | 8 ++++---- src/pages/home/report/EmojiPickerMenu/index.native.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index ced42248b2c8..20da97b9383d 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -68,15 +68,15 @@ class EmojiPickerMenu extends Component { this.cleanupEventHandlers = this.cleanupEventHandlers.bind(this); this.renderItem = this.renderItem.bind(this); this.currentScrollOffset = 0; + this.emojiSize = { + fontSize: dynamicEmojiSize(this.props.windowWidth), + }; this.state = { filteredEmojis: this.emojis, headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, arePointerEventsDisabled: false, - emojiSize: { - fontSize: dynamicEmojiSize(this.props.windowWidth), - }, }; } @@ -307,7 +307,7 @@ class EmojiPickerMenu extends Component { onHover={() => this.setState({highlightedIndex: index})} emoji={code} isHighlighted={index === this.state.highlightedIndex} - emojiSize={this.state.emojiSize} + emojiSize={this.emojiSize} /> ); } diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 1daf923a4697..1b038df6a63d 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -36,8 +36,8 @@ class EmojiPickerMenu extends Component { this.renderItem = this.renderItem.bind(this); - this.state = { - emojiSize: {fontSize: dynamicEmojiSize(this.props.windowWidth)}, + this.emojiSize = { + fontSize: dynamicEmojiSize(this.props.windowWidth), }; } @@ -66,7 +66,7 @@ class EmojiPickerMenu extends Component { ); }