summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
blob: 88591208d5d8882efa0ee6c92b68d5705bdaa116 (plain)
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
42
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'

function UnitAddComponent({ units, onAdd }) {
    const [isOpen, setOpen] = useState(false)
    const [selected, setSelected] = useState(null)

    return (
        <InputGroup>
            <Select
                variant={SelectVariant.single}
                placeholderText="Select a unit"
                aria-label="Select Unit"
                onToggle={() => setOpen(!isOpen)}
                isOpen={isOpen}
                onSelect={(_, selection) => {
                    setSelected(selection)
                    setOpen(false)
                }}
                selections={selected}
            >
                {units.map((unit) => (
                    <SelectOption value={unit._id} key={unit._id}>
                        {unit.name}
                    </SelectOption>
                ))}
            </Select>
            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
                Add
            </Button>
        </InputGroup>
    )
}

UnitAddComponent.propTypes = {
    units: PropTypes.array.isRequired,
    onAdd: PropTypes.func.isRequired,
}

export default UnitAddComponent