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>
|
||
|
);
|
||
|
}
|
||
|
}
|