class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.toggleDropdown = this.toggleDropdown.bind(this);
  }

  onOpen(event) {
    this.setState({ isOpen: true });
  }

  onClose(event) {
    // Prevent extra call to toggleDropdown when clicking the controlling button.
    // Also avoid interactions with other dropdowns.
    const demoLayoutNode = this.demoLayout;
    if (
      !event.nativeEvent &&
      demoLayoutNode &&
      demoLayoutNode.contains(event.target)
    ) {
      event.stopImmediatePropagation();
    }

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


  toggleDropdown(event) {
    if (this.state.isOpen) {
      this.onClose(event);
    } else {
      this.onOpen(event);
    }
  }

  render() {
    const label = this.state.isOpen ? 'Close Dropdown' : 'Open Dropdown';
    return (
      <DemoLayout ref={node => { this.demoLayout = node }}>
        <Dropdown
          data={data}
          isOpen={this.state.isOpen}
          onOpen={this.onOpen}
          onClose={this.onClose}>
          <Button>{label}</Button>
        </Dropdown>
        <Button onClick={this.toggleDropdown}>{label}</Button>
      </DemoLayout>
    );
  }
}