Rename 'Selection' components to 'Menu' in 'LeftNavigation'

pull/3/head
Vasek Mlejnsky 6 years ago
parent a43112a6cf
commit 113b2535e0

@ -45,22 +45,22 @@ const RowAccountWrapper = styled.div`
const RowAccount = ({ const RowAccount = ({
accountIndex, balance, url, isSelected = false, accountIndex, balance, url, isSelected = false,
}) => ( }) => (
<NavLink to={url}> <NavLink to={url}>
<RowAccountWrapper <RowAccountWrapper
to={url} to={url}
isSelected={isSelected} isSelected={isSelected}
> >
<Row column> <Row column>
Account #{accountIndex + 1} Account #{accountIndex + 1}
{balance ? ( {balance ? (
<span>{balance}</span> <span>{balance}</span>
) : ( ) : (
<span>Loading...</span> <span>Loading...</span>
)} )}
</Row> </Row>
</RowAccountWrapper> </RowAccountWrapper>
</NavLink> </NavLink>
); );
RowAccount.propTypes = { RowAccount.propTypes = {
accountIndex: PropTypes.number.isRequired, accountIndex: PropTypes.number.isRequired,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
@ -68,7 +68,7 @@ RowAccount.propTypes = {
isSelected: PropTypes.bool, isSelected: PropTypes.bool,
}; };
const AccountSelection = (props: Props): ?React$Element<string> => { const AccountMenu = (props: Props): ?React$Element<string> => {
const selected = props.wallet.selectedDevice; const selected = props.wallet.selectedDevice;
if (!selected) return null; if (!selected) return null;
@ -204,4 +204,4 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
); );
}; };
export default AccountSelection; export default AccountMenu;

@ -31,13 +31,13 @@ const Logo = styled.div`
const CoinName = ({ const CoinName = ({
coinImg, text, coinImg, text,
}) => ( }) => (
<CoinNameWrapper> <CoinNameWrapper>
<Logo <Logo
coinImg={coinImg} coinImg={coinImg}
/> />
<p>{text}</p> <p>{text}</p>
</CoinNameWrapper> </CoinNameWrapper>
); );
CoinName.propTypes = { CoinName.propTypes = {
coinImg: PropTypes.string.isRequired, coinImg: PropTypes.string.isRequired,
text: PropTypes.string.isRequired, text: PropTypes.string.isRequired,
@ -56,21 +56,21 @@ const RowCoinWrapper = styled.div`
const RowCoin = ({ const RowCoin = ({
coin, icon, coin, icon,
}) => ( }) => (
<RowCoinWrapper> <RowCoinWrapper>
<Row> <Row>
<CoinName <CoinName
coinImg={coin.img} coinImg={coin.img}
text={coin.name} text={coin.name}
/>
{icon && (
<Icon
icon={icon.type}
color={icon.color}
/> />
)} {icon && (
</Row> <Icon
</RowCoinWrapper> icon={icon.type}
); color={icon.color}
/>
)}
</Row>
</RowCoinWrapper>
);
RowCoin.propTypes = { RowCoin.propTypes = {
coin: PropTypes.shape({ coin: PropTypes.shape({
img: PropTypes.string.isRequired, img: PropTypes.string.isRequired,
@ -83,7 +83,7 @@ RowCoin.propTypes = {
}; };
class CoinSelection extends Component { class CoinMenu extends Component {
getBaseUrl() { getBaseUrl() {
const { selectedDevice } = this.props.wallet; const { selectedDevice } = this.props.wallet;
let baseUrl = ''; let baseUrl = '';
@ -147,11 +147,11 @@ class CoinSelection extends Component {
} }
} }
CoinSelection.propTypes = { CoinMenu.propTypes = {
config: PropTypes.object, config: PropTypes.object,
wallet: PropTypes.object, wallet: PropTypes.object,
selectedDevice: PropTypes.object, selectedDevice: PropTypes.object,
localStorage: PropTypes.object, localStorage: PropTypes.object,
}; };
export default CoinSelection; export default CoinMenu;

@ -0,0 +1,4 @@
export { default as AccountMenu } from './AccountMenu';
export { default as CoinMenu } from './CoinMenu';
export { DeviceSelect } from './DeviceMenu';
export { DeviceDropdown } from './DeviceMenu';

@ -1,4 +0,0 @@
export { default as AccountSelection } from './AccountSelection';
export { default as CoinSelection } from './CoinSelection';
export { DeviceSelect } from './DeviceSelection';
export { DeviceDropdown } from './DeviceSelection';

@ -5,11 +5,11 @@ import styled from 'styled-components';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import { import {
AccountSelection, AccountMenu,
CoinSelection, CoinMenu,
DeviceSelect, DeviceSelect,
DeviceDropdown, DeviceDropdown,
} from './Selection'; } from './Menu';
import StickyContainer from './StickyContainer'; import StickyContainer from './StickyContainer';
import type { Props } from './index'; import type { Props } from './index';
@ -72,7 +72,7 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
animationType = 'slide-left'; animationType = 'slide-left';
// menu = ( // menu = (
// <TransitionMenu animationType="slide-left"> // <TransitionMenu animationType="slide-left">
// <AccountSelection {...props} /> // <AccountMenu {...props} />
// </TransitionMenu> // </TransitionMenu>
// ); // );
} else if (selected.features && !selected.features.bootloader_mode && selected.features.initialized) { } else if (selected.features && !selected.features.bootloader_mode && selected.features.initialized) {
@ -81,7 +81,7 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
animationType = 'slide-right'; animationType = 'slide-right';
// menu = ( // menu = (
// <TransitionMenu animationType="slide-right"> // <TransitionMenu animationType="slide-right">
// <CoinSelection {...props} /> // <CoinMenu {...props} />
// </TransitionMenu> // </TransitionMenu>
// ); // );
} }
@ -97,8 +97,8 @@ const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | st
<TransitionMenu <TransitionMenu
animationType={animationType} animationType={animationType}
> >
{animationType === 'slide-left' && <AccountSelection key="accounts" {...props} />} {animationType === 'slide-left' && <AccountMenu key="accounts" {...props} />}
{animationType === 'slide-right' && <CoinSelection key="coins" {...props} />} {animationType === 'slide-right' && <CoinMenu key="coins" {...props} />}
</TransitionMenu> </TransitionMenu>
)} )}

Loading…
Cancel
Save