arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00
Code Issues Releases Wiki Activity

Separate row coin logic into a 'AsideRowCoin' component

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-15 14:03:13 +02:00
parent d3c601c41f
commit d511a9d2f4
5 changed files with 75 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/js/components/wallet/aside/AsideRow.js
View File

@ -1,30 +1,39 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
import { TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
${props => props.column && css`
flex-direction: column;
align-items: flex-start;
`}
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}
const AsideRow = ({ children, column }) => (
<Wrapper
column={column}
>{children}
</Wrapper>
);
AsideRow.propTypes = {
column: PropTypes.bool,
};
AsideRow.defaultProps = {
column: false,
}
export default AsideRow;

24
src/js/components/wallet/aside/AsideRowCoin.js Normal file
View File

@ -0,0 +1,24 @@
import styled from 'styled-components';
import React from 'react';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
display: block;
height: 50px;
font-size: ${FONT_SIZE.BASE};
color: ${colors.TEXT_PRIMARY};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const AsideRowCoin = ({ children }) => (
<Wrapper>
{children}
</Wrapper>
);
export default AsideRowCoin;

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

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

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

@ -4,23 +4,23 @@ import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import AsideRow from './AsideRow';
import AsideRowCoin from './AsideRowCoin';
import CoinName from './CoinName';
import colors from 'config/colors';
import { coinProp } from './common';
const Wrapper = styled(NavLink)`
display: block;
`;
const AsideRowCoinWallet = ({ coin, url }) => (
<Wrapper to={url}>
<AsideRow>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
</AsideRow>
</Wrapper>
<NavLink to={url}>
<AsideRowCoin>
<AsideRow>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
</AsideRow>
</AsideRowCoin>
</NavLink>
);
AsideRowCoinWallet.propTypes = {

4
src/js/components/wallet/aside/CoinName.js
View File

@ -9,10 +9,6 @@ const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
p {
color: ${colors.TEXT_PRIMARY};
}
`;
const Logo = styled.div`