2019-10-14 00:32:11 +03:00
|
|
|
/*
|
2019-10-20 12:13:42 +03:00
|
|
|
Copyright 2019 Tulir Asokan <tulir@maunium.net>
|
2019-10-14 00:32:11 +03:00
|
|
|
|
|
|
|
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';
|
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-12-18 18:40:19 +03:00
|
|
|
import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
|
2019-10-14 00:32:11 +03:00
|
|
|
|
2019-10-24 17:02:27 +03:00
|
|
|
export const CATEGORY_HEADER_HEIGHT = 22;
|
|
|
|
export const EMOJI_HEIGHT = 37;
|
|
|
|
export const EMOJIS_PER_ROW = 8;
|
|
|
|
|
2019-10-14 00:32:11 +03:00
|
|
|
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-24 17:02:27 +03:00
|
|
|
scrollTop: 0,
|
|
|
|
// initial estimation of height, dialog is hardcoded to 450px height.
|
|
|
|
// should be enough to never have blank rows of emojis as
|
|
|
|
// 3 rows of overflow are also rendered. The actual value is updated on scroll.
|
|
|
|
viewportHeight: 280,
|
2019-10-14 00:32:11 +03:00
|
|
|
};
|
|
|
|
|
2020-01-06 00:23:34 +03:00
|
|
|
// Convert recent emoji characters to emoji data, removing unknowns and duplicates
|
|
|
|
this.recentlyUsed = Array.from(new Set(recent.get()
|
2019-12-18 18:40:19 +03:00
|
|
|
.map(unicode => getEmojiFromUnicode(unicode))
|
2020-01-06 00:23:34 +03:00
|
|
|
.filter(data => !!data)));
|
2019-10-14 19:40:57 +03:00
|
|
|
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-24 17:02:27 +03:00
|
|
|
onScroll = () => {
|
|
|
|
const body = this.bodyRef.current;
|
|
|
|
this.setState({
|
|
|
|
scrollTop: body.scrollTop,
|
|
|
|
viewportHeight: body.clientHeight,
|
|
|
|
});
|
|
|
|
this.updateVisibility();
|
|
|
|
};
|
|
|
|
|
2019-10-14 20:14:40 +03:00
|
|
|
updateVisibility() {
|
2019-10-24 17:02:27 +03:00
|
|
|
const body = this.bodyRef.current;
|
|
|
|
const rect = body.getBoundingClientRect();
|
2019-10-14 20:14:40 +03:00
|
|
|
for (const cat of this.categories) {
|
2019-10-24 17:02:27 +03:00
|
|
|
const elem = body.querySelector(`[data-category-id="${cat.id}"]`);
|
2019-10-14 20:14:40 +03:00
|
|
|
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-12-02 13:18:02 +03:00
|
|
|
filter = filter.toLowerCase(); // filter is case insensitive stored lower-case
|
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
|
|
|
}
|
|
|
|
|
2019-10-24 17:02:27 +03:00
|
|
|
_categoryHeightForEmojiCount(count) {
|
|
|
|
if (count === 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
return CATEGORY_HEADER_HEIGHT + (Math.ceil(count / EMOJIS_PER_ROW) * EMOJI_HEIGHT);
|
|
|
|
}
|
|
|
|
|
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");
|
2019-10-24 17:02:27 +03:00
|
|
|
let heightBefore = 0;
|
2019-10-14 00:32:11 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_EmojiPicker">
|
2019-10-22 15:49:02 +03:00
|
|
|
<Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} />
|
|
|
|
<Search query={this.state.filter} onChange={this.onChangeFilter} />
|
2019-10-24 17:02:27 +03:00
|
|
|
<div className="mx_EmojiPicker_body" ref={this.bodyRef} onScroll={this.onScroll}>
|
|
|
|
{this.categories.map(category => {
|
|
|
|
const emojis = this.memoizedDataByCategory[category.id];
|
|
|
|
const categoryElement = (<Category key={category.id} id={category.id} name={category.name}
|
|
|
|
heightBefore={heightBefore} viewportHeight={this.state.viewportHeight}
|
|
|
|
scrollTop={this.state.scrollTop} emojis={emojis} onClick={this.onClickEmoji}
|
2019-10-15 19:07:04 +03:00
|
|
|
onMouseEnter={this.onHoverEmoji} onMouseLeave={this.onHoverEmojiEnd}
|
2019-10-24 17:02:27 +03:00
|
|
|
selectedEmojis={this.props.selectedEmojis} />);
|
|
|
|
const height = this._categoryHeightForEmojiCount(emojis.length);
|
|
|
|
heightBefore += height;
|
|
|
|
return categoryElement;
|
|
|
|
})}
|
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;
|