# All files / src/transition useSlideTransition.ts

100% Statements 113/113
100% Branches 1/1
100% Functions 1/1
100% Lines 113/113

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
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    1141x
    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
    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
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
    67x
     "use client";
    import { cnb } from "cnbuilder";
    import type {
      CSSTransitionClassNames,
      CSSTransitionHookReturnValue,
      PreconfiguredCSSTransitionOptions,
      TransitionTimeout,
    } from "./types.js";
    import { useCSSTransition } from "./useCSSTransition.js";

    /** @remarks \@since 6.0.0 */
    export const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;

    /** @remarks \@since 6.0.0 */
    export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =
      {
        enter: "rmd-slide--enter",
        enterActive: "rmd-slide--enter-active rmd-slide--animate",
        exit: "rmd-slide--exit",
        exitActive: "rmd-slide--exit-active rmd-slide--animate",
      };

    /** @remarks \@since 6.0.0 */
    export type SlideTransitionOptions<E extends HTMLElement> =
      PreconfiguredCSSTransitionOptions<E>;

    /**
     * @example
     * Simple Example
     * ```tsx
     * import type { SlideDirection } from "@react-md/core";
     * import { slideContainer, useSlideTransition } from "@react-md/core";
     * import type { ReactElement, ReactNode } from "react";
     * import { useState } from "react";
     *
     * interface SlideProps {
     *   active: boolean;
     *   children: ReactNode;
     * }
     *
     * function Slide({ active, children }: SlideProps): ReactElement | null {
     *   const { rendered, elementProps } = useSlideTransition({
     *     transition: active,
     *   });
     *
     *   if (!rendered) {
     *     return null;
     *   }
     *
     *   return <div {...elementProps}>{children}</div>;
     * }
     *
     * interface State {
     *   direction: SlideDirection;
     *   activeIndex: number;
     * }
     *
     * function Example(): ReactElement {
     *   const [state, setState] = useState<State>({
     *     direction: "left",
     *     activeIndex: 0,
     *   });
     *   const { direction, activeIndex } = state
     *
     *   // when changing a slide, `direction` should be set to "left" if the
     *   // previous `activeIndex` is less than the next index
     *   //
     *   // i.e.
     *   // setState((prevState) => ({
     *   //   direction: prevState.activeIndex < index ? "left" : "right",
     *   //   activeIndex: index,
     *   // }))
     *
     *   return (
     *     <div className={slideContainer({ direction )}>
     *       <Slide active={activeIndex === 0}>
     *         Slide 1
     *       </Slide>
     *       <Slide active={activeIndex === 1}>
     *         Slide 2
     *       </Slide>
     *       <Slide active={activeIndex === 2}>
     *         Slide 3
     *       </Slide>
     *     </div>
     *   );
     * }
     * ```
     *
     * @see {@link SlideContainer} and {@link Slide} for convenient default
     * implementations.
     * @remarks \@since 6.0.0
     */
    export function useSlideTransition<E extends HTMLElement>(
      options: SlideTransitionOptions<E>
    ): CSSTransitionHookReturnValue<E> {
      const {
        timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,
        className,
        temporary = false,
        exitedHidden = true,
        ...transitionOptions
      } = options;

      return useCSSTransition({
        ...transitionOptions,
        timeout,
        className: cnb("rmd-slide", className),
        classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,
        temporary,
        exitedHidden,
      });
    }