2020-04-11 23:29:19 +01:00
|
|
|
import unicodeMapping from './emoji/emoji_unicode_mapping_light'
|
2020-06-16 03:59:48 +01:00
|
|
|
import Text from './text'
|
2019-08-07 06:02:36 +01:00
|
|
|
|
2020-04-08 02:06:59 +01:00
|
|
|
const assetHost = process.env.CDN_HOST || ''
|
2019-08-07 06:02:36 +01:00
|
|
|
|
|
|
|
export default class AutosuggestEmoji extends PureComponent {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
emoji: PropTypes.object.isRequired,
|
2020-04-08 02:06:59 +01:00
|
|
|
}
|
2019-08-07 06:02:36 +01:00
|
|
|
|
|
|
|
render () {
|
2020-04-08 02:06:59 +01:00
|
|
|
const { emoji } = this.props
|
|
|
|
let url
|
2019-08-07 06:02:36 +01:00
|
|
|
|
|
|
|
if (emoji.custom) {
|
2020-04-08 02:06:59 +01:00
|
|
|
url = emoji.imageUrl
|
2019-08-07 06:02:36 +01:00
|
|
|
} else {
|
2020-04-08 02:06:59 +01:00
|
|
|
const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')]
|
2019-08-07 06:02:36 +01:00
|
|
|
|
2020-04-08 02:06:59 +01:00
|
|
|
if (!mapping) return null
|
2019-08-07 06:02:36 +01:00
|
|
|
|
2020-04-08 02:06:59 +01:00
|
|
|
url = `${assetHost}/emoji/${mapping.filename}.svg`
|
2019-08-07 06:02:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2020-06-16 04:16:43 +01:00
|
|
|
<div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
2019-08-07 06:02:36 +01:00
|
|
|
<img className='emojione' src={url} alt={emoji.native || emoji.colons} />
|
2020-06-16 03:59:48 +01:00
|
|
|
<Text className={_s.ml10}>
|
|
|
|
{emoji.colons}
|
|
|
|
</Text>
|
2019-08-07 06:02:36 +01:00
|
|
|
</div>
|
2020-04-08 02:06:59 +01:00
|
|
|
)
|
2019-08-07 06:02:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|