@wordpress/components
Version:
UI components for WordPress.
80 lines (75 loc) • 2.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ExternalLink = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedExternalLink(props, ref) {
const {
href,
children,
className,
rel = '',
...additionalProps
} = props;
const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' ');
const classes = (0, _clsx.default)('components-external-link', className);
/* Anchor links are perceived as external links.
This constant helps check for on page anchor links,
to prevent them from being opened in the editor. */
const isInternalAnchor = !!href?.startsWith('#');
const onClickHandler = event => {
if (isInternalAnchor) {
event.preventDefault();
}
if (props.onClick) {
props.onClick(event);
}
};
return /*#__PURE__*/ /* eslint-disable react/jsx-no-target-blank */(0, _jsxRuntime.jsxs)("a", {
...additionalProps,
className: classes,
href: href,
onClick: onClickHandler,
target: "_blank",
rel: optimizedRel,
ref: ref,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "components-external-link__contents",
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "components-external-link__icon",
"aria-label": /* translators: accessibility text */
(0, _i18n.__)('(opens in a new tab)'),
children: "\u2197"
})]
})
/* eslint-enable react/jsx-no-target-blank */;
}
/**
* Link to an external resource.
*
* ```jsx
* import { ExternalLink } from '@wordpress/components';
*
* const MyExternalLink = () => (
* <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
* );
* ```
*/
const ExternalLink = exports.ExternalLink = (0, _element.forwardRef)(UnforwardedExternalLink);
var _default = exports.default = ExternalLink;
//# sourceMappingURL=index.js.map