verdnatura-chat/app/views/RoomView/ReactionPicker.tsx

90 lines
2.4 KiB
TypeScript

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<IReactionPickerProps> {
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 ? (
<Modal
isVisible={show}
style={{ alignItems: 'center' }}
onBackdropPress={reactionClose}
onBackButtonPress={reactionClose}
animationIn='fadeIn'
animationOut='fadeOut'
backdropOpacity={themes[theme].backdropOpacity}>
<View
style={[
styles.reactionPickerContainer,
{
width: widthStyle,
height: heightStyle
}
]}
testID='reaction-picker'>
<EmojiPicker
// tabEmojiStyle={tabEmojiStyle}
onEmojiSelected={this.onEmojiSelected}
baseUrl={baseUrl}
/>
</View>
</Modal>
) : null;
}
}
const mapStateToProps = (state: IApplicationState) => ({
baseUrl: state.server.server,
isMasterDetail: state.app.isMasterDetail
});
export default connect(mapStateToProps)(withTheme(ReactionPicker));