mirror of
https://github.com/mue/mue.git
synced 2026-07-13 20:13:47 +02:00
Fix marketplace and addons (WIP)
This commit is contained in:
David Ralph
@@ -2,28 +2,19 @@ import React from 'react';
|
||||
|
||||
export default function Items(props) {
|
||||
if (props.items.length === 0) {
|
||||
return null; // if there are no items in category don't render it
|
||||
}
|
||||
|
||||
let seeMoreHTML;
|
||||
if (props.seeMoreFunction && props.items.length === 3) {
|
||||
seeMoreHTML = <button className='addToMue seemore' onClick={props.seeMoreFunction}>{props.seeMoreTitle}</button>; // only render see more button if there are enough addons
|
||||
return null; // todo: add message here
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{seeMoreHTML}
|
||||
<h1>{props.title}</h1>
|
||||
<div className='items'>
|
||||
{props.items.map((item) =>
|
||||
<div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
|
||||
<img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
|
||||
<div className='details'>
|
||||
<h4>{item.display_name ? item.display_name : item.name}</h4>
|
||||
<p>{item.author}</p>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='items'>
|
||||
{props.items.map((item) =>
|
||||
<div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
|
||||
<img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
|
||||
<div className='details'>
|
||||
<h4>{item.display_name ? item.display_name : item.name}</h4>
|
||||
<p>{item.author}</p>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
93
src/components/modals/marketplace/sections/Added.jsx
Normal file
93
src/components/modals/marketplace/sections/Added.jsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
|
||||
import LocalMallIcon from '@material-ui/icons/LocalMall';
|
||||
import Item from '../Item';
|
||||
import Items from '../Items';
|
||||
import FileUpload from '../../settings/FileUpload';
|
||||
|
||||
export default class Added extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
installed: JSON.parse(localStorage.getItem('installed')),
|
||||
current_data: {
|
||||
type: '',
|
||||
name: '',
|
||||
content: {}
|
||||
},
|
||||
item_data: {
|
||||
name: 'Name',
|
||||
author: 'Author',
|
||||
description: 'Description',
|
||||
updated: '???',
|
||||
version: '1.0.0',
|
||||
icon: ''
|
||||
},
|
||||
button: ''
|
||||
}
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
|
||||
}
|
||||
}
|
||||
|
||||
toggle(type, type2, data) {
|
||||
if (type === 'item') {
|
||||
const installed = JSON.parse(localStorage.getItem('installed'));
|
||||
const info = installed.find(i => i.name === data);
|
||||
|
||||
this.setState({
|
||||
current_data: {
|
||||
type: type2,
|
||||
name: data,
|
||||
content: info
|
||||
},
|
||||
item_data: {
|
||||
name: info.name,
|
||||
author: info.author,
|
||||
description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
|
||||
updated: 'Not Implemented',
|
||||
version: info.version,
|
||||
icon: info.screenshot_url
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('item').style.display = 'block';
|
||||
document.getElementById('marketplace').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('marketplace').style.display = 'block';
|
||||
document.getElementById('item').style.display = 'none';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
button: this.buttons.uninstall
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
|
||||
|
||||
if (this.state.installed.length === 0) {
|
||||
content = (
|
||||
<div className='items'>
|
||||
<div className='emptyMessage'>
|
||||
<LocalMallIcon/>
|
||||
<h1>Empty</h1>
|
||||
<p className='description'>Nothing here (yet)</p>
|
||||
<button className='goToMarket'>not implemented</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id='marketplace'>
|
||||
<FileUpload id='file-input' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
|
||||
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>
|
||||
{content}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
176
src/components/modals/marketplace/sections/Marketplace.jsx
Normal file
176
src/components/modals/marketplace/sections/Marketplace.jsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
|
||||
import WifiOffIcon from '@material-ui/icons/WifiOff';
|
||||
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
|
||||
import Item from '../Item';
|
||||
import Items from '../Items';
|
||||
|
||||
import MarketplaceFunctions from '../../../../modules/helpers/marketplace';
|
||||
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
import * as Constants from '../../../../modules/constants';
|
||||
|
||||
export default class Marketplace extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
items: [],
|
||||
current_data: {
|
||||
type: '',
|
||||
name: '',
|
||||
content: {}
|
||||
},
|
||||
button: '',
|
||||
featured: {},
|
||||
done: false,
|
||||
item_data: {
|
||||
name: 'Name',
|
||||
author: 'Author',
|
||||
description: 'Description',
|
||||
updated: '???',
|
||||
version: '1.0.0',
|
||||
icon: ''
|
||||
}
|
||||
}
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
|
||||
install: <button className='addToMue' onClick={() => this.manage('install')}>Add to Mue</button>
|
||||
}
|
||||
}
|
||||
|
||||
async toggle(type, data) {
|
||||
switch (type) {
|
||||
case 'item':
|
||||
let info; // get item info
|
||||
try {
|
||||
info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
|
||||
} catch (e) {
|
||||
return toast(this.props.toastLanguage.error);
|
||||
}
|
||||
|
||||
// check if already installed
|
||||
let button = this.buttons.install;
|
||||
|
||||
const installed = JSON.parse(localStorage.getItem('installed'));
|
||||
|
||||
if (installed.some(item => item.name === data)) {
|
||||
button = this.buttons.uninstall;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
current_data: { type: this.props.type, name: data, content: info },
|
||||
item_data: {
|
||||
name: info.data.name,
|
||||
author: info.data.author,
|
||||
description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
|
||||
updated: info.updated,
|
||||
version: info.data.version,
|
||||
icon: info.data.screenshot_url
|
||||
},
|
||||
button: button
|
||||
});
|
||||
|
||||
document.getElementById('marketplace').style.display = 'none';
|
||||
document.getElementById('item').style.display = 'block';
|
||||
break;
|
||||
|
||||
default:
|
||||
document.getElementById('marketplace').style.display = 'block';
|
||||
document.getElementById('item').style.display = 'none';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async getItems() {
|
||||
const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
|
||||
const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
|
||||
|
||||
this.setState({
|
||||
items: data[this.props.type],
|
||||
featured: featured.data,
|
||||
done: true
|
||||
});
|
||||
}
|
||||
|
||||
manage(type) {
|
||||
switch (type) {
|
||||
case 'install':
|
||||
MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
|
||||
break;
|
||||
case 'uninstall':
|
||||
MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
toast(this.props.toastLanguage[type + 'ed']);
|
||||
this.setState({
|
||||
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (localStorage.getItem('animations') === 'true') {
|
||||
document.getElementById('marketplace').classList.add('marketplaceanimation');
|
||||
}
|
||||
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.getItems();
|
||||
}
|
||||
|
||||
render() {
|
||||
const errorMessage = (msg) => {
|
||||
return (
|
||||
<div id='marketplace'>
|
||||
<div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
|
||||
{msg}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (navigator.onLine === false) {
|
||||
return errorMessage(
|
||||
<React.Fragment>
|
||||
<WifiOffIcon/>
|
||||
<h1>Offline</h1>
|
||||
<p className='description'>Mue down!</p>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('offlineMode') === 'true') {
|
||||
return errorMessage(
|
||||
<React.Fragment>
|
||||
<WifiOffIcon/>
|
||||
<h1>Offline mode is enabled</h1>
|
||||
<p className='description'>Please turn off offline mode to access the marketplace</p>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.done === false) {
|
||||
return errorMessage(<h1>Loading</h1>);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id='marketplace'>
|
||||
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
|
||||
<p>{this.state.featured.title}</p>
|
||||
<h1>{this.state.featured.name}</h1>
|
||||
<button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
|
||||
</div>
|
||||
<Items
|
||||
items={this.state.items.slice(0, 3)}
|
||||
toggleFunction={(input) => this.toggle('item', input)} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,129 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import LocalMallIcon from '@material-ui/icons/LocalMall';
|
||||
import Item from '../marketplace/Item';
|
||||
import Items from '../marketplace/Items';
|
||||
import FileUpload from '../settings/FileUpload';
|
||||
import Added from '../marketplace/sections/Added';
|
||||
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
import MarketplaceFunctions from '../../../modules/helpers/marketplace';
|
||||
|
||||
export default class Addons extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
installed: JSON.parse(localStorage.getItem('installed')),
|
||||
current_data: {
|
||||
type: '',
|
||||
name: '',
|
||||
content: {}
|
||||
},
|
||||
item_data: {
|
||||
name: 'Name',
|
||||
author: 'Author',
|
||||
description: 'Description',
|
||||
updated: '???',
|
||||
version: '1.0.0',
|
||||
icon: ''
|
||||
},
|
||||
button: ''
|
||||
}
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
|
||||
}
|
||||
}
|
||||
|
||||
toggle(type, type2, data) {
|
||||
if (type === 'item') {
|
||||
const installed = JSON.parse(localStorage.getItem('installed'));
|
||||
const info = installed.find(i => i.name === data);
|
||||
|
||||
this.setState({
|
||||
current_data: {
|
||||
type: type2,
|
||||
name: data,
|
||||
content: info
|
||||
},
|
||||
item_data: {
|
||||
name: info.name,
|
||||
author: info.author,
|
||||
description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
|
||||
updated: 'Not Implemented',
|
||||
version: info.version,
|
||||
icon: info.screenshot_url
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('item').style.display = 'block';
|
||||
document.getElementById('marketplace').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('marketplace').style.display = 'block';
|
||||
document.getElementById('item').style.display = 'none';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
button: this.buttons.uninstall
|
||||
});
|
||||
}
|
||||
|
||||
manage(type, input) {
|
||||
switch (type) {
|
||||
case 'install':
|
||||
MarketplaceFunctions.install(input.type, input, true);
|
||||
break;
|
||||
case 'uninstall':
|
||||
MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
toast(this.props.toastLanguage[type + 'ed']);
|
||||
|
||||
let button = '';
|
||||
if (type === 'install') {
|
||||
button = this.buttons.uninstall;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
button: button,
|
||||
installed: JSON.parse(localStorage.getItem('installed'))
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (localStorage.getItem('animations') === 'true') {
|
||||
document.getElementById('marketplace').classList.add('marketplaceanimation');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
|
||||
|
||||
if (this.state.installed.length === 0) {
|
||||
content = (
|
||||
<div className='items'>
|
||||
<div className='emptyMessage'>
|
||||
<LocalMallIcon/>
|
||||
<h1>{this.props.language.empty.title}</h1>
|
||||
<p className='description'>{this.props.language.empty.description}</p>
|
||||
<button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import AddonsTabs from './backend/Tabs';
|
||||
|
||||
export default function Addons (props) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id='marketplace'>
|
||||
<FileUpload id='file-input' accept='application/json' loadFunction={(e) => this.manage('install', JSON.parse(e.target.result))} />
|
||||
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
|
||||
<h1>{this.props.language.added}</h1>
|
||||
{content}
|
||||
</div>
|
||||
<Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
<React.Fragment>
|
||||
<AddonsTabs>
|
||||
<div label='Added'>
|
||||
<Added/>
|
||||
</div>
|
||||
<div label=''>
|
||||
|
||||
</div>
|
||||
</AddonsTabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -1,223 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import WifiOffIcon from '@material-ui/icons/WifiOff';
|
||||
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
|
||||
import Item from '../marketplace/Item';
|
||||
import Items from '../marketplace/Items';
|
||||
|
||||
import MarketplaceFunctions from '../../../modules/helpers/marketplace';
|
||||
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
import * as Constants from '../../../modules/constants';
|
||||
|
||||
export default class Marketplace extends React.PureComponent {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
settings: [],
|
||||
photo_packs: [],
|
||||
quote_packs: [],
|
||||
see_more: [],
|
||||
see_more_type: '',
|
||||
current_data: {
|
||||
type: '',
|
||||
name: '',
|
||||
content: {}
|
||||
},
|
||||
button: '',
|
||||
featured: {},
|
||||
done: false,
|
||||
item_data: {
|
||||
name: 'Name',
|
||||
author: 'Author',
|
||||
description: 'Description',
|
||||
updated: '???',
|
||||
version: '1.0.0',
|
||||
icon: ''
|
||||
}
|
||||
}
|
||||
this.buttons = {
|
||||
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.language.product.buttons.remove}</button>,
|
||||
install: <button className='addToMue' onClick={() => this.manage('install')}>{this.props.language.product.buttons.addtomue}</button>
|
||||
}
|
||||
}
|
||||
|
||||
async toggle(type, type2, data) {
|
||||
switch (type) {
|
||||
case 'seemore':
|
||||
document.getElementById('marketplace').style.display = 'none';
|
||||
document.getElementById('seemore').style.display = 'block';
|
||||
|
||||
this.setState({
|
||||
see_more: this.state[type2],
|
||||
see_more_type: type2
|
||||
});
|
||||
break;
|
||||
|
||||
case 'item':
|
||||
let info; // get item info
|
||||
try {
|
||||
info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
|
||||
} catch (e) {
|
||||
return toast(this.props.toastLanguage.error);
|
||||
}
|
||||
|
||||
// check if already installed
|
||||
let button = this.buttons.install;
|
||||
|
||||
const installed = JSON.parse(localStorage.getItem('installed'));
|
||||
|
||||
if (installed.some(item => item.name === data)) {
|
||||
button = this.buttons.uninstall;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
current_data: { type: type2, name: data, content: info },
|
||||
item_data: {
|
||||
name: info.data.name,
|
||||
author: info.data.author,
|
||||
description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
|
||||
updated: info.updated,
|
||||
version: info.data.version,
|
||||
icon: info.data.screenshot_url
|
||||
},
|
||||
button: button
|
||||
});
|
||||
|
||||
document.getElementById('marketplace').style.display = 'none';
|
||||
document.getElementById('seemore').style.display = 'none';
|
||||
document.getElementById('item').style.display = 'block';
|
||||
break;
|
||||
|
||||
default:
|
||||
document.getElementById('marketplace').style.display = 'block';
|
||||
document.getElementById('item').style.display = 'none';
|
||||
document.getElementById('seemore').style.display = 'none';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async getItems() {
|
||||
const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
|
||||
const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
|
||||
|
||||
this.setState({
|
||||
settings: data.settings,
|
||||
photo_packs: data.photo_packs,
|
||||
quote_packs: data.quote_packs,
|
||||
see_more: data.photo_packs,
|
||||
featured: featured.data,
|
||||
done: true
|
||||
});
|
||||
}
|
||||
|
||||
manage(type) {
|
||||
switch (type) {
|
||||
case 'install':
|
||||
MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
|
||||
break;
|
||||
case 'uninstall':
|
||||
MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
toast(this.props.toastLanguage[type + 'ed']);
|
||||
this.setState({
|
||||
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (localStorage.getItem('animations') === 'true') {
|
||||
document.getElementById('marketplace').classList.add('marketplaceanimation');
|
||||
}
|
||||
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.getItems();
|
||||
}
|
||||
|
||||
render() {
|
||||
const errorMessage = (msg) => {
|
||||
return (
|
||||
<div id='marketplace'>
|
||||
<div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
|
||||
{msg}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (navigator.onLine === false) {
|
||||
return errorMessage(
|
||||
<React.Fragment>
|
||||
<WifiOffIcon/>
|
||||
<h1>{this.props.language.offline.title}</h1>
|
||||
<p className='description'>{this.props.language.offline.description}</p>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('offlineMode') === 'true') {
|
||||
return errorMessage(
|
||||
<React.Fragment>
|
||||
<WifiOffIcon/>
|
||||
<h1>Offline mode is enabled</h1>
|
||||
<p className='description'>Please turn off offline mode to access the marketplace</p>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.done === false) {
|
||||
return errorMessage(<h1>{this.props.updateLanguage.loading}</h1>);
|
||||
}
|
||||
import MarketplaceBackend from '../marketplace/sections/Marketplace';
|
||||
import MarketplaceTabs from './backend/Tabs';
|
||||
|
||||
export default function Marketplace (props) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id='marketplace'>
|
||||
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
|
||||
<p>{this.state.featured.title}</p>
|
||||
<h1>{this.state.featured.name}</h1>
|
||||
<button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
|
||||
</div>
|
||||
<Items
|
||||
title={this.props.language.photo_packs}
|
||||
seeMoreTitle={this.props.language.see_more}
|
||||
items={this.state.photo_packs.slice(0, 3)}
|
||||
toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
|
||||
seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
|
||||
<Items
|
||||
title={this.props.language.preset_settings}
|
||||
seeMoreTitle={this.props.language.see_more}
|
||||
items={this.state.settings.slice(0, 3)}
|
||||
toggleFunction={(input) => this.toggle('item', 'settings', input)}
|
||||
seeMoreFunction={() => this.toggle('seemore', 'settings')} />
|
||||
<Items
|
||||
title={this.props.language.quote_packs}
|
||||
seeMoreTitle={this.props.language.see_more}
|
||||
items={this.state.quote_packs.slice(0, 3)}
|
||||
toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
|
||||
seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
|
||||
</div>
|
||||
<Item
|
||||
button={this.state.button}
|
||||
data={this.state.item_data}
|
||||
content={this.state.current_data}
|
||||
function={() => this.toggle()} language={this.props.language.product} />
|
||||
<div id='seemore'>
|
||||
<ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
|
||||
<Items
|
||||
title={this.props.language.see_more}
|
||||
seeMoreTitle={this.props.language.see_more}
|
||||
toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
|
||||
items={this.state.see_more} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
<React.Fragment>
|
||||
<MarketplaceTabs>
|
||||
<div label='Photo Packs'>
|
||||
<MarketplaceBackend type='photo_packs'/>
|
||||
</div>
|
||||
<div label='Quote Packs'>
|
||||
<MarketplaceBackend type='quote_packs'/>
|
||||
</div>
|
||||
</MarketplaceTabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -67,7 +67,7 @@ export default class Tab extends React.PureComponent {
|
||||
// Store
|
||||
case 'Themes': icon = <Colors/>; break;
|
||||
case 'Photo Packs': icon = <Background/>; break;
|
||||
case 'Quotes Packs': icon = <Quote/>; break;
|
||||
case 'Quote Packs': icon = <Quote/>; break;
|
||||
case 'Plugins':
|
||||
icon = <Plugins/>;
|
||||
divider = <div><hr/></div>;
|
||||
|
||||
Reference in New Issue
Block a user