Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import { Dropdown, Checkbox, RadioButtons, FormElement } from "@emisgroup/ui-kit-react";
const testData = [
{
text: "Item one",
isChecked: false,
radioItem: "one",
},
{
text: "Item two",
isChecked: true,
radioItem: "two",
},
{
text: "Item three",
isChecked: false,
radioItem: "three",
},
];
const Entry = ({ item, onCheckChanged, onRadioItemSelected }) => {
return (
<>
<FormElement labelText={`Checkboxes should be ${item.isChecked ? "checked" : "unchecked"}`}>
<Checkbox checked={item.isChecked} onChange={ev => onCheckChanged(ev.target.checked)} />
</FormElement>
<FormElement>
<input type="checkbox" checked={item.isChecked} onChange={ev => onCheckChanged(ev.target.checked)} />
</FormElement>
<FormElement labelText={`Radiobuttons selected should be ${item.radioItem}`}>
<RadioButtons
name="radioItems"
options={[
{ text: "one", value: "one" },
{ text: "two", value: "two" },
{ text: "three", value: "three" },
]}
selected={item.radioItem}
onSelected={onRadioItemSelected}
/>
<input
id="itemOne"
type="radio"
name="hostRadioItems"
checked={item.radioItem === "one"}
value="one"
onChange={ev => onRadioItemSelected(ev.target.value)}
/>
<label htmlFor="itemOne">one</label>
<input
id="itemTwo"
type="radio"
name="hostRadioItems"
checked={item.radioItem === "two"}
value="two"
onChange={ev => onRadioItemSelected(ev.target.value)}
/>
<label htmlFor="itemTwo">two</label>
<input
id="itemThree"
type="radio"
name="hostRadioItems"
checked={item.radioItem === "three"}
value="three"
onChange={ev => onRadioItemSelected(ev.target.value)}
/>
<label htmlFor="itemThree">three</label>
</FormElement>
</>
);
};
const EntryComponents = () => {
const [data, setData] = React.useState(testData);
const [selected, setSelected] = React.useState("Item one");
const selectedItem = React.useMemo(() => data.find(item => item.text === selected), [data, selected]);
const onCheckChanged = checked =>
setData(data.map(item => (item.text === selected ? { ...item, isChecked: checked } : item)));
const onRadioItemSelected = radioItem =>
setData(data.map(item => (item.text === selected ? { ...item, radioItem } : item)));
return (
<>
<Dropdown
id="selectionDropdown"
dataSource={data.map(({ text }) => ({ text, value: text }))}
value={selected}
onChange={setSelected}
/>
{selectedItem && (
<Entry item={selectedItem} onCheckChanged={onCheckChanged} onRadioItemSelected={onRadioItemSelected} />
)}
</>
);
};
export default EntryComponents;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.