UIKitEntryComponents.jsx

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;