Skip to content

Commit c841fae

Browse files
chandlerprallchandlerprall
committed
convert EuiPortal to a function component, remove euiBody-hasPortalContent css class and usages
1 parent 141b340 commit c841fae

8 files changed

Lines changed: 160 additions & 284 deletions

File tree

‎src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap‎

Lines changed: 119 additions & 223 deletions
Large diffs are not rendered by default.

‎src/components/bottom_bar/bottom_bar.test.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import React from 'react';
1010
import ReactDOM from 'react-dom';
11-
import { render, mount } from 'enzyme';
11+
import { mount } from 'enzyme';
1212
import { keysOf } from '../common';
1313
import { requiredProps, takeMountedSnapshot } from '../../test';
1414

@@ -28,52 +28,52 @@ ReactDOM.createPortal = (children) => {
2828

2929
describe('EuiBottomBar', () => {
3030
test('is rendered', () => {
31-
const component = render(
31+
const component = mount(
3232
<EuiBottomBar {...requiredProps}>Content</EuiBottomBar>
3333
);
3434

35-
expect(component).toMatchSnapshot();
35+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
3636
});
3737

3838
describe('props', () => {
3939
describe('paddingSize', () => {
4040
keysOf(paddingSizeToClassNameMap).forEach((paddingSize) => {
4141
test(`${paddingSize} is rendered`, () => {
42-
const component = render(<EuiBottomBar paddingSize={paddingSize} />);
42+
const component = mount(<EuiBottomBar paddingSize={paddingSize} />);
4343

44-
expect(component).toMatchSnapshot();
44+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
4545
});
4646
});
4747
});
4848

4949
describe('position', () => {
5050
POSITIONS.forEach((position) => {
5151
test(`${position} is rendered`, () => {
52-
const component = render(<EuiBottomBar position={position} />);
52+
const component = mount(<EuiBottomBar position={position} />);
5353

54-
expect(component).toMatchSnapshot();
54+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
5555
});
5656
});
5757
});
5858

5959
test('landmarkHeading', () => {
60-
const component = render(
60+
const component = mount(
6161
<EuiBottomBar landmarkHeading="This should have been label" />
6262
);
6363

64-
expect(component).toMatchSnapshot();
64+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
6565
});
6666

6767
test('affordForDisplacement can be false', () => {
68-
const component = render(<EuiBottomBar affordForDisplacement={false} />);
68+
const component = mount(<EuiBottomBar affordForDisplacement={false} />);
6969

70-
expect(component).toMatchSnapshot();
70+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
7171
});
7272

7373
test('usePortal can be false', () => {
74-
const component = render(<EuiBottomBar usePortal={false} />);
74+
const component = mount(<EuiBottomBar usePortal={false} />);
7575

76-
expect(component).toMatchSnapshot();
76+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
7777
});
7878

7979
test('bodyClassName is rendered', () => {
@@ -84,17 +84,17 @@ describe('EuiBottomBar', () => {
8484
});
8585

8686
test('style is customized', () => {
87-
const component = render(<EuiBottomBar style={{ left: 12 }} />);
87+
const component = mount(<EuiBottomBar style={{ left: 12 }} />);
8888

89-
expect(component).toMatchSnapshot();
89+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
9090
});
9191

9292
test('position props are altered', () => {
93-
const component = render(
93+
const component = mount(
9494
<EuiBottomBar top={30} right={30} bottom={30} left={30} />
9595
);
9696

97-
expect(component).toMatchSnapshot();
97+
expect(takeMountedSnapshot(component)).toMatchSnapshot();
9898
});
9999
});
100100
});

‎src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
125125
componentDidMount() {
126126
// Wait a frame, otherwise moving focus from one combo box to another will result in the class
127127
// being removed from the body.
128-
requestAnimationFrame(() => {
129-
document.body.classList.add('euiBody-hasPortalContent');
130-
});
131128
this.updatePosition();
132129
window.addEventListener('resize', this.updatePosition);
133130

@@ -163,7 +160,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
163160
}
164161

165162
componentWillUnmount() {
166-
document.body.classList.remove('euiBody-hasPortalContent');
167163
window.removeEventListener('resize', this.updatePosition);
168164
window.removeEventListener('scroll', this.closeListOnScroll, {
169165
capture: true,

‎src/components/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
@import 'panel/index';
3737
@import 'page/index'; // Page needs to come after Panel for cascade specificity
3838
@import 'popover/index';
39-
@import 'portal/index';
4039
@import 'tree_view/index';
4140
@import 'resizable_container/index';
4241
@import 'side_nav/index';

‎src/components/portal/_index.scss‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/portal/_portal.scss‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/portal/portal.tsx‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* into portals.
1212
*/
1313

14-
import { Component, ReactNode } from 'react';
14+
import { useState, useEffect, ReactNode } from 'react';
1515
import { createPortal } from 'react-dom';
1616
import { keysOf } from '../common';
1717

@@ -40,43 +40,37 @@ export interface EuiPortalProps {
4040
portalRef?: (ref: HTMLDivElement | null) => void;
4141
}
4242

43-
export class EuiPortal extends Component<EuiPortalProps> {
44-
portalNode: HTMLDivElement;
45-
constructor(props: EuiPortalProps) {
46-
super(props);
43+
export const EuiPortal: React.FC<EuiPortalProps> = ({
44+
insert,
45+
portalRef,
46+
children,
47+
}) => {
48+
const [portalNode, setPortalNode] = useState<HTMLDivElement>();
4749

48-
const { insert } = this.props;
49-
50-
this.portalNode = document.createElement('div');
50+
// mount
51+
useEffect(() => {
52+
const portalNode = document.createElement('div');
53+
setPortalNode(portalNode);
5154

5255
if (insert == null) {
5356
// no insertion defined, append to body
54-
document.body.appendChild(this.portalNode);
57+
document.body.appendChild(portalNode);
5558
} else {
5659
// inserting before or after an element
5760
const { sibling, position } = insert;
58-
sibling.insertAdjacentElement(insertPositions[position], this.portalNode);
61+
sibling.insertAdjacentElement(insertPositions[position], portalNode);
5962
}
60-
}
61-
62-
componentDidMount() {
63-
this.updatePortalRef(this.portalNode);
64-
}
6563

66-
componentWillUnmount() {
67-
if (this.portalNode.parentNode) {
68-
this.portalNode.parentNode.removeChild(this.portalNode);
69-
}
70-
this.updatePortalRef(null);
71-
}
64+
portalRef?.(portalNode);
7265

73-
updatePortalRef(ref: HTMLDivElement | null) {
74-
if (this.props.portalRef) {
75-
this.props.portalRef(ref);
76-
}
77-
}
66+
// unmount
67+
return () => {
68+
if (portalNode && portalNode.parentNode) {
69+
portalNode.parentNode.removeChild(portalNode);
70+
}
71+
portalRef?.(null);
72+
};
73+
}, [insert, portalRef]);
7874

79-
render() {
80-
return createPortal(this.props.children, this.portalNode);
81-
}
82-
}
75+
return portalNode == null ? null : createPortal(children, portalNode);
76+
};

‎src/components/tool_tip/tool_tip_popover.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,10 @@ export class EuiToolTipPopover extends Component<Props> {
3838
};
3939

4040
componentDidMount() {
41-
document.body.classList.add('euiBody-hasPortalContent');
4241
window.addEventListener('resize', this.updateDimensions);
4342
}
4443

4544
componentWillUnmount() {
46-
document.body.classList.remove('euiBody-hasPortalContent');
4745
window.removeEventListener('resize', this.updateDimensions);
4846
}
4947

0 commit comments

Comments
 (0)