mirror of https://github.com/mue/mue.git
refactor: Move main modal to components
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
parent
87bb3fb066
commit
67a387c73d
|
@ -4,9 +4,9 @@ import { MdClose } from 'react-icons/md';
|
||||||
|
|
||||||
import './scss/index.scss';
|
import './scss/index.scss';
|
||||||
import { Tooltip } from 'components/Elements';
|
import { Tooltip } from 'components/Elements';
|
||||||
const Settings = lazy(() => import('./tabs/Settings'));
|
const Settings = lazy(() => import('../../../features/misc/views/Settings'));
|
||||||
const Addons = lazy(() => import('./tabs/Addons'));
|
const Addons = lazy(() => import('../../../features/misc/views/Addons'));
|
||||||
const Marketplace = lazy(() => import('./tabs/Marketplace'));
|
const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
|
||||||
|
|
||||||
const renderLoader = () => (
|
const renderLoader = () => (
|
||||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||||
|
@ -60,4 +60,5 @@ function MainModal({ modalClose }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default memo(MainModal);
|
const MemoizedMainModal = memo(MainModal);
|
||||||
|
export { MemoizedMainModal as default, MemoizedMainModal as MainModal };
|
|
@ -9,7 +9,7 @@ import {
|
||||||
} from 'react-icons/md';
|
} from 'react-icons/md';
|
||||||
import Tab from './Tab';
|
import Tab from './Tab';
|
||||||
import { Button } from 'components/Elements';
|
import { Button } from 'components/Elements';
|
||||||
import ErrorBoundary from '../../../ErrorBoundary';
|
import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
|
||||||
|
|
||||||
class Tabs extends PureComponent {
|
class Tabs extends PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './Main';
|
|
@ -3,3 +3,4 @@ export * from './Tooltip';
|
||||||
export * from './ShareModal';
|
export * from './ShareModal';
|
||||||
export * from './AddModal';
|
export * from './AddModal';
|
||||||
export * from './ResetModal';
|
export * from './ResetModal';
|
||||||
|
export * from './MainModal';
|
||||||
|
|
|
@ -404,10 +404,6 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
|
@ -2,7 +2,7 @@ import variables from 'config/variables';
|
||||||
import { PureComponent } from 'react';
|
import { PureComponent } from 'react';
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
|
|
||||||
import Main from './main/Main';
|
import { MainModal } from 'components/Elements';
|
||||||
import Navbar from '../../navbar/Navbar';
|
import Navbar from '../../navbar/Navbar';
|
||||||
import Preview from '../../helpers/preview/Preview';
|
import Preview from '../../helpers/preview/Preview';
|
||||||
|
|
||||||
|
@ -90,7 +90,7 @@ export default class Modals extends PureComponent {
|
||||||
overlayClassName="Overlay"
|
overlayClassName="Overlay"
|
||||||
ariaHideApp={false}
|
ariaHideApp={false}
|
||||||
>
|
>
|
||||||
<Main modalClose={() => this.toggleModal('mainModal', false)} />
|
<MainModal modalClose={() => this.toggleModal('mainModal', false)} />
|
||||||
</Modal>
|
</Modal>
|
||||||
<Modal
|
<Modal
|
||||||
closeTimeoutMS={300}
|
closeTimeoutMS={300}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import variables from 'config/variables';
|
import variables from 'config/variables';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import Tabs from './backend/Tabs';
|
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||||
|
|
||||||
import Added from '../../../../marketplace/views/Added';
|
import Added from '../../marketplace/views/Added';
|
||||||
import Create from '../../../../marketplace/views/Create';
|
import Create from '../../marketplace/views/Create';
|
||||||
|
|
||||||
function Addons(props) {
|
function Addons(props) {
|
||||||
return (
|
return (
|
|
@ -1,8 +1,8 @@
|
||||||
import variables from 'config/variables';
|
import variables from 'config/variables';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
import Tabs from './backend/Tabs';
|
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||||
import MarketplaceTab from '../../../../marketplace/views/Browse';
|
import MarketplaceTab from '../../marketplace/views/Browse';
|
||||||
|
|
||||||
function Marketplace(props) {
|
function Marketplace(props) {
|
||||||
return (
|
return (
|
|
@ -1,9 +1,9 @@
|
||||||
import variables from 'config/variables';
|
import variables from 'config/variables';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
import Tabs from './backend/Tabs';
|
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||||
|
|
||||||
import Overview from '../settings/sections/Overview';
|
import Overview from '../modals/main/settings/sections/Overview';
|
||||||
import { NavbarOptions } from 'features/navbar';
|
import { NavbarOptions } from 'features/navbar';
|
||||||
import { GreetingOptions } from 'features/greeting';
|
import { GreetingOptions } from 'features/greeting';
|
||||||
import { TimeOptions, DateOptions } from 'features/time';
|
import { TimeOptions, DateOptions } from 'features/time';
|
||||||
|
@ -13,13 +13,13 @@ import { MessageOptions } from 'features/message';
|
||||||
import { BackgroundOptions } from 'features/background';
|
import { BackgroundOptions } from 'features/background';
|
||||||
import { SearchOptions } from 'features/search';
|
import { SearchOptions } from 'features/search';
|
||||||
import { WeatherOptions } from 'features/weather';
|
import { WeatherOptions } from 'features/weather';
|
||||||
import Appearance from '../settings/sections/Appearance';
|
import Appearance from '../modals/main/settings/sections/Appearance';
|
||||||
import Language from '../settings/sections/Language';
|
import Language from '../modals/main/settings/sections/Language';
|
||||||
import Advanced from '../settings/sections/Advanced';
|
import Advanced from '../modals/main/settings/sections/Advanced';
|
||||||
import Stats from '../settings/sections/Stats';
|
import Stats from '../modals/main/settings/sections/Stats';
|
||||||
import Experimental from '../settings/sections/Experimental';
|
import Experimental from '../modals/main/settings/sections/Experimental';
|
||||||
import Changelog from '../settings/sections/Changelog';
|
import Changelog from '../modals/main/settings/sections/Changelog';
|
||||||
import About from '../settings/sections/About';
|
import About from '../modals/main/settings/sections/About';
|
||||||
|
|
||||||
const sections = [
|
const sections = [
|
||||||
{ label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
|
{ label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
|
Loading…
Reference in New Issue