Code coverage report for js/widgets/CheckboxesInputWidget.tsx

# All files / js/widgets CheckboxesInputWidget.tsx

5.41% Statements 2/37
0% Branches 0/24
0% Functions 0/10
6.67% Lines 2/30

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

     import React, { ChangeEvent } from "react";
    import { trans_obj } from "../i18n";
    import { MultiWidgetType, WidgetProps } from "./types";

    function checkboxIsActive(field: string, props: WidgetProps<string[]>) {
      let value = props.value;
      if (value == null) {
        value = props.placeholder;
        if (value == null) {
          return false;
        }
      }
      for (const item of value) {
        if (item === field) {
          return true;
        }
      }
      return false;
    }

    function flipSetValue(set: string[], value: string, isActive: boolean) {
      if (isActive) {
        return set.includes(value) ? set : [...set, value];
      } else {
        return set.filter((v) => v !== value);
      }
    }

    export class CheckboxesInputWidget extends React.PureComponent<
      WidgetProps<string[], MultiWidgetType>
    > {
      static serializeValue(value: string[] | null) {
        return (value || []).join(", ");
      }

      static deserializeValue(value: string): string[] | null {
        if (value === "") {
          return null;
        }
        let rv = value.split(",").map((x) => x.trim());
        if (rv.length === 1 && rv[0] === "") {
          rv = [];
        }
        return rv;
      }

      render() {
        const { disabled, type, onChange } = this.props;

        const onChangeHandler = (
          field: string,
          event: ChangeEvent<HTMLInputElement>
        ) => {
          const newValue = flipSetValue(
            this.props.value || [],
            field,
            event.target.checked
          );
          onChange(newValue);
        };

        const choices = type.choices?.map((item) => (
          <div className="form-check" key={item[0]}>
            <label className="form-check-label">
              <input
                className="form-check-input"
                type="checkbox"
                disabled={disabled}
                checked={checkboxIsActive(item[0], this.props)}
                onChange={(e) => onChangeHandler(item[0], e)}
              />
              {trans_obj(item[1])}
            </label>
          </div>
        ));
        return <div className="checkboxes">{choices}</div>;
      }
    }