React-calendar-timeline: Move item without having to select it first

[tuancaraballo]

Hi everyone,

I was wondering if there is currently a way to move an item without having to select it first?

Thank you in advance!

[vasdee]

Do you mean to immediately have an item selected and movable within a single mouse down event? Or controlling an item via some other input source, like a modal or input etc

The latter can be done via controlling the item props array however you wish. Not sure if the former is possible out of the box

[tuancaraballo]

Hi @vasdee , I want to do the first, where I can move an item with just one click: click on an item and be able to move it while holding the mouse down. The same way you do it with any folder in your Mac or PC desktop.

[mcMickJuice]

I agree that this is a little wonky and probably bad UX. I'm not sure why it was originally implemented this way. I'll keep this open as I think you're right that most users would find the current interaction a little clunky.

[maxaggedon]

@tuancaraballo I actually implemented this behaviour. You just need to handle the selected items yourself, using the selected prop of the <Timeline />. Then in your itemRenderer, just add these events to the outer div:

onMouseEnter={() =>
  this.setState({ selected: [...this.state.selected, item.id] })
}
onMouseLeave={() =>
  this.setState({ selected: this.state.selected.filter(id => id !== item.id) })
}

This way, when you hover an item, it is already selected!

[tuancaraballo]

Hi @maxaggedon thank you for sharing it. I will try it out. Thanks a lot !

[mcMickJuice]

@maxaggedon very clever!

[mcMickJuice]

Closing as @maxaggedon has a great workaround. I also think this behavior should be opt-in as there might be users who get frustrated with a timeline that has many items and the only way they can scroll the timeline is by dragging between items.