2016-05-31 14:36:52 +00:00
|
|
|
import React from 'react'
|
2016-06-09 00:22:06 +00:00
|
|
|
import {Emoji, Skins} from '.'
|
2016-05-31 14:36:52 +00:00
|
|
|
|
|
|
|
export default class Preview extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
this.state = { emoji: null }
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
var { emoji } = this.state,
|
2016-06-09 00:22:06 +00:00
|
|
|
{ emojiProps, skinsProps } = this.props
|
2016-05-31 14:36:52 +00:00
|
|
|
|
|
|
|
if (emoji) {
|
2016-07-07 21:22:40 +00:00
|
|
|
var { emoticons } = emoji,
|
2016-07-07 21:05:37 +00:00
|
|
|
knownEmoticons = [],
|
2016-07-07 21:22:40 +00:00
|
|
|
listedEmoticons = []
|
2016-07-07 21:05:37 +00:00
|
|
|
|
2016-07-07 21:22:40 +00:00
|
|
|
for (let emoticon of emoticons) {
|
|
|
|
if (knownEmoticons.indexOf(emoticon.toLowerCase()) == -1) {
|
|
|
|
knownEmoticons.push(emoticon.toLowerCase())
|
|
|
|
listedEmoticons.push(emoticon)
|
2016-07-07 21:05:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-06-01 19:25:45 +00:00
|
|
|
return <div className='emoji-picker-preview'>
|
2016-05-31 14:36:52 +00:00
|
|
|
<div className='emoji-picker-preview-emoji'>
|
|
|
|
<Emoji
|
2016-05-31 23:35:46 +00:00
|
|
|
key={emoji.short_name || emoji}
|
|
|
|
emoji={emoji}
|
2016-05-31 14:36:52 +00:00
|
|
|
{...emojiProps}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className='emoji-picker-preview-data'>
|
|
|
|
<span className='emoji-picker-preview-name'>{emoji.name}</span><br />
|
|
|
|
<span className='emoji-picker-preview-shortnames'>
|
|
|
|
{emoji.short_names.map((short_name) =>
|
|
|
|
<span key={short_name} className='emoji-picker-preview-shortname'>:{short_name}:</span>
|
2016-07-07 21:05:37 +00:00
|
|
|
)}<br />
|
2016-07-07 21:22:40 +00:00
|
|
|
{listedEmoticons.map((emoticon) =>
|
2016-07-07 21:05:37 +00:00
|
|
|
<span key={emoticon} className='emoji-picker-preview-emoticon'>{emoticon}</span>
|
2016-05-31 14:36:52 +00:00
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
} else {
|
2016-06-01 19:25:45 +00:00
|
|
|
return <div className='emoji-picker-preview'>
|
|
|
|
<div className='emoji-picker-preview-emoji'>
|
|
|
|
<Emoji
|
|
|
|
emoji='tophat'
|
|
|
|
{...emojiProps}
|
|
|
|
/>
|
|
|
|
</div>
|
2016-06-01 13:53:45 +00:00
|
|
|
|
2016-06-01 19:25:45 +00:00
|
|
|
<div className='emoji-picker-preview-data'>
|
|
|
|
<span className='emoji-picker-title-label'>
|
|
|
|
EmojiPicker
|
|
|
|
</span>
|
|
|
|
</div>
|
2016-06-09 00:22:06 +00:00
|
|
|
|
|
|
|
<div className='emoji-picker-preview-skins'>
|
|
|
|
<Skins
|
|
|
|
{...skinsProps}
|
|
|
|
/>
|
|
|
|
</div>
|
2016-05-31 14:36:52 +00:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Preview.propTypes = {
|
|
|
|
emojiProps: React.PropTypes.object.isRequired,
|
2016-06-09 00:22:06 +00:00
|
|
|
skinsProps: React.PropTypes.object.isRequired,
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|