2019-09-13 12:30:36 +00:00
|
|
|
import React, { memo } from "react";
|
2019-08-12 09:41:53 +00:00
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import PropTypes from "prop-types";
|
2019-12-04 09:36:13 +00:00
|
|
|
import Text from "../text";
|
2019-08-12 09:41:53 +00:00
|
|
|
|
2019-06-21 16:02:16 +00:00
|
|
|
const colorCss = css`
|
2019-08-12 09:41:53 +00:00
|
|
|
color: ${props => props.color};
|
2019-06-21 16:02:16 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const hoveredCss = css`
|
2019-08-12 09:41:53 +00:00
|
|
|
${colorCss};
|
2019-11-07 13:43:53 +00:00
|
|
|
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'underline dashed')};
|
2019-06-21 16:02:16 +00:00
|
|
|
`;
|
|
|
|
|
2019-12-10 14:12:38 +00:00
|
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
|
|
|
const PureText = ({type, color, ...props}) => <Text {...props}/>;
|
|
|
|
const StyledText = styled(PureText)`
|
2019-11-12 09:23:00 +00:00
|
|
|
text-decoration: none;
|
2019-08-12 09:41:53 +00:00
|
|
|
user-select: none;
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: ${props => props.isSemitransparent && "0.5"};
|
2019-06-21 16:02:16 +00:00
|
|
|
|
2019-08-13 11:38:09 +00:00
|
|
|
line-height: calc(100% + 6px);
|
2019-08-12 09:41:53 +00:00
|
|
|
${colorCss};
|
2019-07-08 05:47:08 +00:00
|
|
|
|
2019-08-12 09:41:53 +00:00
|
|
|
&:hover {
|
|
|
|
${hoveredCss};
|
|
|
|
}
|
2019-06-21 16:02:16 +00:00
|
|
|
|
2019-08-12 09:41:53 +00:00
|
|
|
${props => props.isHovered && hoveredCss}
|
2019-12-10 14:12:38 +00:00
|
|
|
|
|
|
|
${props => props.isTextOverflow && css`
|
|
|
|
display: inline-block;
|
|
|
|
max-width: 100%;
|
|
|
|
`}
|
2019-06-21 16:02:16 +00:00
|
|
|
`;
|
|
|
|
|
2019-09-13 12:30:36 +00:00
|
|
|
// eslint-disable-next-line react/display-name
|
2019-12-04 09:36:13 +00:00
|
|
|
const Link = memo(({ isTextOverflow, children, ...rest }) => {
|
2019-12-02 13:29:06 +00:00
|
|
|
// console.log("Link render", rest);
|
2019-08-12 09:41:53 +00:00
|
|
|
|
|
|
|
return (
|
2019-12-10 14:12:38 +00:00
|
|
|
<StyledText
|
2019-12-04 09:36:13 +00:00
|
|
|
tag="a"
|
2019-12-10 14:12:38 +00:00
|
|
|
isTextOverflow={isTextOverflow}
|
2019-12-04 09:36:13 +00:00
|
|
|
truncate={isTextOverflow}
|
|
|
|
{...rest}
|
|
|
|
>
|
|
|
|
{children}
|
2019-12-10 14:12:38 +00:00
|
|
|
</StyledText>
|
2019-08-12 09:41:53 +00:00
|
|
|
);
|
2019-09-13 12:30:36 +00:00
|
|
|
});
|
2019-06-21 16:02:16 +00:00
|
|
|
|
|
|
|
Link.propTypes = {
|
2019-08-12 09:41:53 +00:00
|
|
|
color: PropTypes.string,
|
2019-12-10 09:20:26 +00:00
|
|
|
fontSize: PropTypes.string,
|
2019-08-12 09:41:53 +00:00
|
|
|
href: PropTypes.string,
|
|
|
|
isBold: PropTypes.bool,
|
|
|
|
isHovered: PropTypes.bool,
|
|
|
|
isSemitransparent: PropTypes.bool,
|
|
|
|
isTextOverflow: PropTypes.bool,
|
|
|
|
onClick: PropTypes.func,
|
2019-08-13 11:45:35 +00:00
|
|
|
rel: PropTypes.string,
|
|
|
|
tabIndex: PropTypes.number,
|
2019-08-12 09:41:53 +00:00
|
|
|
target: PropTypes.oneOf(["_blank", "_self", "_parent", "_top"]),
|
|
|
|
title: PropTypes.string,
|
|
|
|
type: PropTypes.oneOf(["action", "page"]),
|
2019-11-21 15:24:58 +00:00
|
|
|
children: PropTypes.any,
|
2019-12-02 13:24:44 +00:00
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
2019-06-21 16:02:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Link.defaultProps = {
|
2019-08-12 09:41:53 +00:00
|
|
|
color: "#333333",
|
2019-12-10 09:20:26 +00:00
|
|
|
fontSize: '13px',
|
2019-08-12 09:41:53 +00:00
|
|
|
href: undefined,
|
|
|
|
isBold: false,
|
|
|
|
isHovered: false,
|
|
|
|
isSemitransparent: false,
|
2019-12-14 10:42:10 +00:00
|
|
|
isTextOverflow: false,
|
2019-08-13 11:45:35 +00:00
|
|
|
rel: "noopener noreferrer",
|
2019-08-13 11:38:09 +00:00
|
|
|
tabIndex: -1,
|
2019-08-13 11:45:35 +00:00
|
|
|
type: "page",
|
2019-10-28 14:14:58 +00:00
|
|
|
className: "",
|
2019-08-12 09:41:53 +00:00
|
|
|
};
|
2019-06-21 16:02:16 +00:00
|
|
|
|
2019-07-09 10:30:58 +00:00
|
|
|
export default Link;
|