mirror of
https://github.com/mue/mue.git
synced 2026-07-14 04:24:01 +02:00
refactor: Move main modal to components
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
104
src/components/Elements/MainModal/backend/Tab.jsx
Normal file
104
src/components/Elements/MainModal/backend/Tab.jsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import variables from 'config/variables';
|
||||
import { memo, useState, useEffect } from 'react';
|
||||
import {
|
||||
MdSettings as Settings,
|
||||
MdWidgets as Addons,
|
||||
MdShoppingBasket as Marketplace,
|
||||
MdMenu as Navbar,
|
||||
MdEmojiPeople as Greeting,
|
||||
MdAccessAlarm as Time,
|
||||
MdOutlineFormatQuote as Quote,
|
||||
MdLink as QuickLinks,
|
||||
MdDateRange as Date,
|
||||
MdOutlineTextsms as Message,
|
||||
MdOutlinePhoto as Background,
|
||||
MdSearch,
|
||||
MdCloudQueue as Weather,
|
||||
MdFormatPaint as Appearance,
|
||||
MdTranslate as Language,
|
||||
MdOutlineSettings as Advanced,
|
||||
MdBugReport as Experimental,
|
||||
MdOutlineAssessment as Stats,
|
||||
MdOutlineNewReleases as Changelog,
|
||||
MdInfoOutline as About,
|
||||
MdOutlineExtension as Added,
|
||||
MdAddCircleOutline as Create,
|
||||
MdViewAgenda as Overview,
|
||||
MdCollectionsBookmark as Collections,
|
||||
} from 'react-icons/md';
|
||||
|
||||
const iconMapping = {
|
||||
[variables.getMessage('modals.main.marketplace.product.overview')]: <Overview />,
|
||||
[variables.getMessage('modals.main.navbar.settings')]: <Settings />,
|
||||
[variables.getMessage('modals.main.navbar.addons')]: <Addons />,
|
||||
[variables.getMessage('modals.main.navbar.marketplace')]: <Marketplace />,
|
||||
[variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: <Navbar />,
|
||||
[variables.getMessage('modals.main.settings.sections.greeting.title')]: <Greeting />,
|
||||
[variables.getMessage('modals.main.settings.sections.time.title')]: <Time />,
|
||||
[variables.getMessage('modals.main.settings.sections.quicklinks.title')]: <QuickLinks />,
|
||||
[variables.getMessage('modals.main.settings.sections.quote.title')]: <Quote />,
|
||||
[variables.getMessage('modals.main.settings.sections.date.title')]: <Date />,
|
||||
[variables.getMessage('modals.main.settings.sections.message.title')]: <Message />,
|
||||
[variables.getMessage('modals.main.settings.sections.background.title')]: <Background />,
|
||||
[variables.getMessage('modals.main.settings.sections.search.title')]: <MdSearch />,
|
||||
[variables.getMessage('modals.main.settings.sections.weather.title')]: <Weather />,
|
||||
[variables.getMessage('modals.main.settings.sections.appearance.title')]: <Appearance />,
|
||||
[variables.getMessage('modals.main.settings.sections.language.title')]: <Language />,
|
||||
[variables.getMessage('modals.main.settings.sections.advanced.title')]: <Advanced />,
|
||||
[variables.getMessage('modals.main.settings.sections.stats.title')]: <Stats />,
|
||||
[variables.getMessage('modals.main.settings.sections.experimental.title')]: <Experimental />,
|
||||
[variables.getMessage('modals.main.settings.sections.changelog.title')]: <Changelog />,
|
||||
[variables.getMessage('modals.main.settings.sections.about.title')]: <About />,
|
||||
[variables.getMessage('modals.main.addons.added')]: <Added />,
|
||||
[variables.getMessage('modals.main.addons.create.title')]: <Create />,
|
||||
[variables.getMessage('modals.main.marketplace.all')]: <Addons />,
|
||||
[variables.getMessage('modals.main.marketplace.photo_packs')]: <Background />,
|
||||
[variables.getMessage('modals.main.marketplace.quote_packs')]: <Quote />,
|
||||
[variables.getMessage('modals.main.marketplace.preset_settings')]: <Advanced />,
|
||||
[variables.getMessage('modals.main.marketplace.collections')]: <Collections />,
|
||||
};
|
||||
|
||||
function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||
const [isExperimental, setIsExperimental] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setIsExperimental(localStorage.getItem('experimental') !== 'false');
|
||||
}, []);
|
||||
|
||||
let className = navbarTab ? 'navbar-item' : 'tab-list-item';
|
||||
if (currentTab === label) {
|
||||
className += navbarTab ? ' navbar-item-active' : ' tab-list-active';
|
||||
}
|
||||
|
||||
const icon = iconMapping[label];
|
||||
const divider = [
|
||||
variables.getMessage('modals.main.settings.sections.weather.title'),
|
||||
variables.getMessage('modals.main.settings.sections.language.title'),
|
||||
variables.getMessage('modals.main.marketplace.all'),
|
||||
variables.getMessage('modals.main.settings.sections.experimental.title'),
|
||||
].includes(label);
|
||||
const mue = [
|
||||
variables.getMessage('modals.main.marketplace.product.overview'),
|
||||
variables.getMessage('modals.main.addons.added'),
|
||||
variables.getMessage('modals.main.marketplace.all'),
|
||||
].includes(label);
|
||||
|
||||
if (
|
||||
label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
|
||||
!isExperimental
|
||||
) {
|
||||
return <hr />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{mue && <span className="mainTitle">Mue</span>}
|
||||
<button className={className} onClick={() => onClick(label)}>
|
||||
{icon} <span>{label}</span>
|
||||
</button>
|
||||
{divider && <hr />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Tab);
|
||||
121
src/components/Elements/MainModal/backend/Tabs.jsx
Normal file
121
src/components/Elements/MainModal/backend/Tabs.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import variables from 'config/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import {
|
||||
MdSettings,
|
||||
MdOutlineShoppingBasket,
|
||||
MdOutlineExtension,
|
||||
MdRefresh,
|
||||
MdClose,
|
||||
} from 'react-icons/md';
|
||||
import Tab from './Tab';
|
||||
import { Button } from 'components/Elements';
|
||||
import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
|
||||
|
||||
class Tabs extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentTab: this.props.children[0].props.label,
|
||||
currentName: this.props.children[0].props.name,
|
||||
};
|
||||
}
|
||||
|
||||
onClick = (tab, name) => {
|
||||
if (name !== this.state.currentName) {
|
||||
variables.stats.postEvent('tab', `Opened ${name}`);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
currentTab: tab,
|
||||
currentName: name,
|
||||
});
|
||||
};
|
||||
|
||||
hideReminder() {
|
||||
localStorage.setItem('showReminder', false);
|
||||
document.querySelector('.reminder-info').style.display = 'none';
|
||||
}
|
||||
|
||||
render() {
|
||||
const navbarButtons = [
|
||||
{
|
||||
tab: 'settings',
|
||||
icon: <MdSettings />,
|
||||
},
|
||||
{
|
||||
tab: 'addons',
|
||||
icon: <MdOutlineExtension />,
|
||||
},
|
||||
{
|
||||
tab: 'marketplace',
|
||||
icon: <MdOutlineShoppingBasket />,
|
||||
},
|
||||
];
|
||||
|
||||
const reminderInfo = (
|
||||
<div
|
||||
className="reminder-info"
|
||||
style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
|
||||
>
|
||||
<div className="shareHeader">
|
||||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.reminder.title')}
|
||||
</span>
|
||||
<span className="closeModal" onClick={() => this.hideReminder()}>
|
||||
<MdClose />
|
||||
</span>
|
||||
</div>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.reminder.message')}
|
||||
</span>
|
||||
<button onClick={() => window.location.reload()}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.error_boundary.refresh')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||
<div className="modalSidebar">
|
||||
{this.props.children.map((tab, index) => (
|
||||
<Tab
|
||||
currentTab={this.state.currentTab}
|
||||
key={index}
|
||||
label={tab.props.label}
|
||||
onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
|
||||
navbarTab={this.props.navbar || false}
|
||||
/>
|
||||
))}
|
||||
{reminderInfo}
|
||||
</div>
|
||||
<div className="modalTabContent">
|
||||
<div className="modalNavbar">
|
||||
{navbarButtons.map(({ tab, icon }, index) => (
|
||||
<Button
|
||||
type="navigation"
|
||||
onClick={() => this.props.changeTab(tab)}
|
||||
icon={icon}
|
||||
label={variables.getMessage(`modals.main.navbar.${tab}`)}
|
||||
active={this.props.current === tab}
|
||||
key={`${tab}-${index}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{this.props.children.map((tab, index) => {
|
||||
if (tab.props.label !== this.state.currentTab) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Tabs;
|
||||
Reference in New Issue
Block a user