@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
188 lines (187 loc) • 6.83 kB
JavaScript
"use client";
var _IconPrimary;
import _includesInstanceProperty from "core-js-pure/stable/instance/includes.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { createElement, useCallback, useContext, useRef } from 'react';
import { clsx } from 'clsx';
import E from "../../elements/Element.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import { getOffsetTop } 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";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const anchorDefaultProps = {
noAnimation: false,
noStyle: false,
noHover: false,
noUnderline: false,
noIcon: false,
noLaunchIcon: false,
disabled: false
};
export function AnchorComponent(localProps) {
var _context, _context2, _context3, _context4;
const context = useContext(Context);
const allProps = extendPropsWithContext(localProps, anchorDefaultProps, {
skeleton: context?.skeleton
}, context?.getTranslation(localProps).Anchor, context?.Anchor);
const fallbackRef = useRef(null);
if (!allProps.ref) {
allProps.ref = fallbackRef;
}
const tooltipRef = useRef(null);
const {
id,
element,
className,
children,
tooltip,
icon,
iconPosition = 'left',
omitClass,
ref: refProp,
targetBlankTitle,
noAnimation,
noHover,
noStyle,
noUnderline,
noIcon,
noLaunchIcon,
disabled,
...rest
} = allProps;
const attributes = rest;
const internalId = useId(id);
const as = element || 'a';
const isDisabled = disabled;
const hasNoHover = noHover || isDisabled;
const hasNoAnimation = noAnimation || isDisabled;
const hasNoUnderline = noUnderline || isDisabled;
if (isDangerousHref(attributes.href)) {
delete attributes.href;
}
if (isDangerousHref(attributes.to)) {
delete attributes.to;
}
const href = attributes.href || attributes.to;
const _opensNewTab = opensNewTab(allProps.target, href);
const showLaunchIcon = _opensNewTab && !isDisabled && !noIcon && !noLaunchIcon && !((_context = className) == null ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.('dnb-anchor--no-icon') && !((_context2 = className) == null ? void 0 : Function.call.bind(_includesInstanceProperty(_context2), _context2))?.('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 = _jsx(IconPrimary, {
className: "dnb-anchor__launch-icon",
icon: LaunchIcon
})));
const prefix = iconPosition === 'left' && iconNode;
const anchorRef = useCallback(elem => {
tooltipRef.current = elem;
if (typeof refProp === 'function') {
refProp(elem);
} else if (refProp) {
;
refProp.current = elem;
}
}, [refProp]);
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 _jsxs(_Fragment, {
children: [_jsxs(E, {
as: as,
id: id,
internalClass: as !== 'button',
className: clsx(omitClass !== true && clsx('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 && !((_context3 = className) == null ? void 0 : Function.call.bind(_includesInstanceProperty(_context3), _context3))?.('dnb-anchor--no-icon') && 'dnb-anchor--no-icon', noLaunchIcon && !((_context4 = className) == null ? void 0 : Function.call.bind(_includesInstanceProperty(_context4), _context4))?.('dnb-anchor--no-launch-icon') && 'dnb-anchor--no-launch-icon', context?.theme?.surface === 'dark' && 'dnb-anchor--surface-dark'), className),
...attributes,
ref: anchorRef,
children: [prefix, children, suffix]
}), showTooltip && _jsx(Tooltip, {
showDelay: 100,
id: internalId + '-tooltip',
targetElement: tooltipRef,
tooltip: tooltip,
children: allProps.title || targetBlankTitle
})]
});
}
function Anchor(props) {
return _jsx(AnchorComponent, {
...props
});
}
withComponentMarkers(Anchor, {
_supportsSpacingProps: true
});
export default Anchor;
export function scrollToHash(hash) {
if (typeof document === 'undefined' || !hash || !_includesInstanceProperty(hash).call(hash, '#')) {
return undefined;
}
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('Anchor: Failed to scroll to element:', error);
}
}
return undefined;
}
function getIcon(icon) {
return pickIcon(icon) || _jsx(IconPrimary, {
icon: icon
});
}
export function pickIcon(icon, className) {
var _context5;
if (icon?.props?.icon || ((_context5 = icon?.props?.className) == null ? void 0 : Function.call.bind(_includesInstanceProperty(_context5), _context5))?.('dnb-icon')) {
return createElement(icon.type, {
...icon.props,
key: 'button-icon-clone',
className: clsx(icon.props?.className, className)
});
}
return null;
}
export const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);
export function isDangerousHref(href) {
if (typeof href !== 'string') {
return false;
}
let normalized = '';
for (const char of href) {
const code = char.charCodeAt(0);
if (code > 0x20 && code !== 0x7f && !(code >= 0x80 && code <= 0xa0)) {
normalized += char;
}
}
return /^(javascript|vbscript):/i.test(normalized);
}
//# sourceMappingURL=Anchor.js.map