diff --git a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap index a4a9bb84c..fa4026572 100644 --- a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap +++ b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap @@ -2,12 +2,13 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = ` - - + > + + + diff --git a/app/components/emoji_picker/emoji_picker.android.js b/app/components/emoji_picker/emoji_picker.android.js new file mode 100644 index 000000000..a835fddef --- /dev/null +++ b/app/components/emoji_picker/emoji_picker.android.js @@ -0,0 +1,102 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import { + FlatList, + SectionList, + View, +} from 'react-native'; + +import SearchBar from 'app/components/search_bar'; +import {changeOpacity, getKeyboardAppearanceFromTheme} from 'app/utils/theme'; + +import EmojiPickerBase, {getStyleSheetFromTheme, SECTION_MARGIN} from './emoji_picker_base'; + +export default class EmojiPicker extends EmojiPickerBase { + render() { + const {formatMessage} = this.context.intl; + const {deviceWidth, theme} = this.props; + const {emojis, filteredEmojis, searchTerm} = this.state; + const styles = getStyleSheetFromTheme(theme); + + let listComponent; + if (searchTerm) { + listComponent = ( + + ); + } else { + listComponent = ( + + ); + } + + const searchBarInput = { + backgroundColor: theme.centerChannelBg, + color: theme.centerChannelColor, + fontSize: 13, + marginBottom: -3, + }; + + return ( + + + + + + {listComponent} + {!searchTerm && + + + {this.renderSectionIcons()} + + + } + + + ); + } +} diff --git a/app/components/emoji_picker/emoji_picker.ios.js b/app/components/emoji_picker/emoji_picker.ios.js new file mode 100644 index 000000000..c1603f6e7 --- /dev/null +++ b/app/components/emoji_picker/emoji_picker.ios.js @@ -0,0 +1,133 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import { + FlatList, + KeyboardAvoidingView, + SectionList, + View, +} from 'react-native'; +import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view'; + +import SafeAreaView from 'app/components/safe_area_view'; +import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; +import SearchBar from 'app/components/search_bar'; +import {DeviceTypes} from 'app/constants'; +import {changeOpacity, getKeyboardAppearanceFromTheme} from 'app/utils/theme'; + +import EmojiPickerBase, {getStyleSheetFromTheme, SECTION_MARGIN} from './emoji_picker_base'; + +const SCROLLVIEW_NATIVE_ID = 'emojiPicker'; + +export default class EmojiPicker extends EmojiPickerBase { + render() { + const {formatMessage} = this.context.intl; + const {deviceWidth, isLandscape, theme} = this.props; + const {emojis, filteredEmojis, searchTerm} = this.state; + const styles = getStyleSheetFromTheme(theme); + + const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2; + + let listComponent; + if (searchTerm) { + listComponent = ( + + ); + } else { + listComponent = ( + + ); + } + + let keyboardOffset = DeviceTypes.IS_IPHONE_X ? 50 : 30; + if (isLandscape) { + keyboardOffset = DeviceTypes.IS_IPHONE_X ? 0 : 10; + } + + const searchBarInput = { + backgroundColor: theme.centerChannelBg, + color: theme.centerChannelColor, + fontSize: 13, + }; + + return ( + + + + + + + {listComponent} + {!searchTerm && + + + + {this.renderSectionIcons()} + + + + } + + + + ); + } +} diff --git a/app/components/emoji_picker/emoji_picker.test.js b/app/components/emoji_picker/emoji_picker.test.js index c9f2233f4..2b0b24d8b 100644 --- a/app/components/emoji_picker/emoji_picker.test.js +++ b/app/components/emoji_picker/emoji_picker.test.js @@ -6,7 +6,8 @@ import React from 'react'; import Preferences from 'mattermost-redux/constants/preferences'; import {shallowWithIntl} from 'test/intl-test-helper'; -import EmojiPicker, {filterEmojiSearchInput} from './emoji_picker.js'; +import {filterEmojiSearchInput} from './emoji_picker_base'; +import EmojiPicker from './emoji_picker.ios'; describe('components/emoji_picker/EmojiPicker', () => { const baseProps = { diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker_base.js similarity index 71% rename from app/components/emoji_picker/emoji_picker.js rename to app/components/emoji_picker/emoji_picker_base.js index 220ce6f73..249df1ceb 100644 --- a/app/components/emoji_picker/emoji_picker.js +++ b/app/components/emoji_picker/emoji_picker_base.js @@ -6,10 +6,7 @@ import PropTypes from 'prop-types'; import {intlShape} from 'react-intl'; import { ActivityIndicator, - FlatList, - KeyboardAvoidingView, Platform, - SectionList, Text, TouchableOpacity, View, @@ -21,23 +18,20 @@ import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers'; import Emoji from 'app/components/emoji'; import FormattedText from 'app/components/formatted_text'; -import SafeAreaView from 'app/components/safe_area_view'; -import SearchBar from 'app/components/search_bar'; import {DeviceTypes} from 'app/constants'; import {emptyFunction} from 'app/utils/general'; import { makeStyleSheetFromTheme, changeOpacity, - getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; import EmojiPickerRow from './emoji_picker_row'; const EMOJI_SIZE = 30; const EMOJI_GUTTER = 7.5; -const SECTION_MARGIN = 15; -const SECTION_HEADER_HEIGHT = 28; const EMOJIS_PER_PAGE = 200; +const SECTION_HEADER_HEIGHT = 28; +export const SECTION_MARGIN = 15; export function filterEmojiSearchInput(searchText) { return searchText.toLowerCase().replace(/^:|:$/g, ''); @@ -83,6 +77,7 @@ export default class EmojiPicker extends PureComponent { const emojis = this.renderableEmojis(props.emojisBySection, props.deviceWidth); const emojiSectionIndexByOffset = this.measureEmojiSections(emojis); + this.searchBarRef = React.createRef(); this.scrollToSectionTries = 0; this.state = { emojis, @@ -99,8 +94,8 @@ export default class EmojiPicker extends PureComponent { if (this.props.deviceWidth !== nextProps.deviceWidth) { this.rebuildEmojis = true; - if (this.refs.search_bar) { - this.refs.search_bar.blur(); + if (this.searchBarRef?.current) { + this.searchBarRef.current.blur(); } } @@ -399,118 +394,9 @@ export default class EmojiPicker extends PureComponent { ); } - - render() { - const {deviceWidth, isLandscape, theme} = this.props; - const {emojis, filteredEmojis, searchTerm} = this.state; - const {intl} = this.context; - const {formatMessage} = intl; - const styles = getStyleSheetFromTheme(theme); - - const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2; - - let listComponent; - if (searchTerm) { - listComponent = ( - - ); - } else { - listComponent = ( - - ); - } - - let keyboardOffset = 64; - if (Platform.OS === 'android') { - keyboardOffset = -200; - } else if (DeviceTypes.IS_IPHONE_X) { - keyboardOffset = isLandscape ? 35 : 107; - } else if (isLandscape) { - keyboardOffset = 52; - } - - const searchBarInput = { - backgroundColor: theme.centerChannelBg, - color: theme.centerChannelColor, - fontSize: 13, - ...Platform.select({ - android: { - marginBottom: -3, - }, - }), - }; - - return ( - - - - - - - {listComponent} - {!searchTerm && - - - {this.renderSectionIcons()} - - - } - - - - ); - } } -const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { +export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { return { flex: { flex: 1, @@ -521,39 +407,29 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { borderTopWidth: 1, flexDirection: 'row', justifyContent: 'space-between', - }, - bottomContentWrapper: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - height: 35, width: '100%', }, - columnStyle: { - alignSelf: 'stretch', - flexDirection: 'row', - marginVertical: EMOJI_GUTTER, - justifyContent: 'flex-start', + bottomContentWrapper: { + ...Platform.select({ + android: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + }, + ios: { + width: '100%', + flexDirection: 'row', + }, + }), + backgroundColor: theme.centerChannelBg, + height: 35, }, container: { alignItems: 'center', backgroundColor: theme.centerChannelBg, flex: 1, }, - emoji: { - width: EMOJI_SIZE, - height: EMOJI_SIZE, - marginHorizontal: EMOJI_GUTTER, - alignItems: 'center', - justifyContent: 'center', - }, - emojiLeft: { - marginLeft: 0, - }, - emojiRight: { - marginRight: 0, - }, flatList: { flex: 1, backgroundColor: theme.centerChannelBg, @@ -580,16 +456,16 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { borderRightColor: changeOpacity(theme.centerChannelColor, 0.2), overflow: 'hidden', }, - listView: { - backgroundColor: theme.centerChannelBg, - marginBottom: 35, - }, searchBar: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), paddingVertical: 5, }, - section: { - alignItems: 'center', + sectionList: { + ...Platform.select({ + android: { + marginBottom: 35, + }, + }), }, sectionIcon: { color: changeOpacity(theme.centerChannelColor, 0.3), @@ -613,9 +489,6 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { justifyContent: 'center', backgroundColor: theme.centerChannelBg, }, - wrapper: { - flex: 1, - }, loading: { flex: 1, alignItems: 'center', diff --git a/package-lock.json b/package-lock.json index a1555a9ce..0a17b5acb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16580,8 +16580,8 @@ } }, "react-native-keyboard-tracking-view": { - "version": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2", - "from": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2" + "version": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594", + "from": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594" }, "react-native-keychain": { "version": "3.1.3", diff --git a/package.json b/package.json index ece3d5d3a..f44c12ed1 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "react-native-image-gallery": "github:mattermost/react-native-image-gallery#c1a9f7118e90cc87d47620bc0584c9cac4b0cf38", "react-native-image-picker": "0.28.1", "react-native-keyboard-aware-scroll-view": "0.8.0", - "react-native-keyboard-tracking-view": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2", + "react-native-keyboard-tracking-view": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594", "react-native-keychain": "3.1.3", "react-native-linear-gradient": "2.5.4", "react-native-local-auth": "github:mattermost/react-native-local-auth#cc9ce2f468fbf7b431dfad3191a31aaa9227a6ab",