81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { Text, View, TouchableOpacity, Platform } from 'react-native';
|
||
|
|
import { emojify } from 'react-emojione';
|
||
|
|
import { responsive } from 'react-native-responsive-ui';
|
||
|
|
import styles from './styles';
|
||
|
|
import CustomEmoji from './CustomEmoji';
|
||
|
|
|
||
|
|
|
||
|
|
const emojisPerRow = Platform.OS === 'ios' ? 8 : 9;
|
||
|
|
|
||
|
|
const renderEmoji = (emoji, size) => {
|
||
|
|
if (emoji.isCustom) {
|
||
|
|
return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 8, width: size - 8 }]} emoji={emoji} />;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
|
||
|
|
{emojify(`:${ emoji }:`, { output: 'unicode' })}
|
||
|
|
</Text>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
|
||
|
|
|
||
|
|
@responsive
|
||
|
|
export default class EmojiCategory extends React.Component {
|
||
|
|
static propTypes = {
|
||
|
|
emojis: PropTypes.any,
|
||
|
|
window: PropTypes.any,
|
||
|
|
onEmojiSelected: PropTypes.func,
|
||
|
|
emojisPerRow: PropTypes.number,
|
||
|
|
width: PropTypes.number
|
||
|
|
};
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
const { width, height } = this.props.window;
|
||
|
|
|
||
|
|
this.size = Math.min(this.props.width || width, height) / (this.props.emojisPerRow || emojisPerRow);
|
||
|
|
this.emojis = [];
|
||
|
|
}
|
||
|
|
componentWillMount() {
|
||
|
|
this.emojis = this.props.emojis.slice(0, emojisPerRow * 3).map(item => this.renderItem(item, this.size));
|
||
|
|
}
|
||
|
|
async componentDidMount() {
|
||
|
|
const array = this.props.emojis;
|
||
|
|
const temparray = [];
|
||
|
|
let i;
|
||
|
|
let j;
|
||
|
|
const chunk = emojisPerRow * 3;
|
||
|
|
for (i = chunk, j = array.length; i < j; i += chunk) {
|
||
|
|
temparray.push(array.slice(i, i + chunk));
|
||
|
|
}
|
||
|
|
temparray.forEach(async(items) => {
|
||
|
|
await nextFrame();
|
||
|
|
this.emojis = this.emojis.concat(items.map(item => this.renderItem(item, this.size)));
|
||
|
|
this.forceUpdate();
|
||
|
|
await nextFrame();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
shouldComponentUpdate() {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
renderItem(emoji, size) {
|
||
|
|
return (
|
||
|
|
<TouchableOpacity
|
||
|
|
activeOpacity={0.7}
|
||
|
|
key={emoji.isCustom ? emoji.content : emoji}
|
||
|
|
onPress={() => this.props.onEmojiSelected(emoji)}
|
||
|
|
>
|
||
|
|
{renderEmoji(emoji, size)}
|
||
|
|
</TouchableOpacity>);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return <View style={styles.categoryInner}>{this.emojis}</View>;
|
||
|
|
}
|
||
|
|
}
|