blob: ff5835d888baa8457731425bb1382b2f4d43e270 (
plain) (
blame)
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
|
import React, {ReactElement, useEffect, useId, useState} from "react";
//
// function RadioEntry(props: {value: any, children: ReactElement}) {
// return props.children
// }
/**
* A component for a group of radio buttons where only one can be selected
*
* @param props.children html <option> elements for each radio option
* @param props.value The option which is selected
* @param props.onChange A function that will be called when the selected option changes
*/
function RadioButtonGroup(props: { children: {props: {value: any, children: ReactElement}}[], value: any, onChange?: (arg0: any) => void }) {
const [selected, setSelected] = useState(props.value);
useEffect(() => {
setSelected(props.value);
}, [props.value]);
useEffect(() => {
props.onChange && props.onChange(selected);
}, [selected])
return (
<div className="radio-group">
{ props.children && props.children.map((item) => (
<label>
<input
type="radio"
name={useId()}
value={item.props.value}
checked={item.props.value === selected}
onChange={e => setSelected(e.target.value)}
/>
{item.props.children.toString()}
</label>
)) }
</div>
)
}
export default RadioButtonGroup
|
