GoScrobble/web/node_modules/react-bootstrap/esm/SafeAnchor.js

71 lines
2.0 KiB
JavaScript
Raw Normal View History

2022-04-25 02:47:15 +00:00
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["as", "disabled", "onKeyDown"];
import React from 'react';
import createChainedFunction from './createChainedFunction';
function isTrivialHref(href) {
return !href || href.trim() === '#';
}
/**
* There are situations due to browser quirks or Bootstrap CSS where
* an anchor tag is needed, when semantically a button tag is the
* better choice. SafeAnchor ensures that when an anchor is used like a
* button its accessible. It also emulates input `disabled` behavior for
* links, which is usually desirable for Buttons, NavItems, DropdownItems, etc.
*/
var SafeAnchor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
Component = _ref$as === void 0 ? 'a' : _ref$as,
disabled = _ref.disabled,
onKeyDown = _ref.onKeyDown,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var handleClick = function handleClick(event) {
var href = props.href,
onClick = props.onClick;
if (disabled || isTrivialHref(href)) {
event.preventDefault();
}
if (disabled) {
event.stopPropagation();
return;
}
if (onClick) {
onClick(event);
}
};
var handleKeyDown = function handleKeyDown(event) {
if (event.key === ' ') {
event.preventDefault();
handleClick(event);
}
};
if (isTrivialHref(props.href)) {
props.role = props.role || 'button'; // we want to make sure there is a href attribute on the node
// otherwise, the cursor incorrectly styled (except with role='button')
props.href = props.href || '#';
}
if (disabled) {
props.tabIndex = -1;
props['aria-disabled'] = true;
}
return /*#__PURE__*/React.createElement(Component, _extends({
ref: ref
}, props, {
onClick: handleClick,
onKeyDown: createChainedFunction(handleKeyDown, onKeyDown)
}));
});
SafeAnchor.displayName = 'SafeAnchor';
export default SafeAnchor;