react-component / align Goto Github PK

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

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.

rc-align v4.0.3
antd v4.4.3

<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

Look here :)

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.

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

现在，Dropdown有一个bug，如果触发滚动的元素在一个可以滚动的div内，div滚动时dropdown的位置不会更新。
虽然现在有一个getPopupContainer的属性，但是这个属性局限性很大，比如有下面两个问题：
一：zIndex的问题，如果dropdown的popup在div内，有时候会被遮挡。
二：多层滚动嵌套时。

解决方法：监听所有的滚动事件, 只要是trgger的父元素滚动，就重新定位。
这里使用事件捕获而不是事件冒泡，因为滚动事件不会冒泡到根元素。

下面这个PR是我本地用的解决方法，希望把这个特性加进来，代码供参考：

#126

Online demo: http://codepen.io/anon/pen/peovPZ?editors=0110

What is happening?

1. hover the trigger first time, the position of popup node is a little lefter.
2. hover the trigger second time, the position of popup node will be correct.

Condition

• trigger is positioned to right edge.
• body height is 100%.

Why

When popup node is inserted to body at first time, it will make scrollbar appearing. And the scrollbar affect the position of trigger.

as title...

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.

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

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

15.5 show deprecation warning. 16.x will not support React.PropTypes and React.createClass().

I will submit PR a little bit later.

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!