Skip to content

Commit 0e46aec

Browse files
trueadmtrueadm
committed
Add zIndex support
1 parent 326bfa0 commit 0e46aec

File tree

5 files changed

+31
-17
lines changed

5 files changed

+31
-17
lines changed

‎packages/react-dom/src/client/ReactDOMHostConfig.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export type EventTargetChildElement = {
6868
props: null | {
6969
style?: {
7070
position?: string,
71+
zIndex?: number,
7172
bottom?: string,
7273
left?: string,
7374
right?: string,
@@ -916,6 +917,7 @@ export function getEventTargetChildElement(
916917
props: {
917918
style: {
918919
position: 'absolute',
920+
zIndex: -1,
919921
bottom: bottom ? `-${bottom}px` : '0px',
920922
left: left ? `-${left}px` : '0px',
921923
right: right ? `-${right}px` : '0px',
@@ -950,12 +952,21 @@ export function commitEventTarget(
950952
// typically force a style recalculation and force a layout,
951953
// reflow -– both of which are sync are expensive.
952954
const computedStyles = window.getComputedStyle(parentInstance);
955+
const position = computedStyles.getPropertyValue('position');
953956
warning(
954-
computedStyles.getPropertyValue('position') !== 'static',
957+
position !== '' && position !== 'static',
955958
'<TouchHitTarget> inserts an empty absolutely positioned <div>. ' +
956959
'This requires its parent DOM node to be positioned too, but the ' +
957960
'parent DOM node was found to have the style "position" set to ' +
958-
'value "static". Try using a "position" value of "relative".',
961+
'either no value, or a value of "static". Try using a "position" ' +
962+
'value of "relative".',
963+
);
964+
warning(
965+
computedStyles.getPropertyValue('zIndex') !== '',
966+
'<TouchHitTarget> inserts an empty <div> with "z-index" of "-1". ' +
967+
'This requires its parent DOM node to have a "z-index" great than "-1",' +
968+
'but the parent DOM node was found to no "z-index" value set.' +
969+
' Try using a "z-index" value of "0" or greater.',
959970
);
960971
}
961972
}

‎packages/react-dom/src/server/ReactPartialRenderer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1188,7 +1188,7 @@ class ReactDOMServerRenderer {
11881188
let bottomString = bottom ? `-${bottom}px` : '0px';
11891189

11901190
return (
1191-
`<div style="position:absolute;bottom:` +
1191+
`<div style="position:absolute;z-index:-1;bottom:` +
11921192
`${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
11931193
);
11941194
}

‎packages/react-events/src/__tests__/TouchHitTarget-test.internal.js

+15-14
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ describe('TouchHitTarget', () => {
330330
ReactDOM.render(<Test />, container);
331331
expect(Scheduler).toFlushWithoutYielding();
332332
expect(container.innerHTML).toBe(
333-
'<div><div style="position: absolute; bottom: -10px; ' +
333+
'<div><div style="position: absolute; z-index: -1; bottom: -10px; ' +
334334
'left: -10px; right: -10px; top: -10px;"></div></div>',
335335
);
336336

@@ -362,7 +362,7 @@ describe('TouchHitTarget', () => {
362362
ReactDOM.render(<Test />, container);
363363
expect(Scheduler).toFlushWithoutYielding();
364364
expect(container.innerHTML).toBe(
365-
'<div><div style="position: absolute; bottom: -10px; ' +
365+
'<div><div style="position: absolute; z-index: -1; bottom: -10px; ' +
366366
'left: -10px; right: -10px; top: -10px;"></div></div>',
367367
);
368368
});
@@ -386,7 +386,7 @@ describe('TouchHitTarget', () => {
386386
ReactDOM.render(<Test />, container);
387387
expect(Scheduler).toFlushWithoutYielding();
388388
expect(container.innerHTML).toBe(
389-
'<div><div style="position: absolute; bottom: -10px; ' +
389+
'<div><div style="position: absolute; z-index: -1; bottom: -10px; ' +
390390
'left: -10px; right: -10px; top: -10px;"></div></div>',
391391
);
392392

@@ -424,7 +424,7 @@ describe('TouchHitTarget', () => {
424424
ReactDOM.render(<Test />, container);
425425
expect(Scheduler).toFlushWithoutYielding();
426426
expect(container.innerHTML).toBe(
427-
'<div><span>Random span 1</span><div style="position: absolute; bottom: -10px; ' +
427+
'<div><span>Random span 1</span><div style="position: absolute; z-index: -1; bottom: -10px; ' +
428428
'left: -10px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
429429
);
430430
});
@@ -455,15 +455,15 @@ describe('TouchHitTarget', () => {
455455
ReactDOM.render(<Test />, container);
456456
expect(Scheduler).toFlushWithoutYielding();
457457
expect(container.innerHTML).toBe(
458-
'<div><span>Random span 1</span><div style="position: absolute; bottom: 0px; ' +
458+
'<div><span>Random span 1</span><div style="position: absolute; z-index: -1; bottom: 0px; ' +
459459
'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
460460
);
461461

462462
cond = true;
463463
ReactDOM.render(<Test />, container);
464464
expect(Scheduler).toFlushWithoutYielding();
465465
expect(container.innerHTML).toBe(
466-
'<div><span>Random span 1</span><div style="position: absolute; bottom: 0px; ' +
466+
'<div><span>Random span 1</span><div style="position: absolute; z-index: -1; bottom: 0px; ' +
467467
'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
468468
);
469469
});
@@ -494,15 +494,15 @@ describe('TouchHitTarget', () => {
494494
ReactDOM.render(<Test />, container);
495495
expect(Scheduler).toFlushWithoutYielding();
496496
expect(container.innerHTML).toBe(
497-
'<div><span>Random span 1</span><div style="position: absolute; bottom: -10px; ' +
497+
'<div><span>Random span 1</span><div style="position: absolute; z-index: -1; bottom: -10px; ' +
498498
'left: 0px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
499499
);
500500

501501
cond = false;
502502
ReactDOM.render(<Test />, container);
503503
expect(Scheduler).toFlushWithoutYielding();
504504
expect(container.innerHTML).toBe(
505-
'<div><span>Random span 1</span><div style="position: absolute; bottom: -10px; ' +
505+
'<div><span>Random span 1</span><div style="position: absolute; z-index: -1; bottom: -10px; ' +
506506
'left: 0px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
507507
);
508508
});
@@ -532,11 +532,11 @@ describe('TouchHitTarget', () => {
532532

533533
const container2 = document.createElement('div');
534534
container2.innerHTML =
535-
'<div><div style="position:absolute;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
535+
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
536536
ReactDOM.hydrate(<Test2 />, container2);
537537
expect(Scheduler).toFlushWithoutYielding();
538538
expect(container2.innerHTML).toBe(
539-
'<div><div style="position:absolute;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
539+
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
540540
);
541541
});
542542

@@ -560,7 +560,8 @@ describe('TouchHitTarget', () => {
560560
);
561561
expect(Scheduler).toFlushWithoutYielding();
562562
expect(container.innerHTML).toBe(
563-
'<div><div style="position: absolute; bottom: -10px; left: -10px; right: -10px; top: -10px;"></div></div>',
563+
'<div><div style="position: absolute; z-index: -1; bottom: -10px; ' +
564+
'left: -10px; right: -10px; top: -10px;"></div></div>',
564565
);
565566
});
566567
});
@@ -596,7 +597,7 @@ describe('TouchHitTarget', () => {
596597

597598
let output = ReactDOMServer.renderToString(<Test />);
598599
expect(output).toBe(
599-
'<div><div style="position:absolute;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
600+
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
600601
);
601602

602603
const Test2 = () => (
@@ -609,7 +610,7 @@ describe('TouchHitTarget', () => {
609610

610611
output = ReactDOMServer.renderToString(<Test2 />);
611612
expect(output).toBe(
612-
'<div><div style="position:absolute;bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
613+
'<div><div style="position:absolute;z-index:-1;bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
613614
);
614615

615616
const Test3 = () => (
@@ -622,7 +623,7 @@ describe('TouchHitTarget', () => {
622623

623624
output = ReactDOMServer.renderToString(<Test3 />);
624625
expect(output).toBe(
625-
'<div><div style="position:absolute;bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
626+
'<div><div style="position:absolute;z-index:-1;bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
626627
);
627628
});
628629
});

‎packages/react-noop-renderer/src/createReactNoop.js

+1
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
451451
props: {
452452
style: {
453453
position: 'absolute',
454+
zIndex: -1,
454455
bottom: bottom ? `-${bottom}px` : '0px',
455456
left: left ? `-${left}px` : '0px',
456457
right: right ? `-${right}px` : '0px',

‎packages/react-test-renderer/src/ReactTestHostConfig.js

+1
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,7 @@ export function getEventTargetChildElement(
351351
props: {
352352
style: {
353353
position: 'absolute',
354+
zIndex: -1,
354355
bottom: bottom ? `-${bottom}px` : '0px',
355356
left: left ? `-${left}px` : '0px',
356357
right: right ? `-${right}px` : '0px',

0 commit comments

Comments
 (0)