2019-10-14 00:32:11 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 Tulir Asokan
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import EMOJIBASE from 'emojibase-data/en/compact.json';
|
2019-10-14 19:40:57 +03:00
|
|
|
|
2019-10-14 00:32:11 +03:00
|
|
|
import sdk from '../../../index';
|
|
|
|
import { _t } from '../../../languageHandler';
|
|
|
|
|
2019-10-14 19:40:57 +03:00
|
|
|
import * as recent from './recent';
|
|
|
|
|
2019-10-14 00:32:11 +03:00
|
|
|
const EMOJIBASE_CATEGORY_IDS = [
|
|
|
|
"people", // smileys
|
|
|
|
"people", // actually people
|
|
|
|
"control", // modifiers and such, not displayed in picker
|
|
|
|
"nature",
|
|
|
|
"foods",
|
|
|
|
"places",
|
|
|
|
"activity",
|
|
|
|
"objects",
|
|
|
|
"symbols",
|
|
|
|
"flags",
|
|
|
|
];
|
|
|
|
|
|
|
|
const DATA_BY_CATEGORY = {
|
|
|
|
"people": [],
|
|
|
|
"nature": [],
|
|
|
|
"foods": [],
|
|
|
|
"places": [],
|
|
|
|
"activity": [],
|
|
|
|
"objects": [],
|
|
|
|
"symbols": [],
|
|
|
|
"flags": [],
|
|
|
|
};
|
2019-10-14 19:40:57 +03:00
|
|
|
const DATA_BY_EMOJI = {};
|
2019-10-14 00:32:11 +03:00
|
|
|
|
|
|
|
EMOJIBASE.forEach(emoji => {
|
2019-10-14 19:40:57 +03:00
|
|
|
DATA_BY_EMOJI[emoji.unicode] = emoji;
|
|
|
|
const categoryId = EMOJIBASE_CATEGORY_IDS[emoji.group];
|
|
|
|
if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) {
|
|
|
|
DATA_BY_CATEGORY[categoryId].push(emoji);
|
|
|
|
}
|
2019-10-14 00:32:11 +03:00
|
|
|
// This is used as the string to match the query against when filtering emojis.
|
|
|
|
emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`;
|
|
|
|
});
|
|
|
|
|
|
|
|
class EmojiPicker extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
onChoose: PropTypes.func.isRequired,
|
2019-10-15 19:07:04 +03:00
|
|
|
selectedEmojis: PropTypes.instanceOf(Set),
|
|
|
|
showQuickReactions: PropTypes.bool,
|
2019-10-14 00:32:11 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
filter: "",
|
|
|
|
previewEmoji: null,
|
|
|
|
};
|
|
|
|
|
2019-10-14 19:40:57 +03:00
|
|
|
this.recentlyUsed = recent.get().map(unicode => DATA_BY_EMOJI[unicode]);
|
|
|
|
this.memoizedDataByCategory = {
|
|
|
|
recent: this.recentlyUsed,
|
|
|
|
...DATA_BY_CATEGORY,
|
|
|
|
};
|
|
|
|
|
2019-10-14 00:32:11 +03:00
|
|
|
this.categories = [{
|
|
|
|
id: "recent",
|
|
|
|
name: _t("Frequently Used"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: this.recentlyUsed.length > 0,
|
2019-10-14 21:03:36 +03:00
|
|
|
visible: this.recentlyUsed.length > 0,
|
2019-10-14 20:14:40 +03:00
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "people",
|
|
|
|
name: _t("Smileys & People"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: true,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "nature",
|
|
|
|
name: _t("Animals & Nature"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "foods",
|
|
|
|
name: _t("Food & Drink"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "activity",
|
|
|
|
name: _t("Activities"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "places",
|
|
|
|
name: _t("Travel & Places"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "objects",
|
|
|
|
name: _t("Objects"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "symbols",
|
|
|
|
name: _t("Symbols"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}, {
|
|
|
|
id: "flags",
|
|
|
|
name: _t("Flags"),
|
2019-10-14 19:40:57 +03:00
|
|
|
enabled: true,
|
2019-10-14 20:14:40 +03:00
|
|
|
visible: false,
|
|
|
|
ref: React.createRef(),
|
2019-10-14 00:32:11 +03:00
|
|
|
}];
|
|
|
|
|
2019-10-14 20:14:40 +03:00
|
|
|
this.bodyRef = React.createRef();
|
|
|
|
|
2019-10-14 00:32:11 +03:00
|
|
|
this.onChangeFilter = this.onChangeFilter.bind(this);
|
|
|
|
this.onHoverEmoji = this.onHoverEmoji.bind(this);
|
|
|
|
this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this);
|
|
|
|
this.onClickEmoji = this.onClickEmoji.bind(this);
|
2019-10-14 19:40:57 +03:00
|
|
|
this.scrollToCategory = this.scrollToCategory.bind(this);
|
2019-10-14 20:14:40 +03:00
|
|
|
this.updateVisibility = this.updateVisibility.bind(this);
|
2019-10-14 00:32:11 +03:00
|
|
|
}
|
|
|
|
|
2019-10-14 20:14:40 +03:00
|
|
|
updateVisibility() {
|
|
|
|
const rect = this.bodyRef.current.getBoundingClientRect();
|
|
|
|
for (const cat of this.categories) {
|
|
|
|
const elem = this.bodyRef.current.querySelector(`[data-category-id="${cat.id}"]`);
|
|
|
|
if (!elem) {
|
|
|
|
cat.visible = false;
|
|
|
|
cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
const elemRect = elem.getBoundingClientRect();
|
|
|
|
const y = elemRect.y - rect.y;
|
|
|
|
const yEnd = elemRect.y + elemRect.height - rect.y;
|
|
|
|
cat.visible = y < rect.height && yEnd > 0;
|
|
|
|
// We update this here instead of through React to avoid re-render on scroll.
|
|
|
|
if (cat.visible) {
|
|
|
|
cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
|
|
|
|
} else {
|
|
|
|
cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-14 19:40:57 +03:00
|
|
|
scrollToCategory(category) {
|
|
|
|
this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
|
2019-10-14 00:32:11 +03:00
|
|
|
}
|
|
|
|
|
2019-10-14 19:40:57 +03:00
|
|
|
onChangeFilter(filter) {
|
2019-10-14 21:30:21 +03:00
|
|
|
for (const cat of this.categories) {
|
|
|
|
let emojis;
|
2019-10-14 19:40:57 +03:00
|
|
|
// If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
|
2019-10-14 21:30:21 +03:00
|
|
|
if (filter.includes(this.state.filter)) {
|
|
|
|
emojis = this.memoizedDataByCategory[cat.id];
|
|
|
|
} else {
|
|
|
|
emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
|
2019-10-14 19:40:57 +03:00
|
|
|
}
|
2019-10-14 21:30:21 +03:00
|
|
|
emojis = emojis.filter(emoji => emoji.filterString.includes(filter));
|
|
|
|
this.memoizedDataByCategory[cat.id] = emojis;
|
|
|
|
cat.enabled = emojis.length > 0;
|
2019-10-14 20:38:09 +03:00
|
|
|
// The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
|
|
|
|
cat.ref.current.disabled = !cat.enabled;
|
2019-10-14 19:40:57 +03:00
|
|
|
}
|
|
|
|
this.setState({ filter });
|
2019-10-14 20:14:40 +03:00
|
|
|
// Header underlines need to be updated, but updating requires knowing
|
|
|
|
// where the categories are, so we wait for a tick.
|
|
|
|
setTimeout(this.updateVisibility, 0);
|
2019-10-14 00:32:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
onHoverEmoji(emoji) {
|
|
|
|
this.setState({
|
|
|
|
previewEmoji: emoji,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onHoverEmojiEnd(emoji) {
|
|
|
|
this.setState({
|
|
|
|
previewEmoji: null,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onClickEmoji(emoji) {
|
2019-10-15 19:07:04 +03:00
|
|
|
if (this.props.onChoose(emoji.unicode) !== false) {
|
|
|
|
recent.add(emoji.unicode);
|
2019-10-14 20:45:17 +03:00
|
|
|
}
|
2019-10-14 00:32:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const Header = sdk.getComponent("emojipicker.Header");
|
|
|
|
const Search = sdk.getComponent("emojipicker.Search");
|
|
|
|
const Category = sdk.getComponent("emojipicker.Category");
|
|
|
|
const Preview = sdk.getComponent("emojipicker.Preview");
|
|
|
|
const QuickReactions = sdk.getComponent("emojipicker.QuickReactions");
|
|
|
|
return (
|
|
|
|
<div className="mx_EmojiPicker">
|
|
|
|
<Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory}/>
|
|
|
|
<Search query={this.state.filter} onChange={this.onChangeFilter}/>
|
2019-10-14 20:14:40 +03:00
|
|
|
<div className="mx_EmojiPicker_body" ref={this.bodyRef} onScroll={this.updateVisibility}>
|
2019-10-14 00:32:11 +03:00
|
|
|
{this.categories.map(category => (
|
2019-10-14 19:40:57 +03:00
|
|
|
<Category key={category.id} id={category.id} name={category.name}
|
|
|
|
emojis={this.memoizedDataByCategory[category.id]} onClick={this.onClickEmoji}
|
2019-10-15 19:07:04 +03:00
|
|
|
onMouseEnter={this.onHoverEmoji} onMouseLeave={this.onHoverEmojiEnd}
|
|
|
|
selectedEmojis={this.props.selectedEmojis} />
|
2019-10-14 00:32:11 +03:00
|
|
|
))}
|
|
|
|
</div>
|
2019-10-15 19:07:04 +03:00
|
|
|
{this.state.previewEmoji || !this.props.showQuickReactions
|
2019-10-14 00:32:11 +03:00
|
|
|
? <Preview emoji={this.state.previewEmoji} />
|
2019-10-15 19:07:04 +03:00
|
|
|
: <QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} /> }
|
2019-10-14 00:32:11 +03:00
|
|
|
</div>
|
2019-10-15 19:07:04 +03:00
|
|
|
);
|
2019-10-14 00:32:11 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default EmojiPicker;
|