I can't delete components that I have already shown because of ads placed in items of the list.
(Here is description why I can't delete ads)
So I want to virtualize only items below and when I'm scrolling down do not delete items that I have already shown already.
Current behavior:
Expected behavior:
Without logs from componentWillUnmount
(Bottom components still virtualized and won't mounting)
Here's a CodeSandbox example!
Or maybe somebody nows another tool that can help me?
Related
I want to be able to drag, rearrange, and move them from 1 list to another. Functionally it currently partially works in that you can drag an item once and it updates but after that you can no longer move the items inside the list.
Example here:
https://codesandbox.io/s/react-dnd-multiple-lists-8z7vs?file=/src/question.tsx
Any hints or pointers would be very helpful.
Thanks
I have created a new example here:
https://codesandbox.io/s/eager-perlman-zs3xm?file=/src/Container.tsx
It is simplified, I am now able to drag a component from one section to another. But it seems to bug out when trying to drag from one to another.
I'm new with react native, and I'm trying to achieve the exact same effect as Instagram or TikTok when you click an item in a gridview it opens up a listview with details of the items with a zoom in effect.
For now, I have a gridview, where data load with a limit of 10 items and when reaching the end gets the next 10 items. In order to try and achieve what I want to do, been searching but can't seem to figure out the right approach.
Should I have both list in the same screen, but how do I get the app to do the zoom in effect and open the detail view at the right index item ? Or should I have both list in separate views, but how do I keep the data synced ? Or is there another way that I'm missing and keep seem to find ?
Image might help understand (taken from instagram)
As anyone can notice it, in the schedule external drag drop demo , someone can drag the event from the TreeView list and when it get near to the right page edge then the page scrolls to the right.
Here is a screenshot showing it.
It's occuring also in our app and it's rather annoying.
We wish there will be a fix for this issue.
Greetings from Syncfusion Support.
We have checked your reported problem that dragging a TreeView node that produces the scroller in the output web page. Currently, we don’t have any property to prevent the scroll when dragging a TreeView node. However, we have already considered this as a feature from our end. It will be included in our Volume 2 Release which is expected to be released in June 2020.
Track the below link to know the feature status.
https://www.syncfusion.com/feedback/13575/need-to-provide-the-option-to-set-the-drag-area-in-treeview-component
But, you can resolve your issue by setting the target for dragArea of TreeView’s drag object in the created event. When setting the target, you can drag the element only inside the target element. It prevents the element from scrolling exceeding that element.
Please, check out the sample with the above explained solution.
Sample: https://stackblitz.com/edit/react-jqzozo-gqpyve?file=index.js
onCreate(){
this.treeObj.dragObj.dragArea = "body";
}
With react-sortable-hoc I am unable to set the DragImage.
I have elements that take up a large amount of DOM space and it is hard to manage from a user experience perspective.
In my example, when the user starts to drag the items are collapsed, however the drag image is still full size, causing confusion.
I created a CodeSandbox link to demo my problem, however my actual production application takes up much more space.
UPDATE
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.
The problem now:
The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:
================= Here is where the image ends ================
I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?
react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.
What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.
I've used tajo/react-portal in the past for this.