@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
47 lines (46 loc) • 2.06 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["appearance", "isDisabled", "isSelected", "isLoading", "spacing"];
import React from 'react';
import Button from './button';
import LoadingSpinner from './shared/loading-spinner';
/**
* __Loading button__
*
* @deprecated Legacy loading buttons are deprecated and will be removed from `atlaskit/button` in an upcoming major release. Please use the new Button components from `@atlaskit/button/new` with the `isLoading` prop.
*
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
*
* A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
*
* - [Examples](https://atlassian.design/components/button/examples#loading-button)
*/
var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, ref) {
var appearance = _ref.appearance,
isDisabled = _ref.isDisabled,
isSelected = _ref.isSelected,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
spacing = _ref.spacing,
rest = _objectWithoutProperties(_ref, _excluded);
// Button already has React.memo, so just leaning on that
return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
ref: ref,
appearance: appearance
// No need to render aria-disabled when it is false
,
"aria-disabled": isLoading || undefined,
isDisabled: isDisabled,
isSelected: isSelected,
overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
spacing: spacing,
appearance: appearance,
isDisabled: isDisabled,
isSelected: isSelected
}) : null,
spacing: spacing
}));
});
// Tools including enzyme rely on components having a display name
LoadingButton.displayName = 'LoadingButton';
export default LoadingButton;