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.
39 lines
1.4 KiB
39 lines
1.4 KiB
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;
|