0

I'm trying to implement a dropzone such as this React Component. However, I'm a bit stuck on how to apply write effects on events, e.g.

dragOver$: DOM
  .select('#dropzone')
  .events('ondragover')
  .map(e => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  })

Which won't work since there is no sink. The code inside map should really be performed inside a sink.

Any suggestions?

ronag
  • 49,529
  • 25
  • 126
  • 221

1 Answers1

1

You should write a simple driver that will handle this. See the docs on drivers here.

It seems like you could do something like this:

function main(sources) {
  return {
    dragOver: DOM.select('#dropzone').events('ondragover')
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  dragOver: (e$ => e$.subscribe(e => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  }))
}

In short: drivers encapsulate all side effects and return inputs from those interfaces, and all side effects in Rx code is constrained to the subscribe argument Observers.

kakigoori
  • 1,218
  • 10
  • 20
  • 1
    There is also an example of a preventDefault driver used here: https://github.com/cyclejs/cycle-examples/blob/master/autocomplete-search/src/main.js#L294 – André Staltz Jan 27 '16 at 11:54