remove MainHeader class no longer used
Audric Ackermann
5 years ago
parent
71c47ba87a
commit
2335dbab93
@ -1,419 +0,0 @@
|
||||
import React from 'react';
|
||||
import { debounce } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// Use this to trigger whisper events
|
||||
import { trigger } from '../shims/events';
|
||||
|
||||
// Use this to check for password
|
||||
import { hasPassword } from '../shims/Signal';
|
||||
|
||||
import { Avatar } from './Avatar';
|
||||
import { ContactName } from './conversation/ContactName';
|
||||
|
||||
import { cleanSearchTerm } from '../util/cleanSearchTerm';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { SearchOptions } from '../types/Search';
|
||||
import { clipboard } from 'electron';
|
||||
|
||||
import { validateNumber } from '../types/PhoneNumber';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
lokiFeatureFlags: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface MenuItem {
|
||||
id: string;
|
||||
name: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
export interface Props {
|
||||
searchTerm: string;
|
||||
|
||||
// To be used as an ID
|
||||
ourNumber: string;
|
||||
regionCode: string;
|
||||
|
||||
// For display
|
||||
phoneNumber: string;
|
||||
isMe: boolean;
|
||||
name?: string;
|
||||
color: string;
|
||||
verified: boolean;
|
||||
profileName?: string;
|
||||
avatarPath?: string;
|
||||
isSecondaryDevice: boolean;
|
||||
|
||||
i18n: LocalizerType;
|
||||
updateSearchTerm: (searchTerm: string) => void;
|
||||
search: (query: string, options: SearchOptions) => void;
|
||||
clearSearch: () => void;
|
||||
|
||||
onClick?: () => void;
|
||||
onCopyPublicKey?: () => void;
|
||||
}
|
||||
|
||||
export class MainHeader extends React.Component<Props, any> {
|
||||
private readonly updateSearchBound: (
|
||||
event: React.FormEvent<HTMLInputElement>
|
||||
) => void;
|
||||
private readonly clearSearchBound: () => void;
|
||||
private readonly copyFromClipboardBound: () => void;
|
||||
private readonly handleKeyUpBound: (
|
||||
event: React.KeyboardEvent<HTMLInputElement>
|
||||
) => void;
|
||||
private readonly setFocusBound: () => void;
|
||||
private readonly inputRef: React.RefObject<HTMLInputElement>;
|
||||
private readonly debouncedSearch: (searchTerm: string) => void;
|
||||
private readonly timerId: any;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
expanded: false,
|
||||
hasPass: null,
|
||||
clipboardText: '',
|
||||
menuItems: [],
|
||||
};
|
||||
|
||||
this.updateSearchBound = this.updateSearch.bind(this);
|
||||
this.clearSearchBound = this.clearSearch.bind(this);
|
||||
this.copyFromClipboardBound = this.copyFromClipboard.bind(this);
|
||||
this.handleKeyUpBound = this.handleKeyUp.bind(this);
|
||||
this.setFocusBound = this.setFocus.bind(this);
|
||||
this.inputRef = React.createRef();
|
||||
|
||||
this.debouncedSearch = debounce(this.search.bind(this), 20);
|
||||
|
||||
this.timerId = setInterval(() => {
|
||||
const clipboardText = clipboard.readText();
|
||||
if (this.state.clipboardText !== clipboardText) {
|
||||
this.setState({ clipboardText });
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
public componentWillMount() {
|
||||
// tslint:disable-next-line
|
||||
this.updateHasPass();
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
// tslint:disable-next-line
|
||||
clearInterval(this.timerId);
|
||||
}
|
||||
|
||||
public componentDidUpdate(_prevProps: Props, prevState: any) {
|
||||
if (
|
||||
prevState.hasPass !== this.state.hasPass ||
|
||||
_prevProps.isSecondaryDevice !== this.props.isSecondaryDevice
|
||||
) {
|
||||
this.updateMenuItems();
|
||||
}
|
||||
}
|
||||
|
||||
public search() {
|
||||
const {
|
||||
searchTerm,
|
||||
search,
|
||||
i18n,
|
||||
ourNumber,
|
||||
regionCode,
|
||||
isSecondaryDevice,
|
||||
} = this.props;
|
||||
if (search) {
|
||||
search(searchTerm, {
|
||||
noteToSelf: i18n('noteToSelf').toLowerCase(),
|
||||
ourNumber,
|
||||
regionCode,
|
||||
isSecondaryDevice,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public updateSearch(event: React.FormEvent<HTMLInputElement>) {
|
||||
const { updateSearchTerm, clearSearch } = this.props;
|
||||
const searchTerm = event.currentTarget.value;
|
||||
|
||||
if (!searchTerm) {
|
||||
clearSearch();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (updateSearchTerm) {
|
||||
updateSearchTerm(searchTerm);
|
||||
}
|
||||
|
||||
if (searchTerm.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cleanedTerm = cleanSearchTerm(searchTerm);
|
||||
if (!cleanedTerm) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.debouncedSearch(cleanedTerm);
|
||||
}
|
||||
|
||||
public clearSearch() {
|
||||
const { clearSearch } = this.props;
|
||||
|
||||
clearSearch();
|
||||
this.setFocus();
|
||||
}
|
||||
|
||||
public copyFromClipboard() {
|
||||
const { clipboardText } = this.state;
|
||||
|
||||
this.props.updateSearchTerm(clipboardText);
|
||||
this.debouncedSearch(clipboardText);
|
||||
}
|
||||
|
||||
public handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
|
||||
const { clearSearch } = this.props;
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
clearSearch();
|
||||
}
|
||||
}
|
||||
|
||||
public setFocus() {
|
||||
if (this.inputRef.current) {
|
||||
// @ts-ignore
|
||||
this.inputRef.current.focus();
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { onClick } = this.props;
|
||||
|
||||
return (
|
||||
<div role="button" className="module-main-header" onClick={onClick}>
|
||||
<div className="module-main-header__container">
|
||||
{this.renderName()}
|
||||
{this.renderMenu()}
|
||||
</div>
|
||||
{this.renderSearch()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderName() {
|
||||
const {
|
||||
avatarPath,
|
||||
i18n,
|
||||
color,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
} = this.props;
|
||||
|
||||
const { expanded } = this.state;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
className="module-main-header__title"
|
||||
onClick={() => {
|
||||
this.setState({ expanded: !expanded });
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={28}
|
||||
/>
|
||||
<div className="module-main-header__contact-name">
|
||||
<ContactName
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-main-header-content-toggle',
|
||||
expanded && 'module-main-header-content-toggle-visible'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderMenu() {
|
||||
const { expanded, menuItems } = this.state;
|
||||
|
||||
return (
|
||||
<div className="module-main-header__menu">
|
||||
<div className={classNames('accordian', expanded && 'expanded')}>
|
||||
{menuItems.map((item: MenuItem) => (
|
||||
<div
|
||||
role="button"
|
||||
className="menu-item"
|
||||
key={item.id}
|
||||
onClick={item.onClick}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private shouldShowPaste() {
|
||||
const { searchTerm, i18n } = this.props;
|
||||
const { clipboardText } = this.state;
|
||||
|
||||
const error = validateNumber(clipboardText, i18n);
|
||||
|
||||
return !searchTerm && !error;
|
||||
}
|
||||
|
||||
private renderSearch() {
|
||||
const { searchTerm, i18n } = this.props;
|
||||
|
||||
return (
|
||||
<div className="module-main-header__search">
|
||||
<input
|
||||
type="text"
|
||||
ref={this.inputRef}
|
||||
className="module-main-header__search__input"
|
||||
placeholder={i18n('search')}
|
||||
dir="auto"
|
||||
onKeyUp={this.handleKeyUpBound}
|
||||
value={searchTerm}
|
||||
onChange={this.updateSearchBound}
|
||||
/>
|
||||
{this.shouldShowPaste() ? (
|
||||
<span
|
||||
role="button"
|
||||
className="module-main-header__search__copy-from-clipboard"
|
||||
onClick={this.copyFromClipboardBound}
|
||||
/>
|
||||
) : null}
|
||||
<span
|
||||
role="button"
|
||||
className="module-main-header__search__icon"
|
||||
onClick={this.setFocusBound}
|
||||
/>
|
||||
{searchTerm ? (
|
||||
<span
|
||||
role="button"
|
||||
className="module-main-header__search__cancel-icon"
|
||||
onClick={this.clearSearchBound}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private async updateHasPass() {
|
||||
const hasPass = await hasPassword();
|
||||
this.setState({ hasPass });
|
||||
}
|
||||
|
||||
private updateMenuItems() {
|
||||
const { i18n, onCopyPublicKey, isSecondaryDevice } = this.props;
|
||||
const { hasPass } = this.state;
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
id: 'copyPublicKey',
|
||||
name: i18n('copyPublicKey'),
|
||||
onClick: onCopyPublicKey,
|
||||
},
|
||||
{
|
||||
id: 'showSeed',
|
||||
name: i18n('showSeed'),
|
||||
onClick: () => {
|
||||
trigger('showSeedDialog');
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'showQRCode',
|
||||
name: i18n('showQRCode'),
|
||||
onClick: () => {
|
||||
trigger('showQRDialog');
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'showAddServer',
|
||||
name: i18n('showAddServer'),
|
||||
onClick: () => {
|
||||
trigger('showAddServerDialog');
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (window.lokiFeatureFlags.privateGroupChats) {
|
||||
menuItems.push({
|
||||
id: 'createPrivateGroup',
|
||||
name: i18n('createPrivateGroup'),
|
||||
onClick: () => {
|
||||
trigger('createNewGroup');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const passItem = (type: string) => ({
|
||||
id: `${type}Password`,
|
||||
name: i18n(`${type}Password`),
|
||||
onClick: () => {
|
||||
trigger('showPasswordDialog', {
|
||||
type,
|
||||
resolve: () => {
|
||||
trigger('showToast', {
|
||||
message: i18n(`${type}PasswordSuccess`),
|
||||
});
|
||||
setTimeout(async () => this.updateHasPass(), 100);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (hasPass) {
|
||||
menuItems.push(passItem('change'), passItem('remove'));
|
||||
} else {
|
||||
menuItems.push(passItem('set'));
|
||||
}
|
||||
|
||||
if (!isSecondaryDevice) {
|
||||
// insert as second element
|
||||
menuItems.splice(1, 0, {
|
||||
id: 'editProfile',
|
||||
name: i18n('editProfile'),
|
||||
onClick: () => {
|
||||
trigger('onEditProfile');
|
||||
},
|
||||
});
|
||||
menuItems.push({
|
||||
id: 'pairNewDevice',
|
||||
name: 'Device Pairing',
|
||||
onClick: () => {
|
||||
trigger('showDevicePairingDialog');
|
||||
},
|
||||
});
|
||||
} else {
|
||||
menuItems.push({
|
||||
id: 'showPairingWords',
|
||||
name: 'Show Pairing Words',
|
||||
onClick: () => {
|
||||
trigger('showDevicePairingWordsDialog');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ menuItems });
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { mapDispatchToProps } from '../actions';
|
||||
|
||||
import { MainHeader } from '../../components/MainHeader';
|
||||
import { StateType } from '../reducer';
|
||||
|
||||
import { getQuery } from '../selectors/search';
|
||||
import {
|
||||
getIntl,
|
||||
getIsSecondaryDevice,
|
||||
getRegionCode,
|
||||
getUserNumber,
|
||||
} from '../selectors/user';
|
||||
import { getMe } from '../selectors/conversations';
|
||||
|
||||
const mapStateToProps = (state: StateType) => {
|
||||
return {
|
||||
searchTerm: getQuery(state),
|
||||
regionCode: getRegionCode(state),
|
||||
ourNumber: getUserNumber(state),
|
||||
isSecondaryDevice: getIsSecondaryDevice(state),
|
||||
...getMe(state),
|
||||
i18n: getIntl(state),
|
||||
};
|
||||
};
|
||||
|
||||
const smart = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
export const SmartMainHeader = smart(MainHeader);
|
||||
Loading…
Reference in New Issue