Merge pull request #237 from yldio/feature/styled-link
styled-link (fixes #226)
This commit is contained in:
commit
935ab4a749
@ -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
|
||||||
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user