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 {Button, CustomInput, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap"; import ColorPicker from "../Misc/ColorPicker"; import BrightnessSlider from "../Misc/BrightnessSlider";
function ColorModal({cValue, bValue, pValue, onConfirm, onCancel}) { const [color, setColor] = useState(cValue); const [brightness, setBrightness] = useState(bValue); const [power, setPower] = useState(pValue);
return ( <Modal isOpen={true}> <ModalHeader>Fargevalg</ModalHeader> <ModalBody style={{margin: "0 auto"}}> <FormGroup> <ColorPicker color={color} onChange={setColor}/> </FormGroup> <FormGroup> <BrightnessSlider brightness={brightness} onChange={setBrightness}/> </FormGroup> <FormGroup className="on-switch"> <CustomInput type="switch" id="switch-power" name="power" label={power ? "På" : "Av"} checked={power} onChange={e => setPower(e.target.checked)}/> </FormGroup> </ModalBody> <ModalFooter> <Button color="primary" onClick={() => onConfirm(color, brightness, power)}>Lagre</Button> {" "} <Button color="secondary" onClick={onCancel}>Avbryt</Button> </ModalFooter> </Modal> ); }
export default ColorModal;
|