diff --git a/src/CONST.js b/src/CONST.js index 97ec927d51e0..823eb1b6436b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -128,6 +128,15 @@ const CONST = { STARTUP: 8000, RECONNECT: 1000, }, + + OS: { + WINDOWS: 'Windows', + MAC_OS: 'Mac OS', + ANDROID: 'Android', + IOS: 'iOS', + LINUX: 'Linux', + NATIVE: 'Native', + }, }; export default CONST; diff --git a/src/libs/getOperatingSystem/index.js b/src/libs/getOperatingSystem/index.js new file mode 100644 index 000000000000..1aaa9ce5c828 --- /dev/null +++ b/src/libs/getOperatingSystem/index.js @@ -0,0 +1,26 @@ +import CONST from '../../CONST'; + +/** + * Reads the current operating system when running on Web/Mobile-Web/Desktop + * @return {String | null} + */ +export default () => { + const {userAgent, platform} = window.navigator; + const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']; + const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']; + const iosPlatforms = ['iPhone', 'iPad', 'iPod']; + + let os = null; + if (macosPlatforms.includes(platform)) { + os = CONST.OS.MAC_OS; + } else if (iosPlatforms.includes(platform)) { + os = CONST.OS.IOS; + } else if (windowsPlatforms.includes(platform)) { + os = CONST.OS.WINDOWS; + } else if (/Android/.test(userAgent)) { + os = CONST.OS.ANDROID; + } else if (/Linux/.test(platform)) { + os = CONST.OS.LINUX; + } + return os; +}; diff --git a/src/libs/getOperatingSystem/index.native.js b/src/libs/getOperatingSystem/index.native.js new file mode 100644 index 000000000000..fce2857548f1 --- /dev/null +++ b/src/libs/getOperatingSystem/index.native.js @@ -0,0 +1,17 @@ +import {Platform} from 'react-native'; +import CONST from '../../CONST'; + +/** + * Reads the current operating system for native platforms. + * @return {String | null} + */ +export default () => { + switch (Platform.OS) { + case 'ios': + return CONST.OS.IOS; + case 'android': + return CONST.OS.ANDROID; + default: + return CONST.OS.NATIVE; + } +}; diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index 06d453009695..527c14afbab5 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -11,6 +11,7 @@ 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'; const propTypes = { // Function to add the selected emoji to the main compose text input @@ -51,6 +52,12 @@ class EmojiPickerMenu extends Component { // If more emojis are ever added to emojis.js this will need to be updated or things will break this.unfilteredHeaderIndices = [0, 33, 59, 87, 98, 120, 147]; + // If we're on Windows, don't display the flag emojis (the last category), + // since Windows doesn't support them (and only displays country codes instead) + this.emojis = getOperatingSystem() === CONST.OS.WINDOWS + ? emojis.slice(0, this.unfilteredHeaderIndices.pop() * this.numColumns) + : emojis; + this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300); this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this); this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this); @@ -60,7 +67,7 @@ class EmojiPickerMenu extends Component { this.renderItem = this.renderItem.bind(this); this.state = { - filteredEmojis: emojis, + filteredEmojis: this.emojis, headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, currentScrollOffset: 0, @@ -130,7 +137,7 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { - const firstNonHeaderIndex = this.state.filteredEmojis.length === emojis.length ? this.numColumns : 0; + const firstNonHeaderIndex = this.state.filteredEmojis.length === this.emojis.length ? this.numColumns : 0; // If nothing is highlighted and an arrow key is pressed // select the first emoji @@ -188,7 +195,7 @@ class EmojiPickerMenu extends Component { scrollToHighlightedIndex() { // If there are headers in the emoji array, so we need to offset by their heights as well let numHeaders = 0; - if (this.state.filteredEmojis.length === emojis.length) { + if (this.state.filteredEmojis.length === this.emojis.length) { numHeaders = this.unfilteredHeaderIndices .filter(i => this.state.highlightedIndex > i * this.numColumns).length; } @@ -228,14 +235,14 @@ class EmojiPickerMenu extends Component { if (normalizedSearchTerm === '') { // There are no headers when searching, so we need to re-make them sticky when there is no search term this.setState({ - filteredEmojis: emojis, + filteredEmojis: this.emojis, headerIndices: this.unfilteredHeaderIndices, highlightedIndex: this.numColumns, }); return; } - const newFilteredEmojiList = _.filter(emojis, emoji => ( + const newFilteredEmojiList = _.filter(this.emojis, emoji => ( !emoji.header && emoji.code !== CONST.EMOJI_SPACER && _.find(emoji.keywords, keyword => keyword.includes(normalizedSearchTerm))