gabrielbull/react-desktop

import React, { Component } from 'react';
import Radium, { getState } from 'radium';
import WindowFocus from '../../../windowFocus';
import { themeContextTypes } from '../../../style/theme/windows';
import { backgroundContextTypes } from '../../../style/background/windows';
import { isDarkColor } from '../../../color';

const styles = {
  button: {
    WebkitUserSelect: 'none',
    userSelect: 'none',
    WebkitAppRegion: 'no-drag',
    cursor: 'default',
    width: '46px',
    height: '100%',
    lineHeight: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',

    ':hover': {
      transition: 'background-color 0.1s',
      backgroundColor: '#e81123',
    },

    ':active': {
      backgroundColor: '#f1707a',
    }
  },

  icon: {
    width: '10px',
    height: '10px'
  }
};

@WindowFocus()
@Radium
class Close extends Component {
  static contextTypes = {
    ...themeContextTypes,
    ...backgroundContextTypes
  };

  render() {
    const { style, isWindowFocused, ...props } = this.props;

    let svgFill = '#000000';
    if (!isWindowFocused && this.context.theme !== 'dark') {
      svgFill = 'rgba(0, 0, 0, .4)';
    }

    let componentStyle = { ...styles.button, ...style };
    if (this.context.theme === 'dark' || this.context.background && isDarkColor(this.context.background)) {
      svgFill = '#ffffff';
      componentStyle = { ...componentStyle, ...styles.buttonColorBackground };
    }

    if (getState(this.state, null, ':active')) {
      svgFill = '#000000';
    } else if (getState(this.state, null, ':hover')) {
      svgFill = '#ffffff';
    }

    return (
      <a
        title="Close"
        style={componentStyle}
        {...props}
      >
        <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" style={styles.icon}>
          <polygon
            fill={svgFill}
            points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "
          />
        </svg>
      </a>
    );
  }
}

export default Close;