Awesome
React Timeline 9000
A performance focused timeline component in react
Build Status
Demo
Documentation
Getting Started
| Action | Command |
|---|---|
| Build | $ make |
| Test | $ make test or $ make test-watch |
| Run dev server | $ make run |
- Add
import react-timeline-9000/lib/style.css(or use your own styles based on this file)
Contributing
Feel free to make a PR :)
Interaction
Default interaction for multiple selection is largely governed by the leading item, which is defined as the item that is directly interacted with when multiple items are selected.
Dragging
All items will move by the same horizontal delta and row changes will be calculated by the row delta of the leading item
Resizing
All items will gain the resize delta from the leading item.
Overriding the default behaviour
TBA
onInteraction(type, changes, leadTimeDelta, leaderGroupDelta,selectedItems)
Props Summary
See http://react-timeline-9000.s3-website-ap-southeast-2.amazonaws.com/docs/ for detailed docs
Props
| Name | Default | Description |
|---|---|---|
| groupOffset | ||
| startDate | ||
| endDate | ||
| snapMinutes | ||
| showCursorTime | ||
| cursorTimeFormat | ||
| itemHeight | ||
| timelineMode | ||
| timebarFormat | ||
| itemRenderer | ||
| groupRenderer | ||
| shallowUpdateCheck | False | If true timeline will try to minimize re-renders . Set to false if items don't show up/update on prop change |
| forceRedrawFunc | () => False | Function called when shallowUpdateCheck==true. If returns true the timeline will be redrawn. If false the library will decide if redrawing is required |
| useMoment | True | If true timeline will use moment for dates (including for items and rowLayers); otherwise the type for dates is number |
Data
| Name |
|---|
| items |
| groups |
| selectedItems |
Callbacks
| Name |
|---|
| onItemClick |
| onItemDoubleClick |
| onItemContext |
| onInteraction |
| onRowClick |
| onRowContext |
| onRowDoubleClick |
| onItemHover |
| onItemLeave |
Styling
- View
src/style.cssfor styling examples. - For the default styles, import
react-timeline-9000/lib/style.css
Default Z-indexes
| Item | Index |
|---|---|
| Row Layers | 1 |
| Vertical markers | 2 |
| Timeline items | 3 |
| Timeline items when dragging/resizing | 4 |
| Selection box (for multi-select) | 5 |
| Group column | 6 |