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 | 1x 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>;
}
}
|