All files / js/widgets CheckboxesInputWidget.tsx

5.4% Statements 2/37
0% Branches 0/24
0% Functions 0/10
6.66% 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>;
  }
}