web.components: Link: added new prop
This commit is contained in:
Daniil Senkiv
parent
d103b5003d
commit
3bb20c6b60
@ -24,22 +24,23 @@ import { Link } from "asc-web-components";
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------- | :------------: | :------: | :--------------------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `color` | `string` | - | - | `#333333` | Color of link |
|
||||
| `fontSize` | `string` | - | - | `13px` | Font size of link |
|
||||
| `fontWeight` |`number, string`| - | - | - | Font weight of link |
|
||||
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||
| `isHovered` | `bool` | - | - | `false` | Set hovered state and effects of link. |
|
||||
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status |
|
||||
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
|
||||
| `onClick` | `func` | - | - | - | What the link will trigger when clicked. Only for \'action\' type of link |
|
||||
| `rel` | `string` | - | - | `noopener noreferrer` | Used as HTML `rel` property |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tabIndex` | `number` | - | - | `-1` | Used as HTML `tabindex` property |
|
||||
| `target` | `oneOf` | - | `\_blank`, `\_self`, `\_parent`, `\_top` | - | The _target_ attribute specifies where the linked document will open when the link is clicked. |
|
||||
| `title` | `string` | - | - | - | Used as HTML `title` property |
|
||||
| `type` | `oneOf` | - | `action`, `page` | `page` | Type of link |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------- | :--------------: | :------: | :--------------------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `color` | `string` | - | - | `#333333` | Color of link |
|
||||
| `fontSize` | `string` | - | - | `13px` | Font size of link |
|
||||
| `fontWeight` | `number, string` | - | - | - | Font weight of link |
|
||||
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||
| `isHovered` | `bool` | - | - | `false` | Set hovered state and effects of link. |
|
||||
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status |
|
||||
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
|
||||
| `noHover` | `bool` | - | - | `false` | Disabled hover styles |
|
||||
| `onClick` | `func` | - | - | - | What the link will trigger when clicked. Only for \'action\' type of link |
|
||||
| `rel` | `string` | - | - | `noopener noreferrer` | Used as HTML `rel` property |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tabIndex` | `number` | - | - | `-1` | Used as HTML `tabindex` property |
|
||||
| `target` | `oneOf` | - | `\_blank`, `\_self`, `\_parent`, `\_top` | - | The _target_ attribute specifies where the linked document will open when the link is clicked. |
|
||||
| `title` | `string` | - | - | - | Used as HTML `title` property |
|
||||
| `type` | `oneOf` | - | `action`, `page` | `page` | Type of link s |
|
||||
|
||||
@ -24,10 +24,10 @@ const StyledText = styled(PureText)`
|
||||
${colorCss};
|
||||
|
||||
&:hover {
|
||||
${hoveredCss};
|
||||
${props => !props.noHover && hoveredCss};
|
||||
}
|
||||
|
||||
${props => props.isHovered && hoveredCss}
|
||||
${props => !props.noHover && props.isHovered && hoveredCss}
|
||||
|
||||
${props => props.isTextOverflow && css`
|
||||
display: inline-block;
|
||||
@ -36,13 +36,14 @@ const StyledText = styled(PureText)`
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const Link = memo(({ isTextOverflow, children, ...rest }) => {
|
||||
const Link = memo(({ isTextOverflow, children, noHover, ...rest }) => {
|
||||
// console.log("Link render", rest);
|
||||
|
||||
return (
|
||||
<StyledText
|
||||
tag="a"
|
||||
isTextOverflow={isTextOverflow}
|
||||
noHover={noHover}
|
||||
truncate={isTextOverflow}
|
||||
{...rest}
|
||||
>
|
||||
@ -52,27 +53,29 @@ const Link = memo(({ isTextOverflow, children, ...rest }) => {
|
||||
});
|
||||
|
||||
Link.propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
fontSize: PropTypes.string,
|
||||
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
href: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
isBold: PropTypes.bool,
|
||||
isHovered: PropTypes.bool,
|
||||
isSemitransparent: PropTypes.bool,
|
||||
isTextOverflow: PropTypes.bool,
|
||||
noHover: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
rel: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
tabIndex: PropTypes.number,
|
||||
target: PropTypes.oneOf(["_blank", "_self", "_parent", "_top"]),
|
||||
title: PropTypes.string,
|
||||
type: PropTypes.oneOf(["action", "page"]),
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
};
|
||||
|
||||
Link.defaultProps = {
|
||||
className: "",
|
||||
color: "#333333",
|
||||
fontSize: '13px',
|
||||
href: undefined,
|
||||
@ -80,10 +83,10 @@ Link.defaultProps = {
|
||||
isHovered: false,
|
||||
isSemitransparent: false,
|
||||
isTextOverflow: false,
|
||||
noHover: false,
|
||||
rel: "noopener noreferrer",
|
||||
tabIndex: -1,
|
||||
type: "page",
|
||||
className: "",
|
||||
};
|
||||
|
||||
export default Link;
|
||||
|
||||
@ -20,7 +20,7 @@ storiesOf('Components|Link', module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => {
|
||||
|
||||
const href = text('href', "http://onlyoffice.com");
|
||||
const href = text('href', "http://github.com");
|
||||
|
||||
const actionProps = (href && href.length > 0) ? { href } : { onClick: clickActionLink };
|
||||
|
||||
@ -40,8 +40,8 @@ storiesOf('Components|Link', module)
|
||||
target={select('target', target, '_blank')}
|
||||
isTextOverflow={isTextOverflow}
|
||||
isHovered={boolean('isHovered', false)}
|
||||
noHover={boolean('noHover', false)}
|
||||
isSemitransparent={boolean('isSemitransparent', false)}
|
||||
data-value="1111"
|
||||
{...actionProps}
|
||||
>
|
||||
{label}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user