diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index 9ec80d71..bd61bde0 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Component } from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; @@ -82,38 +82,54 @@ const Dot = styled.div` height: 10px; `; -const DeviceHeader = ({ - disabled = false, - handleOpen, - status, - label, - deviceCount, - isOpen = false, - trezorModel, -}) => ( - - - - - - - - {label} - {getStatusName(status)} - - - {deviceCount > 1 && {deviceCount}} - - - - -); +class DeviceHeader extends Component { + constructor(props) { + super(props); + this.state = { + clicked: false, + }; + } + + handleClick() { + this.setState({ clicked: true }); + if (!this.props.disabled) { + this.props.handleOpen(); + } + } + + render() { + console.log('cananitem', this.state.clicked); + const { + status, label, deviceCount, isOpen, trezorModel, + } = this.props; + return ( + + this.handleClick()}> + + + + + + {label} + {getStatusName(status)} + + + {deviceCount > 1 && {deviceCount}} + + + + + ); + } +} + DeviceHeader.propTypes = { deviceCount: PropTypes.number, diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index 20711ffb..fe1980ec 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled, { css, keyframes } from 'styled-components'; +import styled, { keyframes } from 'styled-components'; const rotate180up = keyframes` from { transform: rotate(0deg); } - to { transform: rotate(180deg); } @@ -16,50 +15,41 @@ const rotate180down = keyframes` from { transform: rotate(180deg); } - to { transform: rotate(0deg); } `; const SvgWrapper = styled.svg` - animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards; + animation: ${props => (props.canAnimate ? (props.isActive ? rotate180up : rotate180down) : null)} 0.2s linear 1 forwards; `; const Path = styled.path``; const Icon = ({ - icon, size = 32, color = 'black', isActive = false, -}) => { - const styles = { - svg: { + icon, size = 32, color = 'black', isActive, canAnimate, +}) => ( + - - - ); -}; + }} + width={`${size}`} + height={`${size}`} + viewBox="0 0 1024 1024" + > + + +); Icon.propTypes = { + canAnimate: PropTypes.bool, icon: PropTypes.string.isRequired, size: PropTypes.number, isActive: PropTypes.bool, 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 4fd6045d..cdc3589f 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -64,7 +64,7 @@ export const DeviceSelect = (props: Props) => { handleOpen={handleOpen} label={selected.instanceLabel} status={getStatus(selected)} - deviceCount={deviceCount} + deviceCount={devices.length} isOpen={props.deviceDropdownOpened} trezorModel={getVersion(selected)} />