UNPKG

emoji-mart

Version:

Customizable Slack-like emoji picker for React

83 lines (72 loc) 2.31 kB
import React from 'react' import {Emoji, Skins} from '.' import {getData} from '../utils' export default class Preview extends React.Component { constructor(props) { super(props) this.state = { emoji: null } } render() { var { emoji } = this.state, { emojiProps, skinsProps, title, emoji: idleEmoji } = this.props if (emoji) { var emojiData = getData(emoji), { emoticons } = emojiData, knownEmoticons = [], listedEmoticons = [] for (let emoticon of emoticons) { if (knownEmoticons.indexOf(emoticon.toLowerCase()) == -1) { knownEmoticons.push(emoticon.toLowerCase()) listedEmoticons.push(emoticon) } } return <div className='emoji-mart-preview'> <div className='emoji-mart-preview-emoji'> <Emoji key={emoji.id} emoji={emoji} {...emojiProps} /> </div> <div className='emoji-mart-preview-data'> <div className='emoji-mart-preview-name'>{emoji.name}</div> <div className='emoji-mart-preview-shortnames'> {emojiData.short_names.map((short_name) => <span key={short_name} className='emoji-mart-preview-shortname'>:{short_name}:</span> )} </div> <div className='emoji-mart-preview-emoticons'> {listedEmoticons.map((emoticon) => <span key={emoticon} className='emoji-mart-preview-emoticon'>{emoticon}</span> )} </div> </div> </div> } else { return <div className='emoji-mart-preview'> <div className='emoji-mart-preview-emoji'> <Emoji emoji={idleEmoji} {...emojiProps} /> </div> <div className='emoji-mart-preview-data'> <span className='emoji-mart-title-label'> {title} </span> </div> <div className='emoji-mart-preview-skins'> <Skins {...skinsProps} /> </div> </div> } } } Preview.propTypes = { title: React.PropTypes.string.isRequired, emoji: React.PropTypes.string.isRequired, emojiProps: React.PropTypes.object.isRequired, skinsProps: React.PropTypes.object.isRequired, }