@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
83 lines (81 loc) • 5.11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThemedLinkIconButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
var _themedAnchor = require("./themed-anchor");
var _excluded = ["icon", "label", "tooltip"];
/**
* Props that are common between link buttons.
*/
function ThemedLinkIconButtonFn(_ref, ref) {
var _tooltip$content;
var Icon = _ref.icon,
label = _ref.label,
tooltip = _ref.tooltip,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltip, {
content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
}), function (triggerProps) {
return (
/*#__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.default.createElement(_themedAnchor.ThemedAnchor, (0, _extends2.default)({}, props, {
shape: "square",
ref: (0, _mergeRefs.default)([ref, triggerProps.ref]),
onClick: function onClick(event, analyticsEvent) {
var _props$onClick, _triggerProps$onClick;
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, analyticsEvent);
triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
},
onMouseOver: function onMouseOver(e) {
var _triggerProps$onMouse, _props$onMouseOver;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
(_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 || _props$onMouseOver.call(props, e);
},
onMouseOut: function onMouseOut(e) {
var _triggerProps$onMouse2, _props$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
(_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 || _props$onMouseOut.call(props, e);
},
onMouseMove: function onMouseMove(e) {
var _triggerProps$onMouse3, _props$onMouseMove;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
(_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 || _props$onMouseMove.call(props, e);
},
onMouseDown: function onMouseDown(e) {
var _triggerProps$onMouse4, _props$onMouseDown;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
(_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 || _props$onMouseDown.call(props, e);
},
onFocus: function onFocus(e) {
var _triggerProps$onFocus, _props$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
},
onBlur: function onBlur(e) {
var _triggerProps$onBlur, _props$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
}
}), /*#__PURE__*/_react.default.createElement(Icon, {
label: "",
color: "currentColor"
}), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
);
});
}
var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(ThemedLinkIconButtonFn);