# All files / src/snackbar ToastActionButton.tsx

100% Statements 71/71
100% Branches 5/5
100% Functions 3/3
100% Lines 71/71

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    721x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    4x
    4x
    1x
    1x
    3x
    3x
    3x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
     "use client";
    import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import { Button, type ButtonProps } from "../button/Button.js";
    import { type ButtonTheme } from "../button/buttonStyles.js";
    import { bem } from "../utils/bem.js";
    import { useCurrentToastActions } from "./useCurrentToastActions.js";

    const styles = bem("rmd-toast-action");
    const noop = (): void => {
      // do nothing
    };

    /**
     * @remarks \@since 6.0.0
     */
    export interface ToastActionButtonProps extends ButtonProps {
      /** @defaultValue `"secondary"` */
      theme?: ButtonTheme;

      /**
       * Set this to `true` when there is a close button visible and the content is
       * stacked. This will update the styles so the button renders in the bottom
       * right below the content and close button.
       *
       * @defaultValue `false`
       */
      reordered?: boolean;
    }

    /**
     * **Client Component**
     *
     * This button will automatically close the toast when clicked unless
     * `event.stopPropagation()` is called from the `onClick` prop.
     *
     * @remarks \@since 6.0.0
     */
    export const ToastActionButton = forwardRef<
      HTMLButtonElement,
      ToastActionButtonProps
    >(function ToastActionButton(props, ref) {
      const {
        className,
        children,
        theme = "secondary",
        onClick = noop,
        reordered,
        ...remaining
      } = props;
      const { removeToast } = useCurrentToastActions();

      return (
        <Button
          {...remaining}
          ref={ref}
          onClick={(event) => {
            onClick(event);
            if (event.isPropagationStopped()) {
              return;
            }

            removeToast(true);
          }}
          theme={theme}
          className={cnb(styles({ reordered }), className)}
        >
          {children}
        </Button>
      );
    });