outline/app/components/ActionButton.tsx

import * as React from "react";
import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
import { Action, ActionContext } from "~/types";

export type Props = React.ComponentPropsWithoutRef<"button"> & {
  /** Show the button in a disabled state */
  disabled?: boolean;
  /** Hide the button entirely if action is not applicable */
  hideOnActionDisabled?: boolean;
  /** Action to use on button */
  action?: Action;
  /** Context of action, must be provided with action */
  context?: ActionContext;
  /** If tooltip props are provided the button will be wrapped in a tooltip */
  tooltip?: Omit<TooltipProps, "children">;
};

/**
 * Button that can be used to trigger an action definition.
 */
const ActionButton = React.forwardRef(
  (
    { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
    ref: React.Ref<HTMLButtonElement>
  ) => {
    const [executing, setExecuting] = React.useState(false);
    const disabled = rest.disabled;

    if (!context || !action) {
      return <button {...rest} ref={ref} />;
    }

    const actionContext = { ...context, isButton: true };

    if (
      action?.visible &&
      !action.visible(actionContext) &&
      hideOnActionDisabled
    ) {
      return null;
    }

    const label =
      typeof action.name === "function"
        ? action.name(actionContext)
        : action.name;

    const button = (
      <button
        {...rest}
        aria-label={label}
        disabled={disabled || executing}
        ref={ref}
        onClick={
          action?.perform && actionContext
            ? (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                const response = action.perform?.(actionContext);
                if (response?.finally) {
                  setExecuting(true);
                  response.finally(() => setExecuting(false));
                }
              }
            : rest.onClick
        }
      >
        {rest.children ?? label}
      </button>
    );

    if (tooltip) {
      return <Tooltip {...tooltip}>{button}</Tooltip>;
    }

    return button;
  }
);

export default ActionButton;