@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
160 lines (159 loc) • 6.55 kB
JavaScript
"use client";
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
var _IconPrimary;
import React from 'react';
import classnames from 'classnames';
import E from "../../elements/Element.js";
import Context from "../../shared/Context.js";
import { makeUniqueId, extendPropsWithContext, isTrue } from "../../shared/component-helper.js";
import { getOffsetTop, warn } from "../../shared/helpers.js";
import IconPrimary from "../icon-primary/IconPrimary.js";
import Tooltip from "../tooltip/Tooltip.js";
import { launch as launchIcon } from "../../icons/index.js";
const defaultProps = {
noAnimation: false,
noStyle: false,
noHover: false,
noUnderline: false,
noIcon: false,
noLaunchIcon: false,
disabled: false
};
export function AnchorInstance(localProps) {
const context = React.useContext(Context);
const allProps = extendPropsWithContext(localProps, defaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Anchor, context === null || context === void 0 ? void 0 : context.Anchor);
if (typeof allProps.inner_ref !== 'undefined') {
allProps.innerRef = allProps.inner_ref;
delete allProps.inner_ref;
}
if (!allProps.innerRef) {
allProps.innerRef = React.createRef();
}
const {
id,
element,
className,
children,
tooltip,
icon,
iconPosition = 'left',
omitClass,
innerRef,
targetBlankTitle,
noAnimation,
noHover,
noStyle,
noUnderline,
noIcon,
noLaunchIcon,
disabled,
...rest
} = allProps;
const attributes = rest;
const internalId = id || 'id' + makeUniqueId();
const as = element || 'a';
const isDisabled = isTrue(disabled);
const hasNoHover = noHover || isDisabled;
const hasNoAnimation = noAnimation || isDisabled;
const hasNoUnderline = noUnderline || isDisabled;
const href = allProps.href || allProps.to;
const _opensNewTab = opensNewTab(allProps.target, href);
const showLaunchIcon = _opensNewTab && !isDisabled && !noIcon && !noLaunchIcon && !(className !== null && className !== void 0 && className.includes('dnb-anchor--no-icon')) && !(className !== null && className !== void 0 && className.includes('dnb-anchor--no-launch-icon')) && !omitClass;
const showTooltip = (tooltip || _opensNewTab) && !allProps.title;
if (_opensNewTab && !attributes.rel) {
attributes.rel = 'noopener noreferrer';
}
const iconNode = icon && getIcon(icon);
const suffix = iconPosition === 'right' && iconNode || showLaunchIcon && (_IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
className: "dnb-anchor__launch-icon",
icon: launchIcon
})));
const prefix = iconPosition === 'left' && iconNode;
if (isDisabled) {
attributes.disabled = true;
if (as === 'a') {
attributes.tabIndex = -1;
attributes['aria-disabled'] = true;
if (attributes.href) {
delete attributes.href;
}
if (attributes.to) {
delete attributes.to;
}
attributes.onClick = event => {
event.preventDefault();
event.stopPropagation();
};
}
}
return React.createElement(React.Fragment, null, React.createElement(E, _extends({
as: as,
id: id,
internalClass: as !== 'button',
className: classnames(className, omitClass !== true && classnames('dnb-anchor', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', typeof children !== 'string' && 'dnb-anchor--was-node', hasNoAnimation && 'dnb-anchor--no-animation', hasNoHover && 'dnb-anchor--no-hover', noStyle && 'dnb-anchor--no-style', hasNoUnderline && 'dnb-anchor--no-underline', isDisabled && 'dnb-anchor--disabled', noIcon && !(className !== null && className !== void 0 && className.includes('dnb-anchor--no-icon')) && 'dnb-anchor--no-icon', noLaunchIcon && !(className !== null && className !== void 0 && className.includes('dnb-anchor--no-launch-icon')) && 'dnb-anchor--no-launch-icon'))
}, attributes, {
innerRef: innerRef
}), prefix, children, suffix), showTooltip && React.createElement(Tooltip, {
showDelay: 100,
id: internalId + '-tooltip',
targetElement: innerRef,
tooltip: tooltip
}, allProps.title || targetBlankTitle));
}
const Anchor = React.forwardRef((props, ref) => {
return React.createElement(AnchorInstance, _extends({
innerRef: ref
}, props));
});
Anchor._supportsSpacingProps = true;
export default Anchor;
export function scrollToHashHandler(event) {
var _element$pathname;
warn('"scrollToHashHandler" is deprecated.');
const element = event.currentTarget;
const href = element.getAttribute('href');
if (typeof document === 'undefined' || !href.includes('#')) {
return;
}
const isSamePath = href.startsWith('#') || window.location.href.includes((_element$pathname = element.pathname) === null || _element$pathname === void 0 ? void 0 : _element$pathname.replace(/\/$/, ''));
if (isSamePath) {
return scrollToHash(href);
}
}
export function scrollToHash(hash) {
if (typeof document === 'undefined' || !hash || !hash.includes('#')) {
return;
}
const id = hash.split(/#/g).reverse()[0];
const anchorElem = document.getElementById(id);
if (anchorElem instanceof HTMLElement) {
try {
const scrollPadding = parseFloat(window.getComputedStyle(document.documentElement).scrollPaddingTop);
const top = getOffsetTop(anchorElem) - scrollPadding || 0;
window.scroll({
top
});
return {
element: anchorElem
};
} catch (error) {
console.error(error);
}
}
}
function getIcon(icon) {
return pickIcon(icon) || React.createElement(IconPrimary, {
icon: icon
});
}
export function pickIcon(icon, className) {
var _icon$props, _icon$props2, _icon$props3;
return icon !== null && icon !== void 0 && (_icon$props = icon.props) !== null && _icon$props !== void 0 && _icon$props.icon || icon !== null && icon !== void 0 && (_icon$props2 = icon.props) !== null && _icon$props2 !== void 0 && (_icon$props2 = _icon$props2.className) !== null && _icon$props2 !== void 0 && _icon$props2.includes('dnb-icon') ? React.cloneElement(icon, {
key: 'button-icon-clone',
className: classnames((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, className)
}) : null;
}
export const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);
//# sourceMappingURL=Anchor.js.map