@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
208 lines (205 loc) • 9.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
var _buttonBase = _interopRequireDefault(require("../shared/button-base"));
var _getIsOnlySingleIcon = _interopRequireDefault(require("../shared/get-is-only-single-icon"));
var _loadingSpinner = _interopRequireDefault(require("../shared/loading-spinner"));
var _theme = _interopRequireWildcard(require("./theme"));
var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
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); }
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) { (0, _defineProperty2.default)(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; }
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.default.memo( /*#__PURE__*/_react.default.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 ? _theme.defaultThemeFn : _ref2$theme,
rest = (0, _objectWithoutProperties2.default)(_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 = (0, _react.useState)(initial),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var onMouseEnter = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isHover: true
});
});
if (providedOnMouseEnter) {
providedOnMouseEnter(event);
}
}, [providedOnMouseEnter]);
var onMouseLeave = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isHover: false,
isActive: false
});
});
if (providedOnMouseLeave) {
providedOnMouseLeave(event);
}
}, [providedOnMouseLeave]);
var onMouseDown = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isActive: true
});
});
if (providedOnMouseDown) {
providedOnMouseDown(event);
}
}, [providedOnMouseDown]);
var onMouseUp = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isActive: false
});
});
if (providedOnMouseUp) {
providedOnMouseUp(event);
}
}, [providedOnMouseUp]);
var onFocus = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isFocus: true
});
});
if (providedOnFocus) {
providedOnFocus(event);
}
}, [providedOnFocus]);
var onBlur = (0, _react.useCallback)(function (event) {
setState(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
isFocus: false
});
});
if (providedOnBlur) {
providedOnBlur(event);
}
}, [providedOnBlur]);
return /*#__PURE__*/_react.default.createElement(_theme.default.Provider, {
value: theme
}, /*#__PURE__*/_react.default.createElement(_components.default.Consumer, null, function (_ref3) {
var mode = _ref3.mode;
return /*#__PURE__*/_react.default.createElement(_theme.default.Consumer, (0, _extends2.default)({
mode: mode,
state: getInteractionState(_objectSpread(_objectSpread({}, state), {}, {
isLoading: isLoading,
isSelected: restProps.isSelected,
isDisabled: restProps.isDisabled
})),
iconIsOnlyChild: (0, _getIsOnlySingleIcon.default)(restProps),
isLoading: isLoading
}, restProps), function (_ref4) {
var buttonStyles = _ref4.buttonStyles;
return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, restProps, {
ref: ref,
overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, 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: (0, _theme.getSpecifiers)(buttonStyles)
}));
});
}));
}));
// Tools including enzyme rely on components having a display name
CustomThemeButton.displayName = 'CustomThemeButton';
var _default = exports.default = CustomThemeButton;