@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
145 lines (144 loc) • 7.26 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AnchorInstance = AnchorInstance;
exports.opensNewTab = exports.default = void 0;
exports.pickIcon = pickIcon;
exports.scrollToHash = scrollToHash;
exports.scrollToHashHandler = scrollToHashHandler;
require("core-js/modules/es.string.replace.js");
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Element = _interopRequireDefault(require("../../elements/Element"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _componentHelper = require("../../shared/component-helper");
var _helpers = require("../../shared/helpers");
var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
var _icons = require("../../icons");
var _IconPrimary;
const _excluded = ["id", "element", "className", "children", "tooltip", "icon", "iconPosition", "omitClass", "innerRef", "targetBlankTitle", "noAnimation", "noHover", "noStyle", "noUnderline"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
const defaultProps = {
noAnimation: false,
noStyle: false,
noHover: false,
noUnderline: false
};
function AnchorInstance(localProps) {
const context = _react.default.useContext(_Context.default);
const allProps = (0, _componentHelper.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.default.createRef();
}
const {
id,
element,
className,
children,
tooltip,
icon,
iconPosition = 'left',
omitClass,
innerRef,
targetBlankTitle,
noAnimation,
noHover,
noStyle,
noUnderline
} = allProps,
rest = _objectWithoutProperties(allProps, _excluded);
const attributes = rest;
const internalId = id || 'id' + (0, _componentHelper.makeUniqueId)();
const as = element || 'a';
const href = allProps.href || allProps.to;
const _opensNewTab = opensNewTab(allProps.target, href);
const showLaunchIcon = _opensNewTab && !(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;
const iconNode = icon && getIcon(icon);
const suffix = iconPosition === 'right' && iconNode || showLaunchIcon && (_IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
className: "dnb-anchor__launch-icon",
icon: _icons.launch
})));
const prefix = iconPosition === 'left' && iconNode;
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Element.default, _extends({
as: as,
id: id,
internalClass: as !== 'button',
className: (0, _classnames.default)(className, omitClass !== true && (0, _classnames.default)('dnb-anchor', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', typeof children !== 'string' && 'dnb-anchor--was-node', noAnimation && 'dnb-anchor--no-animation', noHover && 'dnb-anchor--no-hover', noStyle && 'dnb-anchor--no-style', noUnderline && 'dnb-anchor--no-underline'))
}, attributes, {
innerRef: innerRef
}), prefix, children, suffix), showTooltip && _react.default.createElement(_Tooltip.default, {
showDelay: 100,
id: internalId + '-tooltip',
targetElement: innerRef,
tooltip: tooltip
}, allProps.title || targetBlankTitle));
}
const Anchor = _react.default.forwardRef((props, ref) => {
return _react.default.createElement(AnchorInstance, _extends({
innerRef: ref
}, props));
});
Anchor._supportsSpacingProps = true;
var _default = exports.default = Anchor;
function scrollToHashHandler(event) {
var _element$pathname;
(0, _helpers.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);
}
}
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 = (0, _helpers.getOffsetTop)(anchorElem) - scrollPadding || 0;
window.scroll({
top
});
return {
element: anchorElem
};
} catch (error) {
console.error(error);
}
}
}
function getIcon(icon) {
return pickIcon(icon) || _react.default.createElement(_IconPrimary2.default, {
icon: icon
});
}
function pickIcon(icon, className) {
var _icon$props, _icon$props2, _icon$props2$classNam, _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$classNam = _icon$props2.className) !== null && _icon$props2$classNam !== void 0 && _icon$props2$classNam.includes('dnb-icon') ? _react.default.cloneElement(icon, {
key: 'button-icon-clone',
className: (0, _classnames.default)((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, className)
}) : null;
}
const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);
exports.opensNewTab = opensNewTab;
//# sourceMappingURL=Anchor.js.map