diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx index 902166a1..025e5e09 100644 --- a/src/components/Elements/MainModal/Main.jsx +++ b/src/components/Elements/MainModal/Main.jsx @@ -1,9 +1,15 @@ import variables from 'config/variables'; import { Suspense, lazy, useState, memo } from 'react'; -import { MdClose } from 'react-icons/md'; +import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension, MdClose } from 'react-icons/md'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Button } from 'components/Elements'; import './scss/index.scss'; import { Tooltip } from 'components/Elements'; +/*import Settings from '../../../features/misc/views/Settings'; +import Addons from '../../../features/misc/views/Addons'; +import Marketplace from '../../../features/misc/views/Marketplace';*/ + const Settings = lazy(() => import('../../../features/misc/views/Settings')); const Addons = lazy(() => import('../../../features/misc/views/Addons')); const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace')); @@ -26,28 +32,234 @@ const renderLoader = () => ( ); +const navbarLogo = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +let tabs = [ + { id: 'settings', label: 'Settings', icon: }, + { id: 'addons', label: 'Addons', icon: }, + { id: 'marketplace', label: 'Marketplace', icon: }, +]; + function MainModal({ modalClose }) { - const [currentTab, setCurrentTab] = useState('settings'); + let [activeTab, setActiveTab] = useState(tabs[0].id); + const [direction, setDirection] = useState(1); + + const variants = { + enter: (direction) => ({ + x: direction > 0 ? '100%' : '-100%', + opacity: 0, + overflow: 'none', + top: '80px', + position: 'absolute', + width: '100%', + }), + center: { + x: 0, + opacity: 1, + overflow: 'none', + top: '80px', + position: 'absolute', + width: '100%', + }, + exit: (direction) => ({ + x: direction < 0 ? '100%' : '-100%', + opacity: 0, + overflow: 'none', + top: '80px', + position: 'absolute', + width: '100%', + }), + }; const changeTab = (type) => { - setCurrentTab(type); + const currentIndex = tabs.findIndex((tab) => tab.id === activeTab); + const newIndex = tabs.findIndex((tab) => tab.id === type); + + setDirection(newIndex > currentIndex ? 1 : -1); + setActiveTab(type); }; const renderTab = () => { - switch (currentTab) { + switch (activeTab) { case 'addons': - return ; + return ; case 'marketplace': - return ; + return ; default: - return ; + return ; } }; return ( -
- {renderTab()} -
+ <> +
+
+ {navbarLogo} +
+
+ {tabs.map((tab) => ( + + ))} +
+ + + + + +
+
+ + + {renderTab()} + + +
+ ); } diff --git a/src/components/Elements/MainModal/backend/Tab.jsx b/src/components/Elements/MainModal/backend/Tab.jsx index 17cdd307..70ad56a9 100644 --- a/src/components/Elements/MainModal/backend/Tab.jsx +++ b/src/components/Elements/MainModal/backend/Tab.jsx @@ -88,7 +88,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) { label === variables.getMessage('modals.main.settings.sections.experimental.title') && !isExperimental ) { - return
; + return null; } return ( diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx index 5abacb40..c642d744 100644 --- a/src/components/Elements/MainModal/backend/Tabs.jsx +++ b/src/components/Elements/MainModal/backend/Tabs.jsx @@ -1,5 +1,6 @@ import variables from 'config/variables'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; +import { motion } from 'framer-motion'; import { MdSettings, MdOutlineShoppingBasket, @@ -19,7 +20,6 @@ const Tabs = (props) => { if (name !== currentName) { variables.stats.postEvent('tab', `Opened ${name}`); } - setCurrentTab(tab); setCurrentName(name); }; @@ -29,218 +29,61 @@ const Tabs = (props) => { document.querySelector('.reminder-info').style.display = 'none'; }; - const navbarButtons = [ - { - tab: 'settings', - icon: , - }, - { - tab: 'addons', - icon: , - }, - { - tab: 'marketplace', - icon: , - }, - ]; - - const reminderInfo = ( -
-
- {variables.getMessage('modals.main.settings.reminder.title')} - - + const reminderInfo = useMemo( + () => ( +
+
+ + {variables.getMessage('modals.main.settings.reminder.title')} + + + + +
+ + {variables.getMessage('modals.main.settings.reminder.message')} +
- - {variables.getMessage('modals.main.settings.reminder.message')} - - -
- ); - - const navbarLogo = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ), + [], ); return ( -
-
- {navbarLogo} - {/*{currentTab}*/} -
- {navbarButtons.map(({ tab, icon }, index) => ( -
-
- {props.current === 'settings' && ( -
- {props.children.map((tab, index) => ( - onClick(nextTab, tab.props.name)} - navbarTab={props.navbar || false} - /> - ))} - {reminderInfo} -
- )} -
- {props.children.map((tab, index) => { - if (tab.props.label !== currentTab) { - return undefined; - } + )} +
+ {props.children.map((tab, index) => { + if (tab.props.label !== currentTab) { + return null; + } - return ( - {tab.props.children} - ); - })} -
+ return ( + {tab.props.children} + ); + })}
-
+ ); }; -export default Tabs; +export default React.memo(Tabs); diff --git a/src/components/Elements/MainModal/backend/newTabs.jsx b/src/components/Elements/MainModal/backend/newTabs.jsx new file mode 100644 index 00000000..e69de29b