arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-30 19:00:53 +00:00
Code Issues Releases Wiki Activity

Create a general 'AsideRow' component

Browse Source 
- delete 'AsideRowCoin' and move logic up into 'AsideRowCoinExternal' and 'AsideRowCoinWallet'
This commit is contained in:
Vasek Mlejnsky 2018-08-15 09:56:31 +02:00
parent af80ebb511
commit c81e74db71
4 changed files with 53 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/js/components/wallet/aside/AsideRow.js Normal file
View File

@ -0,0 +1,30 @@
import styled from 'styled-components';
import React from 'react';
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
cursor: pointer;
font-size: ${FONT_SIZE.BASE};
transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const AsideRow = (props) => (
<Wrapper>
{props.children}
</Wrapper>
);
export default AsideRow;

52
src/js/components/wallet/aside/AsideRowCoin.js
View File

@ -1,52 +0,0 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'components/common/Icon';
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
import { coinProp } from './common';
import CoinName from './CoinName';
const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
cursor: pointer;
font-size: ${FONT_SIZE.BASE};
transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const AsideRowCoin = ({ coin, iconRight }) => (
<Wrapper>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
{iconRight ? (
<Icon
icon={iconRight.type}
color={iconRight.color}
/>
) : null}
</Wrapper>
);
AsideRowCoin.propTypes = {
...coinProp,
iconRight: PropTypes.shape({
type: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}),
};
export default AsideRowCoin;

23
src/js/components/wallet/aside/AsideRowCoinExternal.js
View File

@ -2,11 +2,13 @@ import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'components/common/Icon';
import AsideRow from './AsideRow';
import CoinName from './CoinName';
import ICONS from 'constants/icons';
import colors from 'config/colors';
import { coinProp } from './common';
import AsideRowCoin from './AsideRowCoin';
const A = styled.a`
display: block;
@ -14,13 +16,16 @@ const A = styled.a`
const AsideRowCoinExternal = ({ coin, url }) => (
<A href={url}>
<AsideRowCoin
coin={coin}
iconRight={{
type: ICONS.REDIRECT,
color: colors.TEXT_SECONDARY,
}}
/>
<AsideRow>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
<Icon
icon={ICONS.REDIRECT}
color={colors.TEXT_SECONDARY}
/>
</AsideRow>
</A>
);

11
src/js/components/wallet/aside/AsideRowCoinWallet.js
View File

@ -3,8 +3,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import AsideRow from './AsideRow';
import CoinName from './CoinName';
import { coinProp } from './common';
import AsideRowCoin from './AsideRowCoin';
const Wrapper = styled(NavLink)`
display: block;
@ -12,7 +14,12 @@ const Wrapper = styled(NavLink)`
const AsideRowCoinWallet = ({ coin, url }) => (
<Wrapper to={url}>
<AsideRowCoin coin={coin}/>
<AsideRow>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
</AsideRow>
</Wrapper>
);