@atlaskit/button/dist/esm/old-button/button.js

A button triggers an event or action. They let users know what will happen next.

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["appearance", "children", "iconBefore", "iconAfter", "isSelected", "onMouseDown", "onMouseUp", "shouldFitContainer", "spacing"];
import React, { useCallback, useMemo, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

import noop from '@atlaskit/ds-lib/noop';
import ButtonBase from './shared/button-base';
import { getCss } from './shared/css';
import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
/**
 * __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 button triggers an event or action. They let users know what will happen next.
 *
 * - [Examples](https://atlassian.design/components/button/button-legacy/examples)
 * - [Code](https://atlassian.design/components/button/button-legacy/code)
 * - [Usage](https://atlassian.design/components/button/button-legacy/usage)
 */
var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    children = _ref.children,
    iconBefore = _ref.iconBefore,
    iconAfter = _ref.iconAfter,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
    _ref$onMouseDown = _ref.onMouseDown,
    providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
    _ref$onMouseUp = _ref.onMouseUp,
    providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
    _ref$shouldFitContain = _ref.shouldFitContainer,
    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
    _ref$spacing = _ref.spacing,
    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
    rest = _objectWithoutProperties(_ref, _excluded);
  var isOnlySingleIcon = getIsOnlySingleIcon({
    children: children,
    iconBefore: iconBefore,
    iconAfter: iconAfter
  });
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isActive = _useState2[0],
    setIsActive = _useState2[1];

  // Wrap onMouseDown / onMouseUp to manually trigger active state
  //  in Firefox
  var onMouseDown = useCallback(function (event) {
    providedOnMouseDown(event);
    if (isFirefox) {
      setIsActive(true);
    }
  }, [providedOnMouseDown, setIsActive]);
  var onMouseUp = useCallback(function (event) {
    providedOnMouseUp(event);
    if (isFirefox) {
      setIsActive(false);
    }
  }, [providedOnMouseUp, setIsActive]);
  var buttonCss = useMemo(function () {
    return getCss({
      appearance: appearance,
      spacing: spacing,
      isSelected: isSelected,
      shouldFitContainer: shouldFitContainer,
      isOnlySingleIcon: isOnlySingleIcon
    });
  }, [appearance, spacing, isSelected, shouldFitContainer, isOnlySingleIcon]);
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
    ref: ref,
    appearance: appearance,
    buttonCss: buttonCss,
    children: children
    // Due to how click events are set, we need to set active styles
    //  manually in Firefox and wrap onMouseDown/onMouseUp
    ,
    "data-firefox-is-active": isActive ? true : undefined,
    iconAfter: iconAfter,
    iconBefore: iconBefore,
    isSelected: isSelected,
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    spacing: spacing
  }));
}));

// Tools including enzyme rely on components having a display name
Button.displayName = 'Button';
export default Button;