The main server, and probably only repository in this org.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, {useState} from "react"; import {Badge, ButtonDropdown, Col, DropdownItem, DropdownMenu, DropdownToggle, ListGroupItem, Row} from "reactstrap"; import ColorModal from "./Modals/ColorModal"; import {changeColor} from "../Helpers/lights"; import LightPropertiesModal from "./Modals/LightPropertiesModal";
function Light({id, groupId, name, on, color, brightness}) { const [modal, setModal] = useState(false); const [dropDown, setDropDown] = useState(false); const [propModal, setPropModal] = useState(false);
return ( <ListGroupItem> <Row> <Col xs={7}> <ButtonDropdown isOpen={dropDown} toggle={() => setDropDown(!dropDown)}> <DropdownToggle size="sm" caret outline color="secondary"> {name} </DropdownToggle> <DropdownMenu> <DropdownItem onClick={() => setPropModal(true)}>Egenskaper</DropdownItem> <DropdownItem>Glem</DropdownItem> </DropdownMenu> </ButtonDropdown> </Col> <Col xs={3}> {on && ( <Badge style={{backgroundColor: `#${color}`}} onClick={() => setModal(true)}> {color.toUpperCase()} </Badge> )} </Col> <Col xs={2}> <Badge style={{backgroundColor: `gray(${brightness})`}} onClick={() => setModal(true)}> {on ? brightness : "Av"} </Badge> </Col> </Row> {modal && ( <ColorModal cValue={color} bValue={brightness} pValue={on} onConfirm={(newColor, newBrightness, newPower) => { changeColor(id, newColor, newBrightness, newPower); setModal(false); }} onCancel={() => setModal(false)} /> )} {propModal && ( <LightPropertiesModal id={id} gValue={groupId} nValue={name} onClose={() => setPropModal(false)}/> )} </ListGroupItem> ); }
export default Light;
|