82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Text, TouchableOpacity } from 'react-native';
|
|
import { shortnameToUnicode } from 'emoji-toolkit';
|
|
import { responsive } from 'react-native-responsive-ui';
|
|
import { OptimizedFlatList } from 'react-native-optimized-flatlist';
|
|
|
|
import styles from './styles';
|
|
import CustomEmoji from './CustomEmoji';
|
|
import scrollPersistTaps from '../../utils/scrollPersistTaps';
|
|
import { isIOS } from '../../utils/deviceInfo';
|
|
|
|
const EMOJIS_PER_ROW = isIOS ? 8 : 9;
|
|
|
|
const renderEmoji = (emoji, size, baseUrl) => {
|
|
if (emoji.isCustom) {
|
|
return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 8, width: size - 8 }]} emoji={emoji} baseUrl={baseUrl} />;
|
|
}
|
|
return (
|
|
<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
|
|
{shortnameToUnicode(`:${ emoji }:`)}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
class EmojiCategory extends React.Component {
|
|
static propTypes = {
|
|
baseUrl: PropTypes.string.isRequired,
|
|
emojis: PropTypes.any,
|
|
window: PropTypes.any,
|
|
onEmojiSelected: PropTypes.func,
|
|
emojisPerRow: PropTypes.number,
|
|
width: PropTypes.number
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const { window, width, emojisPerRow } = this.props;
|
|
const { width: widthWidth, height: windowHeight } = window;
|
|
|
|
this.size = Math.min(width || widthWidth, windowHeight) / (emojisPerRow || EMOJIS_PER_ROW);
|
|
this.emojis = props.emojis;
|
|
}
|
|
|
|
shouldComponentUpdate() {
|
|
return false;
|
|
}
|
|
|
|
renderItem(emoji, size) {
|
|
const { baseUrl, onEmojiSelected } = this.props;
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
key={emoji.isCustom ? emoji.content : emoji}
|
|
onPress={() => onEmojiSelected(emoji)}
|
|
testID={`reaction-picker-${ emoji.isCustom ? emoji.content : emoji }`}
|
|
>
|
|
{renderEmoji(emoji, size, baseUrl)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { emojis } = this.props;
|
|
|
|
return (
|
|
<OptimizedFlatList
|
|
keyExtractor={item => (item.isCustom && item.content) || item}
|
|
data={emojis}
|
|
renderItem={({ item }) => this.renderItem(item, this.size)}
|
|
numColumns={EMOJIS_PER_ROW}
|
|
initialNumToRender={45}
|
|
getItemLayout={(data, index) => ({ length: this.size, offset: this.size * index, index })}
|
|
removeClippedSubviews
|
|
{...scrollPersistTaps}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default responsive(EmojiCategory);
|