mirror of https://github.com/mue/mue.git
refactor(tab): tab list use mapping
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
parent
2f9acde332
commit
ad4532c150
|
@ -1,5 +1,5 @@
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
import { memo } from 'react';
|
import { memo, useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
MdSettings as Settings,
|
MdSettings as Settings,
|
||||||
MdWidgets as Addons,
|
MdWidgets as Addons,
|
||||||
|
@ -27,137 +27,76 @@ import {
|
||||||
MdCollectionsBookmark as Collections,
|
MdCollectionsBookmark as Collections,
|
||||||
} from 'react-icons/md';
|
} 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 }) {
|
function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||||
let className = 'tab-list-item';
|
const [isExperimental, setIsExperimental] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsExperimental(localStorage.getItem('experimental') !== 'false');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
let className = navbarTab ? 'navbar-item' : 'tab-list-item';
|
||||||
if (currentTab === label) {
|
if (currentTab === label) {
|
||||||
className += ' tab-list-active';
|
className += navbarTab ? ' navbar-item-active' : ' tab-list-active';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (navbarTab === true) {
|
const icon = iconMapping[label];
|
||||||
className = 'navbar-item';
|
const divider = [
|
||||||
if (currentTab === label) {
|
variables.getMessage('modals.main.settings.sections.weather.title'),
|
||||||
className += ' navbar-item-active';
|
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);
|
||||||
|
|
||||||
let icon, divider, mue;
|
if (
|
||||||
switch (label) {
|
label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
|
||||||
case variables.getMessage('modals.main.marketplace.product.overview'):
|
!isExperimental
|
||||||
icon = <Overview />;
|
) {
|
||||||
mue = true;
|
return <hr />;
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.navbar.settings'):
|
|
||||||
icon = <Settings />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.navbar.addons'):
|
|
||||||
icon = <Addons />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.navbar.marketplace'):
|
|
||||||
icon = <Marketplace />;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case variables.getMessage('modals.main.settings.sections.appearance.navbar.title'):
|
|
||||||
icon = <Navbar />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.greeting.title'):
|
|
||||||
icon = <Greeting />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.time.title'):
|
|
||||||
icon = <Time />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.quicklinks.title'):
|
|
||||||
icon = <QuickLinks />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.quote.title'):
|
|
||||||
icon = <Quote />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.date.title'):
|
|
||||||
icon = <Date />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.message.title'):
|
|
||||||
icon = <Message />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.background.title'):
|
|
||||||
icon = <Background />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.search.title'):
|
|
||||||
icon = <MdSearch />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.weather.title'):
|
|
||||||
icon = <Weather />;
|
|
||||||
divider = true;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.appearance.title'):
|
|
||||||
icon = <Appearance />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.language.title'):
|
|
||||||
icon = <Language />;
|
|
||||||
divider = true;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.advanced.title'):
|
|
||||||
icon = <Advanced />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.stats.title'):
|
|
||||||
icon = <Stats />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.experimental.title'):
|
|
||||||
icon = <Experimental />;
|
|
||||||
divider = true;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.changelog.title'):
|
|
||||||
icon = <Changelog />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.settings.sections.about.title'):
|
|
||||||
icon = <About />;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case variables.getMessage('modals.main.addons.added'):
|
|
||||||
mue = true;
|
|
||||||
icon = <Added />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.addons.create.title'):
|
|
||||||
icon = <Create />;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case variables.getMessage('modals.main.marketplace.all'):
|
|
||||||
icon = <Addons />;
|
|
||||||
divider = true;
|
|
||||||
mue = true;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.marketplace.photo_packs'):
|
|
||||||
icon = <Background />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.marketplace.quote_packs'):
|
|
||||||
icon = <Quote />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.marketplace.preset_settings'):
|
|
||||||
icon = <Advanced />;
|
|
||||||
break;
|
|
||||||
case variables.getMessage('modals.main.marketplace.collections'):
|
|
||||||
icon = <Collections />;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case variables.getMessage('modals.main.loading'):
|
|
||||||
mue = true;
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (label === variables.getMessage('modals.main.settings.sections.experimental.title')) {
|
|
||||||
if (localStorage.getItem('experimental') === 'false') {
|
|
||||||
return <hr />;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{mue === true && <span className="mainTitle">Mue</span>}
|
{mue && <span className="mainTitle">Mue</span>}
|
||||||
<button className={className} onClick={() => onClick(label)}>
|
<button className={className} onClick={() => onClick(label)}>
|
||||||
{icon} <span>{label}</span>
|
{icon} <span>{label}</span>
|
||||||
</button>
|
</button>
|
||||||
{divider === true && <hr />}
|
{divider && <hr />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,60 +1,45 @@
|
||||||
import { PureComponent, createRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
import EventBus from 'modules/helpers/eventbus';
|
import EventBus from 'modules/helpers/eventbus';
|
||||||
|
|
||||||
import './message.scss';
|
import './message.scss';
|
||||||
|
|
||||||
export default class Message extends PureComponent {
|
const Message = () => {
|
||||||
constructor(props) {
|
const [messageText, setMessageText] = useState('');
|
||||||
super(props);
|
const [display, setDisplay] = useState('none');
|
||||||
this.state = {
|
const [fontSize, setFontSize] = useState('1em');
|
||||||
messageText: '',
|
const message = useRef();
|
||||||
};
|
|
||||||
this.message = createRef();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
useEffect(() => {
|
||||||
EventBus.on('refresh', (data) => {
|
const handleRefresh = (data) => {
|
||||||
if (data === 'message') {
|
if (data === 'message') {
|
||||||
if (localStorage.getItem('message') === 'false') {
|
const messageSetting = localStorage.getItem('message');
|
||||||
return (this.message.current.style.display = 'none');
|
const zoomMessage = localStorage.getItem('zoomMessage');
|
||||||
}
|
setDisplay(messageSetting === 'false' ? 'none' : 'block');
|
||||||
|
setFontSize(`${1 * Number((zoomMessage || 100) / 100)}em`);
|
||||||
this.message.current.style.display = 'block';
|
|
||||||
this.message.current.style.fontSize = `${
|
|
||||||
1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
|
|
||||||
}em`;
|
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
const messages = JSON.parse(localStorage.getItem('messages')) || [];
|
const messages = JSON.parse(localStorage.getItem('messages')) || [];
|
||||||
if (messages.length === 0) {
|
if (messages.length > 0) {
|
||||||
return (this.message.current.style.display = 'none');
|
setMessageText(messages[Math.floor(Math.random() * messages.length)]);
|
||||||
|
setDisplay('block');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.message.current.style.fontSize = `${
|
EventBus.on('refresh', handleRefresh);
|
||||||
1 * Number((localStorage.getItem('zoomMessage') || 100) / 100)
|
return () => {
|
||||||
}em`;
|
EventBus.off('refresh');
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
this.setState({
|
return (
|
||||||
messageText: messages[Math.floor(Math.random() * messages.length)],
|
<h2 className="message" ref={message} style={{ display, fontSize }}>
|
||||||
});
|
{messageText.split('\\n').map((item) => (
|
||||||
}
|
<span key={item}>
|
||||||
|
{item}
|
||||||
|
<br />
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</h2>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
componentWillUnmount() {
|
export default Message;
|
||||||
EventBus.off('refresh');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<h2 className="message" ref={this.message}>
|
|
||||||
{this.state.messageText.split('\\n').map((item, i) => (
|
|
||||||
<span key={i}>
|
|
||||||
{item}
|
|
||||||
<br />
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</h2>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue