react-component / align Goto Github PK
View Code? Open in Web Editor NEWAbstract React Align
Home Page: http://react-component.github.io/align/
License: MIT License
Abstract React Align
Home Page: http://react-component.github.io/align/
License: MIT License
Online demo: http://codepen.io/anon/pen/peovPZ?editors=0110
When popup node is inserted to body at first time, it will make scrollbar appearing. And the scrollbar affect the position of trigger.
现在,Dropdown有一个bug,如果触发滚动的元素在一个可以滚动的div内,div滚动时dropdown的位置不会更新。
虽然现在有一个getPopupContainer的属性,但是这个属性局限性很大,比如有下面两个问题:
一:zIndex的问题,如果dropdown的popup在div内,有时候会被遮挡。
二:多层滚动嵌套时。
解决方法:监听所有的滚动事件, 只要是trgger的父元素滚动,就重新定位。
这里使用事件捕获而不是事件冒泡,因为滚动事件不会冒泡到根元素。
下面这个PR是我本地用的解决方法,希望把这个特性加进来,代码供参考:
Hi,
I see that you have updated the react dependency from React 15 to React 16 in release 2.3.4 and upwards.
Since there is a major difference in the react dependency, this is breaking the changes where we are using interface/major versions like 2.3.x.
is there any plan for a new major version anytime soon?
Thanks
function onResize([{ target }]: ResizeObserverEntry[]) {
if (!document.documentElement.contains(target)) return; // <-- always return false when in ShadowDOM
const { width, height } = target.getBoundingClientRect();
const fixedWidth = Math.floor(width);
const fixedHeight = Math.floor(height);
https://github.com/react-component/align/blob/master/src/util.ts#L36C5-L36C60
I cannot let the dropdown popup attach outside the ShadowRoot because of style conflicts. Need to add a judgement about whether the target element is in a ShadowRoot which belongs to the currentDocument.
As identified in react-component/slider#409, it looks like the new shallow compare added in b449aba isn't updating when it should, so the tooltip stays put. I don't have the full context for this commit, but it seems like it might be worth rolling back and bumping versions again.
Look here :)
Line 91 in 93641c5
It seems that the onAlign
prop is cached as forceAlignPropsRef.current.onAlign
, such that it can be used inside the callback passed into useBuffer
, using the latest passed in props value.
However, that whole code does not use the forceAlignPropsRef.current.onAlign
value, but the closured onAlign
value instead. I think this is wrong, and I believe it is causing ant-design/ant-design#27018.
It is all already prepared. I think we just have to use onAlign the same way we use disabled
& target
in L67, destructuring it to latestOnAlign
.
I am using antd (4.17.4) and "ResizeObserver loop limit exceeded" still happend when i set "scroll" attribute in Table.
https://codesandbox.io/s/4ovng?file=/src/index.js
Firstly: thanks so much for an awesome set of components! These are really great.
I recently ran into a problem with position: fixed
elements and the Trigger alignment. When using fixed, it will separate from the element and stay behind on the page. I noticed that window resizing fixed this and traced the effect down to this library.
Would you consider a PR that adds a scroll handler to this library? I feel that this could potentially end up having downstream effects on rc-trigger and other libraries that use it. It could potentially hook into the existing startMonitorWindowResize
and monitorBufferTime
properties.
Thanks!
Due to debounce mechanism (function buffer), the forceAlign method may be triggered even after component was removed from DOM tree. This will result in findDOMNode was called on an unmounted component error.
The easy fix is to check if component is mounted, something like
forceAlign() {
const props = this.props;
if (!props.disabled && ReactDOM.isMounted(this)) {
const source = ReactDOM.findDOMNode(this);
props.onAlign(source, align(source, props.target(), props.align));
}
},
but since isMounted method is deprecated, this isn't probably a best solution
<Align target={this.getTarget} align={{points: points, offset: offset, useCssRight: true}} onAlign={this.onAlign.bind(this)} >
I met some strange problem,If I dont use 'useCssRight',the position defaults to using left and top in poistion absolute,If I use that, it became use right,but get wrong top value
as title...
15.5 show deprecation warning. 16.x will not support React.PropTypes
and React.createClass()
.
I will submit PR a little bit later.
rc-align v4.0.3
antd v4.4.3
Line 36 in dbe2466
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected]
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/rc-align/es/util.js b/node_modules/rc-align/es/util.js
index 455ea6d..770697a 100644
--- a/node_modules/rc-align/es/util.js
+++ b/node_modules/rc-align/es/util.js
@@ -24,32 +24,35 @@ export function restoreFocus(activeElement, container) {
export function monitorResize(element, callback) {
var prevWidth = null;
var prevHeight = null;
+ let animationFrame;
function onResize(_ref) {
- var _ref2 = _slicedToArray(_ref, 1),
- target = _ref2[0].target;
+ animationFrame = window.requestAnimationFrame(() => {
+ var _ref2 = _slicedToArray(_ref, 1),
+ target = _ref2[0].target;
- if (!document.documentElement.contains(target)) return;
+ if (!document.documentElement.contains(target)) return;
- var _target$getBoundingCl = target.getBoundingClientRect(),
- width = _target$getBoundingCl.width,
- height = _target$getBoundingCl.height;
+ var _target$getBoundingCl = target.getBoundingClientRect(),
+ width = _target$getBoundingCl.width,
+ height = _target$getBoundingCl.height;
- var fixedWidth = Math.floor(width);
- var fixedHeight = Math.floor(height);
+ var fixedWidth = Math.floor(width);
+ var fixedHeight = Math.floor(height);
- if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
- // https://webkit.org/blog/9997/resizeobserver-in-webkit/
- Promise.resolve().then(function () {
- callback({
- width: fixedWidth,
- height: fixedHeight
- });
- });
- }
+ if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
+ // https://webkit.org/blog/9997/resizeobserver-in-webkit/
+ Promise.resolve().then(function () {
+ callback({
+ width: fixedWidth,
+ height: fixedHeight
+ });
+ });
+ }
- prevWidth = fixedWidth;
- prevHeight = fixedHeight;
+ prevWidth = fixedWidth;
+ prevHeight = fixedHeight;
+ })
}
var resizeObserver = new ResizeObserver(onResize);
@@ -60,5 +63,6 @@ export function monitorResize(element, callback) {
return function () {
resizeObserver.disconnect();
+ window.cancelAnimationFrame(animationFrame)
};
}
This issue body was partially generated by patch-package.
Hello,
The latest release of this project is not React 0.14 compatible and, hence, is the underlying cause of console warning/error messages for its dependents.
Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.
https://github.com/react-component/align/blob/master/src/Align.jsx#L33
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.