| 101 | ); |
| 102 | }, |
| 103 | renderDropdownMenuBackground () { |
| 104 | if (!this.state.isOpen) return null; |
| 105 | return <div className="Dropdown-menu-backdrop" onClick={this.closeDropdown} />; |
| 106 | }, |
| 107 | render () { |
| 108 | // classes |
| 109 | var dropdownClass = classNames('Dropdown', { |
| 110 | 'is-open': this.state.isOpen, |
| 111 | 'align-right': this.props.alignRight, |
| 112 | }, this.props.className); |
| 113 | |
| 114 | // props |
| 115 | var props = blacklist(this.props, 'alignRight', 'buttonHasDisclosureArrow', 'buttonLabel', 'buttonType', 'className', 'isOpen', 'items'); |
| 116 | |
| 117 | return ( |
| 118 | <span className={dropdownClass} {...props}> |
| 119 | {React.Children.count(this.props.children) ? this.renderChildren() : this.renderButton()} |
| 120 | <Transition transitionName="Dropdown-menu" transitionEnterTimeout={100} transitionLeaveTimeout={100}> |
| 121 | {this.renderDropdownMenu()} |
| 122 | </Transition> |
| 123 | {this.renderDropdownMenuBackground()} |
| 124 | </span> |
| 125 | ); |
| 126 | }, |
| 127 | }); |