From c724b73d5ac079c8809203d30d8e37d465ebc387 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 27 Aug 2018 18:18:04 +0200 Subject: [PATCH] Device menu refactor finalized --- .eslintignore | 5 +- .../DeviceMenu/components/MenuItems/index.js | 43 +++++++------- .../components/DeviceMenu/index.js | 56 +++---------------- .../Wallet/components/LeftNavigation/index.js | 20 ++++++- src/views/index.js | 2 +- 5 files changed, 50 insertions(+), 76 deletions(-) diff --git a/.eslintignore b/.eslintignore index 813e13d4..4c35d7b5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,4 @@ -solidity \ No newline at end of file +solidity +coverage +images +node_modules \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index d2d86191..e1c6d43d 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -28,51 +28,46 @@ const Label = styled.div` `; class MenuItems extends Component { - // makeAction(action, device) { - // switch (action) { - // case 'reload': this.props.acquireDevice(); - // break; - // case 'forget': this.props.forgetDevice(); - // break; - // case 'clone': this.props.duplicateDevice(); - // break; - // case 'settings': { - // this.props.toggleDeviceDropdown(false); - // this.props.gotoDeviceSettings(device); - // break; - // } - // default: console.log('no action'); - // break; - // } - // } + onDeviceMenuClick(action, device) { + if (action === 'reload') { + this.props.acquireDevice(); + } else if (action === 'forget') { + this.props.forgetDevice(device); + } else if (action === 'clone') { + this.props.duplicateDevice(device); + } else if (action === 'settings') { + this.props.toggleDeviceDropdown(false); + this.props.gotoDeviceSettings(device); + } + } showClone() { - return this.props.selectedDevice && this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available; + return this.props.device && this.props.device.features.passphrase_protection && this.props.device.connected && this.props.device.available; } showRenewSession() { - return this.props.selectedDevice && this.props.selectedDevice.status !== 'available'; + return this.props.device && this.props.device.status !== 'available'; } render() { return ( - + this.onDeviceMenuClick('settings', this.props.device)}> - + this.onDeviceMenuClick('forget', this.props.device)}> {this.showClone() && ( - + this.onDeviceMenuClick('clone', this.props.device)}> )} {this.showRenewSession() && ( - + this.onDeviceMenuClick('reload')}> @@ -83,7 +78,7 @@ class MenuItems extends Component { } MenuItems.propTypes = { - selectedDevice: PropTypes.object.isRequired, + device: PropTypes.object.isRequired, acquireDevice: PropTypes.func.isRequired, forgetDevice: PropTypes.func.isRequired, duplicateDevice: PropTypes.func.isRequired, diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index c3485d3f..f27b36db 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -16,28 +16,12 @@ import AsideDivider from '../Divider'; const Wrapper = styled.div``; const ButtonWrapper = styled.div``; -export const DeviceSelect = (props: Props) => { - const handleOpen = () => { - props.toggleDeviceDropdown(!props.deviceDropdownOpened); - }; - - return ( - - ); -}; - type DeviceMenuItem = { type: string; label: string; } -export class DeviceDropdown extends Component { +class DeviceMenu extends Component { mouseDownHandler: (event: MouseEvent) => void; blurHandler: (event: FocusEvent) => void; @@ -96,49 +80,25 @@ export class DeviceDropdown extends Component { componentWillUnmount(): void { window.removeEventListener('mousedown', this.mouseDownHandler, false); - // window.removeEventListener('blur', this.blurHandler, false); } showDivider() { return this.props.devices.length > 1; } + showMenuItems() { + const { selectedDevice } = this.props.wallet; + return selectedDevice && selectedDevice.features; + } + render() { const { devices, onSelectDevice } = this.props; const { transport } = this.props.connect; const { selectedDevice } = this.props.wallet; - let currentDeviceMenu = null; - if (selectedDevice.features) { - const deviceMenuItems: Array = []; - - if (selectedDevice.status !== 'available') { - deviceMenuItems.push({ type: 'reload', label: 'Renew session' }); - } - - deviceMenuItems.push({ type: 'settings', label: 'Device settings' }); - if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selectedDevice.available) { - deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' }); - } - //if (selected.remember) { - deviceMenuItems.push({ type: 'forget', label: 'Forget device' }); - //} - - - const deviceMenuButtons = deviceMenuItems.map((item, index) => ( -
this.onDeviceMenuClick(item, selectedDevice)}>{item.label}
- )); - currentDeviceMenu = deviceMenuButtons.length < 1 ? null : ( -
- {deviceMenuButtons} -
- ); - } - return ( - {currentDeviceMenu} - {/* {selectedDevice && selectedDevice.features && } */} + {this.showMenuItems() && } {this.showDivider() && } { ); } } + +export default DeviceMenu; \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 53da87e0..351bf9c7 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -5,9 +5,10 @@ import Icon from 'components/Icon'; import icons from 'config/icons'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import styled from 'styled-components'; +import DeviceHeader from 'components/DeviceHeader'; import AccountMenu from './components/AccountMenu'; import CoinMenu from './components/CoinMenu'; -import { DeviceSelect, DeviceDropdown } from './components/DeviceMenu'; +import DeviceMenu from './components/DeviceMenu'; import StickyContainer from './components/StickyContainer'; const TransitionGroupWrapper = styled(TransitionGroup)` @@ -139,6 +140,10 @@ class LeftNavigation extends Component { && this.state.animationType === 'slide-left'; } + handleOpen() { + this.props.toggleDeviceDropdown(!this.props.deviceDropdownOpened); + } + shouldRenderCoins() { return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-right'; } @@ -150,9 +155,18 @@ class LeftNavigation extends Component { location={this.props.location.pathname} deviceSelection={this.props.deviceDropdownOpened} > - {selectedDevice && } + {selectedDevice && ( + this.handleOpen()} + device={this.props.wallet.selectedDevice} + transport={this.props.connect.transport} + devices={this.props.devices} + isOpen={this.props.deviceDropdownOpened} + {...this.props} + /> + ) } - {this.state.shouldRenderDeviceSelection && } + {this.state.shouldRenderDeviceSelection && } {this.shouldRenderAccounts() && this.getMenuTransition()} {this.shouldRenderCoins() && this.getMenuTransition()} diff --git a/src/views/index.js b/src/views/index.js index 62186655..b3c49555 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -23,7 +23,7 @@ import WalletInitialize from 'views/Wallet/views/Initialize'; import WalletAcquire from 'views/Wallet/views/Acquire'; import WalletUnreadableDevice from 'views/Wallet/views/UnreadableDevice'; -import store, { history } from '../store'; +import store, { history } from 'support/store'; const App = () => (