关于useState useEffect
2019-10-16 本文已影响0人
码萌
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import CX from 'classnames'
import './index.less'
function WindowOperaButtonsForMac(props) {
const { style, enableResize } = props
const {
WindowStateAction, listenToWindowStateChange, getWindowState, WINDOW_STATE,
} = require('~/shared/utils/windowState')
const currentWindow = require('electron').remote.getCurrentWindow()
const [isMaximized, setIsMaximized] = useState(currentWindow.isMaximized())
const wrapperStyle = _.assign({}, style)
const handleMaximize = () => {
setIsMaximized(currentWindow.isMaximized())
}
useEffect(() => {
return listenToWindowStateChange(handleMaximize)
})
return (
<div className="window-opera-buttons-for-mac-component-wrap" style={wrapperStyle}>
<span
className="btn btn-close"
onClick={() => {
WindowStateAction.close()
}}
role="button"
tabIndex={0}
/>
<span
className="btn btn-minimize"
onClick={() => {
WindowStateAction.minimize()
}}
role="button"
tabIndex={0}
/>
<span
className={CX({
btn: true,
'btn-maximize': isMaximized === false,
'btn-unmaximize': isMaximized === true,
'btn-maximize-disabled': enableResize === false,
})}
onClick={() => {
if (enableResize === false) {
return
}
const state = getWindowState(currentWindow)
if (state === WINDOW_STATE.MAXIMIZED) {
WindowStateAction.unmaximize()
} else if (state === WINDOW_STATE.NORMAL) {
WindowStateAction.maximize()
}
}}
role="button"
tabIndex={0}
/>
</div>
)
}
WindowOperaButtonsForMac.propTypes = {
style: PropTypes.object,
enableResize: PropTypes.bool,
}
WindowOperaButtonsForMac.defaultProps = {
style: {},
enableResize: false,
}
export default WindowOperaButtonsForMac