import React from 'react'; import { View } from 'react-native'; import { connect } from 'react-redux'; import Modal from 'react-native-modal'; import EmojiPicker from '../../containers/EmojiPicker'; import { isAndroid } from '../../utils/deviceInfo'; import { themes } from '../../lib/constants'; import { withTheme } from '../../theme'; import styles from './styles'; import { IApplicationState } from '../../definitions'; const margin = isAndroid ? 40 : 20; const maxSize = 400; interface IReactionPickerProps { baseUrl: string; message?: any; show: boolean; isMasterDetail: boolean; reactionClose: () => void; onEmojiSelected: Function; // TODO: properly type this width: number; height: number; theme: string; } class ReactionPicker extends React.Component { shouldComponentUpdate(nextProps: IReactionPickerProps) { const { show, width, height } = this.props; return nextProps.show !== show || width !== nextProps.width || height !== nextProps.height; } onEmojiSelected = (emoji: string, shortname: string) => { // standard emojis: `emoji` is unicode and `shortname` is :joy: // custom emojis: only `emoji` is returned with shortname type (:joy:) // to set reactions, we need shortname type const { onEmojiSelected, message } = this.props; if (message) { onEmojiSelected(shortname || emoji, message.id); } }; render() { const { width, height, show, baseUrl, reactionClose, isMasterDetail, theme } = this.props; let widthStyle = width - margin; let heightStyle = Math.min(width, height) - margin * 2; if (isMasterDetail) { widthStyle = maxSize; heightStyle = maxSize; } return show ? ( ) : null; } } const mapStateToProps = (state: IApplicationState) => ({ baseUrl: state.server.server, isMasterDetail: state.app.isMasterDetail }); export default connect(mapStateToProps)(withTheme(ReactionPicker));