mirror of
https://github.com/mue/mue.git
synced 2026-07-17 22:14:13 +02:00
feat: add work in progress 7.0 code
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { PureComponent, Suspense, lazy } from 'react';
|
||||
import Modal from 'react-modal';
|
||||
//import Hotkeys from 'react-hot-keys';
|
||||
|
||||
@@ -9,7 +9,10 @@ import Preview from '../helpers/preview/Preview';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
import Welcome from './welcome/Welcome';
|
||||
// Welcome modal is lazy loaded as the user won't use it every time they open a tab
|
||||
// We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click
|
||||
const Welcome = lazy(() => import('./welcome/Welcome'));
|
||||
const renderLoader = () => <></>;
|
||||
|
||||
export default class Modals extends PureComponent {
|
||||
constructor() {
|
||||
@@ -18,14 +21,18 @@ export default class Modals extends PureComponent {
|
||||
mainModal: false,
|
||||
updateModal: false,
|
||||
welcomeModal: false,
|
||||
preview: false
|
||||
feedbackModal: false,
|
||||
preview: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true') {
|
||||
if (
|
||||
localStorage.getItem('showWelcome') === 'true' &&
|
||||
window.location.search !== '?nointro=true'
|
||||
) {
|
||||
this.setState({
|
||||
welcomeModal: true
|
||||
welcomeModal: true,
|
||||
});
|
||||
variables.stats.postEvent('modal', 'Opened welcome');
|
||||
}
|
||||
@@ -45,7 +52,7 @@ export default class Modals extends PureComponent {
|
||||
closeWelcome() {
|
||||
localStorage.setItem('showWelcome', false);
|
||||
this.setState({
|
||||
welcomeModal: false
|
||||
welcomeModal: false,
|
||||
});
|
||||
EventBus.dispatch('refresh', 'widgetsWelcomeDone');
|
||||
EventBus.dispatch('refresh', 'widgets');
|
||||
@@ -57,14 +64,14 @@ export default class Modals extends PureComponent {
|
||||
localStorage.setItem('welcomePreview', true);
|
||||
this.setState({
|
||||
welcomeModal: false,
|
||||
preview: true
|
||||
preview: true,
|
||||
});
|
||||
EventBus.dispatch('refresh', 'widgetsWelcome');
|
||||
}
|
||||
|
||||
toggleModal(type, action) {
|
||||
this.setState({
|
||||
[type]: action
|
||||
[type]: action,
|
||||
});
|
||||
|
||||
if (action !== false) {
|
||||
@@ -75,15 +82,38 @@ export default class Modals extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
{this.state.welcomeModal === false ? <Navbar openModal={(modal) => this.toggleModal(modal, true)}/> : null}
|
||||
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
|
||||
<Main modalClose={() => this.toggleModal('mainModal', false)}/>
|
||||
{this.state.welcomeModal === false ? (
|
||||
<Navbar openModal={(modal) => this.toggleModal(modal, true)} />
|
||||
) : null}
|
||||
<Modal
|
||||
closeTimeoutMS={300}
|
||||
id="modal"
|
||||
onRequestClose={() => this.toggleModal('mainModal', false)}
|
||||
isOpen={this.state.mainModal}
|
||||
className="Modal mainModal"
|
||||
overlayClassName="Overlay"
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<Main modalClose={() => this.toggleModal('mainModal', false)} />
|
||||
</Modal>
|
||||
<Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
|
||||
<Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
|
||||
</Modal>
|
||||
{this.state.preview ? <Preview setup={() => window.location.reload()}/> : null}
|
||||
{/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/}
|
||||
<Suspense fallback={renderLoader()}>
|
||||
<Modal
|
||||
closeTimeoutMS={300}
|
||||
onRequestClose={() => this.closeWelcome()}
|
||||
isOpen={this.state.welcomeModal}
|
||||
className="Modal welcomemodal mainModal"
|
||||
overlayClassName="Overlay welcomeoverlay"
|
||||
shouldCloseOnOverlayClick={false}
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<Welcome
|
||||
modalClose={() => this.closeWelcome()}
|
||||
modalSkip={() => this.previewWelcome()}
|
||||
/>
|
||||
</Modal>
|
||||
</Suspense>
|
||||
{this.state.preview ? <Preview setup={() => window.location.reload()} /> : null}
|
||||
{/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user