@dr.pogodin/react-utils/build/web/shared/components/Button/index.js

Collection of generic ReactJS components and utils

// The <Button> component implements a standard button / button-like link.

import themed from '@dr.pogodin/react-themes';
import Link from "../Link";
import defaultTheme from "./style.scss";
import { jsx as _jsx } from "react/jsx-runtime";
export const BaseButton = ({
  active,
  children,
  disabled,
  enforceA,
  onClick,
  onKeyDown: onKeyDownProp,
  onKeyUp,
  onMouseDown,
  onMouseUp,
  onPointerDown,
  onPointerUp,
  openNewTab,
  replace,
  testId,
  theme,
  to
}) => {
  let className = theme.button;
  if (active && theme.active) className += ` ${theme.active}`;
  if (disabled) {
    if (theme.disabled) className += ` ${theme.disabled}`;
    return /*#__PURE__*/_jsx("div", {
      className: className,
      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
      children: children
    });
  }
  let onKeyDown = onKeyDownProp;
  if (!onKeyDown && onClick) {
    onKeyDown = e => {
      if (e.key === 'Enter') onClick(e);
    };
  }
  if (to) {
    return /*#__PURE__*/_jsx(Link, {
      className: className,
      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
      enforceA: enforceA,
      onClick: onClick

      // TODO: For now, the `onKeyDown` handler is not passed to the <Link>,
      // as <Link> component does not call it anyway, presumably due to
      // the inner implementation details. We should look into supporting it:
      // https://github.com/birdofpreyru/react-utils/issues/444
      // onKeyDown={onKeyDown}
      ,

      onKeyUp: onKeyUp,
      onMouseDown: onMouseDown,
      onMouseUp: onMouseUp,
      onPointerDown: onPointerDown,
      onPointerUp: onPointerUp,
      openNewTab: openNewTab,
      replace: replace,
      to: to,
      children: children
    });
  }
  return /*#__PURE__*/_jsx("div", {
    className: className,
    "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
    onClick: onClick,
    onKeyDown: onKeyDown,
    onKeyUp: onKeyUp,
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    onPointerDown: onPointerDown,
    onPointerUp: onPointerUp,
    role: "button",
    tabIndex: 0,
    children: children
  });
};

/**
 * Button component theme: a map of CSS
 * class names to append to button elements:
 * @prop {string} [active] to the root element of active button.
 * @prop {string} [button] to the root element of any button.
 * @prop {string} [disabled] to the root element of disabled button.
 */
export default themed(BaseButton, 'Button', defaultTheme);
//# sourceMappingURL=index.js.map