HttpButton(sources, props) ⇒ Object

Displays a Button that is able to be shown as button or as loading spinner. Instalation:

$ npm install --save git+https://github.com/chrisAu4000/cycle-http-button.git

Kind: global function
Returns: Object - { DOM :: vtree, clicked$ :: Stream }

Param	Type	Default	Description
sources	Object		Source streams.
sources.DOM	DOMSource		DOMDriver to select elements and invoke events.
props	Stream		Contains the initial state of the HttpButton.
props.text	String		Stream of Strings that will be displayed as button text.
props.loading	Boolean		Stream of Booleans true if button is in loading state.
props.duration	Number		Transition duration.
[props.className]	String		Additional className.
[props.easing]	function	linear ease	xstream/extra/tween easing function.

Example (app.js)

import xs from 'xstream'
import delay from 'xstream/extra/delay'
import tween from 'xstream/extra/tween'
import concat from 'xstream/extra/concat'
import fromDiagram from 'xstream/extra/fromDiagram'
import HttpButton from './components/http-button'

function main(sources) {
  const duration = 250
  const resetProxy$ = xs.create()
  const props1 = {
    text:     'Signin',
    loading:  false,
    duration: duration,
    className:'test',
    easing:   tween.power2.easeOut
  }
  const props2 = {
    text:     'Loading...',
    loading:  true,
    duration: duration,
    easing:   tween.power2.easeIn
  }
  const props$ = fromDiagram('-a--------------------------------------------b--------------------------------------------a-')
    .map(x => x === 'a' ? props1 : props2)
    .compose(delay(1000))
  const {DOM, clicked$} = HttpButton(sources, xs.merge(props$, resetProxy$))
  resetProxy$.imitate(clicked$.mapTo(props1).compose(delay(4 * duration)))

const drivers = {
  DOM: makeDOMDriver('#app')
}

run(main, drivers)