83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import { Dropdown } from "semantic-ui-react";
|
|
import React, { Component } from "react";
|
|
|
|
export default class FilterDevices extends Component {
|
|
render() {
|
|
const tagOptions = [
|
|
{
|
|
key: "regularLight",
|
|
text: "regularLight",
|
|
value: "regularLight",
|
|
label: { color: "red", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "dimmableLight",
|
|
text: "dimmableLight",
|
|
value: "dimmableLight",
|
|
label: { color: "blue", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "buttonDimmer",
|
|
text: "buttonDimmer",
|
|
value: "buttonDimmer",
|
|
label: { color: "black", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "knobDimmer",
|
|
text: "knobDimmer",
|
|
value: "knobDimmer",
|
|
label: { color: "purple", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "motionSensor",
|
|
text: "motionSensor",
|
|
value: "motionSensor",
|
|
label: { color: "orange", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "sensor",
|
|
text: "sensor",
|
|
value: "sensor",
|
|
label: { empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "smartPlug",
|
|
text: "smartPlug",
|
|
value: "smartPlug",
|
|
label: { color: "pink", empty: true, circular: true },
|
|
},
|
|
{
|
|
key: "switch",
|
|
text: "switch",
|
|
value: "switch",
|
|
label: { color: "green", empty: true, circular: true },
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Dropdown
|
|
text="Filter Devices"
|
|
icon="filter"
|
|
floating
|
|
labeled
|
|
button
|
|
className="icon"
|
|
>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Header icon="tags" content="Tag Device" />
|
|
<Dropdown.Menu scrolling>
|
|
{tagOptions.map((option) => (
|
|
<Dropdown.Item
|
|
key={option.value}
|
|
{...option}
|
|
onClick={this.props.filterDevices}
|
|
/>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
}
|