zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-12 11:03:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] layout measurement API consistency with React Native

Browse Source 
* Ignore CSS transforms in measurement.
* Cancel measurement if elements are unmounted.

Close #2501
Fix #1254
This commit is contained in:
LucioChavezFuentes
2023-02-27 14:32:21 -06:00
committed by Nicolas Gallagher
parent 782a19a54e
commit 03ddd95590
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/react-native-web/src/exports/UIManager/index.js vendored
View File

@@ -7,28 +7,38 @@
* @noflow
*/
import getBoundingClientRect from '../../modules/getBoundingClientRect';
import setValueForStyles from '../../modules/setValueForStyles';
const getRect = (node) => {
// Unlike the DOM's getBoundingClientRect, React Native layout measurements
// for "height" and "width" ignore scale transforms.
// https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
const { x, y, top, left } = getBoundingClientRect(node);
const width = node.offsetWidth;
const height = node.offsetHeight;
return { x, y, width, height, top, left };
const width = node.offsetWidth;
let left = node.offsetLeft;
let top = node.offsetTop;
node = node.offsetParent;
while (node && node.nodeType === 1 /* Node.ELEMENT_NODE */) {
left += node.offsetLeft + node.clientLeft - node.scrollLeft;
top += node.offsetTop + node.clientTop - node.scrollTop;
node = node.offsetParent;
}
top -= window.scrollY;
left -= window.scrollX;
return { width, height, top, left };
};
const measureLayout = (node, relativeToNativeNode, callback) => {
const relativeNode = relativeToNativeNode || (node && node.parentNode);
if (node && relativeNode) {
setTimeout(() => {
const relativeRect = getBoundingClientRect(relativeNode);
const { height, left, top, width } = getRect(node);
const x = left - relativeRect.left;
const y = top - relativeRect.top;
callback(x, y, width, height, left, top);
if (node.isConnected && relativeNode.isConnected) {
const relativeRect = getRect(relativeNode);
const { height, left, top, width } = getRect(node);
const x = left - relativeRect.left;
const y = top - relativeRect.top;
callback(x, y, width, height, left, top);
}
}, 0);
}
};