# All files / src/form SliderValueTooltip.tsx

0% Statements 0/78
0% Branches 0/1
0% Functions 0/1
0% Lines 0/78

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

     "use client";
    import { cnb } from "cnbuilder";
    import { type ReactElement, type ReactNode } from "react";
    import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
    import { type CSSTransitionClassNames } from "../transition/types.js";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-slider-tooltip");

    const HORIZONTAL_CLASS_NAMES: CSSTransitionClassNames = {
      enter: "rmd-slider-tooltip--h-off",
      enterActive: "rmd-slider-tooltip--h-on rmd-slider-tooltip--animate",
      exit: "rmd-slider-tooltip--animate",
      exitActive: "rmd-slider-tooltip--h-off",
    };

    const VERTICAL_CLASS_NAMES: CSSTransitionClassNames = {
      enter: "rmd-slider-tooltip--v-off",
      enterActive: "rmd-slider-tooltip--v-on rmd-slider-tooltip--animate",
      exit: "rmd-slider-tooltip--animate",
      exitActive: "rmd-slider-tooltip--v-off",
    };

    /**
     * @internal
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Renamed from `SliderValueProps` to `SliderValueTooltipProps`.
     */
    export interface SliderValueTooltipProps extends TooltipProps {
      index: 1 | 2;
      animate: boolean;
      vertical: boolean;
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * This component creates the "discrete" slider thumb value by rendering a
     * tooltip when needed.
     *
     * @internal
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Renamed from `SliderValue` to `SliderValueTooltip`.
     */
    export function SliderValueTooltip(
      props: SliderValueTooltipProps
    ): ReactElement {
      const {
        index,
        animate,
        vertical,
        className,
        children,
        classNames = vertical ? VERTICAL_CLASS_NAMES : HORIZONTAL_CLASS_NAMES,
        ...remaining
      } = props;

      return (
        <Tooltip
          dense
          disablePortal
          textOverflow="nowrap"
          className={cnb(
            styles({ h: !vertical, v: vertical }),
            animate && "rmd-slider-thumb--animate",
            `rmd-slider-thumb--${vertical ? "v" : "h"}${index}`,
            className
          )}
          classNames={classNames}
          {...remaining}
        >
          {children}
        </Tooltip>
      );
    }