Microsoft Windows window controls

WindowsWindowControls.jsx

import React, { Component } from 'react';
import _ from 'lodash';
import classnames from 'classnames';
import { remote } from 'electron';

class WindowsWindowControls extends Component {
  state = {
    fullscreen: false,
    blur: false,
  };

  componentDidMount() {
    window.addEventListener('blur', this.handleBlur);
    window.addEventListener('focus', this.handleFocus);
    window.addEventListener('resize', this.handleResize);

    this.setFullscreenStateFromBrowserWindow();
  }

  componentWillUnmount() {
    window.removeEventListener('blur', this.handleBlur);
    window.removeEventListener('focus', this.handleFocus);
    window.removeEventListener('resize', this.handleResize);
  }

  setFullscreenStateFromBrowserWindow = () => {
    const browserWindow = remote.BrowserWindow.getFocusedWindow();

    if (browserWindow) {
      this.setState({
        ...this.state,
        fullscreen: browserWindow.isMaximized(),
      });
    }
  }

  handleResize = _.debounce(() => {
    this.setFullscreenStateFromBrowserWindow();
  }, 400);

  handleBlur = () => {
    this.setState({
      ...this.state,
      blurred: true,
    });
  }

  handleFocus = () => {
    this.setState({
      ...this.state,
      blurred: false,
    });
  }

  handleMaximize = (event) => {
    const { onMaximize } = this.props;
    const { fullscreen } = this.state;

    this.setState({
      ...this.state,
      fullscreen: !this.state.fullscreen,
    });

    onMaximize();
  }

  render() {
    const {
      onClose,
      onMinimize,
    } = this.props;

    const {
      blurred,
      fullscreen,
    } = this.state;

    const className = classnames({
      'windows-window-controls': true,
      blurred,
      fullscreen,
    });

    return (
      <div className={className}>
        <div className="minimize" onClick={onMinimize}>
          <svg x="0px" y="0px" viewBox="0 0 10 1">
            <rect fill="#000000" width={10} height={1} />
          </svg>
        </div>
        <div className="maximize" onClick={this.handleMaximize}>
          <svg className="maximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
            <path fill="#000000" d="M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z " />
          </svg>
          <svg className="unmaximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
            <mask id="Mask">
              <rect fill="#ffffff" width={10} height={10} />
              <path fill="#000000" d="M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z" />
              <path fill="#000000" d="M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z" />
            </mask>
            <path fill="#000000" d="M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z" mask="url(#Mask)" />
          </svg>
        </div>
        <div className="close" onClick={onClose}>
          <svg x="0px" y="0px" viewBox="0 0 12 12">
            <polygon fill="#000000" points="12,1 11,0 6,5 1,0 0,1 5,6 0,11 1,12 6,7 11,12 12,11 7,6" />
          </svg>
        </div>
        <style jsx>{`
          .windows-window-controls {
            -webkit-app-region: no-drag;

            &.blurred:not(:hover) svg {
              opacity: 0.6;
            }

            &:not(.fullscreen) .maximize svg.unmaximize-svg { display: none; }
            &.fullscreen .maximize svg.maximize-svg { display: none; }
          }

          .minimize,
          .maximize,
          .close {
            -webkit-app-region: no-drag;
            float: left;
            width: 45px;
            height: 29px;
            margin: 0 0 1px 1px;
            text-align: center;
            line-height: 29px;
            transition: background-color .2s;

            & svg {
              width: 10px;
              height: 10px;
            }
          }

          .close svg polygon {
            transition: fill .2s;
          }

          &.fullscreen {
            & .minimize,
            & .maximize,
            & .close {
              height: 21px;
              line-height: 21px;
            }
          }

          .minimize:hover,
          .maximize:hover {
            background-color: rgba(127,127,127, 0.2);
          }

          .close:hover {
            background-color: #E81123;

            & svg polygon {
              fill: #fff;
            }
          }

          svg {
            & > rect,
            & > polygon,
            & > path {
              fill: #fff;
            }
          }
        `}</style>
      </div>
    );
  }
}

export default WindowsWindowControls;