jiti-meet/react/features/chat/components/web/SmileysPanel.js

70 lines
1.7 KiB
JavaScript

// @flow
import React, { PureComponent } from 'react';
import Emoji from 'react-emoji-render';
import { smileys } from '../../smileys';
/**
* The type of the React {@code Component} props of {@link SmileysPanel}.
*/
type Props = {
/**
* Callback to invoke when a smiley is selected. The smiley will be passed
* back.
*/
onSmileySelect: Function
};
/**
* Implements a React Component showing smileys that can be be shown in chat.
*
* @extends Component
*/
class SmileysPanel extends PureComponent<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const smileyItems = Object.keys(smileys).map(smileyKey => {
const onSelectFunction = this._getOnSmileySelectCallback(smileyKey);
return (
<div
className = 'smileyContainer'
id = { smileyKey }
key = { smileyKey }>
<Emoji
onClick = { onSelectFunction }
onlyEmojiClassName = 'smiley'
text = { smileys[smileyKey] } />
</div>
);
});
return (
<div id = 'smileysContainer'>
{ smileyItems }
</div>
);
}
/**
* Helper method to bind a smiley's click handler.
*
* @param {string} smileyKey - The key from the {@link smileys} object
* that should be added to the chat message.
* @private
* @returns {Function}
*/
_getOnSmileySelectCallback(smileyKey) {
return () => this.props.onSmileySelect(smileys[smileyKey]);
}
}
export default SmileysPanel;