@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
64 lines (63 loc) • 3.69 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback, useRef } from 'react';
import clsx from 'clsx';
import Icon from '../icon';
import styles from './styles.css.js';
import useFocusVisible from '../internal/hooks/focus-visible';
import { getBaseProps } from '../internal/base-component';
import { fireCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import { KeyCode } from '../internal/keycode';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var ICON_SIZES = {
'body-s': 'small',
'body-m': 'normal',
'heading-xs': 'normal',
'heading-s': 'normal',
'heading-m': 'normal',
'heading-l': 'normal',
'heading-xl': 'big',
'display-l': 'large'
};
var Link = React.forwardRef(function (_a, ref) {
var _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.fontSize, fontSize = _c === void 0 ? 'body-m' : _c, _d = _a.color, color = _d === void 0 ? 'normal' : _d, _e = _a.external, external = _e === void 0 ? false : _e, target = _a.target, href = _a.href, ariaLabel = _a.ariaLabel, externalIconAriaLabel = _a.externalIconAriaLabel, onFollow = _a.onFollow, children = _a.children, props = __rest(_a, ["variant", "fontSize", "color", "external", "target", "href", "ariaLabel", "externalIconAriaLabel", "onFollow", "children"]);
useTelemetry('Link');
var isButton = !href;
var focusVisible = useFocusVisible();
var baseProps = getBaseProps(props);
var handleLinkClick = useCallback(function (event) {
if (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
return;
}
fireCancelableEvent(onFollow, {}, event);
}, [onFollow]);
var handleButtonClick = useCallback(function (event) {
fireCancelableEvent(onFollow, {}, event);
}, [onFollow]);
var handleButtonKeyDown = useCallback(function (event) {
if (event.keyCode === KeyCode.space) {
event.preventDefault();
}
}, []);
var handleButtonKeyUp = useCallback(function (event) {
if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {
fireCancelableEvent(onFollow, {}, event);
}
}, [onFollow]);
var linkRef = useRef(null);
useForwardFocus(ref, linkRef);
var sharedProps = __assign(__assign(__assign({}, focusVisible), baseProps), { ref: linkRef, className: clsx(styles.link, baseProps.className, styles["weight-" + (variant === 'secondary' ? 'normal' : 'bold')], styles["font-size-" + (variant === 'info' ? 'body-s' : fontSize)], styles["color-" + (variant === 'info' ? 'normal' : color)]), 'aria-label': ariaLabel });
var content = (React.createElement(React.Fragment, null,
children,
external && (React.createElement(React.Fragment, null,
' ',
React.createElement("span", { className: styles.icon, "aria-label": externalIconAriaLabel },
React.createElement(Icon, { name: "external", size: variant === 'info' ? 'small' : ICON_SIZES[fontSize] }))))));
if (isButton) {
return (React.createElement("a", __assign({}, sharedProps, { role: "button", tabIndex: 0, onKeyDown: handleButtonKeyDown, onKeyUp: handleButtonKeyUp, onClick: handleButtonClick }), content));
}
var anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
var anchorRel = anchorTarget === '_blank' ? 'noopener' : undefined;
return (React.createElement("a", __assign({}, sharedProps, { target: anchorTarget, rel: anchorRel, href: href, onClick: handleLinkClick }), content));
});
export default Link;