matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

Update autocomplete design and scroll it correctly

Browse Source
This commit is contained in:
Aviral Dasgupta
2016-08-17 17:27:19 +05:30
parent bdfc7d069d
commit e173900808
8 changed files with 146 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/autocomplete/EmojiProvider.js
View File

@ -3,6 +3,8 @@ import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
import Fuse from 'fuse.js';
import sdk from '../index';
import {PillCompletion} from './Components';
const EMOJI_REGEX = /:\w*:?/g;
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
@ -16,28 +18,28 @@ export default class EmojiProvider extends AutocompleteProvider {
}
getCompletions(query: string, selection: {start: number, end: number}) {
const EmojiText = sdk.getComponent('views.elements.EmojiText');
let completions = [];
let {command, range} = this.getCurrentCommand(query, selection);
if (command) {
completions = this.fuse.search(command[0]).map(result => {
let shortname = EMOJI_SHORTNAMES[result];
let imageHTML = shortnameToImage(shortname);
const shortname = EMOJI_SHORTNAMES[result];
const unicode = shortnameToUnicode(shortname);
return {
completion: shortnameToUnicode(shortname),
completion: unicode,
component: (
<div className="mx_Autocomplete_Completion">
<span style={{maxWidth: '1em'}} dangerouslySetInnerHTML={{__html: imageHTML}}></span>&nbsp;&nbsp;{shortname}
</div>
<PillCompletion title={shortname} initialComponent={<EmojiText style={{maxWidth: '1em'}}>{unicode}</EmojiText>} />
),
range,
};
}).slice(0, 4);
}).slice(0, 8);
}
return Q.when(completions);
}
getName() {
return 'Emoji';
return '😃 Emoji';
}
static getInstance() {
@ -45,4 +47,10 @@ export default class EmojiProvider extends AutocompleteProvider {
instance = new EmojiProvider();
return instance;
}
renderCompletions(completions: [React.Component]): ?React.Component {
return React.cloneElement(super.renderCompletions(completions), {
className: 'mx_Autocomplete_Completion_container_pill',
});
}
}