react-timeline-9000

by BHP-DevHub

BHP-DevHub /react-timeline-9000

React Timeline

157 Stars 16 Forks Last release: 7 months ago (v1.0.16) MIT License 425 Commits 26 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Timeline 9000

A performance focused timeline component in react

Build Status

Build Status CodeFactor npm (scoped)

Demo

  • http://bhp-react-timeline-9k.s3-website-ap-southeast-2.amazonaws.com/

Documentation

  • http://bhp-react-timeline-9k.s3-website-ap-southeast-2.amazonaws.com/docs/

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://bhp-react-timeline-9k.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 |

Data

| Name | | ---------------- | | items | | groups | | selectedItems |

Callbacks

| Name | | ---------------- | | onItemClick | | onItemDoubleClick | | onItemContext | | onInteraction | | onRowClick | | onRowContext | | onRowDoubleClick | | onItemHover | | onItemLeave |

Styling

  • View
    src/style.css
    for 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 |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.