session-desktop/ts/components/conversation/composition/EmojiQuickResult.tsx

51 lines
1.3 KiB
TypeScript

import React from 'react';
import { SuggestionDataItem } from 'react-mentions';
import styled from 'styled-components';
// @ts-ignore
import { SearchIndex } from 'emoji-mart';
import { searchSync } from '../../../util/emoji.js';
const EmojiQuickResult = styled.span`
width: 100%;
padding-inline-end: 20px;
padding-inline-start: 10px;
`;
const EmojiQuickResultIcon = styled.span`
padding-inline-end: 20px;
padding-inline-start: 10px;
font-size: 1.4em;
`;
const EmojiQuickResultText = styled.span``;
export const renderEmojiQuickResultRow = (suggestion: SuggestionDataItem) => {
return (
<EmojiQuickResult>
<EmojiQuickResultIcon>{suggestion.id}</EmojiQuickResultIcon>
<EmojiQuickResultText>{suggestion.display}</EmojiQuickResultText>
</EmojiQuickResult>
);
};
export const searchEmojiForQuery = (query: string): Array<SuggestionDataItem> => {
if (query.length === 0 || !SearchIndex) {
return [];
}
const results1 = searchSync(`:${query}`);
const results2 = searchSync(query);
const results = [...new Set(results1.concat(results2))];
if (!results || !results.length) {
return [];
}
const cleanResults = results
.map(emoji => {
return {
id: emoji.skins[0].native,
display: `:${emoji.id}:`,
};
})
.slice(0, 8);
return cleanResults;
};