standard-resume/lib/Dropdown.js

The Standard Resume ReactJS component.

'use strict';

var React = require('react');

var Dropdown = React.createClass({
  displayName: 'Dropdown',

  propTypes: {
    toggleTarget: React.PropTypes.element.isRequired,
    align: React.PropTypes.oneOf(['right', 'left'])
  },

  getInitialState: function getInitialState() {
    return {
      open: false
    };
  },

  getDefaultProps: function getDefaultProps() {
    return {
      align: 'left'
    };
  },

  render: function render() {
    return React.createElement(
      'div',
      { className: 'c-dropdown' },
      React.createElement(
        'div',
        { className: 'toggle-target', onClick: this.toggleDropdown },
        this.props.toggleTarget
      ),
      this.state.open && React.createElement(
        'div',
        null,
        React.createElement(
          'ul',
          { className: 'dropdown-contents ' + this.props.align },
          this.props.children
        ),
        React.createElement('div', { onClick: this.toggleDropdown, className: 'dropdown-overlay' })
      )
    );
  },

  toggleDropdown: function toggleDropdown(e) {
    this.setState({ open: !this.state.open });
  }

});

module.exports = Dropdown;