carbon/components/Settings.js

import React from 'react'
import enhanceWithClickOutside from 'react-click-outside'
import SettingsIcon from './svg/Settings'
import ThemeSelect from './ThemeSelect'
import Slider from './Slider'
import Toggle from './Toggle'
import WindowPointer from './WindowPointer'
import { COLORS } from '../lib/constants'

class Settings extends React.Component {
  constructor(props) {
    super()
    this.state = {
      isVisible: false
    }
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    this.setState({ isVisible: !this.state.isVisible })
  }

  handleClickOutside() {
    this.setState({ isVisible: false })
  }

  render() {
    return (
      <div className="settings-container">
        <div
          className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`}
          onClick={this.toggle}
        >
          <SettingsIcon />
        </div>
        <div className="settings-settings">
          <WindowPointer fromLeft="15px" />
          <ThemeSelect onChange={this.props.onChange.bind(null, 'windowTheme')} />
          <Toggle
            label="Drop shadow"
            enabled={this.props.enabled.dropShadow}
            onChange={this.props.onChange.bind(null, 'dropShadow')}
          />
          <Toggle
            label="Window controls"
            enabled={this.props.enabled.windowControls}
            onChange={this.props.onChange.bind(null, 'windowControls')}
          />
          <Slider
            label="Padding (vertical)"
            initialValue={16}
            onChange={this.props.onChange.bind(null, 'paddingVertical')}
          />
          <Slider
            label="Padding (horizontal)"
            initialValue={32}
            onChange={this.props.onChange.bind(null, 'paddingHorizontal')}
          />
        </div>
        <style jsx>{`
          .settings-container {
            display: flex;
            position: relative;
            height: 100%;
            width: 37px;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            color: #fff;
            font-size: 12px;
          }

          .settings-display {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 0.5px solid ${COLORS.SECONDARY};
            border-radius: 3px;
            user-select: none;
            position: relative;
            z-index: 1;
            cursor: pointer;
          }

          .settings-display:hover {
            background: ${COLORS.HOVER};
          }

          .is-visible + .settings-settings {
            display: block;
          }

          .settings-settings {
            display: none;
            position: absolute;
            top: 44px;
            left: 0;
            border: 0.5px solid ${COLORS.SECONDARY};
            width: 184px;
            border-radius: 3px;
            background: ${COLORS.BLACK};
          }

          .settings-settings > :global(div) {
            border-bottom: solid 1px ${COLORS.SECONDARY};
          }

          .settings-settings > :global(div):first-child {
            border-bottom: none;
          }
        `}</style>
      </div>
    )
  }
}

export default enhanceWithClickOutside(Settings)