# All files / src/interaction Ripple.tsx

62.12% Statements 41/66
100% Branches 0/0
0% Functions 0/1
62.12% Lines 41/66

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
    671x
    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

     "use client";
    import { cnb } from "cnbuilder";
    import { type ReactElement } from "react";
    import {
      type CSSTransitionClassNames,
      type TransitionTimeout,
    } from "../transition/types.js";
    import { useCSSTransition } from "../transition/useCSSTransition.js";
    import { type RippleState, type RippleTransitionCallbacks } from "./types.js";

    /** @internal */
    export const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
      enter: "rmd-ripple--animating",
      enterActive: "rmd-ripple--scaling",
      enterDone: "rmd-ripple--animating rmd-ripple--scaling",
      exit: "rmd-ripple--animating rmd-ripple--scaling",
      exitActive: "rmd-ripple--fading",
    };

    /** @internal */
    export const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = {
      enter: 150,
      exit: 300,
    };

    /** @internal */
    export interface RippleProps extends RippleTransitionCallbacks {
      className?: string;
      timeout?: TransitionTimeout;
      classNames?: CSSTransitionClassNames;
      ripple: RippleState;
    }

    /**
     * **Client Component**
     *
     * This component should only be used by the `RippleContainer` component.
     *
     * @internal
     */
    export function Ripple(props: RippleProps): ReactElement {
      const {
        className,
        timeout = DEFAULT_RIPPLE_TIMEOUT,
        classNames = DEFAULT_RIPPLE_CLASSNAMES,
        ripple,
        onEntered,
        onExited,
      } = props;
      const { style, exiting } = ripple;
      const { elementProps, rendered } = useCSSTransition({
        appear: true,
        className: cnb("rmd-ripple", className),
        transitionIn: !exiting,
        timeout,
        classNames,
        onEntered() {
          onEntered(ripple);
        },
        onExited() {
          onExited(ripple);
        },
      });

      return <>{rendered && <span style={style} {...elementProps} />}</>;
    }