@atlaskit/button/dist/es2019/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 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';
const 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)
 */
const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
  appearance = 'default',
  children,
  iconBefore,
  iconAfter,
  isSelected = false,
  onMouseDown: providedOnMouseDown = noop,
  onMouseUp: providedOnMouseUp = noop,
  shouldFitContainer = false,
  spacing = 'default',
  ...rest
}, ref) {
  const isOnlySingleIcon = getIsOnlySingleIcon({
    children,
    iconBefore,
    iconAfter
  });
  const [isActive, setIsActive] = useState(false);

  // Wrap onMouseDown / onMouseUp to manually trigger active state
  //  in Firefox
  const onMouseDown = useCallback(event => {
    providedOnMouseDown(event);
    if (isFirefox) {
      setIsActive(true);
    }
  }, [providedOnMouseDown, setIsActive]);
  const onMouseUp = useCallback(event => {
    providedOnMouseUp(event);
    if (isFirefox) {
      setIsActive(false);
    }
  }, [providedOnMouseUp, setIsActive]);
  const buttonCss = useMemo(() => getCss({
    appearance,
    spacing,
    isSelected,
    shouldFitContainer,
    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;