react9k / react-timeline-9000 Goto Github PK

The sample style.css should not be required (by doing to it breaks webpack)

• Remove hard dependency on style.css
• Allow for manual import (import eact-timeline-9000/style.css)
• Make sure demo still uses the stylesheet

Performance test full screen of activities (1000s) with dragging/click events working

Allow the timeline to accept a render prop to allow the user to render a custom item

It never loads.

OnRowDoubleClick's rowNumber argument is a string - should be a number

Prove that the timeline can work with moment-timezone.

Perhaps a switcher or +800/+1200 TZ offset is all that is required.

There is a lot of console logging that should be removed

During the dragmove event, investigate if it is possible to show the items colliding and moving out of the way as it happens.

This could have performance impacts and isn't strictly necessary for the timeline to operate.

Much like the today line in the current timeline or the current mouse position.

Implement this for reacting to changes on the timeline, eg moves and resizes.

This will allow the user to decide exactly what happens when an interaction occurs, ranging from stopping an element from moving entirely, to restricting resizing to a max or min size

https://github.com/paypal/downshift#statereducer

I assume this occurs for the bottom row as well.

If you have multiple items selected across multiple rows and drag from the bottom-most item, you can push the top item beyond row 0. Once you end the drag, the item snaps back ( correctly ) to row 0, however it would be nice if the animation reflected what is actually happening.

Need to prove that click events on the canvas can be translated to a time reference. This is to facilitate adding a new item to the timeline.

An item can be resized to the point of disappearing completely. We need to restrict it to the perhaps the snap distance?

Demo should include:

• Zoom controls
• Left & Right buttons
• Add/Remove selected activity

Checking if date is in range is buggy

Opening the demo under IE11 returns a blank page.

EXPECT:

• Single click on an item in the demo should select the item.

ACTUAL:

• Clicking on an item does nothing

Update the readme to be a bit more relevant

In the demo, if i select an item(s) then scroll down to effectively push that item off of the screen ( and presumably have it de-rendered by react-virtualised) then initiating another drag event will break the timeline as the selected items prop doesn't match what is shown.

If it is up to the user to keep track of what should be in selected, then the timeline should at least handle these errors gracefully.

depends on the selected prop feature first.

enable multiple drag and drop

Re-render grid on window resize

only applies to dragging multiple allows, change the selection prop to handle and array of objects to facilitate multiple items moving across different ranges

When zooming in/out the selection rectangle stops following the mouse exactly.

Note how the top time bar says the entire range is "Jan", even though it transitions to Feb on the bottom bar half way through

Prevent the item click being triggered during resize and drag events. At the moment at the end of an interaction, the event is triggered, which causes the parent component to de-select the item.

Add a style class that identifies selected items

Drive the selected items purely via prop input

This could simplify the logic of having to know the exact heights of each row, instead interact css will encapsulate the entire row and then we are only concerned with the collisions.

react-virtualised collection integrated with interactjs (or other) to prove dragging works

interactjs might be able to do the heavy lifting for us on this one.

Ideally what should happen is controllable by the end user (ie maybe a user wants it to overlap?) but for starters, getting the items to stack would be a good result

Item Level:

• Click
• DoubleClick
• Context

Canvas:

• Click
• DoubleClick

use react-virtualized collection to show a mock timeline

Get the following error on load - doesnt seem break anything though:

Warning: `NaN` is an invalid value for the `left` css style property. Check the render method of `SelectBox`.

Pretty up the default CSS for the demo

Allow the user to define how to animate the items during an dragmove or resizemove event.
The timeline should pass in options for each of the select items such as the dx, current width, x, y ( basically rectangle properties) and the user can simply return the proposed changes to accept them, or define their own.

This should facilitate the user being able to define custom scenarios during multi-selected drag and resize events.

Add classnames/ids to the following tags

Factor in the snapping logic into the resize and drag events.

Proposing

allowedInteractionTypes = select | resize | drag | null as a bitmask perhaps?

This will allow user to effectively make the timeline readonly in combination with selectedItems

Allow individual items to be selectable/resized/dragged

When you drag/resize an item it becomes 'selected'

If this is possible, contain the group list as its own column, as opposed to it being a separate component kept in sync with the grid.

User defined time snapping, that could then be integrated into the getTimeAtPixel functions to return the closest snap time.

Do you guys have a roadmap of features you want to add? Or are there plans for adding left/right scrolling?

I've been doing work to improve performance on react-calendar-timeline, but you guys have already solved the problem of many thousands of items in potentially hundreds of groups.

We're currently at a crossroads of whether it will be less effort to change our current implementation to meet performance, or do we port across to this and add the features it is missing.

Allow the timeline to accept a render prop that will render the group sidebar elements.

• Need to change index.js to export the timeline - not the demo