/** * @Author yejiang1015 * @Date 2020-06-19 22:38:32 * @Last Modified by: yejiang1015 * @Last Modified time: 2020-08-25 14:12:28 * @Message Mac 系统 */ import Close from './Close'; import Mini from './Mini'; import React from 'react'; import Toggle from './Toggle'; import { remote } from 'electron'; const Wrap: React.FC = () => { const [focus, setFocus] = React.useState(remote.getCurrentWindow().isFocused()); const [hover, setHover] = React.useState(false); React.useEffect(() => { const focusHandle = () => { setFocus(true); }; const blurHandle = () => { setFocus(false); }; remote.getCurrentWindow().on('focus', focusHandle); remote.getCurrentWindow().on('blur', blurHandle); return () => { remote.getCurrentWindow().off('focus', focusHandle); remote.getCurrentWindow().off('blur', blurHandle); }; }, []); const onMouseEnter = () => { /** 失去焦点hover */ if (!remote.getCurrentWindow().isFocused()) { setFocus(true); setHover(true); } else { setHover(true); } }; const onMouseLeave = () => { if (!remote.getCurrentWindow().isFocused()) { setFocus(false); setHover(false); } else { setHover(false); } }; return ( <> <div className="ctl-box" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> <Close focus={focus} hover={hover} /> <Mini focus={focus} hover={hover} /> <Toggle focus={focus} hover={hover} /> </div> <style jsx>{` .ctl-box { display: flex; justify-content: space-between; align-items: center; width: 68px; padding: 0 7.5px; } `}</style> </> ); }; export default Wrap;