arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-04 05:42:34 +00:00
Code Issues Releases Wiki Activity

Add an option to position button's icon left or right

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-03 10:50:23 +02:00
parent 7dd16dc6ae
commit 0a67ea3038
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/buttons/Button/index.js
View File

@ -23,7 +23,7 @@ const Wrapper = styled.button`
background: ${colors.GREEN_TERTIARY}; background: ${colors.GREEN_TERTIARY};
} }
${props => props.disabled && css` ${props => props.isDisabled && css`
pointer-events: none; pointer-events: none;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};
@ -108,33 +108,46 @@ const Wrapper = styled.button`
`; `;
const IconWrapper = styled.span` const IconWrapper = styled.span`
${props => (props.hasChildren ? 'margin: 0 8px 0 -4px;' : '')}; ${props => ((props.hasChildren && !props.isRight) ? 'margin: 0 8px 0 -4px;' : '')};
${props => ((props.hasChildren && props.isRight) ? 'margin: 0 -4px 0 8px;' : '')};
`; `;
const Button = ({ const Button = ({
children, className, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false, children,
className,
icon,
onClick = () => { },
isDisabled = false,
isWhite = false,
isWebUsb = false,
isTransparent = false,
hasIconRight = false,
}) => ( }) => (
<Wrapper <Wrapper
className={className} className={className}
icon={icon} icon={icon}
onClick={onClick} onClick={onClick}
disabled={disabled} isDisabled={isDisabled}
isWhite={isWhite} isWhite={isWhite}
isWebUsb={isWebUsb} isWebUsb={isWebUsb}
isTransparent={isTransparent} isTransparent={isTransparent}
> >
{hasIconRight && children}
{icon && ( {icon && (
<IconWrapper <IconWrapper
hasChildren={!!children} hasChildren={!!children}
isRight={hasIconRight}
> >
<Icon <Icon
icon={icon.type} icon={icon.type}
color={icon.color} color={icon.color}
size={icon.size} size={icon.size}
isActive={icon.isActive}
canAnimate={icon.canAnimate}
/> />
</IconWrapper> </IconWrapper>
)} )}
{children} {!hasIconRight && children}
</Wrapper> </Wrapper>
); );
@ -142,7 +155,7 @@ Button.propTypes = {
children: PropTypes.element.isRequired, children: PropTypes.element.isRequired,
className: PropTypes.string, className: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
disabled: PropTypes.bool, isDisabled: PropTypes.bool,
isWhite: PropTypes.bool, isWhite: PropTypes.bool,
isWebUsb: PropTypes.bool, isWebUsb: PropTypes.bool,
isTransparent: PropTypes.bool, isTransparent: PropTypes.bool,
@ -150,7 +163,10 @@ Button.propTypes = {
type: PropTypes.arrayOf(PropTypes.string).isRequired, type: PropTypes.arrayOf(PropTypes.string).isRequired,
color: PropTypes.string, color: PropTypes.string,
size: PropTypes.number, size: PropTypes.number,
isActive: PropTypes.bool,
canAnimate: PropTypes.bool,
}), }),
hasIconRight: PropTypes.bool,
}; };
export default Button; export default Button;