# All files / src/form SwitchTrack.tsx

100% Statements 59/59
50% Branches 1/2
100% Functions 1/1
100% Lines 59/59

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
    601x
    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
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    14x
    1x
     import { cnb } from "cnbuilder";
    import {
      forwardRef,
      type CSSProperties,
      type HTMLAttributes,
      type ReactNode,
    } from "react";
    import { type PropsWithRef } from "../types.js";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-switch");

    export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
      active?: boolean;
      disabled?: boolean;
      ballAddon?: ReactNode;
      ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
      ballStyle?: CSSProperties;
      ballClassName?: string;
    }

    /**
     * **Server Component**
     */
    export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
      function SwitchTrack(props, ref) {
        const {
          style,
          className,
          ballAddon,
          ballProps,
          ballStyle,
          ballClassName,
          active,
          children,
          disabled = false,
          ...remaining
        } = props;

        return (
          <div
            {...remaining}
            ref={ref}
            style={style}
            className={cnb(styles("track", { disabled }), className)}
          >
            {children}
            <span
              style={ballStyle}
              {...ballProps}
              className={cnb(styles("ball", { active }), ballClassName)}
            >
              {ballAddon}
              {ballProps?.children}
            </span>
          </div>
        );
      }
    );