[MM-14018] Ignore leading/trailing colon in emoji picker search (#2974)

* [MM-14018] Ignore leading/trailing colon in emoji picker search

* Respond to feedback

* fix failing test on ESlint
This commit is contained in:
Eric Shyong 2019-08-15 01:43:23 -07:00 committed by Saturnino Abril
parent 577ab85151
commit 958df2e65f
2 changed files with 38 additions and 10 deletions

View file

@ -35,6 +35,10 @@ const SECTION_MARGIN = 15;
const SECTION_HEADER_HEIGHT = 28;
const EMOJIS_PER_PAGE = 200;
export function filterEmojiSearchInput(searchText) {
return searchText.toLowerCase().replace(/^:|:$/g, '');
}
export default class EmojiPicker extends PureComponent {
static propTypes = {
customEmojisEnabled: PropTypes.bool.isRequired,
@ -160,24 +164,25 @@ export default class EmojiPicker extends PureComponent {
});
};
changeSearchTerm = (text) => {
changeSearchTerm = (rawText) => {
const searchTerm = filterEmojiSearchInput(rawText);
const nextState = {
searchTerm: text,
searchTerm: rawText,
};
if (!text) {
nextState.currentSectionIndex = 0;
}
this.setState(nextState);
if (!searchTerm) {
nextState.currentSectionIndex = 0;
return;
}
clearTimeout(this.searchTermTimeout);
const timeout = text ? 100 : 0;
const timeout = searchTerm ? 100 : 0;
this.searchTermTimeout = setTimeout(async () => {
if (isMinimumServerVersion(this.props.serverVersion, 4, 7)) {
await this.props.actions.searchCustomEmojis(text);
await this.props.actions.searchCustomEmojis(searchTerm);
}
const filteredEmojis = this.searchEmojis(text);
const filteredEmojis = this.searchEmojis(searchTerm);
this.setState({
filteredEmojis,
});

View file

@ -0,0 +1,23 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {filterEmojiSearchInput} from './emoji_picker.js';
describe('components/emoji_picker/EmojiPicker', () => {
const testCases = [
{input: 'smile', output: 'smile'},
{input: 'SMILE', output: 'smile'},
{input: ':smile', output: 'smile'},
{input: ':SMILE', output: 'smile'},
{input: 'smile:', output: 'smile'},
{input: 'SMILE:', output: 'smile'},
{input: ':smile:', output: 'smile'},
{input: ':SMILE:', output: 'smile'},
];
testCases.forEach((testCase) => {
test(`'${testCase.input}' should return '${testCase.output}'`, () => {
expect(filterEmojiSearchInput(testCase.input)).toEqual(testCase.output);
});
});
});