1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-23 23:48:07 +00:00

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

This commit is contained in:
Vasek Mlejnsky 2018-09-03 10:50:23 +02:00
parent 7dd16dc6ae
commit 0a67ea3038

View File

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