# All files / src/form TextFieldAddon.tsx

67.67% Statements 67/99
50% Branches 1/2
50% Functions 1/2
67.67% Lines 67/99

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
    1001x
    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
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x
    46x

    1x
     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import { bem } from "../utils/bem.js";
    import { type ConfigurableTextFieldAddonProps } from "./types.js";

    const styles = bem("rmd-text-field-addon");

    /** @remarks \@since 6.0.0 */
    export interface TextFieldAddonClassNameOptions {
      className?: string;

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

      /**
       *
       * @defaultValue `true`
       */
      presentational?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function textFieldAddon(
      options: TextFieldAddonClassNameOptions = {}
    ): string {
      const { className, after = false, presentational = false } = options;

      return cnb(
        styles({
          before: !after,
          after,
          presentational,
        }),
        className
      );
    }

    /**
     * @remarks \@since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`
     */
    export interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {
      /**
       * @defaultValue `false`
       */
      after?: boolean;

      /**
       * Set this to `true` if the addon should not be wrapped in a `<span>` with some
       * additional styles.
       *
       * @defaultValue `false`
       */
      disabled?: boolean;
    }

    /**
     * **Server Component**
     *
     * This component is used to add an an icon before or after the text field with
     * correct styling.
     */
    export const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(
      function TextFieldAddon(props, ref) {
        const {
          after = false,
          children,
          className,
          disabled = false,
          pointerEvents = false,
          ...remaining
        } = props;

        if (!children) {
          return null;
        }

        if (disabled) {
          return <>{children}</>;
        }

        return (
          <span
            {...remaining}
            ref={ref}
            className={textFieldAddon({
              after,
              presentational: !pointerEvents,
              className,
            })}
          >
            {children}
          </span>
        );
      }
    );