CheckboxesField
Massimo Melina committed
Mar 22, 2022 at 17:16 UTC
7ef8bfbcf8ae89a341fc475373bdcfae86d2d5db
1 file changed
+23
-1
admin/src/Form.ts
+23
-1
@@ -2,8 +2,9 @@
2
import { createElement as h, FC, Fragment, isValidElement, ReactElement, ReactNode, useEffect, useState, useRef, Ref } from 'react'
3
import {
4
Box, Button,
5
+ Checkbox,
6
FormControl,
6
- FormControlLabel, FormHelperText,
7
+ FormControlLabel, FormGroup, FormHelperText,
8
FormLabel,
9
Grid,
10
MenuItem, Radio,
@@ -333,3 +334,24 @@ export function RadioField<T>({ label, options, value, onChange }: FieldProps<T>
334
)
335
)
336
}
337
+
338
+export function CheckboxesField({ label, options, value, onChange }: FieldProps<string[]> & { options: string[] }) {
339
+ console.log({ value })
340
+ return h(FormControl, {},
341
+ label && h(FormLabel, {}, label),
342
+ h(FormGroup, {},
343
+ options.map(o => {
344
+ const checked = value?.includes(o)
345
+ return h(FormControlLabel, {
346
+ key: o,
347
+ checked,
348
+ control: h(Checkbox),
349
+ label: o,
350
+ onClick(event) {
351
+ const newValue = checked ? value!.filter(x => x !== o) : [...value||[], o]
352
+ onChange(newValue, { was: value, event })
353
+ }
354
+ })
355
+ }))
356
+ )
357
+}