aboutsummaryrefslogtreecommitdiff
path: root/extension/src/RadioButtonGroup.tsx
diff options
context:
space:
mode:
authorsowgro <tpoke.ferrari@gmail.com>2024-11-03 01:31:09 -0400
committersowgro <tpoke.ferrari@gmail.com>2024-11-03 01:31:09 -0400
commit4144eae45e68fcee46d7acb5a59f7af0f596890c (patch)
treea53693e6627c4083d5a5a10beb4e319e872a87b8 /extension/src/RadioButtonGroup.tsx
parent01b3c8be6a3cd143a044c826d7f79ed2128cdd3b (diff)
downloadbookmarks-home-4144eae45e68fcee46d7acb5a59f7af0f596890c.tar.gz
bookmarks-home-4144eae45e68fcee46d7acb5a59f7af0f596890c.tar.bz2
bookmarks-home-4144eae45e68fcee46d7acb5a59f7af0f596890c.zip
State of settings now stored in SettingEditor
Diffstat (limited to 'extension/src/RadioButtonGroup.tsx')
-rw-r--r--extension/src/RadioButtonGroup.tsx52
1 files changed, 22 insertions, 30 deletions
diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx
index 14f348d..1e86e7e 100644
--- a/extension/src/RadioButtonGroup.tsx
+++ b/extension/src/RadioButtonGroup.tsx
@@ -1,38 +1,30 @@
-import React, {useId, useState} from "react";
+import React, {ReactElement, ReactNode, useId, useState} from "react";
-interface radioEntry {
- label: string,
- data: any,
+interface RadioProps {
+ children: ReactElement<HTMLOptionElement>[],
+ defaultValue: any,
+ onChange?: (arg0: any) => void
}
-interface IProps {
- groupLabel: string,
- items: radioEntry[],
- defaultData: any
-}
-
-function RadioButtonGroup(props: IProps) {
- const [selected, setSelected] = useState(props.defaultData);
+function RadioButtonGroup(props: RadioProps) {
+ const [selected, setSelected] = useState(props.defaultValue);
+ props.onChange && props.onChange(selected);
return (
- <>
- <h3>{props.groupLabel}</h3>
- <div className="radio-group">
- { props.items.map((item) => (
- <label>
- <input
- type="radio"
- name={useId()}
- value={item.data}
- checked={item.data === selected}
- onChange={e => setSelected(e.target.value)}
- />
- {item.label}
- </label>
- )) }
- </div>
- <span>currently selected: {selected}</span>
- </>
+ <div className="radio-group">
+ { 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>
)
}