98 lines
2.8 KiB
React
98 lines
2.8 KiB
React
// Forward Menu: message forwarding popup/dropdown menu.
|
|
import React from 'react';
|
|
|
|
import Tinode from 'tinode-sdk';
|
|
|
|
import ContactList from './contact-list.jsx';
|
|
import SearchContacts from './search-contacts.jsx';
|
|
|
|
import HashNavigation from '../lib/navigation.js';
|
|
import { REM_SIZE } from '../config.js';
|
|
|
|
export default class ForwardMenu extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.selfRef = React.createRef();
|
|
this.handlePageClick = this.handlePageClick.bind(this);
|
|
this.handleEscapeKey = this.handleEscapeKey.bind(this);
|
|
|
|
this.handleSearchContacts = this.handleSearchContacts.bind(this);
|
|
this.handleContactSelected = this.handleContactSelected.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
document.addEventListener('mousedown', this.handlePageClick, false);
|
|
document.addEventListener('keyup', this.handleEscapeKey, false);
|
|
|
|
this.props.onInitFind();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
document.removeEventListener('mousedown', this.handlePageClick, false);
|
|
document.removeEventListener('keyup', this.handleEscapeKey, false);
|
|
}
|
|
|
|
handlePageClick(e) {
|
|
if (this.selfRef.current.contains(e.target)) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// Not forwarding the message.
|
|
this.props.hide(false);
|
|
}
|
|
|
|
handleEscapeKey(e) {
|
|
if (e.keyCode === 27) {
|
|
// Not forwarding the message.
|
|
this.props.hide(false);
|
|
}
|
|
}
|
|
|
|
handleSearchContacts(query) {
|
|
this.props.onSearchContacts(query);
|
|
}
|
|
|
|
handleContactSelected(uid) {
|
|
this.props.onCreateTopic(uid);
|
|
this.props.hide(true);
|
|
}
|
|
|
|
render() {
|
|
// Ensure that menu is inside the app-container.
|
|
const hSize = 20 * REM_SIZE;
|
|
const vSize = REM_SIZE * (0.7 + this.props.contacts.length * 3);
|
|
const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
|
|
(this.props.clickAt.x - this.props.bounds.left - hSize) :
|
|
(this.props.clickAt.x - this.props.bounds.left);
|
|
const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
|
|
(this.props.clickAt.y - this.props.bounds.top - vSize) :
|
|
(this.props.clickAt.y - this.props.bounds.top);
|
|
|
|
const style = {
|
|
left: left + 'px',
|
|
top: top + 'px',
|
|
maxWidth: hSize + 'px'
|
|
};
|
|
|
|
return (
|
|
<div className="forward-menu" style={style} ref={this.selfRef}>
|
|
<div className="flex-column">
|
|
<SearchContacts
|
|
onSearchContacts={this.handleSearchContacts} />
|
|
<ContactList
|
|
tinode={this.props.tinode}
|
|
contacts={this.props.searchResults}
|
|
myUserId={this.props.myUserId}
|
|
emptyListMessage={null}
|
|
showOnline={false}
|
|
showUnread={false}
|
|
showContextMenu={false}
|
|
onTopicSelected={this.handleContactSelected} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|