mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-10-12 03:54:24 +02:00
Code Issues Releases Wiki Activity

add portals for modal

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-17 17:31:01 +05:30
parent 6001a2fb18
commit ab8603bde1
6 changed files with 84 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CssSettingsModal.jsx
View File

@@ -37,6 +37,11 @@ export default class CssSettingsModal extends Component {
onBlur={cm => this.props.onChange(cm.getValue())}
/>
</div>
<div class="flex flex-h-end">
<button class="btn" onClick={this.props.closeHandler}>
Apply and Close
</button>
</div>
</Modal>
);
}

53
src/components/Modal.jsx
View File

@@ -1,4 +1,5 @@
import { h, Component } from 'preact';
import Portal from 'preact-portal';
export default class Modal extends Component {
componentDidMount() {
@@ -18,36 +19,42 @@ export default class Modal extends Component {
}
}
componentDidUpdate(prevProps) {
document.body.classList[this.props.show ? 'add' : 'remove'](
'overlay-visible'
);
if (this.props.show && !prevProps.show) {
this.overlayEl.querySelector('.js-modal__close-btn').focus();
if (this.props.show != prevProps.show) {
document.body.classList[this.props.show ? 'add' : 'remove'](
'overlay-visible'
);
if (this.props.show) {
// HACK: refs will evaluate on next tick due to portals
setTimeout(() => {
this.overlayEl.querySelector('.js-modal__close-btn').focus();
}, 0);
}
}
}
render() {
if (!this.props.show) return null;
return (
<div
class={`${this.props.extraClasses || ''} modal is-modal-visible`}
ref={el => (this.overlayEl = el)}
onClick={this.onOverlayClick.bind(this)}
>
<div class="modal__content">
<button
type="button"
onClick={this.props.closeHandler}
aria-label="Close modal"
title="Close"
class="js-modal__close-btn modal__close-btn"
>
Close
</button>
{this.props.children}
<Portal into="body">
<div
class={`${this.props.extraClasses || ''} modal is-modal-visible`}
ref={el => (this.overlayEl = el)}
onClick={this.onOverlayClick.bind(this)}
>
<div class="modal__content">
<button
type="button"
onClick={this.props.closeHandler}
aria-label="Close modal"
title="Close"
class="js-modal__close-btn modal__close-btn"
>
Close
</button>
{this.props.children}
</div>
</div>
</div>
</Portal>
);
}
}

18
src/components/app.jsx
View File

@@ -34,6 +34,7 @@ import KeyboardShortcutsModal from './KeyboardShortcutsModal';
import { takeScreenshot } from '../takeScreenshot';
import AskToImportModal from './AskToImportModal';
import { Alerts } from './Alerts';
import Portal from 'preact-portal';
if (module.hot) {
require('preact/debug');
@@ -342,10 +343,6 @@ export default class App extends Component {
window.searchInput.focus();
} else {
window.searchInput.value = '';
// Give last focused editor, focus again
// if (editorWithFocus) {
// editorWithFocus.focus();
// }
}
document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
'overlay-visible'
@@ -413,12 +410,15 @@ export default class App extends Component {
this.setState({ isAddLibraryModalOpen: true });
}
closeSavedItemsPane() {
if (this.editorWithFocus) {
this.editorWithFocus.focus();
}
document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
'overlay-visible'
);
this.setState({
isSavedItemPaneOpen: false
});
if (this.editorWithFocus) {
this.editorWithFocus.focus();
}
}
componentDidMount() {
document.body.style.height = `${window.innerHeight}px`;
@@ -1095,7 +1095,9 @@ export default class App extends Component {
dontAskBtnClickHandler={this.dontAskToImportAnymore.bind(this)}
/>
<div class="modal-overlay" />
<Portal into="body">
<div class="modal-overlay" />
</Portal>
<svg
version="1.1"