Skip to content

Commit c6294aa

Browse files
CompuIvesCompuIves
committed
Optimize Portal usage
1 parent 865c7d8 commit c6294aa

File tree

9 files changed

+112
-83
lines changed

9 files changed

+112
-83
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"eslint-plugin-import": "^2.3.0",
4949
"eslint-plugin-jsx-a11y": "^5.0.3",
5050
"eslint-plugin-react": "~7.4.0",
51-
"flow-bin": "^0.64.0",
51+
"flow-bin": "^0.72.0",
5252
"gulp": "^3.9.1",
5353
"lerna": "^2.5.1",
5454
"lint-staged": "^5.0.0",

‎packages/app/src/app/components/ContextMenu/index.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class ContextMenu extends React.Component {
1818
this.mousedown = window.addEventListener('mousedown', mousedownEvent => {
1919
const { show } = this.state;
2020

21-
if (show) {
21+
if (show && this.el) {
2222
if (!this.el.contains(mousedownEvent.target)) {
2323
this.close();
2424
}
@@ -55,13 +55,13 @@ class ContextMenu extends React.Component {
5555
return (
5656
<div onContextMenu={this.onContextMenu}>
5757
{children}
58-
<Portal>
59-
<div
60-
ref={el => {
61-
this.el = el;
62-
}}
63-
>
64-
{show && (
58+
{show && (
59+
<Portal>
60+
<div
61+
ref={el => {
62+
this.el = el;
63+
}}
64+
>
6565
<Motion
6666
defaultStyle={{ opacity: 0.6 }}
6767
style={{ opacity: spring(1) }}
@@ -89,9 +89,9 @@ class ContextMenu extends React.Component {
8989
</Container>
9090
)}
9191
</Motion>
92-
)}
93-
</div>
94-
</Portal>
92+
</div>
93+
</Portal>
94+
)}
9595
</div>
9696
);
9797
}

‎packages/app/src/app/components/Modal/elements.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import styled, { injectGlobal } from 'styled-components';
22

33
export const CLOSE_TIMEOUT_MS = 300;
44

5-
// eslint-disable-next-line
6-
injectGlobal`
5+
export const applyGlobalStyles = () => {
6+
// eslint-disable-next-line
7+
injectGlobal`
78
.ReactModal__Content {
89
transition: all ${CLOSE_TIMEOUT_MS}ms ease;
910
transition-property: opacity, transform;
@@ -46,6 +47,7 @@ injectGlobal`
4647
transform: scale(0.9) translateY(0);
4748
}
4849
`;
50+
};
4951

5052
export const BaseModal = styled.div`
5153
background-color: ${props => props.theme.background3};

‎packages/app/src/app/components/Modal/index.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import React from 'react';
22
import Modal from 'react-modal';
33

4-
import { CLOSE_TIMEOUT_MS, BaseModal, ModalTitle, ModalBody } from './elements';
4+
import {
5+
CLOSE_TIMEOUT_MS,
6+
applyGlobalStyles,
7+
BaseModal,
8+
ModalTitle,
9+
ModalBody,
10+
} from './elements';
511

6-
const appElement = document.getElementById('modal');
7-
Modal.setAppElement(appElement);
12+
Modal.setAppElement('#root');
13+
14+
applyGlobalStyles();
815

916
class ModalComponent extends React.Component {
1017
getStyles = (width = 400, top = 20) => ({

‎packages/app/src/app/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,6 @@
6868
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK" height="0" width="0" style="display:none;visibility:hidden"></iframe>
6969
</noscript>
7070
<!-- End Google Tag Manager (noscript) -->
71-
<div id="modal">
72-
</div>
7371
<div id="root">
7472
<div style="display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #1C2022;">
7573
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="490px"

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -239,31 +239,33 @@ class DirectoryEntry extends React.Component {
239239
hasChildren={this.getChildren().length > 0}
240240
closeTree={this.closeTree}
241241
/>
242-
<Modal
243-
isOpen={this.state.showDeleteDirectoryModal}
244-
onClose={this.closeModals}
245-
width={400}
246-
>
247-
<Alert
248-
title="Delete Directory"
249-
body={
250-
<span>
251-
Are you sure you want to delete <b>{title}</b>?
252-
<br />
253-
The directory will be permanently removed.
254-
</span>
255-
}
256-
onCancel={this.closeModals}
257-
onDelete={() => {
258-
this.setState({
259-
showDeleteDirectoryModal: false,
260-
});
261-
this.props.signals.files.directoryDeleted({
262-
directoryShortid: shortid,
263-
});
264-
}}
265-
/>
266-
</Modal>
242+
{this.state.showDeleteDirectoryModal && (
243+
<Modal
244+
isOpen={this.state.showDeleteDirectoryModal}
245+
onClose={this.closeModals}
246+
width={400}
247+
>
248+
<Alert
249+
title="Delete Directory"
250+
body={
251+
<span>
252+
Are you sure you want to delete <b>{title}</b>?
253+
<br />
254+
The directory will be permanently removed.
255+
</span>
256+
}
257+
onCancel={this.closeModals}
258+
onDelete={() => {
259+
this.setState({
260+
showDeleteDirectoryModal: false,
261+
});
262+
this.props.signals.files.directoryDeleted({
263+
directoryShortid: shortid,
264+
});
265+
}}
266+
/>
267+
</Modal>
268+
)}
267269
</EntryContainer>
268270
)}
269271
<Opener open={open}>
@@ -287,32 +289,34 @@ class DirectoryEntry extends React.Component {
287289
setCurrentModule={this.setCurrentModule}
288290
markTabsNotDirty={this.markTabsNotDirty}
289291
/>
290-
<Modal
291-
isOpen={this.state.showDeleteModuleModal}
292-
onClose={this.closeModals}
293-
width={400}
294-
>
295-
<Alert
296-
title="Delete File"
297-
body={
298-
<span>
299-
Are you sure you want to delete{' '}
300-
<b>{this.state.moduleToDeleteTitle}</b>?
301-
<br />
302-
The file will be permanently removed.
303-
</span>
304-
}
305-
onCancel={this.closeModals}
306-
onDelete={() => {
307-
this.setState({
308-
showDeleteModuleModal: false,
309-
});
310-
this.props.signals.files.moduleDeleted({
311-
moduleShortid: this.state.moduleToDeleteShortid,
312-
});
313-
}}
314-
/>
315-
</Modal>
292+
{this.state.showDeleteModuleModal && (
293+
<Modal
294+
isOpen={this.state.showDeleteModuleModal}
295+
onClose={this.closeModals}
296+
width={400}
297+
>
298+
<Alert
299+
title="Delete File"
300+
body={
301+
<span>
302+
Are you sure you want to delete{' '}
303+
<b>{this.state.moduleToDeleteTitle}</b>?
304+
<br />
305+
The file will be permanently removed.
306+
</span>
307+
}
308+
onCancel={this.closeModals}
309+
onDelete={() => {
310+
this.setState({
311+
showDeleteModuleModal: false,
312+
});
313+
this.props.signals.files.moduleDeleted({
314+
moduleShortid: this.state.moduleToDeleteShortid,
315+
});
316+
}}
317+
/>
318+
</Modal>
319+
)}
316320
{creating === 'module' && (
317321
<Entry
318322
id=""

‎packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ function RawAutoComplete({
2222
{...getInputProps({
2323
innerRef(ref) {
2424
if (ref) {
25-
ref.focus();
25+
if (
26+
document.activeElement &&
27+
document.activeElement.tagName !== 'SELECT'
28+
) {
29+
ref.focus();
30+
}
2631
}
2732
},
2833
value: currentRefinement,

‎packages/app/src/app/pages/common/Notifications/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ class Notifications extends React.Component {
5858

5959
render() {
6060
const notifications = this.props.store.notifications;
61-
61+
if (notifications.length === 0) {
62+
return null;
63+
}
6264
return (
6365
<Portal>
6466
<div onMouseEnter={this.hoverOn} onMouseLeave={this.hoverOff}>

‎yarn.lock‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5637,8 +5637,8 @@ download@^6.2.2:
56375637
pify "^3.0.0"
56385638

56395639
downshift@^1.0.0-rc.14:
5640-
version "1.31.12"
5641-
resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.12.tgz#78be425583234f18774fc37643eba17a776a91db"
5640+
version "1.31.14"
5641+
resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.14.tgz#98b04614cad2abc4297d0d02b50ff2c48b2625e7"
56425642

56435643
[email protected]:
56445644
version "0.0.2"
@@ -7067,9 +7067,9 @@ flow-bin@^0.57.3:
70677067
version "0.57.3"
70687068
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.57.3.tgz#843fb80a821b6d0c5847f7bb3f42365ffe53b27b"
70697069

7070-
flow-bin@^0.64.0:
7071-
version "0.64.0"
7072-
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.64.0.tgz#ddd3fb3b183ab1ab35a5d5dec9caf5ebbcded167"
7070+
flow-bin@^0.72.0:
7071+
version "0.72.0"
7072+
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.72.0.tgz#12051180fb2db7ccb728fefe67c77e955e92a44d"
70737073

70747074
flush-write-stream@^1.0.0:
70757075
version "1.0.2"
@@ -8927,12 +8927,18 @@ [email protected], iconv-lite@^0.4.8:
89278927
version "0.4.19"
89288928
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
89298929

8930-
iconv-lite@^0.4.17, iconv-lite@~0.4.13:
8930+
iconv-lite@^0.4.17:
89318931
version "0.4.21"
89328932
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.21.tgz#c47f8733d02171189ebc4a400f3218d348094798"
89338933
dependencies:
89348934
safer-buffer "^2.1.0"
89358935

8936+
iconv-lite@~0.4.13:
8937+
version "0.4.23"
8938+
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
8939+
dependencies:
8940+
safer-buffer ">= 2.1.2 < 3"
8941+
89368942
[email protected], icss-replace-symbols@^1.1.0:
89378943
version "1.1.0"
89388944
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -15156,6 +15162,10 @@ react-is@^16.3.1:
1515615162
version "16.3.2"
1515715163
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
1515815164

15165+
react-lifecycles-compat@^3.0.0:
15166+
version "3.0.4"
15167+
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
15168+
1515915169
react-loadable@^3.3.1:
1516015170
version "3.3.1"
1516115171
resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-3.3.1.tgz#91310f1c2adcc73ce944380ee9529f5d33e100d3"
@@ -15179,11 +15189,12 @@ react-modal@^3.1.10:
1517915189
warning "^3.0.0"
1518015190

1518115191
react-modal@^3.3.2:
15182-
version "3.3.2"
15183-
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.3.2.tgz#b13da9490653a7c76bc0e9600323eb1079c620e7"
15192+
version "3.4.4"
15193+
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.4.4.tgz#e9dde25e9e85a59c76831f2a2b468712a546aded"
1518415194
dependencies:
1518515195
exenv "^1.2.0"
1518615196
prop-types "^15.5.10"
15197+
react-lifecycles-compat "^3.0.0"
1518715198
warning "^3.0.0"
1518815199

1518915200
react-motion@^0.5.0:
@@ -16394,7 +16405,7 @@ safe-regex@^1.1.0:
1639416405
dependencies:
1639516406
ret "~0.1.10"
1639616407

16397-
safer-buffer@^2.1.0:
16408+
"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
1639816409
version "2.1.2"
1639916410
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
1640016411

@@ -18579,8 +18590,8 @@ [email protected]:
1857918590
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.1.tgz#bb3682c2c791ac90e7c6210b26478a8da085c359"
1858018591

1858118592
ua-parser-js@^0.7.9:
18582-
version "0.7.17"
18583-
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
18593+
version "0.7.18"
18594+
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
1858418595

1858518596
uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9:
1858618597
version "3.3.9"

0 commit comments

Comments
 (0)