Observable.fromEventArgs with debounce

by omerts

HTML

<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.4/dist/global/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<div id='app'>
Will render into here
</div>

Babel + JSX

Rx.Observable.fromEventArgs = (eventArgs, uniqueId) => {
  if (!Rx.Observable.fromEventArgs.instances) {
    Rx.Observable.fromEventArgs.instances = []
  }
  
  // If instance is found, it is already listening to events, so no need to return it
  if (!(uniqueId in Rx.Observable.fromEventArgs.instances)) { 		
    Rx.Observable.fromEventArgs.instances[uniqueId] = 
      Rx.Observable.fromEvent(event.target, event.type).startWith(event).finally(() => {
        delete Rx.Observable.fromEventArgs.instances[uniqueId]
      })
      
    return Rx.Observable.fromEventArgs.instances[uniqueId]
  }  
  
  // Do nothing after inited
  return Rx.Observable.empty()
}
    
const handler = (e) => {      	
  Rx.Observable
    .fromEventArgs(e, 'UniqueKey') 
    .debounceTime(1000)        
    .subscribe(x => console.log('Send an action', x))
}

ReactDOM.render( <button onClick={handler}>Click Me</button>, document.querySelector('#app'))