@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
52 lines • 3.58 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, useRef } from 'react';
import FocusRing from '../FocusRing';
import { useLink } from '@react-aria/link';
import { DEFAULTS, STYLE } from './Link.constants';
import './Link.style.scss';
import classnames from 'classnames';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
var Link = forwardRef(function (props, providedRef) {
var className = props.className, title = props.title, hasExternalLinkIcon = props.hasExternalLinkIcon, externalLinkIconProps = props.externalLinkIconProps, tooltipContent = props.tooltipContent, _a = props.tooltipType, tooltipType = _a === void 0 ? 'description' : _a, _b = props.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'bottom' : _b, disabled = props.disabled, inverted = props.inverted, style = props.style, tabIndex = props.tabIndex, otherProps = __rest(props, ["className", "title", "hasExternalLinkIcon", "externalLinkIconProps", "tooltipContent", "tooltipType", "tooltipPlacement", "disabled", "inverted", "style", "tabIndex"]);
var internalRef = useRef();
var ref = providedRef || internalRef;
var mutatedProps = __assign(__assign({}, otherProps), { title: title, isDisabled: disabled, isInverted: inverted });
// prevent change the window.opener.location to some phishing page
var isExternalLink = props.target === '_blank';
var linkProps = useLink(__assign(__assign({}, mutatedProps), { elementType: 'a' }), ref).linkProps;
var isShowIcon = hasExternalLinkIcon || (hasExternalLinkIcon === undefined && isExternalLink);
if (isShowIcon && !tooltipContent) {
console.warn('MRV2: The external link icon is enabled but tooltipContent is not provided for the icon. For accessibility reasons, a tooltip must be provided for external links.');
}
var commonProps = __assign(__assign({}, linkProps), { style: style, ref: ref, tabIndex: tabIndex, title: title, rel: isExternalLink ? 'noopener noreferrer' : '', className: classnames(STYLE.wrapper, className), 'data-disabled': disabled || DEFAULTS.DISABLED, 'data-inverted': inverted || DEFAULTS.INVERTED });
var content = (React.createElement("a", __assign({}, commonProps),
React.createElement("div", { className: STYLE.container },
props.children,
isShowIcon && (React.createElement(Icon, __assign({ className: STYLE.icon, scale: 16, name: "pop-out" }, externalLinkIconProps))))));
return (React.createElement(FocusRing, { disabled: disabled }, tooltipContent ? (React.createElement(Tooltip, { type: tooltipType, placement: tooltipPlacement, triggerComponent: content }, tooltipContent)) : (content)));
});
Link.displayName = 'Link';
export default Link;
//# sourceMappingURL=Link.js.map