@dnb/eufemia/es/components/anchor/Anchor.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/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?.skeleton
  }, context?.getTranslation(localProps).Anchor, 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?.includes('dnb-anchor--no-icon') && !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?.includes('dnb-anchor--no-icon') && 'dnb-anchor--no-icon', noLaunchIcon && !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) {
  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?.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) {
  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon') ? React.cloneElement(icon, {
    key: 'button-icon-clone',
    className: classnames(icon.props?.className, className)
  }) : null;
}
export const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);
//# sourceMappingURL=Anchor.js.map