@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
202 lines (198 loc) • 8.27 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useCallback, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import GlobalTheme from '@atlaskit/theme/components';
import ButtonBase from '../shared/button-base';
import getIsOnlySingleIcon from '../shared/get-is-only-single-icon';
import LoadingSpinner from '../shared/loading-spinner';
import Theme, { defaultThemeFn, getSpecifiers } from './theme';
function getInteractionState(_ref) {
var _ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
_ref$isActive = _ref.isActive,
isActive = _ref$isActive === void 0 ? false : _ref$isActive,
_ref$isFocus = _ref.isFocus,
isFocus = _ref$isFocus === void 0 ? false : _ref$isFocus,
_ref$isHover = _ref.isHover,
isHover = _ref$isHover === void 0 ? false : _ref$isHover,
_ref$isSelected = _ref.isSelected,
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
if (isDisabled) {
return 'disabled';
}
if (isSelected && isFocus) {
return 'focusSelected';
}
if (isSelected) {
return 'selected';
}
// not allowing active or focus style changes while loading
if (!isLoading && isActive) {
return 'active';
}
if (!isLoading && isHover) {
return 'hover';
}
if (isFocus) {
return 'focus';
}
return 'default';
}
var initial = {
isHover: false,
isActive: false,
isFocus: false
};
/**
* __Custom theme button__
*
* @deprecated Legacy 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`
*
* Please refer to the [migration guide](https://atlassian.design/components/button/button-legacy/migration-guide) for further details.
*
* A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
*
* - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
*/
var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function CustomThemeButton(_ref2, ref) {
var _ref2$appearance = _ref2.appearance,
appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
_ref2$autoFocus = _ref2.autoFocus,
autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
_ref2$isDisabled = _ref2.isDisabled,
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
_ref2$isSelected = _ref2.isSelected,
isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
_ref2$shouldFitContai = _ref2.shouldFitContainer,
shouldFitContainer = _ref2$shouldFitContai === void 0 ? false : _ref2$shouldFitContai,
_ref2$spacing = _ref2.spacing,
spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
_ref2$isLoading = _ref2.isLoading,
isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
providedOnMouseEnter = _ref2.onMouseEnter,
providedOnMouseLeave = _ref2.onMouseLeave,
providedOnMouseDown = _ref2.onMouseDown,
providedOnMouseUp = _ref2.onMouseUp,
providedOnFocus = _ref2.onFocus,
providedOnBlur = _ref2.onBlur,
_ref2$theme = _ref2.theme,
theme = _ref2$theme === void 0 ? defaultThemeFn : _ref2$theme,
rest = _objectWithoutProperties(_ref2, _excluded);
// TODO is there a nicer way to do this?
// Add default props back into object for spreading
var restProps = _objectSpread({
appearance: appearance,
autoFocus: autoFocus,
isDisabled: isDisabled,
isSelected: isSelected,
shouldFitContainer: shouldFitContainer,
spacing: spacing
}, rest);
var _useState = useState(initial),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var onMouseEnter = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isHover: true
});
});
if (providedOnMouseEnter) {
providedOnMouseEnter(event);
}
}, [providedOnMouseEnter]);
var onMouseLeave = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isHover: false,
isActive: false
});
});
if (providedOnMouseLeave) {
providedOnMouseLeave(event);
}
}, [providedOnMouseLeave]);
var onMouseDown = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isActive: true
});
});
if (providedOnMouseDown) {
providedOnMouseDown(event);
}
}, [providedOnMouseDown]);
var onMouseUp = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isActive: false
});
});
if (providedOnMouseUp) {
providedOnMouseUp(event);
}
}, [providedOnMouseUp]);
var onFocus = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isFocus: true
});
});
if (providedOnFocus) {
providedOnFocus(event);
}
}, [providedOnFocus]);
var onBlur = useCallback(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isFocus: false
});
});
if (providedOnBlur) {
providedOnBlur(event);
}
}, [providedOnBlur]);
return /*#__PURE__*/React.createElement(Theme.Provider, {
value: theme
}, /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, function (_ref3) {
var mode = _ref3.mode;
return /*#__PURE__*/React.createElement(Theme.Consumer, _extends({
mode: mode,
state: getInteractionState(_objectSpread(_objectSpread({}, state), {}, {
isLoading: isLoading,
isSelected: restProps.isSelected,
isDisabled: restProps.isDisabled
})),
iconIsOnlyChild: getIsOnlySingleIcon(restProps),
isLoading: isLoading
}, restProps), function (_ref4) {
var buttonStyles = _ref4.buttonStyles;
return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
ref: ref,
overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null
// No need to render aria-disabled when it is false
,
"aria-disabled": isLoading || restProps['aria-disabled'],
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMouseDown: onMouseDown,
onMouseUp: onMouseUp,
onFocus: onFocus,
onBlur: onBlur,
buttonCss: getSpecifiers(buttonStyles)
}));
});
}));
}));
// Tools including enzyme rely on components having a display name
CustomThemeButton.displayName = 'CustomThemeButton';
export default CustomThemeButton;