Function FXDialog

components/FXDialog.tsx:20–126

(props)

import Slider from "react-slider"

const FXDialog: React.FunctionComponent = (props) => {
    const {fxDialogActive} = useActiveSelector()
    const {setFXDialogActive} = useActiveActions()
    const [hover, setHover] = useState(false)
    const {brightness, contrast, hue, saturation, lightness, blur, sharpen, pixelate} = useFilterSelector()
    const {setBrightness, setContrast, setHue, setSaturation, setLightness, setBlur, setSharpen, setPixelate} = useFilterActions()

    useEffect(() => {
        const showFXDialog = (event: any) => {
            setFXDialogActive(!fxDialogActive)
        }
        const closeAllDialogs = (event: any, ignore: any) => {
            if (ignore !== "fx") setFXDialogActive(false)
        }
        window.ipcRenderer.on("show-fx-dialog", showFXDialog)
        window.ipcRenderer.on("close-all-dialogs", closeAllDialogs)
        return () => {
            window.ipcRenderer.removeListener("show-fx-dialog", showFXDialog)
            window.ipcRenderer.removeListener("close-all-dialogs", closeAllDialogs)
        }
    }, [fxDialogActive])

    useEffect(() => {
        const escapePressed = () => {
            if (fxDialogActive) setFXDialogActive(false)
        }
        window.ipcRenderer.on("escape-pressed", escapePressed)
        return () => {
            window.ipcRenderer.removeListener("escape-pressed", escapePressed)
        }
    })

    const close = () => {
        setTimeout(() => {
            if (!hover && fxDialogActive) setFXDialogActive(false)
        }, 100)
    }

    const resetFilters = () => {
        setBrightness(100)
        setContrast(100)
        setHue(180)
        setSaturation(100)
        setLightness(100)
        setBlur(0)
        setSharpen(0)
        setPixelate(1)
    }
        return (
            <section className="fx-dialog" onMouseDown={close}>
                <div className={`fx-dropdown ${!fxDialogActive ? `hide-fx-dropdown` : ""}`} onMouseOver={() => setHover(true)} onMouseLeave={() => setHover(false)}
                style={{marginLeft: "260px", top: "30px"}}>
                    <div className="fx-dropdown-row">
                        <BrightnessIcon className="fx-dropdown-img"/>
                        <span className="fx-dropdown-text">Brightness</span>
                        <Slider className="fx-slider" trackClassName="fx-slider-track" thumbClassName="fx-slider-thumb" 
                        onChange={(value) => setBrightness(value)} min={60} max={140} step={1} value={brightness}/>
                    </div>