美文网首页
关于useState useEffect

关于useState useEffect

作者: 码萌 | 来源:发表于2019-10-16 17:26 被阅读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
    
    

    相关文章

      网友评论

          本文标题:关于useState useEffect

          本文链接:https://www.haomeiwen.com/subject/pomumctx.html