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