@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
179 lines • 8.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import Tooltip from '@atlaskit/tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden';
import ButtonBase from '../shared/button-base';
import Content from '../shared/content';
import IconRenderer from '../shared/icon-renderer';
/**
* __Icon Button__
*
* Renders an icon-only button lets people take a common and recognizable action where space is limited.
*
* - [Examples](https://atlassian.design/components/button/icon-button/examples)
* - [Code](https://atlassian.design/components/button/icon-button/code)
* - [Usage](https://atlassian.design/components/button/icon-button/usage)
*/
const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
// Prevent duplicate labels being added.
'aria-label': preventedAriaLabel,
'aria-labelledby': ariaLabelledBy,
analyticsContext,
appearance,
autoFocus,
icon,
interactionName,
isDisabled,
isLoading = false,
isSelected,
isTooltipDisabled = true,
label,
onClick,
onClickCapture,
onKeyDownCapture,
onKeyUpCapture,
onMouseDownCapture,
onMouseUpCapture,
onPointerDownCapture,
onPointerUpCapture,
onTouchEndCapture,
onTouchStartCapture,
shape,
spacing,
testId,
tooltip,
type = 'button',
...unsafeRest
}, ref) {
var _tooltip$content;
// @ts-expect-error
const {
className: _className,
css: _css,
as: _as,
style: _style,
...saferRest
} = unsafeRest;
if (isTooltipDisabled) {
return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, saferRest, {
ref: ref,
appearance: appearance,
autoFocus: autoFocus,
isDisabled: isDisabled,
isLoading: isLoading,
isSelected: isSelected,
isIconButton: true,
isCircle: shape === 'circle',
hasIconBefore: !!icon,
spacing: spacing,
ariaLabelledBy: ariaLabelledBy,
onClick: onClick,
onClickCapture: onClickCapture,
onKeyDownCapture: onKeyDownCapture,
onKeyUpCapture: onKeyUpCapture,
onMouseDownCapture: onMouseDownCapture,
onMouseUpCapture: onMouseUpCapture,
onPointerDownCapture: onPointerDownCapture,
onPointerUpCapture: onPointerUpCapture,
onTouchStartCapture: onTouchStartCapture,
onTouchEndCapture: onTouchEndCapture,
testId: testId,
componentName: "IconButton",
analyticsContext: analyticsContext,
type: type,
interactionName: interactionName
}), /*#__PURE__*/React.createElement(Content, {
type: "icon",
isLoading: isLoading
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: icon
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
}
return /*#__PURE__*/React.createElement(Tooltip, {
content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents,
shortcut: tooltip === null || tooltip === void 0 ? void 0 : tooltip.shortcut
}, triggerProps => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, saferRest, {
appearance: appearance,
autoFocus: autoFocus,
isDisabled: isDisabled,
isLoading: isLoading,
isSelected: isSelected,
isIconButton: true,
isCircle: shape === 'circle',
hasIconBefore: false,
spacing: spacing,
ariaLabelledBy: ariaLabelledBy,
onClick: (e, analyticsEvent) => {
var _triggerProps$onClick;
onClick === null || onClick === void 0 ? void 0 : onClick(e, analyticsEvent);
(_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, e);
},
onMouseOver: e => {
var _triggerProps$onMouse, _saferRest$onMouseOve;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
(_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 ? void 0 : _saferRest$onMouseOve.call(saferRest, e);
},
onMouseOut: e => {
var _triggerProps$onMouse2, _saferRest$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
(_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 ? void 0 : _saferRest$onMouseOut.call(saferRest, e);
},
onMouseMove: e => {
var _triggerProps$onMouse3, _saferRest$onMouseMov;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
(_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 ? void 0 : _saferRest$onMouseMov.call(saferRest, e);
},
onMouseDown: e => {
var _triggerProps$onMouse4, _saferRest$onMouseDow;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
(_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 ? void 0 : _saferRest$onMouseDow.call(saferRest, e);
},
onFocus: e => {
var _triggerProps$onFocus, _saferRest$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
(_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 ? void 0 : _saferRest$onFocus.call(saferRest, e);
},
onBlur: e => {
var _triggerProps$onBlur, _saferRest$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
(_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 ? void 0 : _saferRest$onBlur.call(saferRest, e);
},
ref: mergeRefs([ref, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref].filter(Boolean)),
onMouseDownCapture: onMouseDownCapture,
onMouseUpCapture: onMouseUpCapture,
onKeyDownCapture: onKeyDownCapture,
onKeyUpCapture: onKeyUpCapture,
onTouchStartCapture: onTouchStartCapture,
onTouchEndCapture: onTouchEndCapture,
onPointerDownCapture: onPointerDownCapture,
onPointerUpCapture: onPointerUpCapture,
onClickCapture: onClickCapture,
type: type,
testId: testId,
analyticsContext: analyticsContext,
interactionName: interactionName,
componentName: "IconButton"
}), /*#__PURE__*/React.createElement(Content, {
type: "icon",
isLoading: isLoading
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: icon
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))));
}));
IconButton.displayName = 'IconButton';
export default IconButton;