arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +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 React from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables'; import { TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px; 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; cursor: pointer;
font-size: ${FONT_SIZE.BASE};
transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE}; transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`; `;
const AsideRow = (props) => ( const AsideRow = ({ children, column }) => (
<Wrapper> <Wrapper
{props.children} column={column}
>{children}
</Wrapper> </Wrapper>
); );
AsideRow.propTypes = {
column: PropTypes.bool,
};
AsideRow.defaultProps = {
column: false,
}
export default AsideRow; 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 Icon from 'components/common/Icon';
import AsideRow from './AsideRow'; import AsideRow from './AsideRow';
import AsideRowCoin from './AsideRowCoin';
import CoinName from './CoinName'; import CoinName from './CoinName';
import ICONS from 'constants/icons'; import ICONS from 'constants/icons';
import colors from 'config/colors'; import colors from 'config/colors';
import { coinProp } from './common'; import { coinProp } from './common';
const A = styled.a`
display: block;
`;
const AsideRowCoinExternal = ({ coin, url }) => ( const AsideRowCoinExternal = ({ coin, url }) => (
<A href={url}> <a href={url}>
<AsideRow> <AsideRowCoin>
<CoinName <AsideRow>
coinImg={coin.img} <CoinName
text={coin.name} coinImg={coin.img}
/> text={coin.name}
<Icon />
icon={ICONS.REDIRECT} <Icon
color={colors.TEXT_SECONDARY} icon={ICONS.REDIRECT}
/> color={colors.TEXT_SECONDARY}
</AsideRow> />
</A> </AsideRow>
</AsideRowCoin>
</a>
); );
AsideRowCoinExternal.propTypes = { 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 { NavLink } from 'react-router-dom';
import AsideRow from './AsideRow'; import AsideRow from './AsideRow';
import AsideRowCoin from './AsideRowCoin';
import CoinName from './CoinName'; import CoinName from './CoinName';
import colors from 'config/colors';
import { coinProp } from './common'; import { coinProp } from './common';
const Wrapper = styled(NavLink)`
display: block;
`;
const AsideRowCoinWallet = ({ coin, url }) => ( const AsideRowCoinWallet = ({ coin, url }) => (
<Wrapper to={url}> <NavLink to={url}>
<AsideRow> <AsideRowCoin>
<CoinName <AsideRow>
coinImg={coin.img} <CoinName
text={coin.name} coinImg={coin.img}
/> text={coin.name}
</AsideRow> />
</Wrapper> </AsideRow>
</AsideRowCoin>
</NavLink>
); );
AsideRowCoinWallet.propTypes = { AsideRowCoinWallet.propTypes = {

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

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