2021-09-10 15:38:53 +00:00
|
|
|
import variables from 'modules/variables';
|
2022-04-08 13:48:36 +00:00
|
|
|
import { Suspense, lazy, useState } from 'react';
|
|
|
|
|
2022-10-30 16:56:26 +00:00
|
|
|
import { memo } from 'react';
|
2022-04-08 13:48:36 +00:00
|
|
|
import { MdClose } from 'react-icons/md';
|
2020-10-15 14:23:01 +00:00
|
|
|
|
2021-03-23 09:44:57 +00:00
|
|
|
import Tabs from './tabs/backend/Tabs';
|
2020-10-27 15:10:40 +00:00
|
|
|
|
2021-03-20 12:55:20 +00:00
|
|
|
import './scss/index.scss';
|
2022-04-08 13:48:36 +00:00
|
|
|
import Tooltip from '../../helpers/tooltip/Tooltip';
|
2021-03-20 12:55:20 +00:00
|
|
|
|
2021-04-21 18:35:33 +00:00
|
|
|
// Lazy load all the tabs instead of the modal itself
|
2021-08-14 19:10:48 +00:00
|
|
|
const Settings = lazy(() => import('./tabs/Settings'));
|
|
|
|
const Addons = lazy(() => import('./tabs/Addons'));
|
|
|
|
const Marketplace = lazy(() => import('./tabs/Marketplace'));
|
2021-04-11 10:17:09 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
const renderLoader = (current) => (
|
|
|
|
<Tabs current={current}>
|
2022-08-26 09:45:32 +00:00
|
|
|
<div label={variables.getMessage('modals.main.loading')}>
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="emptyItems">
|
|
|
|
<div className="emptyMessage">
|
|
|
|
<div className="loaderHolder">
|
|
|
|
<div id="loader"></div>
|
2022-08-26 09:45:32 +00:00
|
|
|
<span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
2021-04-14 20:20:43 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-04-08 13:48:36 +00:00
|
|
|
<div label="" style={{ display: 'none' }}></div>
|
2021-04-14 20:20:43 +00:00
|
|
|
</Tabs>
|
|
|
|
);
|
2021-04-11 10:17:09 +00:00
|
|
|
|
2022-10-30 16:56:26 +00:00
|
|
|
function MainModal({ modalClose }) {
|
2022-04-08 13:48:36 +00:00
|
|
|
const [currentTab, setCurrentTab] = useState(0);
|
|
|
|
|
|
|
|
const changeTab = (type) => {
|
|
|
|
switch (type) {
|
|
|
|
case 'settings':
|
|
|
|
setCurrentTab(<Settings changeTab={changeTab} />);
|
|
|
|
break;
|
|
|
|
case 'addons':
|
|
|
|
setCurrentTab(<Addons changeTab={changeTab} />);
|
|
|
|
break;
|
|
|
|
case 'marketplace':
|
|
|
|
setCurrentTab(<Marketplace changeTab={changeTab} />);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
if (currentTab === 0) {
|
|
|
|
setCurrentTab(<Settings changeTab={changeTab} />);
|
|
|
|
}
|
2021-03-19 22:30:29 +00:00
|
|
|
|
2021-03-13 18:15:57 +00:00
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="frame">
|
|
|
|
<Tooltip
|
2022-10-19 17:09:06 +00:00
|
|
|
style={{ position: 'absolute', top: '1rem', right: '1rem' }}
|
2022-08-26 09:45:32 +00:00
|
|
|
title={variables.getMessage('modals.welcome.buttons.close')}
|
2022-04-17 09:24:51 +00:00
|
|
|
key="closeTooltip"
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
|
|
|
<span className="closeModal" onClick={modalClose}>
|
|
|
|
<MdClose />
|
|
|
|
</span>
|
|
|
|
</Tooltip>
|
|
|
|
<Suspense fallback={renderLoader(currentTab)}>{currentTab}</Suspense>
|
|
|
|
</div>
|
2021-03-13 18:15:57 +00:00
|
|
|
);
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2022-11-06 11:59:59 +00:00
|
|
|
export default memo(MainModal);
|