import React from 'react'
import classnames from 'classnames'
import { Backdrop } from './Backdrop'

export interface DropdownProps {
  label: string | React.ReactElement
  children: React.ReactElement<{onClick: () => void}>[]
}

export interface DropdownState {
  open: boolean
}

export class Dropdown
extends React.PureComponent<DropdownProps, DropdownState> {
  state = { open: false }

  handleClick = () => {
    this.setState({ open: !this.state.open })
  }
  close = () => {
    this.setState({ open: false })
  }
  render() {
    const { handleClick } = this
    const classNames = classnames('dropdown-list', {
      'dropdown-list-open': this.state.open,
    })

    const menu = React.Children.map(
      this.props.children,
      child => {
        const onClick = child.props.onClick
        return React.cloneElement(child, {
          ...child.props,
          onClick: () => {
            handleClick()
            onClick()
          },
        })
      },
    )

    return (
      <div className='dropdown'>
        <button onClick={handleClick} >{this.props.label}</button>
        <Backdrop visible={this.state.open} onClick={this.close} />
        <ul className={classNames}>
          {menu}
        </ul>
      </div>
    )
  }
}

import React from 'react'
import classnames from 'classnames'

export interface DropdownProps {
  label: string | React.ReactElement
  children: React.ReactElement<{onClick: () => void}>[]
}

export interface DropdownState {
  open: boolean
}

export class Dropdown
extends React.PureComponent<DropdownProps, DropdownState> {
  state = { open: false }

  handleClick = () => {
    this.setState({ open: !this.state.open })
  }
  close = () => {
    this.setState({ open: false })
  }
  render() {
    const { handleClick } = this
    const classNames = classnames('dropdown-list', {
      'dropdown-list-open': this.state.open,
    })

    const menu = React.Children.map(
      this.props.children,
      child => {
        const onClick = child.props.onClick
        return React.cloneElement(child, {
          ...child.props,
          onClick: () => {
            handleClick()
            onClick()
          },
        })
      },
    )

    return (
      <div className='dropdown'>
        <button onClick={handleClick} >{this.props.label}</button>
        <ul className={classNames}>
          {menu}
        </ul>
      </div>
    )
  }
}

Remove backdrop from regular dropdown
Remove backdrop from regular dropdown

Backdrop causes video menu to be unclickable
