# All files / src/transition ScaleTransition.tsx

100% Statements 81/81
100% Branches 2/2
100% Functions 1/1
100% Lines 81/81

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
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    821x
    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
    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
    43x
    43x
    43x
    43x
    43x
    43x
    43x
    43x
    43x
    43x
    43x
    43x
     "use client";
    import { cnb } from "cnbuilder";
    import { Children, cloneElement, type ReactElement } from "react";
    import { type CSSTransitionComponentImplementation } from "./types.js";
    import {
      useScaleTransition,
      type ScaleTransitionHookOptions,
    } from "./useScaleTransition.js";

    /**
     * @typeParam E - The HTMLElement type used or the ref required for the
     * transition.
     * @remarks
     * \@since 2.0.0
     * \@since 4.0.0 The typeParam was added
     * \@since 6.0.0 Removed portal props
     */
    export interface ScaleTransitionProps<E extends HTMLElement>
      extends CSSTransitionComponentImplementation<E>,
        ScaleTransitionHookOptions<E> {}

    /**
     * **Client Component**
     *
     * A component implementation of the {@link useScaleTransition} hook that just
     * has some reasonable defaults and supports portalling the children. Since this
     * component uses the `React.cloneElement` to inject the `ref` and `className`
     * into the `children`, it is recommended to use the hook instead.
     *
     * @example
     * Dropdown Menu Example
     * ```tsx
     * import { ReactElement, useRef, useState } from "react";
     * import { Button, useFixedPositioning, useScaleTransition } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   const buttonRef = useRef<HTMLButtonElement>(null);
     *   const [transitionIn, setTransitionIn] = useState(false);
     *   const { style, transitionOptions } = useFixedPositioning({
     *     fixedTo: buttonRef,
     *   });
     *
     *   return (
     *     <>
     *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>
     *         Toggle
     *       </Button>
     *       <ScaleTransition
     *         {...transitionOptions}
     *         vertical
     *         transitionIn={transitionIn}
     *       >
     *         <div style={style}>
     *           Some content within a menu
     *         </div>
     *       </ScaleTransition>
     *     </>
     *   );
     * }
     * ```
     *
     * @typeParam E - The HTMLElement type used or the ref required for the
     * transition.
     * @remarks
     * \@since 2.0.0
     * \@since 4.0.0 The typeParam was added and the API was updated.
     * \@since 6.0.0 Removed the built-in support for portalling.
     */
    export function ScaleTransition<E extends HTMLElement>(
      props: ScaleTransitionProps<E>
    ): ReactElement {
      const { children, className, ...options } = props;
      const child = Children.only(children);

      const { elementProps, rendered } = useScaleTransition({
        ...options,
        className: cnb(child.props.className, className),
      });

      return <>{rendered && cloneElement(children, elementProps)}</>;
    }