popup-dispatcher

Incapsulation of mouse and time wathchers to hide popup controls or windows on web page

SYNOPSIS

class Dropdown extends React.Component {
  static defaultProps = {
    items: ['item1', 'item2', 'item3'],
  }
  constructor(props){
    super(props)
    this.state = {
      opened: false,
      current: '...'
    }
    this.disp = new PopupDispatcher
    this.disp.on('done', () => this.setState({opened:false}) )
  }

  handleClick = () => {
    this.setState({ opened: ! this.state.opened })
  }

  handleSelect = (item) => {
    this.setState({current: item}),
    this.disp.finish()
  }

  render() {
    if( this.state.opened ) this.disp.start()
    return (
      <div>

        <a {...this.disp.props({})} onClick={this.handleClick}>
          <span>{this.state.current}</span>
        </a>

        <ul {...this.disp.props({onMouseOver:()=>console.log('we need this handler too')})}>
          { this.props.items.map( (item,i) => (
            <li onClick={()=> this.handleSelect(item)}>
              <a href="#">{item}</a>
            </li>
          ) ) }
        </ul>

      </div>
    )
  }
}

Methods

• start() - enable
• stop() - disable
• watch() - begin watch timer, called from onMouseOut() returned by props()
• unwatch() - cancel watch timer, called from onMouseOver() returned by props()
• props() - props filter for component to watch