diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js new file mode 100644 index 00000000..81935b30 --- /dev/null +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -0,0 +1,47 @@ +import React from 'react'; +import styled from 'styled-components'; +import deviceConstants from 'constants/device'; + +const Wrapper = styled.div``; + +class DeviceList { + getStatus(device) { + let deviceStatus = ''; + if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) { + deviceStatus = 'Used in other window'; + } else if (device.type === 'unreadable') { + deviceStatus = 'Connected'; + } else if (!device.connected) { + deviceStatus = 'Disconnected'; + } else if (!device.available) { + deviceStatus = 'Unavailable'; + } + + return deviceStatus; + } + + render() { + return ( + + {this.props.devices.map((device, index) => ( +
this.props.onSelectDevice(device)}> +
+ {device.instanceLabel} + {this.getStatus(device)} +
+
{ + event.stopPropagation(); + event.preventDefault(); + this.onDeviceMenuClick({ type: 'forget', label: '' }, device); + }} + /> +
+ ))} + + ); + } +} + +export default DeviceList; \ No newline at end of file diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 3b66792b..fb73650b 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -1,14 +1,12 @@ /* @flow */ import React, { Component } from 'react'; import TrezorConnect from 'trezor-connect'; -import styled from 'styled-components'; + import type { TrezorDevice } from 'flowtype'; import type { Props } from '../common'; -import Divider from '../Divider'; - -const Wrapper = styled.div``; +import AsideDivider from '../Divider'; export const DeviceSelect = (props: Props) => { const { devices } = props; @@ -214,12 +212,12 @@ export class DeviceDropdown extends Component { return ( - + {currentDeviceMenu} - {deviceList.length > 1 ? : null} + {deviceList.length > 1 ? : null} {deviceList} {webUsbButton} - + ); } }