2022-04-11 21:57:07 +00:00
|
|
|
import variables from 'modules/variables';
|
|
|
|
import { PureComponent } from 'react';
|
2023-01-21 12:10:40 +00:00
|
|
|
import {
|
|
|
|
MdSettings,
|
|
|
|
MdOutlineShoppingBasket,
|
|
|
|
MdOutlineExtension,
|
|
|
|
MdRefresh,
|
|
|
|
MdClose,
|
|
|
|
} from 'react-icons/md';
|
2022-04-11 21:57:07 +00:00
|
|
|
import Tab from './Tab';
|
|
|
|
import ErrorBoundary from '../../../ErrorBoundary';
|
2021-02-27 13:46:41 +00:00
|
|
|
|
2021-08-14 19:10:48 +00:00
|
|
|
export default class Tabs extends PureComponent {
|
2021-02-27 13:46:41 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2021-07-02 20:29:33 +00:00
|
|
|
currentTab: this.props.children[0].props.label,
|
2022-04-08 13:48:36 +00:00
|
|
|
currentName: this.props.children[0].props.name,
|
2021-02-27 13:46:41 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-07-02 20:29:33 +00:00
|
|
|
onClick = (tab, name) => {
|
|
|
|
if (name !== this.state.currentName) {
|
2022-04-11 21:57:07 +00:00
|
|
|
variables.stats.postEvent('tab', `Opened ${name}`);
|
2021-06-21 22:03:47 +00:00
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
this.setState({
|
2021-07-02 20:29:33 +00:00
|
|
|
currentTab: tab,
|
2022-04-08 13:48:36 +00:00
|
|
|
currentName: name,
|
2021-03-17 17:55:58 +00:00
|
|
|
});
|
2021-02-27 13:46:41 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2022-10-30 16:43:08 +00:00
|
|
|
const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
const reminderInfo = (
|
2022-10-30 16:43:08 +00:00
|
|
|
<div className="reminder-info" style={{ display }}>
|
2023-01-21 12:10:40 +00:00
|
|
|
<div className="shareHeader">
|
|
|
|
<span className="title">
|
|
|
|
{variables.getMessage('modals.main.settings.reminder.title')}
|
|
|
|
</span>
|
|
|
|
<span className="closeModal" onClick={ () => localStorage.setItem('showReminder', false)}>
|
|
|
|
<MdClose />
|
|
|
|
</span>
|
|
|
|
</div>
|
2022-04-08 13:48:36 +00:00
|
|
|
<span className="subtitle">
|
2022-08-26 09:45:32 +00:00
|
|
|
{variables.getMessage('modals.main.settings.reminder.message')}
|
2022-04-08 13:48:36 +00:00
|
|
|
</span>
|
|
|
|
<button onClick={() => window.location.reload()}>
|
2022-08-16 11:09:57 +00:00
|
|
|
<MdRefresh />
|
2022-08-26 09:45:32 +00:00
|
|
|
{variables.getMessage('modals.main.error_boundary.refresh')}
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
);
|
2021-02-27 13:46:41 +00:00
|
|
|
|
2022-04-11 21:57:07 +00:00
|
|
|
let settingsActive = '';
|
|
|
|
let addonsActive = '';
|
|
|
|
let marketplaceActive = '';
|
2022-04-08 13:48:36 +00:00
|
|
|
|
|
|
|
switch (this.props.current) {
|
2022-04-11 21:57:07 +00:00
|
|
|
case 'settings':
|
|
|
|
settingsActive = ' navbar-item-active';
|
2022-04-08 13:48:36 +00:00
|
|
|
break;
|
2022-04-11 21:57:07 +00:00
|
|
|
case 'addons':
|
|
|
|
addonsActive = ' navbar-item-active';
|
2022-04-08 13:48:36 +00:00
|
|
|
break;
|
2022-04-11 21:57:07 +00:00
|
|
|
case 'marketplace':
|
|
|
|
marketplaceActive = ' navbar-item-active';
|
2022-04-08 13:48:36 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2021-02-27 13:46:41 +00:00
|
|
|
return (
|
2022-10-19 17:09:06 +00:00
|
|
|
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
2022-10-21 21:33:30 +00:00
|
|
|
<ul className="sidebar">
|
2021-04-12 13:56:23 +00:00
|
|
|
{this.props.children.map((tab, index) => (
|
|
|
|
<Tab
|
|
|
|
currentTab={this.state.currentTab}
|
2021-07-10 20:59:53 +00:00
|
|
|
key={index}
|
2021-04-12 13:56:23 +00:00
|
|
|
label={tab.props.label}
|
2021-07-02 20:29:33 +00:00
|
|
|
onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
|
2021-08-29 17:02:25 +00:00
|
|
|
navbarTab={this.props.navbar || false}
|
2021-04-12 13:56:23 +00:00
|
|
|
/>
|
|
|
|
))}
|
2022-08-16 11:09:57 +00:00
|
|
|
{reminderInfo}
|
2021-02-27 13:46:41 +00:00
|
|
|
</ul>
|
2022-04-11 21:57:07 +00:00
|
|
|
<div className="tab-content" style={{ width: '100%' }}>
|
2021-03-01 12:06:02 +00:00
|
|
|
<ErrorBoundary>
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="modalNavbar">
|
|
|
|
<button
|
2022-04-11 21:57:07 +00:00
|
|
|
className={'navbar-item' + settingsActive}
|
|
|
|
onClick={() => this.props.changeTab('settings')}
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
|
|
|
<MdSettings />
|
2022-08-26 09:45:32 +00:00
|
|
|
<span> {variables.getMessage('modals.main.navbar.settings')}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
|
|
|
<button
|
2022-04-11 21:57:07 +00:00
|
|
|
className={'navbar-item' + addonsActive}
|
|
|
|
onClick={() => this.props.changeTab('addons')}
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
|
|
|
<MdOutlineExtension />
|
2022-08-26 09:45:32 +00:00
|
|
|
<span>{variables.getMessage('modals.main.navbar.addons')}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
|
|
|
<button
|
2022-04-11 21:57:07 +00:00
|
|
|
className={'navbar-item' + marketplaceActive}
|
|
|
|
onClick={() => this.props.changeTab('marketplace')}
|
2022-04-08 13:48:36 +00:00
|
|
|
>
|
|
|
|
<MdOutlineShoppingBasket />
|
2022-08-26 09:45:32 +00:00
|
|
|
<span>{variables.getMessage('modals.main.navbar.marketplace')}</span>
|
2022-04-08 13:48:36 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2021-04-12 13:56:23 +00:00
|
|
|
{this.props.children.map((tab) => {
|
|
|
|
if (tab.props.label !== this.state.currentTab) {
|
2021-04-02 12:51:22 +00:00
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
2021-04-12 13:56:23 +00:00
|
|
|
return tab.props.children;
|
2021-03-23 09:44:57 +00:00
|
|
|
})}
|
2021-03-01 12:06:02 +00:00
|
|
|
</ErrorBoundary>
|
2021-02-27 13:46:41 +00:00
|
|
|
</div>
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
2021-02-27 13:46:41 +00:00
|
|
|
);
|
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|