@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
73 lines (71 loc) • 4.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
import { ThemedAnchor } from './themed-anchor';
/**
* Props that are common between link buttons.
*/
function ThemedLinkIconButtonFn({
icon: Icon,
label,
tooltip,
...props
}, ref) {
var _tooltip$content;
return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
}), triggerProps =>
/*#__PURE__*/
/**
* The `aria-describedby` from `triggerProps` is intentionally not passed down,
* because it would cause double announcements with the `VisuallyHidden` label.
*
* The `@atlaskit/button` IconButton uses the same approach.
*/
React.createElement(ThemedAnchor, _extends({}, props, {
shape: "square",
ref: mergeRefs([ref, triggerProps.ref]),
onClick: (event, analyticsEvent) => {
var _props$onClick, _triggerProps$onClick;
(_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event, analyticsEvent);
triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
},
onMouseOver: e => {
var _triggerProps$onMouse, _props$onMouseOver;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
(_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 ? void 0 : _props$onMouseOver.call(props, e);
},
onMouseOut: e => {
var _triggerProps$onMouse2, _props$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
(_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 ? void 0 : _props$onMouseOut.call(props, e);
},
onMouseMove: e => {
var _triggerProps$onMouse3, _props$onMouseMove;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
(_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 ? void 0 : _props$onMouseMove.call(props, e);
},
onMouseDown: e => {
var _triggerProps$onMouse4, _props$onMouseDown;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
(_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, e);
},
onFocus: e => {
var _triggerProps$onFocus, _props$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, e);
},
onBlur: e => {
var _triggerProps$onBlur, _props$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
}
}), /*#__PURE__*/React.createElement(Icon, {
label: "",
color: "currentColor"
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
}
export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);