@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
94 lines (93 loc) • 6.54 kB
JavaScript
/* themed-icon-button.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThemedIconButton = void 0;
require("./themed-icon-button.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
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 _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
var _themedPressable = require("./themed-pressable");
var _excluded = ["icon", "label", "tooltip", "isTooltipDisabled", "shouldShowLabel"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
label: "_k48p1wq8"
};
var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedIconButton(_ref, ref) {
var _tooltip$content;
var Icon = _ref.icon,
label = _ref.label,
tooltip = _ref.tooltip,
isTooltipDisabled = _ref.isTooltipDisabled,
_ref$shouldShowLabel = _ref.shouldShowLabel,
shouldShowLabel = _ref$shouldShowLabel === void 0 ? false : _ref$shouldShowLabel,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return (
/*#__PURE__*/
// Keep the trigger mounted when tooltip availability changes so focus is preserved.
_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltip, {
content: isTooltipDisabled || shouldShowLabel ? null : (_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(_themedPressable.ThemedPressable, (0, _extends2.default)({}, props, {
shape: shouldShowLabel ? 'default' : '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(_iconRenderer.default, {
icon: Icon
}), shouldShowLabel ? /*#__PURE__*/_react.default.createElement("span", {
className: (0, _runtime.ax)([styles.label])
}, label) : /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
);
})
);
});