Dropdown

dropdown.tsx

import * as React from 'react';
import { css, StyleSheet } from 'aphrodite';

export class Dropdown extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      selectedOption: {}
    };
  }

  toggle(e) {
    const isOpen = !this.state.isOpen;
    this.setState({ isOpen });
  }

  close() {
    this.setState({ isOpen: false });
  }

  selectOption(e, selectedOption) {
    this.setState({ selectedOption });
    this.close();
  }

  render() {
    return (
      <div>
        <div className={css(styles.header)} onClick={e => this.toggle(e)}>
          <div className={css(styles.inline)}>
            {this.state.selectedOption.value || 'Sentiment'}
          </div>
          <div className={css(styles.caret, styles.indent, styles.inline)} />
        </div>
        {this.state.isOpen && (
          <div className={css(styles.content)}>
            {this.props.options.map(o => (
              <div onClick={e => this.selectOption(e, o)} key={o.key}>
                <div className={css(styles.contentItem)}>{o.content}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}

const styles = StyleSheet.create({
  inline: {
    display: 'inline-block'
  },
  header: {
    cursor: 'pointer'
  },
  caret: {
    width: 0,
    height: 0,
    borderLeft: '6px solid transparent',
    borderRight: '6px solid transparent',
    borderTop: '6px solid black',
    content: ''
  },
  indent: {
    marginLeft: '4px'
  },
  content: {
    backgroundColor: 'white',
    position: 'absolute',
    border: '1px solid #ddd',
    borderRadius: '2px'
  },
  contentItem: {
    padding: '3px 6px',
    cursor: 'pointer',
    ':hover': {
      backgroundColor: '#f8f8f8'
    }
  }
});

// Usage
// <Dropdown options={options} />