# All files / src/form InputToggleIcon.tsx

100% Statements 131/131
90% Branches 9/10
100% Functions 1/1
100% Lines 131/131

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
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    1321x
    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
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    412x
    412x
    145x
    5x
    140x
    267x
    427x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
    427x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { getIcon } from "../icon/iconConfig.js";
    import { FORM_CONFIG } from "./formConfig.js";
    import { inputToggle, type InputToggleSize } from "./inputToggleStyles.js";

    /**
     * @remarks
     * \@since 2.8.0
     * \@since 6.0.0 Removed the `circle` and `overlay` props since they are no
     * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and
     * `indeterminateIcon` props.
     * @internal
     */
    export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
      type: "checkbox" | "radio";
      /**
       * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,
       * the icon state won't work.
       */
      checked?: boolean;

      /**
       * The icon to display while {@link checked} is `false`.
       */
      icon?: ReactNode;

      /**
       * The icon to display while {@link checked} is `true` and
       * {@link indeterminate} is `false`.
       */
      checkedIcon?: ReactNode;

      /**
       * The icon to display while both {@link checked} and {@link indeterminate}
       * are `true`.
       */
      indeterminateIcon?: ReactNode;

      /** @defaultValue `"normal"` */
      size?: InputToggleSize;

      /** @defaultValue `false` */
      error?: boolean;

      /** @defaultValue `false` */
      disabled?: boolean;

      /** @defaultValue `false` */
      disableEm?: boolean;

      /** @defaultValue `false` */
      indeterminate?: boolean;
    }

    /**
     * **Server Component**
     *
     * @remarks
     * \@since 2.8.0
     * \@since 6.0.0 Updated to use different icons for each checked state instead
     * of a css overlay hack.
     * @internal
     */
    export const InputToggleIcon = forwardRef<
      HTMLSpanElement,
      InputToggleIconProps
    >(function InputToggleIcon(props, ref) {
      const {
        type,
        size = "normal",
        icon: propIcon,
        error,
        checked,
        children,
        disabled,
        indeterminate,
        className,
        disableEm = false,
        checkedIcon: propCheckedIcon,
        indeterminateIcon: propIndeterminateIcon,
        ...remaining
      } = props;
      const uncheckedIcon = getIcon(type, propIcon);
      const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);
      const indeterminateIcon = getIcon(
        "checkboxIndeterminate",
        propIndeterminateIcon
      );

      let icon: ReactNode;
      let active = false;
      const uncontrolled = typeof checked !== "boolean";
      if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {
        active = !!checked && !error;
        icon = checked
          ? indeterminate
            ? indeterminateIcon
            : checkedIcon
          : uncheckedIcon;
      } else {
        icon = (
          <>
            {uncheckedIcon}
            {indeterminate ? indeterminateIcon : checkedIcon}
          </>
        );
      }

      return (
        <span
          {...remaining}
          ref={ref}
          className={cnb(
            inputToggle({
              em: !disableEm,
              size,
              type,
              error,
              active,
              disabled,
              uncontrolled,
              className,
            })
          )}
        >
          {children}
          {icon}
        </span>
      );
    });