|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
/* @flow */
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import Select from 'react-select';
|
|
|
|
|
|
|
|
|
|
import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer';
|
|
|
|
@ -18,15 +18,21 @@ const Value = (props: any): any => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onClick = (item, device) => {
|
|
|
|
|
if (props.onClick)
|
|
|
|
|
const onClick = (event, item, device) => {
|
|
|
|
|
if (props.onClick) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
props.onClick(item, device);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let deviceStatus: string = "Connected";
|
|
|
|
|
let css: string = "device";
|
|
|
|
|
let css: string = "device-select device";
|
|
|
|
|
if (props.opened) css += " opened";
|
|
|
|
|
if (props.disabled) css += " disabled";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const deviceMenuItems: Array<any> = [];
|
|
|
|
|
// deviceMenuItems.push("settings");
|
|
|
|
|
|
|
|
|
|
if (device.unacquired) {
|
|
|
|
|
css += " unacquired";
|
|
|
|
@ -49,9 +55,13 @@ const Value = (props: any): any => {
|
|
|
|
|
deviceMenuItems.push("forget");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (device.features && device.features.major_version > 1) {
|
|
|
|
|
css += " trezor-t";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const deviceMenuButtons = deviceMenuItems.map((item, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<div key={ item } className={ item } onMouseDown={ onMouseDown } onClick={ event => onClick(item, device) }></div>
|
|
|
|
|
<div key={ item } className={ item } onClick={ event => onClick(event, item, device) }></div>
|
|
|
|
|
)
|
|
|
|
|
});
|
|
|
|
|
const deviceMenu = deviceMenuButtons.length < 1 ? null : (
|
|
|
|
@ -60,12 +70,13 @@ const Value = (props: any): any => {
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleOpen = () => {
|
|
|
|
|
if (props.disabled) return;
|
|
|
|
|
props.opened ? props.onClose() : props.onOpen();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={ css }
|
|
|
|
|
onMouseDown={ props.onMouseDown }
|
|
|
|
|
onMouseEnter={ props.onMouseEnter }
|
|
|
|
|
onMouseMove={ props.onMouseMove } >
|
|
|
|
|
<div className={ css } onClick={ handleOpen }>
|
|
|
|
|
<div className="label-container">
|
|
|
|
|
<span className="label">{ device.instanceLabel }</span>
|
|
|
|
|
<span className="status">{ deviceStatus }</span>
|
|
|
|
@ -73,11 +84,13 @@ const Value = (props: any): any => {
|
|
|
|
|
<div className="device-menu">
|
|
|
|
|
{ deviceMenuButtons }
|
|
|
|
|
</div>
|
|
|
|
|
<div className="arrow">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const DeviceSelect = (props: any): any => {
|
|
|
|
|
export const DeviceSelect1 = (props: any): any => {
|
|
|
|
|
|
|
|
|
|
const { devices } = props.connect;
|
|
|
|
|
const selected = findSelectedDevice(props.connect);
|
|
|
|
@ -97,7 +110,8 @@ export const DeviceSelect = (props: any): any => {
|
|
|
|
|
return (
|
|
|
|
|
<Select
|
|
|
|
|
className="device-select"
|
|
|
|
|
disabled={ (devices && devices.length <= 1) }
|
|
|
|
|
// disabled={ (devices && devices.length <= 1) }
|
|
|
|
|
disabled={ false }
|
|
|
|
|
searchable={ false }
|
|
|
|
|
clearable= { false }
|
|
|
|
|
tabSelectsValue={ false }
|
|
|
|
@ -111,32 +125,129 @@ export const DeviceSelect = (props: any): any => {
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const DeviceDropdown = (props: any): any => {
|
|
|
|
|
const { devices } = props.connect;
|
|
|
|
|
const selected = findSelectedDevice(props.connect);
|
|
|
|
|
|
|
|
|
|
const deviceList: Array<any> = devices.map((dev, index) => {
|
|
|
|
|
if (dev === selected) return null;
|
|
|
|
|
export const DeviceSelect = (props: any): any => {
|
|
|
|
|
|
|
|
|
|
const { devices, transport } = props.connect;
|
|
|
|
|
const selected = findSelectedDevice(props.connect);
|
|
|
|
|
if (!selected) return null;
|
|
|
|
|
|
|
|
|
|
let deviceStatus: string = "Connected";
|
|
|
|
|
if (dev.unacquired || dev.isUsedElsewhere) {
|
|
|
|
|
deviceStatus = "Used in other window";
|
|
|
|
|
} else if (!dev.connected) {
|
|
|
|
|
deviceStatus = "Disconnected";
|
|
|
|
|
const handleMenuClick = (type, device) => {
|
|
|
|
|
console.log("handleMenuClick", type, device)
|
|
|
|
|
if (type === 'acquire') {
|
|
|
|
|
props.acquireDevice(device);
|
|
|
|
|
} else if (type === 'forget') {
|
|
|
|
|
props.forgetDevice(device);
|
|
|
|
|
}else if (type === 'settings') {
|
|
|
|
|
props.duplicateDevice(device);
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<div key={index} className="device item" onMouseDown={ () => props.onSelectDevice(dev) } onTouchStart={ () => props.onSelectDevice(dev) } >
|
|
|
|
|
<div className="label-container">
|
|
|
|
|
<span className="label">{ dev.instanceLabel }</span>
|
|
|
|
|
<span className="status">{ deviceStatus }</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("DEVSEL", props)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section>
|
|
|
|
|
{ deviceList }
|
|
|
|
|
</section>
|
|
|
|
|
<Value
|
|
|
|
|
className="device-select"
|
|
|
|
|
onClick={ handleMenuClick }
|
|
|
|
|
disabled={ (devices && devices.length <= 1 && transport.indexOf('webusb') < 0) }
|
|
|
|
|
value={ selected }
|
|
|
|
|
opened={ props.deviceDropdownOpened }
|
|
|
|
|
onOpen={ () => props.toggleDeviceDropdown(true) }
|
|
|
|
|
onClose={ () => props.toggleDeviceDropdown(false) }
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class DeviceDropdown extends Component {
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.mouseDownHandler = this.mouseDownHandler.bind(this);
|
|
|
|
|
this.blurHandler = this.blurHandler.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
|
if (this.props.connect.transport.indexOf('webusb') >= 0)
|
|
|
|
|
TrezorConnect.renderWebUSBButton();
|
|
|
|
|
|
|
|
|
|
console.log("RENDER USB BUTTON")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mouseDownHandler(event: MouseEvent): void {
|
|
|
|
|
console.log("HANDLE DOWN!!!!", event)
|
|
|
|
|
let elem = event.target;
|
|
|
|
|
let block: boolean = false;
|
|
|
|
|
while (elem.parentElement) {
|
|
|
|
|
// if (elem.className.indexOf('aside-button') >= 0) {
|
|
|
|
|
if (elem.tagName.toLowerCase() === 'aside') {
|
|
|
|
|
block = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
elem = elem.parentElement;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!block) {
|
|
|
|
|
this.props.toggleDeviceDropdown(false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blurHandler(event: FocusEvent): void {
|
|
|
|
|
this.props.toggleDeviceDropdown(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount(): void {
|
|
|
|
|
window.addEventListener('mousedown', this.mouseDownHandler, false);
|
|
|
|
|
// window.addEventListener('blur', this.blurHandler, false);
|
|
|
|
|
|
|
|
|
|
if (this.props.connect.transport.indexOf('webusb') >= 0)
|
|
|
|
|
TrezorConnect.renderWebUSBButton();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount(): void {
|
|
|
|
|
window.removeEventListener('mousedown', this.mouseDownHandler, false);
|
|
|
|
|
// window.removeEventListener('blur', this.blurHandler, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
|
|
|
|
|
const { devices, transport } = this.props.connect;
|
|
|
|
|
const selected = findSelectedDevice(this.props.connect);
|
|
|
|
|
|
|
|
|
|
let webUsbButton = null;
|
|
|
|
|
if (transport.indexOf('webusb') >= 0) {
|
|
|
|
|
webUsbButton = <button className="trezor-webusb-button">Check for devices</button>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const deviceList: Array<any> = devices.map((dev, index) => {
|
|
|
|
|
if (dev === selected) return null;
|
|
|
|
|
|
|
|
|
|
let deviceStatus: string = "Connected";
|
|
|
|
|
let css: string = "device item"
|
|
|
|
|
if (dev.unacquired || dev.isUsedElsewhere) {
|
|
|
|
|
deviceStatus = "Used in other window";
|
|
|
|
|
} else if (!dev.connected) {
|
|
|
|
|
deviceStatus = "Disconnected";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (dev.features && dev.features.major_version > 1) {
|
|
|
|
|
css += " trezor-t";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div key={index} className={ css } onMouseDown={ () => this.props.onSelectDevice(dev) } onTouchStart={ () => this.props.onSelectDevice(dev) } >
|
|
|
|
|
<div className="label-container">
|
|
|
|
|
<span className="label">{ dev.instanceLabel }</span>
|
|
|
|
|
<span className="status">{ deviceStatus }</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section>
|
|
|
|
|
{ webUsbButton }
|
|
|
|
|
{ deviceList }
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|