2016-07-03 18:45:13 +02:00
|
|
|
import React from 'react';
|
2016-06-17 01:28:09 +02:00
|
|
|
import AutocompleteProvider from './AutocompleteProvider';
|
2016-07-03 18:45:13 +02:00
|
|
|
import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
|
2016-06-17 01:28:09 +02:00
|
|
|
import Fuse from 'fuse.js';
|
2016-08-17 13:57:19 +02:00
|
|
|
import sdk from '../index';
|
|
|
|
import {PillCompletion} from './Components';
|
2016-09-13 12:11:52 +02:00
|
|
|
import type {SelectionRange, Completion} from './Autocompleter';
|
2016-06-17 01:28:09 +02:00
|
|
|
|
|
|
|
const EMOJI_REGEX = /:\w*:?/g;
|
|
|
|
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
|
|
|
|
|
2016-06-20 10:22:55 +02:00
|
|
|
let instance = null;
|
|
|
|
|
2016-06-17 01:28:09 +02:00
|
|
|
export default class EmojiProvider extends AutocompleteProvider {
|
|
|
|
constructor() {
|
2016-06-21 12:16:20 +02:00
|
|
|
super(EMOJI_REGEX);
|
2016-06-17 01:28:09 +02:00
|
|
|
this.fuse = new Fuse(EMOJI_SHORTNAMES);
|
|
|
|
}
|
|
|
|
|
2016-09-13 12:11:52 +02:00
|
|
|
async getCompletions(query: string, selection: SelectionRange) {
|
2016-08-17 13:57:19 +02:00
|
|
|
const EmojiText = sdk.getComponent('views.elements.EmojiText');
|
|
|
|
|
2016-06-17 01:28:09 +02:00
|
|
|
let completions = [];
|
2016-07-03 18:45:13 +02:00
|
|
|
let {command, range} = this.getCurrentCommand(query, selection);
|
|
|
|
if (command) {
|
2016-06-21 12:16:20 +02:00
|
|
|
completions = this.fuse.search(command[0]).map(result => {
|
2016-08-17 13:57:19 +02:00
|
|
|
const shortname = EMOJI_SHORTNAMES[result];
|
|
|
|
const unicode = shortnameToUnicode(shortname);
|
2016-06-17 01:28:09 +02:00
|
|
|
return {
|
2016-08-17 13:57:19 +02:00
|
|
|
completion: unicode,
|
2016-06-17 01:28:09 +02:00
|
|
|
component: (
|
2016-08-17 13:57:19 +02:00
|
|
|
<PillCompletion title={shortname} initialComponent={<EmojiText style={{maxWidth: '1em'}}>{unicode}</EmojiText>} />
|
2016-07-03 18:45:13 +02:00
|
|
|
),
|
|
|
|
range,
|
2016-06-17 01:28:09 +02:00
|
|
|
};
|
2016-08-17 13:57:19 +02:00
|
|
|
}).slice(0, 8);
|
2016-06-17 01:28:09 +02:00
|
|
|
}
|
2016-09-13 12:11:52 +02:00
|
|
|
return completions;
|
2016-06-17 01:28:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
getName() {
|
2016-08-17 13:57:19 +02:00
|
|
|
return '😃 Emoji';
|
2016-06-17 01:28:09 +02:00
|
|
|
}
|
2016-06-20 10:22:55 +02:00
|
|
|
|
|
|
|
static getInstance() {
|
2016-07-03 18:45:13 +02:00
|
|
|
if (instance == null)
|
2017-01-20 15:22:27 +01:00
|
|
|
{instance = new EmojiProvider();}
|
2016-06-20 10:22:55 +02:00
|
|
|
return instance;
|
|
|
|
}
|
2016-08-17 13:57:19 +02:00
|
|
|
|
|
|
|
renderCompletions(completions: [React.Component]): ?React.Component {
|
2016-08-22 21:06:31 +02:00
|
|
|
return <div className="mx_Autocomplete_Completion_container_pill">
|
|
|
|
{completions}
|
|
|
|
</div>;
|
2016-08-17 13:57:19 +02:00
|
|
|
}
|
2016-06-17 01:28:09 +02:00
|
|
|
}
|