a114b19ecc
* Initiated basic migration to react-native-elements - Search bar receives all right props without custom animations being necessary - Need to test on different layouts and cases - May be possible to unify android and iOS components. Attempt later * Removing separated android/ios files - Adding implementation of android searchbar - updating test snapshots * WIP: Integrating leftComponent and adding focus animations * Adding animations to left component on focus and blur events * Removing repeated styles and useless props * Updating snapshots * Ensuring clearIcon renders when tapping search suggestions - Also makes sure it prioritizes custom color attributes over default values for the search input * Refactoring styles, removing clear icon animations - Also removed useless ternary operations since the library itself already checks whether the search input is empty * Replacing icon components with props whenever possible - Removing useless styles * memoizing styles, adding default props/values * Memoize searchBarStyle with params * Fixing backgroundColor * Removing minWidth for cancel button * Fixing styling issues on both iOS and android * Updating snapshots post merge * Making sure showCancel can be controlled by props * Updating snapshots * Fix clipped edges on iOS & cancel icon on Android * Fixed radius, memoized styles * Fixing styling issues found on Android Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
60 lines
2.5 KiB
JavaScript
60 lines
2.5 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import {View} from 'react-native';
|
|
|
|
import SearchBar from 'app/components/search_bar';
|
|
import {changeOpacity, getKeyboardAppearanceFromTheme} from 'app/utils/theme';
|
|
|
|
import EmojiPickerBase, {getStyleSheetFromTheme} from './emoji_picker_base';
|
|
|
|
export default class EmojiPicker extends EmojiPickerBase {
|
|
render() {
|
|
const {formatMessage} = this.context.intl;
|
|
const {theme} = this.props;
|
|
const {searchTerm} = this.state;
|
|
const styles = getStyleSheetFromTheme(theme);
|
|
|
|
const searchBarInput = {
|
|
backgroundColor: theme.centerChannelBg,
|
|
color: theme.centerChannelColor,
|
|
fontSize: 13,
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<View style={styles.searchBar}>
|
|
<SearchBar
|
|
ref={this.setSearchBarRef}
|
|
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
|
|
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
|
|
backgroundColor='transparent'
|
|
inputHeight={33}
|
|
inputStyle={searchBarInput}
|
|
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
|
|
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
|
|
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
|
|
titleCancelColor={theme.centerChannelColor}
|
|
onChangeText={this.changeSearchTerm}
|
|
onCancelButtonPress={this.cancelSearch}
|
|
autoCapitalize='none'
|
|
value={searchTerm}
|
|
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
|
|
onAnimationComplete={this.setRebuiltEmojis}
|
|
/>
|
|
</View>
|
|
<View style={styles.container}>
|
|
{this.renderListComponent(2)}
|
|
{!searchTerm &&
|
|
<View style={styles.bottomContentWrapper}>
|
|
<View style={styles.bottomContent}>
|
|
{this.renderSectionIcons()}
|
|
</View>
|
|
</View>
|
|
}
|
|
</View>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|