Comments (8)
What is the rationale for not wanting to render a Popover per row? E.g.:
- Are you hitting performance problems?
- Is it because you want the Popover to seamlessly transition (animate) to the next clicked row?
from react-popover.
I didn't try to test perfomance, but it's obviously. If I have only one popover, I don't want to have that more.
from react-popover.
The second argument like a feature, ha-ha. And it's pretty cool
from react-popover.
I have not done benchmarks but the Popover is managed by React like any other view I think. If you came with clear benchmark data I would be interested in seeing it. I would also be interested to see (not necessarily accept) a PR. But basically I'm not interested in taking on the complexity of manually recycling Popovers when React already does that via its DOM diffing algorithms.
from react-popover.
@isnifer I replaced the Multiple Trigger demo with a Rows demo that relates to this issue. I have taken a screenshot of the resulting DOM (below). I think its reasonable at this stage to not append a div
for each popover
regardless of its isOpen
state. This is clearly wrong and a good first step to resolve. I still think trying to reuse DOM elements is much more advanced and further complicated by animation timing. If you agree we can make this issue about fixing the latent contains for closed popovers.
from react-popover.
I don't think will be worked on in the foreseeable future so I am going to close it.
from react-popover.
So any approach for possibility of popover to be attached to different elements (Here as well we can reach nice smooth animation). This approach is possible in react-material-ui/Popover, would be nice to have it here as well.
from react-popover.
The one approach I come up with is to target popover to some div, and if I need need popover to appear here or there, I simply append my div to specified element.
<Popover {...popoverProps}>
{/* You may alter height to align position of popover in respect to target */}
<div ref="pop" style={{position: 'absolute', width: '100%', height: '100%',}}/>
</Popover>
OnClick:
onElementClick = (class) => {
let node = document.getElementsByClassName(class)[0];
this.togglePopover(true, node);
}
togglePopover (toState, targetNode) {
const popoverIsOpen = typeof toState === "boolean"
? toState
: !this.state.popoverIsOpen
targetNode.appendChild(this.state.popup); // this.state.popup - is DOM element, not the ref
this.setState({ popoverIsOpen })
}
from react-popover.
Related Issues (20)
- Missing key attribute warning since 0.5.7 upgrade HOT 1
- Popover disappears when moving mouse from trigger element to popover body HOT 1
- This is The worst documentation that I ever seen.... HOT 2
- Popover body is not centered over target HOT 5
- Update react-popover on npm HOT 3
- Add className to target's wrapper easy customization
- Missing License HOT 1
- react 16.6: Cannot read property 'nodeName' of null HOT 1
- Popover doesn't change position according to content in IE11
- Babel config in package.json problem
- Change animation
- Feature request: Add position offset HOT 1
- Feature request: Built in debounce
- Warning: componentWillReceiveProps has been renamed
- CSS-Vendor library is breaking jest tests
- calcSize throws error: Cannot read property 'offsetWidth' of null
- Somehow losing focus in the Popover Body when typing into text input
- appendTarget prop with relative parent calculates wrong position HOT 1
- Abandoned? Release? Or any good alternatives?
- Do we have any provision in this component to align the popover at bottom right
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-popover.