2017-09-23 14:47:32 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2023-05-23 17:15:17 +02:00
|
|
|
import { PureComponent } from 'react';
|
|
|
|
|
2020-10-13 01:19:35 +02:00
|
|
|
import { assetHost } from 'mastodon/utils/config';
|
2017-09-23 14:47:32 +02:00
|
|
|
|
2023-10-24 10:06:14 +02:00
|
|
|
import { unicodeMapping } from '../features/emoji/emoji_unicode_mapping_light';
|
2023-05-23 17:15:17 +02:00
|
|
|
|
2023-05-23 10:52:27 +02:00
|
|
|
export default class AutosuggestEmoji extends PureComponent {
|
2017-09-23 14:47:32 +02:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
emoji: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { emoji } = this.props;
|
|
|
|
let url;
|
|
|
|
|
|
|
|
if (emoji.custom) {
|
|
|
|
url = emoji.imageUrl;
|
|
|
|
} else {
|
2017-09-30 05:11:44 +02:00
|
|
|
const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
|
|
|
|
|
|
|
|
if (!mapping) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-10-06 03:42:34 +02:00
|
|
|
url = `${assetHost}/emoji/${mapping.filename}.svg`;
|
2017-09-23 14:47:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='autosuggest-emoji'>
|
|
|
|
<img
|
|
|
|
className='emojione'
|
|
|
|
src={url}
|
|
|
|
alt={emoji.native || emoji.colons}
|
|
|
|
/>
|
|
|
|
|
2024-01-25 16:41:31 +01:00
|
|
|
<div className='autosuggest-emoji__name'>{emoji.colons}</div>
|
2017-09-23 14:47:32 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|