kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-18 12:12:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] measure CSS layout independent of transforms

Browse Source 
Fix #332
This commit is contained in:
Nicolas Gallagher
2017-01-28 10:37:49 -08:00
parent e06d7a9650
commit a8a25d66ea
2 changed files with 14 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/apis/UIManager/__tests__/index-test.js
View File

@@ -10,114 +10,7 @@ const createNode = (style = {}) => {
return root;
};
let defaultBodyMargin;
describe('apis/UIManager', () => {
beforeEach(() => {
// remove default body margin so we can predict the measured offsets
defaultBodyMargin = document.body.style.margin;
document.body.style.margin = 0;
});
afterEach(() => {
document.body.style.margin = defaultBodyMargin;
});
describe('measure', () => {
test('provides correct layout to callback', (done) => {
const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
document.body.appendChild(node);
node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: 100, left: 100 }));
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
expect(x).toEqual(100);
expect(y).toEqual(100);
expect(width).toEqual(5000);
expect(height).toEqual(5000);
expect(pageX).toEqual(100);
expect(pageY).toEqual(100);
done();
document.body.removeChild(node);
});
});
test('provides correct layout to callback', (done) => {
const node = createNode({ height: '5000px', left: '100px', position: 'relative', top: '100px', width: '5000px' });
document.body.appendChild(node);
// test values account for scroll position
window.scrollTo(200, 200);
node.getBoundingClientRect = jest.fn(() => ({ width: 5000, height: 5000, top: -100, left: -100 }));
node.parentNode.getBoundingClientRect = jest.fn(() => ({ top: -200, left: -200 }));
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
expect(x).toEqual(100);
expect(y).toEqual(100);
expect(width).toEqual(5000);
expect(height).toEqual(5000);
expect(pageX).toEqual(-100);
expect(pageY).toEqual(-100);
done();
document.body.removeChild(node);
});
});
});
describe('measureLayout', () => {
test('provides correct layout to onSuccess callback', (done) => {
const node = createNode({ height: '10px', width: '10px' });
const middle = createNode({ padding: '20px' });
const context = createNode({ padding: '20px' });
middle.appendChild(node);
context.appendChild(middle);
document.body.appendChild(context);
node.getBoundingClientRect = jest.fn(() => ({
width: 10,
height: 10,
top: 40,
left: 40
}));
UIManager.measureLayout(node, context, () => {}, (x, y, width, height) => {
expect(x).toEqual(40);
expect(y).toEqual(40);
expect(width).toEqual(10);
expect(height).toEqual(10);
done();
document.body.removeChild(context);
});
});
});
describe('measureInWindow', () => {
test('provides correct layout to callback', (done) => {
const node = createNode({ height: '10px', width: '10px' });
const middle = createNode({ padding: '20px' });
const context = createNode({ padding: '20px' });
middle.appendChild(node);
context.appendChild(middle);
document.body.appendChild(context);
node.getBoundingClientRect = jest.fn(() => ({
width: 10,
height: 10,
top: 40,
left: 40
}));
UIManager.measureInWindow(node, (x, y, width, height) => {
expect(x).toEqual(40);
expect(y).toEqual(40);
expect(width).toEqual(10);
expect(height).toEqual(10);
done();
document.body.removeChild(context);
});
});
});
describe('updateView', () => {
const componentStub = {
_reactInternalInstance: {

20
src/apis/UIManager/index.js
View File

@@ -1,11 +1,19 @@
import asap from 'asap';
import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';
const _measureLayout = (node, relativeToNativeNode, callback) => {
const getRect = (node) => {
const height = node.offsetHeight;
const left = node.offsetLeft;
const top = node.offsetTop;
const width = node.offsetWidth;
return { height, left, top, width };
};
const measureLayout = (node, relativeToNativeNode, callback) => {
asap(() => {
const relativeNode = relativeToNativeNode || node.parentNode;
const relativeRect = relativeNode.getBoundingClientRect();
const { height, left, top, width } = node.getBoundingClientRect();
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);
@@ -22,17 +30,17 @@ const UIManager = {
},
measure(node, callback) {
_measureLayout(node, null, callback);
measureLayout(node, null, callback);
},
measureInWindow(node, callback) {
const { height, left, top, width } = node.getBoundingClientRect();
const { height, left, top, width } = getRect(node);
callback(left, top, width, height);
},
measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
const relativeTo = relativeToNativeNode || node.parentNode;
_measureLayout(node, relativeTo, onSuccess);
measureLayout(node, relativeTo, onSuccess);
},
updateView(node, props, component /* only needed to surpress React errors in development */) {