Comments (5)
Same here, it has to do with re-rendering. If you try to zoom in you will now be able to stop getting that error and everything runs normal again. Looking for a workaround
from react-calendar-timeline.
@janckk so i should reduce re-rending counts?
from react-calendar-timeline.
Haven't found a solution yet. But if I zoom in and out the rerendering happens. Because if I push the new prop to the timeline I don't see immediate result. For example: I push another item and I only see it displayed after zoom in/out or when I drag other already existing items. If you add a new item you see it immediately rendered?
from react-calendar-timeline.
Hey, the timeline expects your items
and groups
arrays, and actually all other props as well, to be immutable. That means if you change something in items
, you must pass it a new array with new items. Just adding something into the existing array will not work.
The sortedDimensionItems
array is only updated when this condition is met:
nextProps.items !== this.props.items || nextProps.groups !== this.props.groups
That means, don't mutate your items array, pass in a new items array.
from react-calendar-timeline.
For some example code, I assume this is what you currently do:
var items = []
<Timeline items={items} />
items.push({id: 1})
items.push({id: 2})
items.push({id: 3})
But this is what you should be doing:
var items = []
<Timeline items={items} />
items = items.concat([{id: 1}])
items = items.concat([{id: 2}])
items = items.concat([{id: 3}])
This makes the timeline aware that the items array changed. Otherwise it's not smart (nor fast) enough to check every element inside items for changes.
from react-calendar-timeline.
Related Issues (20)
- Issue with getSumScroll Function while dragging the item using drag handle or by moving the item
- groupRenderer does not work correctly HOT 1
- Feature Request: Allow the user to replace the timeline header with a number range HOT 1
- Provide a week view to the DateHeader component with unit="primaryHeader".
- Dragging item scrolls the timeline
- Legacy context API has been detected within a strict-mode tree HOT 2
- Customizing main header - Is it possible to render day index instead of dates? HOT 1
- Can we have an array of Tittles in Items HOT 1
- Need a way to make a calendar item the full height of the row HOT 3
- Remove usage of moment library entirely HOT 2
- how can i provide minimun fixedwidth for date so that i can mention another values with date also like count for that date etc HOT 1
- Stacking only enforced when times overlap
- i want to keep unit zoom level
- Scroll Bug HOT 3
- Selecting different cells in parallel
- Drag and drop items between different timelines
- Style horizontal line per hour ?
- Lack of Touch Event Handling in onCanvasContextMenu
- Touchpad scrolling is very fast and broke timeline
- Question: How to add hover effect on each cell separately? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-calendar-timeline.