fiveStarsRating.js

import xs from 'xstream';
import { run } from '@cycle/xstream-run';
import { makeDOMDriver, div, span } from '@cycle/dom';


// -- INTENT

// intent : domSource -> actions streams$
function intent(domSource) {
  return {
    changeRate$: domSource.select('span').events('click')
                 .map(ev => ev.target.attributes.getNamedItem('data-rate').value),
    
    changeTempRate$: domSource.select('span').events('mouseover')
                     .map(ev => ev.target.attributes.getNamedItem('data-rate').value),
    
    changeMouseout$: domSource.select('span').events('mouseout')
                     .map(ev => false)
  }
}


// -- MODEL

// model : actions streams$ -> state$
function model(actions) {
  const rate$ = actions.changeRate$.startWith(0);
  const tempRate$ = actions.changeTempRate$.startWith(0);
  const mouseOut$ = actions.changeMouseout$.startWith(false);
  const showTemp$ = xs.merge(tempRate$, mouseOut$).drop(1).map(val => Boolean(val));
  const maxRate = 5;

  return xs.combine(rate$, tempRate$, showTemp$)
    .map(([rate, tempRate, showTemp]) => (
        { rate, tempRate, showTemp, maxRate }
    ));
}


// -- VIEW

// view: state$ -> vdom$
function view(state$) {
  return state$.map(({rate, tempRate, showTemp, maxRate}) => {
    const stars = [...Array(maxRate).keys()];
    const rateValue = showTemp ? tempRate : rate;

    return div('.rating',
      stars.map(star =>
        span({ attrs: { class: rateValue >= star + 1 ? 'active':'', 'data-rate': star + 1} }, '\u2605'))
    );
  })
}


function main({ DOM }) {
  return {
    DOM: view(model(intent(DOM)))
  }
}

run(main, {
  DOM: makeDOMDriver('#app')
});