feat: add work in progress 7.0 code

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2022-04-08 14:48:36 +01:00
parent e0820c6b2a
commit 361fae7f25
136 changed files with 8631 additions and 3500 deletions

View File

@@ -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*/}
</>
);
}