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.
42 lines
940 B
42 lines
940 B
import React, {useLayoutEffect, useState} from "react";
|
|
import {randId} from "../../Helpers/random";
|
|
import iro from "@jaames/iro";
|
|
|
|
function BrightnessSlider({brightness, onChange}) {
|
|
const [random] = useState(randId());
|
|
|
|
useLayoutEffect(() => {
|
|
const colorPicker = new iro.ColorPicker("#brightness-picker-" + random, {
|
|
color: `rgb(${brightness}, ${brightness}, ${brightness})`,
|
|
layout: [
|
|
{
|
|
component: iro.ui.Slider,
|
|
options: {
|
|
borderColor: '#888'
|
|
}
|
|
}
|
|
],
|
|
});
|
|
|
|
colorPicker.on("input:end", color => {
|
|
onChange(color.rgb.r);
|
|
});
|
|
|
|
return () => {
|
|
const elem = document.getElementById(`brightness-picker-${random}`);
|
|
if (elem === null) {
|
|
return;
|
|
}
|
|
|
|
elem.innerHTML = "";
|
|
};
|
|
}, [brightness]);
|
|
|
|
return (
|
|
<div id={`brightness-picker-${random}`}>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BrightnessSlider;
|