Code coverage report for js/widgets/InputWidgetBase.tsx

# All files / js/widgets InputWidgetBase.tsx

9.38% Statements 3/32
0% Branches 0/22
0% Functions 0/3
12.5% Lines 3/24

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
    711x
    1x
    1x

     import React, { ChangeEvent, ReactNode } from "react";
    import { formatUserLabel } from "../userLabel";
    import { getInputClass, WidgetProps } from "./types";

    export default function InputWidgetBase(
      props: WidgetProps & {
        onChange: (val: string) => void;
        postprocessValue?: (val: string) => string;
        inputAddon?: ReactNode;
        inputType: string;
        validate?: (val: string) => string | null;
      }
    ) {
      const {
        type,
        value,
        onChange,
        postprocessValue,
        inputAddon,
        inputType,
        validate,
        disabled,
        placeholder,
      } = props;
      let help = null;
      let className = "input-group";
      function onChangeHandler(event: ChangeEvent<HTMLInputElement>) {
        let value = event.target.value;
        if (postprocessValue) {
          value = postprocessValue(value);
        }
        onChange(value);
      }

      const failure = validate ? validate(value || "") : null;
      const setValidity = (el: HTMLInputElement | null) => {
        el?.setCustomValidity(failure || "");
      };
      if (failure !== null) {
        className += " has-feedback has-error";
        const valClassName = "validation-block validation-block-error";
        help = <div className={valClassName}>{failure}</div>;
      }

      let addon = null;
      const configuredAddon = type.addon_label_i18n;
      if (configuredAddon) {
        addon = formatUserLabel(configuredAddon);
      } else if (inputAddon) {
        addon = inputAddon;
      }

      return (
        <div className="form-group">
          <div className={className}>
            <input
              ref={setValidity}
              type={inputType}
              disabled={disabled}
              placeholder={placeholder}
              className={getInputClass(type)}
              onChange={onChangeHandler}
              value={value || ""}
            />
            {addon ? <span className="input-group-text">{addon}</span> : null}
          </div>
          {help}
        </div>
      );
    }