mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00
Code Issues Releases Wiki Activity

Merge pull request #237 from yldio/feature/styled-link

Browse Source 
styled-link (fixes #226)
This commit is contained in:
Sérgio Ramos 2017-02-09 11:03:43 +00:00 committed by GitHub
commit 935ab4a749
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/src/components/button/index.js
View File

@ -4,6 +4,7 @@ const isString = require('lodash.isstring');
const match = require('../../shared/match'); const match = require('../../shared/match');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const ReactRouter = require('react-router-dom');
const { const {
base, base,
@ -23,6 +24,10 @@ const {
css css
} = Styled; } = Styled;
const {
Link
} = ReactRouter;
const background = match({ const background = match({
secondary: base.white, secondary: base.white,
disabled: inactive.default disabled: inactive.default
@ -95,7 +100,7 @@ const style = css`
border: solid ${remcalc(1)} ${border}; border: solid ${remcalc(1)} ${border};
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
&:focus { &:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
@ -128,9 +133,9 @@ const style = css`
const StyledButton = styled.button` const StyledButton = styled.button`
min-width: ${remcalc(120)}; min-width: ${remcalc(120)};
${style} ${style}
// Need to use HTML element selector, as adjecent buttons may have // Need to use HTML element selector, as adjecent buttons may have
// different class names if they are primary/secondary/disabled // different class names if they are primary/secondary/disabled
& + button { & + button {
margin-left: 20px; margin-left: 20px;
} }
@ -141,6 +146,10 @@ const StyledAnchor = styled.a`
${style} ${style}
`; `;
const StyledLink = styled(Link)`
display: inline-block !important;
${style}
`;
const Button = (props) => { const Button = (props) => {
// support FormattedMessage // support FormattedMessage
@ -152,15 +161,27 @@ const Button = (props) => {
); );
} }
return props.href ? ( const {
<StyledAnchor {...props} /> href = '',
) : ( rr = false
<StyledButton {...props} /> } = props;
const Views = [
() => !href ? StyledButton : null,
() => !rr ? StyledAnchor : null,
() => StyledLink
];
const View = Views.reduce((sel, view) => sel ? sel : view(), null);
return (
<View {...props} />
); );
}; };
Button.propTypes = { Button.propTypes = {
href: React.PropTypes.string href: React.PropTypes.string,
rr: React.PropTypes.bool
}; };
module.exports = Button; module.exports = Button;