cleanup and start to separate logic
This commit is contained in:
parent
73ee66e7d6
commit
8a0b0e5b0f
28
js/main.js
28
js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,4 @@
|
||||||
/* eslint-disable no-console */
|
import Logger from "./logger";
|
||||||
|
|
||||||
export default class Utilities {
|
export default class Utilities {
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ export default class Utilities {
|
||||||
static suppressErrors(method, message) {
|
static suppressErrors(method, message) {
|
||||||
return (...params) => {
|
return (...params) => {
|
||||||
try { return method(...params); }
|
try { return method(...params); }
|
||||||
catch (e) { this.err("SuppressedError", "Error occurred in " + message, e); }
|
catch (e) { Logger.stacktrace("SuppressedError", "Error occurred in " + message, e); }
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -117,7 +117,7 @@ export default class Utilities {
|
||||||
return obj[mod];
|
return obj[mod];
|
||||||
},
|
},
|
||||||
set: function(obj, mod, value) {
|
set: function(obj, mod, value) {
|
||||||
if (obj.hasOwnProperty(mod)) return this.err("MemoizedObject", "Trying to overwrite existing property");
|
if (obj.hasOwnProperty(mod)) return Logger.error("MemoizedObject", "Trying to overwrite existing property");
|
||||||
obj[mod] = value;
|
obj[mod] = value;
|
||||||
return obj[mod];
|
return obj[mod];
|
||||||
}
|
}
|
||||||
|
@ -242,14 +242,14 @@ export default class Utilities {
|
||||||
const name = getDisplayName(owner);
|
const name = getDisplayName(owner);
|
||||||
return (name !== null && !!(nameFilter.includes(name) ^ excluding));
|
return (name !== null && !!(nameFilter.includes(name) ^ excluding));
|
||||||
}
|
}
|
||||||
|
|
||||||
let curr = this.getReactInstance(node);
|
let curr = this.getReactInstance(node);
|
||||||
for (curr = curr && curr.return; curr !== null; curr = curr.return) {
|
for (curr = curr && curr.return; curr !== null; curr = curr.return) {
|
||||||
if (curr === null) continue;
|
if (curr === null) continue;
|
||||||
const owner = curr.stateNode;
|
const owner = curr.stateNode;
|
||||||
if (curr !== null && !(owner instanceof HTMLElement) && classFilter(curr) && filter(owner)) return owner;
|
if (curr !== null && !(owner instanceof HTMLElement) && classFilter(curr) && filter(owner)) return owner;
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,12 +1,13 @@
|
||||||
import {React} from "modules";
|
import {React} from "modules";
|
||||||
|
import Manager from "./manager";
|
||||||
|
|
||||||
export default class ServerCard extends React.Component {
|
export default class ServerCard extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
if (!this.props.server.iconUrl) this.props.server.iconUrl = this.props.fallback;
|
if (!this.props.server.iconUrl) this.props.server.iconUrl = Manager.getDefaultAvatar();
|
||||||
this.state = {
|
this.state = {
|
||||||
imageError: false,
|
imageError: false,
|
||||||
joined: this.props.guildList.includes(this.props.server.identifier)
|
joined: Manager.hasJoined(this.props.server.identifier)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,7 +62,7 @@ export default class ServerCard extends React.Component {
|
||||||
React.createElement(
|
React.createElement(
|
||||||
"div",
|
"div",
|
||||||
{className: "ui-button-contents"},
|
{className: "ui-button-contents"},
|
||||||
"Joined"
|
typeof(this.state.joined) == "string" ? "Joining..." : "Joined"
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
server.error && React.createElement(
|
server.error && React.createElement(
|
||||||
|
@ -89,12 +90,13 @@ export default class ServerCard extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleError() {
|
handleError() {
|
||||||
this.props.server.iconUrl = this.props.fallback;
|
this.props.server.iconUrl = Manager.getDefaultAvatar();
|
||||||
this.setState({imageError: true});
|
this.setState({imageError: true});
|
||||||
}
|
}
|
||||||
|
|
||||||
join() {
|
async join() {
|
||||||
this.props.join(this);
|
this.setState({joined: "joining"});
|
||||||
//this.setState({joined: true});
|
const didJoin = await Manager.join(this.props.server.identifier, this.props.server.nativejoin);
|
||||||
|
this.setState({joined: didJoin});
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,34 +0,0 @@
|
||||||
import {React} from "modules";
|
|
||||||
import CloseButton from "../icons/close";
|
|
||||||
|
|
||||||
export default class Tools extends React.Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.onClick = this.onClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return React.createElement("div", {className: "tools-container toolsContainer-1edPuj"},
|
|
||||||
React.createElement("div", {className: "tools tools-3-3s-N"},
|
|
||||||
React.createElement("div", {className: "container-1sFeqf"},
|
|
||||||
React.createElement("div",
|
|
||||||
{className: "btn-close closeButton-1tv5uR", onClick: this.onClick},
|
|
||||||
React.createElement(CloseButton, null)
|
|
||||||
),
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "esc-text keybind-KpFkfr"},
|
|
||||||
"ESC"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick() {
|
|
||||||
if (this.props.onClick) {
|
|
||||||
this.props.onClick();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1,125 @@
|
||||||
|
import {WebpackModules} from "modules";
|
||||||
|
|
||||||
|
const SortedGuildStore = WebpackModules.getByProps("getSortedGuilds");
|
||||||
|
const AvatarDefaults = WebpackModules.getByProps("getUserAvatarURL", "DEFAULT_AVATARS");
|
||||||
|
const InviteActions = WebpackModules.getByProps("acceptInvite");
|
||||||
|
|
||||||
|
const BrowserWindow = require("electron").remote.BrowserWindow;
|
||||||
|
|
||||||
|
|
||||||
|
export default class PublicServersConnection {
|
||||||
|
|
||||||
|
static get endPoint() {return "https://search.discordservers.com";}
|
||||||
|
static get joinEndPoint() {return "https://j.discordservers.com";}
|
||||||
|
static get connectEndPoint() {return "https://auth.discordservers.com/info";}
|
||||||
|
|
||||||
|
static getDefaultAvatar() {
|
||||||
|
return AvatarDefaults.DEFAULT_AVATARS[Math.floor(Math.random() * 5)];
|
||||||
|
}
|
||||||
|
|
||||||
|
static hasJoined(id) {
|
||||||
|
return SortedGuildStore.guildPositions.includes(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
static search({term = "", category = "All", from = 0} = {}) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const query = `?category=${category}&from=${from}${term ? `&term=${term}` : ""}`;
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: `${this.endPoint}${query}`,
|
||||||
|
success: data => {
|
||||||
|
const next = data.size + data.from;
|
||||||
|
resolve({
|
||||||
|
servers: data.results,
|
||||||
|
size: data.size,
|
||||||
|
from: data.from,
|
||||||
|
total: data.total,
|
||||||
|
next: next >= data.total ? null : next
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: resolve(null)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static join(id, native = false) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
if (native) return InviteActions.acceptInvite(id), resolve(true);
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: `${this.joinEndPoint}/${id}`,
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json;",
|
||||||
|
"Content-Type": "application/json;" ,
|
||||||
|
"x-discord-token": this._accessToken
|
||||||
|
},
|
||||||
|
crossDomain: true,
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
success: () => resolve(true),
|
||||||
|
error: () => resolve(false)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static checkConnection() {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
try {
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: this.connectEndPoint,
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json;",
|
||||||
|
"Content-Type": "application/json;"
|
||||||
|
},
|
||||||
|
crossDomain: true,
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
success: data => {
|
||||||
|
this._accessToken = data.accessToken;
|
||||||
|
console.log(this._accessToken);
|
||||||
|
resolve(data);
|
||||||
|
},
|
||||||
|
error: () => resolve(false)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static connect() {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const joinWindow = new BrowserWindow(this.windowOptions);
|
||||||
|
const url = `https://auth.discordservers.com/connect?scopes=guilds.join&previousUrl=${this.connectEndPoint}`;
|
||||||
|
joinWindow.webContents.on("did-navigate", (event, navUrl) => {
|
||||||
|
if (navUrl != this.connectEndPoint) return;
|
||||||
|
joinWindow.close();
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
joinWindow.loadURL(url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static get windowOptions() {
|
||||||
|
return {
|
||||||
|
width: 500,
|
||||||
|
height: 550,
|
||||||
|
backgroundColor: "#282b30",
|
||||||
|
show: true,
|
||||||
|
resizable: false,
|
||||||
|
maximizable: false,
|
||||||
|
minimizable: false,
|
||||||
|
alwaysOnTop: true,
|
||||||
|
frame: false,
|
||||||
|
center: true,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,19 +1,9 @@
|
||||||
import {React, WebpackModules} from "modules";
|
import {React, WebpackModules} from "modules";
|
||||||
import Tools from "./exitbutton";
|
|
||||||
import TabBar from "./tabbar";
|
|
||||||
import SettingsTitle from "../settings/title";
|
import SettingsTitle from "../settings/title";
|
||||||
import ServerCard from "./card";
|
import ServerCard from "./card";
|
||||||
|
import Manager from "./manager";
|
||||||
|
|
||||||
const AvatarDefaults = WebpackModules.getByProps("getUserAvatarURL", "DEFAULT_AVATARS");
|
|
||||||
const InviteActions = WebpackModules.getByProps("acceptInvite");
|
|
||||||
const SortedGuildStore = WebpackModules.getByProps("getSortedGuilds");
|
|
||||||
const SettingsView = WebpackModules.getByDisplayName("SettingsView");
|
const SettingsView = WebpackModules.getByDisplayName("SettingsView");
|
||||||
//SettingsView
|
|
||||||
//onClose pop layer
|
|
||||||
//onSetSection dispatch user settings modal set section section subsection
|
|
||||||
//section selected one
|
|
||||||
//sections []
|
|
||||||
//theme dark
|
|
||||||
|
|
||||||
export default class PublicServers extends React.Component {
|
export default class PublicServers extends React.Component {
|
||||||
|
|
||||||
|
@ -35,13 +25,12 @@ export default class PublicServers extends React.Component {
|
||||||
this.search = this.search.bind(this);
|
this.search = this.search.bind(this);
|
||||||
this.searchKeyDown = this.searchKeyDown.bind(this);
|
this.searchKeyDown = this.searchKeyDown.bind(this);
|
||||||
this.checkConnection = this.checkConnection.bind(this);
|
this.checkConnection = this.checkConnection.bind(this);
|
||||||
this.join = this.join.bind(this);
|
|
||||||
this.connect = this.connect.bind(this);
|
this.connect = this.connect.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.checkConnection();
|
this.checkConnection();
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
this.props.close();
|
this.props.close();
|
||||||
|
@ -101,39 +90,9 @@ export default class PublicServers extends React.Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
join(serverCard) {
|
async connect() {
|
||||||
if (serverCard.props.pinned) return InviteActions.acceptInvite(serverCard.props.invite_code);
|
await Manager.connect();
|
||||||
$.ajax({
|
this.checkConnection();
|
||||||
method: "GET",
|
|
||||||
url: `${this.joinEndPoint}/${serverCard.props.server.identifier}`,
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json;",
|
|
||||||
"Content-Type": "application/json;" ,
|
|
||||||
"x-discord-token": this.state.connection.user.accessToken
|
|
||||||
},
|
|
||||||
crossDomain: true,
|
|
||||||
xhrFields: {
|
|
||||||
withCredentials: true
|
|
||||||
},
|
|
||||||
success: () => {
|
|
||||||
serverCard.setState({joined: true});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
connect() {
|
|
||||||
const options = this.windowOptions;
|
|
||||||
options.x = Math.round(window.screenX + window.innerWidth / 2 - options.width / 2);
|
|
||||||
options.y = Math.round(window.screenY + window.innerHeight / 2 - options.height / 2);
|
|
||||||
|
|
||||||
this.joinWindow = new (window.require("electron").remote.BrowserWindow)(options);
|
|
||||||
const url = "https://auth.discordservers.com/connect?scopes=guilds.join&previousUrl=https://auth.discordservers.com/info";
|
|
||||||
this.joinWindow.webContents.on("did-navigate", (event, navUrl) => {
|
|
||||||
if (navUrl != "https://auth.discordservers.com/info") return;
|
|
||||||
this.joinWindow.close();
|
|
||||||
this.checkConnection();
|
|
||||||
});
|
|
||||||
this.joinWindow.loadURL(url);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get windowOptions() {
|
get windowOptions() {
|
||||||
|
@ -167,9 +126,7 @@ export default class PublicServers extends React.Component {
|
||||||
invite_code: "0Tmfo5ZbORCRqbAd",
|
invite_code: "0Tmfo5ZbORCRqbAd",
|
||||||
pinned: true
|
pinned: true
|
||||||
};
|
};
|
||||||
const guildList = SortedGuildStore.guildPositions;
|
return React.createElement(ServerCard, {server: server, pinned: true});
|
||||||
const defaultList = AvatarDefaults.DEFAULT_AVATARS;
|
|
||||||
return React.createElement(ServerCard, {server: server, pinned: true, join: this.join, guildList: guildList, fallback: defaultList[Math.floor(Math.random() * 5)]});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get endPoint() {
|
get endPoint() {
|
||||||
|
@ -184,127 +141,41 @@ export default class PublicServers extends React.Component {
|
||||||
return "https://join.discordservers.com/connect";
|
return "https://join.discordservers.com/connect";
|
||||||
}
|
}
|
||||||
|
|
||||||
checkConnection() {
|
async checkConnection() {
|
||||||
try {
|
const userData = await Manager.checkConnection();
|
||||||
$.ajax({
|
if (!userData) {
|
||||||
method: "GET",
|
return this.setState({loading: true, connection: {state: 1, user: null}});
|
||||||
url: `https://auth.discordservers.com/info`,
|
|
||||||
headers: {
|
|
||||||
"Accept": "application/json;",
|
|
||||||
"Content-Type": "application/json;"
|
|
||||||
},
|
|
||||||
crossDomain: true,
|
|
||||||
xhrFields: {
|
|
||||||
withCredentials: true
|
|
||||||
},
|
|
||||||
success: data => {
|
|
||||||
// Utils.log("PublicServer", "Got data: " + JSON.stringify(data));
|
|
||||||
this.setState({
|
|
||||||
selectedCategory: "All",
|
|
||||||
connection: {
|
|
||||||
state: 2,
|
|
||||||
user: data
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.search("", true);
|
|
||||||
|
|
||||||
},
|
|
||||||
error: () => {
|
|
||||||
this.setState({
|
|
||||||
title: "Not connected to discordservers.com!",
|
|
||||||
loading: true,
|
|
||||||
selectedCategory: "All",
|
|
||||||
connection: {
|
|
||||||
state: 1,
|
|
||||||
user: null
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
catch (error) {
|
|
||||||
this.setState({
|
|
||||||
title: "Not connected to discordservers.com!",
|
|
||||||
loading: true,
|
|
||||||
selectedCategory: "All",
|
|
||||||
connection: {
|
|
||||||
state: 1,
|
|
||||||
user: null
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
this.setState({connection: {state: 2, user: userData}});
|
||||||
|
this.search("", true);
|
||||||
}
|
}
|
||||||
|
|
||||||
//SettingsView
|
|
||||||
//onClose pop layer
|
|
||||||
//onSetSection dispatch user settings modal set section section subsection
|
|
||||||
//section selected one
|
|
||||||
//sections []
|
|
||||||
//theme dark
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const categories = this.categoryButtons.map(name => {
|
const categories = this.categoryButtons.map(name => ({
|
||||||
const section = {
|
section: name,
|
||||||
section: name,//.toLowerCase().replace(" ", "_"),
|
|
||||||
label: name,
|
label: name,
|
||||||
//element: () => name == "All" ? this.content : null
|
element: () => this.content
|
||||||
};
|
})
|
||||||
|
);
|
||||||
if (name == "All") section.element = () => this.content;
|
|
||||||
// else section.onClick = () => this.changeCategory(name);
|
|
||||||
return section;
|
|
||||||
});
|
|
||||||
return React.createElement(SettingsView, {
|
return React.createElement(SettingsView, {
|
||||||
onClose: this.close,
|
onClose: this.close,
|
||||||
onSetSection: (e, ee, eee) => {console.log(e, ee, eee);this.changeCategory(e);},
|
onSetSection: this.changeCategory,
|
||||||
section: this.state.selectedCategory,
|
section: this.state.selectedCategory,
|
||||||
sections: [
|
sections: [
|
||||||
{section: "HEADER", label: "Public Servers"},
|
{section: "HEADER", label: "Search"},
|
||||||
{section: "CUSTOM", element: () => this.searchInput},
|
{section: "CUSTOM", element: () => this.searchInput},
|
||||||
{section: "HEADER", label: "Categories"},
|
{section: "HEADER", label: "Categories"},
|
||||||
...categories
|
...categories,
|
||||||
|
{section: "DIVIDER"},
|
||||||
|
{section: "HEADER", label: React.createElement("a", {href: "https://discordservers.com", target: "_blank"}, "Discordservers.com")},
|
||||||
|
{section: "DIVIDER"},
|
||||||
|
{section: "CUSTOM", element: () => this.connection}
|
||||||
],
|
],
|
||||||
theme: "dark"
|
theme: "dark"
|
||||||
});
|
});
|
||||||
// return React.createElement(StandardSidebarView, {id: "pubslayer", ref: "sbv", notice: null, theme: "dark", closeAction: this.close, content: this.content, sidebar: this.sidebar});
|
// return React.createElement(StandardSidebarView, {id: "pubslayer", ref: "sbv", notice: null, theme: "dark", closeAction: this.close, content: this.content, sidebar: this.sidebar});
|
||||||
}
|
}
|
||||||
|
|
||||||
get component() {
|
|
||||||
return {
|
|
||||||
sidebar: {
|
|
||||||
component: this.sidebar
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
component: this.content
|
|
||||||
},
|
|
||||||
tools: {
|
|
||||||
component: React.createElement(Tools, {key: "pt", ref: "tools", onClick: this.close})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
get sidebar() {
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-tab-bar SIDE"},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-tab-bar-header", style: {fontSize: "16px"}},
|
|
||||||
"Public Servers"
|
|
||||||
),
|
|
||||||
React.createElement(TabBar.Separator, null),
|
|
||||||
this.searchInput,
|
|
||||||
React.createElement(TabBar.Separator, null),
|
|
||||||
React.createElement(TabBar.Header, {text: "Categories"}),
|
|
||||||
this.categoryButtons.map((value, index) => {
|
|
||||||
return React.createElement(TabBar.Item, {id: index, onClick: this.changeCategory, key: index, text: value, selected: this.state.selectedCategory === index});
|
|
||||||
}),
|
|
||||||
React.createElement(TabBar.Separator, null),
|
|
||||||
this.footer,
|
|
||||||
this.connection
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
get searchInput() {
|
get searchInput() {
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
"div",
|
"div",
|
||||||
|
@ -325,7 +196,7 @@ export default class PublicServers extends React.Component {
|
||||||
term: e.target.value
|
term: e.target.value
|
||||||
});
|
});
|
||||||
let query = `?term=${e.target.value}`;
|
let query = `?term=${e.target.value}`;
|
||||||
if (this.state.selectedCategory !== 0) {
|
if (this.state.selectedCategory !== "All") {
|
||||||
query += `&category=${this.state.selectedCategory}`;
|
query += `&category=${this.state.selectedCategory}`;
|
||||||
}
|
}
|
||||||
this.search(query, true);
|
this.search(query, true);
|
||||||
|
@ -344,7 +215,7 @@ export default class PublicServers extends React.Component {
|
||||||
title: "Loading...",
|
title: "Loading...",
|
||||||
term: null
|
term: null
|
||||||
});
|
});
|
||||||
if (id === 0) {
|
if (id === "All") {
|
||||||
this.search("", true);
|
this.search("", true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -352,65 +223,29 @@ export default class PublicServers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
get content() {
|
get content() {
|
||||||
const guildList = SortedGuildStore.guildPositions;
|
const pinned = this.state.selectedCategory == "All" || this.state.connection.state === 1 ? this.bdServer : null;
|
||||||
const defaultList = AvatarDefaults.DEFAULT_AVATARS;
|
const servers = this.state.servers.map((server) => {
|
||||||
if (this.state.connection.state === 1) return this.notConnected;
|
return React.createElement(ServerCard, {key: server.identifier, server: server});
|
||||||
|
});
|
||||||
return [React.createElement(SettingsTitle, {text: this.state.title}),
|
return [React.createElement(SettingsTitle, {text: this.state.title}),
|
||||||
this.state.selectedCategory == "All" && this.bdServer,
|
pinned,
|
||||||
this.state.servers.map((server) => {
|
servers,
|
||||||
return React.createElement(ServerCard, {key: server.identifier, server: server, join: this.join, guildList: guildList, fallback: defaultList[Math.floor(Math.random() * 5)]});
|
this.state.next ? this.nextButton : null,
|
||||||
}),
|
|
||||||
this.state.next && React.createElement(
|
|
||||||
"button",
|
|
||||||
{type: "button", onClick: () => {
|
|
||||||
if (this.state.loading) return;this.setState({loading: true}); this.search(this.state.next, false);
|
|
||||||
}, className: "ui-button filled brand small grow", style: {width: "100%", marginTop: "10px", marginBottom: "10px"}},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-button-contents"},
|
|
||||||
this.state.loading ? "Loading" : "Load More"
|
|
||||||
)
|
|
||||||
),
|
|
||||||
this.state.servers.length > 0 && React.createElement(SettingsTitle, {text: this.state.title})];
|
this.state.servers.length > 0 && React.createElement(SettingsTitle, {text: this.state.title})];
|
||||||
}
|
}
|
||||||
|
|
||||||
get notConnected() {
|
get nextButton() {
|
||||||
//return React.createElement(SettingsTitle, { text: this.state.title });
|
return React.createElement("button", {
|
||||||
return [React.createElement(
|
type: "button",
|
||||||
"h2",
|
onClick: () => {
|
||||||
{className: "ui-form-title h2 margin-reset margin-bottom-20"},
|
if (this.state.loading) return;
|
||||||
"Not connected to discordservers.com!",
|
this.setState({loading: true});
|
||||||
React.createElement(
|
this.search(this.state.next, false);
|
||||||
"button",
|
},
|
||||||
{
|
className: "ui-button filled brand small grow",
|
||||||
onClick: this.connect,
|
style: {width: "100%", marginTop: "10px", marginBottom: "10px"}
|
||||||
type: "button",
|
},
|
||||||
className: "ui-button filled brand small grow",
|
React.createElement("div", {className: "ui-button-contents"}, this.state.loading ? "Loading" : "Load More")
|
||||||
style: {
|
|
||||||
display: "inline-block",
|
|
||||||
minHeight: "18px",
|
|
||||||
marginLeft: "10px",
|
|
||||||
lineHeight: "14px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-button-contents"},
|
|
||||||
"Connect"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
), this.bdServer];
|
|
||||||
}
|
|
||||||
|
|
||||||
get footer() {
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-tab-bar-header"},
|
|
||||||
React.createElement(
|
|
||||||
"a",
|
|
||||||
{href: "https://discordservers.com", target: "_blank"},
|
|
||||||
"Discordservers.com"
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -418,29 +253,17 @@ export default class PublicServers extends React.Component {
|
||||||
const {connection} = this.state;
|
const {connection} = this.state;
|
||||||
if (connection.state !== 2) return React.createElement("span", null);
|
if (connection.state !== 2) return React.createElement("span", null);
|
||||||
|
|
||||||
return React.createElement(
|
return React.createElement("span", null,
|
||||||
"span",
|
React.createElement("span", {style: {color: "#b9bbbe", fontSize: "10px", marginLeft: "10px"}},
|
||||||
null,
|
|
||||||
React.createElement(TabBar.Separator, null),
|
|
||||||
React.createElement(
|
|
||||||
"span",
|
|
||||||
{style: {color: "#b9bbbe", fontSize: "10px", marginLeft: "10px"}},
|
|
||||||
"Connected as: ",
|
"Connected as: ",
|
||||||
`${connection.user.username}#${connection.user.discriminator}`
|
`${connection.user.username}#${connection.user.discriminator}`
|
||||||
),
|
),
|
||||||
React.createElement(
|
React.createElement("div", {style: {padding: "5px 10px 0 10px"}},
|
||||||
"div",
|
React.createElement("button",
|
||||||
{style: {padding: "5px 10px 0 10px"}},
|
|
||||||
React.createElement(
|
|
||||||
"button",
|
|
||||||
{style: {width: "100%", minHeight: "20px"}, type: "button", className: "ui-button filled brand small grow"},
|
{style: {width: "100%", minHeight: "20px"}, type: "button", className: "ui-button filled brand small grow"},
|
||||||
React.createElement(
|
React.createElement("div", {className: "ui-button-contents", onClick: this.connect}, "Reconnect")
|
||||||
"div",
|
|
||||||
{className: "ui-button-contents", onClick: this.connect},
|
|
||||||
"Reconnect"
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,427 @@
|
||||||
|
import {React, WebpackModules} from "modules";
|
||||||
|
import SettingsTitle from "../settings/title";
|
||||||
|
import ServerCard from "./card";
|
||||||
|
|
||||||
|
const AvatarDefaults = WebpackModules.getByProps("getUserAvatarURL", "DEFAULT_AVATARS");
|
||||||
|
const InviteActions = WebpackModules.getByProps("acceptInvite");
|
||||||
|
const SortedGuildStore = WebpackModules.getByProps("getSortedGuilds");
|
||||||
|
//SettingsView
|
||||||
|
//onClose pop layer
|
||||||
|
//onSetSection dispatch user settings modal set section section subsection
|
||||||
|
//section selected one
|
||||||
|
//sections []
|
||||||
|
//theme dark
|
||||||
|
|
||||||
|
|
||||||
|
const StandardSidebarView = WebpackModules.getByDisplayName("StandardSidebarView");
|
||||||
|
//WebpackModules.getByDisplayName("StandardSidebarView")
|
||||||
|
//sidebar = WebpackModules.getByDisplayName("TabBar")
|
||||||
|
// children []
|
||||||
|
// sidebar.Header
|
||||||
|
// sidebar.Item
|
||||||
|
// sidebar.Separator
|
||||||
|
// onItemSelect
|
||||||
|
// selectedItem
|
||||||
|
//section = "All"
|
||||||
|
//theme = "dark"
|
||||||
|
//content = this.content
|
||||||
|
//closeAction = pop probably
|
||||||
|
|
||||||
|
|
||||||
|
export default class PublicServers extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
selectedCategory: "All",
|
||||||
|
title: "Loading...",
|
||||||
|
loading: true,
|
||||||
|
servers: [],
|
||||||
|
next: null,
|
||||||
|
connection: {
|
||||||
|
state: 0,
|
||||||
|
user: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.close = this.close.bind(this);
|
||||||
|
this.changeCategory = this.changeCategory.bind(this);
|
||||||
|
this.search = this.search.bind(this);
|
||||||
|
this.searchKeyDown = this.searchKeyDown.bind(this);
|
||||||
|
this.checkConnection = this.checkConnection.bind(this);
|
||||||
|
this.join = this.join.bind(this);
|
||||||
|
this.connect = this.connect.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.checkConnection();
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.props.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
search(query, clear) {
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: `${this.endPoint}${query}${query ? "&schema=new" : "?schema=new"}`,
|
||||||
|
success: data => {
|
||||||
|
let servers = data.results.reduce((arr, server) => {
|
||||||
|
server.joined = false;
|
||||||
|
arr.push(server);
|
||||||
|
// arr.push(<ServerCard server={server} join={this.join}/>);
|
||||||
|
return arr;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!clear) {
|
||||||
|
servers = this.state.servers.concat(servers);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//servers.unshift(this.bdServer);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
let end = data.size + data.from;
|
||||||
|
data.next = `?from=${end}`;
|
||||||
|
if (this.state.term) data.next += `&term=${this.state.term}`;
|
||||||
|
if (this.state.selectedCategory) data.next += `&category=${this.state.selectedCategory}`;
|
||||||
|
if (end >= data.total) {
|
||||||
|
end = data.total;
|
||||||
|
data.next = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let title = `Showing 1-${end} of ${data.total} results in ${this.state.selectedCategory}`;
|
||||||
|
if (this.state.term) title += ` for ${this.state.term}`;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
title: title,
|
||||||
|
servers: servers,
|
||||||
|
next: data.next
|
||||||
|
});
|
||||||
|
|
||||||
|
if (clear) {
|
||||||
|
//console.log(this);
|
||||||
|
// this.refs.sbv.refs.contentScroller.scrollTop = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: () => {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
title: "Failed to load servers. Check console for details"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
join(serverCard) {
|
||||||
|
if (serverCard.props.pinned) return InviteActions.acceptInvite(serverCard.props.invite_code);
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: `${this.joinEndPoint}/${serverCard.props.server.identifier}`,
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json;",
|
||||||
|
"Content-Type": "application/json;" ,
|
||||||
|
"x-discord-token": this.state.connection.user.accessToken
|
||||||
|
},
|
||||||
|
crossDomain: true,
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
success: () => {
|
||||||
|
serverCard.setState({joined: true});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
const options = this.windowOptions;
|
||||||
|
options.x = Math.round(window.screenX + window.innerWidth / 2 - options.width / 2);
|
||||||
|
options.y = Math.round(window.screenY + window.innerHeight / 2 - options.height / 2);
|
||||||
|
|
||||||
|
this.joinWindow = new (window.require("electron").remote.BrowserWindow)(options);
|
||||||
|
const url = "https://auth.discordservers.com/connect?scopes=guilds.join&previousUrl=https://auth.discordservers.com/info";
|
||||||
|
this.joinWindow.webContents.on("did-navigate", (event, navUrl) => {
|
||||||
|
if (navUrl != "https://auth.discordservers.com/info") return;
|
||||||
|
this.joinWindow.close();
|
||||||
|
this.checkConnection();
|
||||||
|
});
|
||||||
|
this.joinWindow.loadURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
get windowOptions() {
|
||||||
|
return {
|
||||||
|
width: 500,
|
||||||
|
height: 550,
|
||||||
|
backgroundColor: "#282b30",
|
||||||
|
show: true,
|
||||||
|
resizable: false,
|
||||||
|
maximizable: false,
|
||||||
|
minimizable: false,
|
||||||
|
alwaysOnTop: true,
|
||||||
|
frame: false,
|
||||||
|
center: false,
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
get bdServer() {
|
||||||
|
const server = {
|
||||||
|
name: "BetterDiscord",
|
||||||
|
online: "7500+",
|
||||||
|
members: "20000+",
|
||||||
|
categories: ["community", "programming", "support"],
|
||||||
|
description: "Official BetterDiscord server for support etc",
|
||||||
|
identifier: "86004744966914048",
|
||||||
|
iconUrl: "https://cdn.discordapp.com/icons/86004744966914048/292e7f6bfff2b71dfd13e508a859aedd.webp",
|
||||||
|
nativejoin: true,
|
||||||
|
invite_code: "0Tmfo5ZbORCRqbAd",
|
||||||
|
pinned: true
|
||||||
|
};
|
||||||
|
const guildList = SortedGuildStore.guildPositions;
|
||||||
|
const defaultList = AvatarDefaults.DEFAULT_AVATARS;
|
||||||
|
return React.createElement(ServerCard, {server: server, pinned: true, join: this.join, guildList: guildList, fallback: defaultList[Math.floor(Math.random() * 5)]});
|
||||||
|
}
|
||||||
|
|
||||||
|
get endPoint() {
|
||||||
|
return "https://search.discordservers.com";
|
||||||
|
}
|
||||||
|
|
||||||
|
get joinEndPoint() {
|
||||||
|
return "https://j.discordservers.com";
|
||||||
|
}
|
||||||
|
|
||||||
|
get connectEndPoint() {
|
||||||
|
return "https://join.discordservers.com/connect";
|
||||||
|
}
|
||||||
|
|
||||||
|
checkConnection() {
|
||||||
|
try {
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: `https://auth.discordservers.com/info`,
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json;",
|
||||||
|
"Content-Type": "application/json;"
|
||||||
|
},
|
||||||
|
crossDomain: true,
|
||||||
|
xhrFields: {
|
||||||
|
withCredentials: true
|
||||||
|
},
|
||||||
|
success: data => {
|
||||||
|
// Utils.log("PublicServer", "Got data: " + JSON.stringify(data));
|
||||||
|
this.setState({
|
||||||
|
selectedCategory: "All",
|
||||||
|
connection: {
|
||||||
|
state: 2,
|
||||||
|
user: data
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.search("", true);
|
||||||
|
|
||||||
|
},
|
||||||
|
error: () => {
|
||||||
|
this.setState({
|
||||||
|
title: "Not connected to discordservers.com!",
|
||||||
|
loading: true,
|
||||||
|
selectedCategory: "All",
|
||||||
|
connection: {
|
||||||
|
state: 1,
|
||||||
|
user: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
this.setState({
|
||||||
|
title: "Not connected to discordservers.com!",
|
||||||
|
loading: true,
|
||||||
|
selectedCategory: "All",
|
||||||
|
connection: {
|
||||||
|
state: 1,
|
||||||
|
user: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//WebpackModules.getByDisplayName("StandardSidebarView")
|
||||||
|
//sidebar = WebpackModules.getByDisplayName("TabBar")
|
||||||
|
// children []
|
||||||
|
// sidebar.Header
|
||||||
|
// sidebar.Item
|
||||||
|
// sidebar.Separator
|
||||||
|
// onItemSelect
|
||||||
|
// selectedItem
|
||||||
|
//section = "All"
|
||||||
|
//theme = "dark"
|
||||||
|
//content = this.content
|
||||||
|
//closeAction = pop probably
|
||||||
|
render() {
|
||||||
|
return React.createElement(StandardSidebarView, {
|
||||||
|
closeAction: this.close,
|
||||||
|
section: this.state.selectedCategory,
|
||||||
|
content: this.content,
|
||||||
|
sidebar: this.sidebar,
|
||||||
|
theme: "dark"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get sidebar() {
|
||||||
|
const TabBar = WebpackModules.getByDisplayName("TabBar");
|
||||||
|
const categories = this.categoryButtons.map(name =>
|
||||||
|
React.createElement(TabBar.Item, {id: name}, name)
|
||||||
|
);
|
||||||
|
return React.createElement(TabBar, {onItemSelect: (category) => this.changeCategory(category), selectedItem: this.state.selectedCategory},
|
||||||
|
React.createElement(TabBar.Header, null, "Search"),
|
||||||
|
this.searchInput,
|
||||||
|
React.createElement(TabBar.Header, null, "Categories"),
|
||||||
|
categories,
|
||||||
|
React.createElement(TabBar.Separator),
|
||||||
|
React.createElement(TabBar.Header, null, React.createElement("a", {href: "https://discordservers.com", target: "_blank"}, "Discordservers.com")),
|
||||||
|
React.createElement(TabBar.Separator),
|
||||||
|
this.connection
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get searchInput() {
|
||||||
|
return React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-form-item"},
|
||||||
|
React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-text-input flex-vertical", style: {width: "172px", marginLeft: "10px"}},
|
||||||
|
React.createElement("input", {onKeyDown: this.searchKeyDown, onChange: () => {}, type: "text", className: "input default", placeholder: "Search...", maxLength: "50"})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
searchKeyDown(e) {
|
||||||
|
if (this.state.loading || e.which !== 13) return;
|
||||||
|
this.setState({
|
||||||
|
loading: true,
|
||||||
|
title: "Loading...",
|
||||||
|
term: e.target.value
|
||||||
|
});
|
||||||
|
let query = `?term=${e.target.value}`;
|
||||||
|
if (this.state.selectedCategory !== "All") {
|
||||||
|
query += `&category=${this.state.selectedCategory}`;
|
||||||
|
}
|
||||||
|
this.search(query, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
get categoryButtons() {
|
||||||
|
return ["All", "FPS Games", "MMO Games", "Strategy Games", "MOBA Games", "RPG Games", "Tabletop Games", "Sandbox Games", "Simulation Games", "Music", "Community", "Language", "Programming", "Other"];
|
||||||
|
}
|
||||||
|
|
||||||
|
changeCategory(id) {
|
||||||
|
if (this.state.loading) return;
|
||||||
|
// this.refs.searchinput.value = "";
|
||||||
|
this.setState({
|
||||||
|
loading: true,
|
||||||
|
selectedCategory: id,
|
||||||
|
title: "Loading...",
|
||||||
|
term: null
|
||||||
|
});
|
||||||
|
if (id === "All") {
|
||||||
|
this.search("", true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.search(`?category=${this.state.selectedCategory.replace(" ", "%20")}`, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
get content() {
|
||||||
|
const guildList = SortedGuildStore.guildPositions;
|
||||||
|
const defaultList = AvatarDefaults.DEFAULT_AVATARS;
|
||||||
|
if (this.state.connection.state === 1) return this.notConnected;
|
||||||
|
return [React.createElement(SettingsTitle, {text: this.state.title}),
|
||||||
|
this.state.selectedCategory == "All" && this.bdServer,
|
||||||
|
this.state.servers.map((server) => {
|
||||||
|
return React.createElement(ServerCard, {key: server.identifier, server: server, join: this.join, guildList: guildList, fallback: defaultList[Math.floor(Math.random() * 5)]});
|
||||||
|
}),
|
||||||
|
this.state.next && React.createElement(
|
||||||
|
"button",
|
||||||
|
{type: "button", onClick: () => {
|
||||||
|
if (this.state.loading) return;this.setState({loading: true}); this.search(this.state.next, false);
|
||||||
|
}, className: "ui-button filled brand small grow", style: {width: "100%", marginTop: "10px", marginBottom: "10px"}},
|
||||||
|
React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-button-contents"},
|
||||||
|
this.state.loading ? "Loading" : "Load More"
|
||||||
|
)
|
||||||
|
),
|
||||||
|
this.state.servers.length > 0 && React.createElement(SettingsTitle, {text: this.state.title})];
|
||||||
|
}
|
||||||
|
|
||||||
|
get notConnected() {
|
||||||
|
//return React.createElement(SettingsTitle, { text: this.state.title });
|
||||||
|
return [React.createElement(
|
||||||
|
"h2",
|
||||||
|
{className: "ui-form-title h2 margin-reset margin-bottom-20"},
|
||||||
|
"Not connected to discordservers.com!",
|
||||||
|
React.createElement(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
onClick: this.connect,
|
||||||
|
type: "button",
|
||||||
|
className: "ui-button filled brand small grow",
|
||||||
|
style: {
|
||||||
|
display: "inline-block",
|
||||||
|
minHeight: "18px",
|
||||||
|
marginLeft: "10px",
|
||||||
|
lineHeight: "14px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-button-contents"},
|
||||||
|
"Connect"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
), this.bdServer];
|
||||||
|
}
|
||||||
|
|
||||||
|
get footer() {
|
||||||
|
return React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-tab-bar-header"},
|
||||||
|
React.createElement(
|
||||||
|
"a",
|
||||||
|
{href: "https://discordservers.com", target: "_blank"},
|
||||||
|
"Discordservers.com"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get connection() {
|
||||||
|
const {connection} = this.state;
|
||||||
|
if (connection.state !== 2) return React.createElement("span", null);
|
||||||
|
|
||||||
|
return React.createElement(
|
||||||
|
"span",
|
||||||
|
null,
|
||||||
|
React.createElement(
|
||||||
|
"span",
|
||||||
|
{style: {color: "#b9bbbe", fontSize: "10px", marginLeft: "10px"}},
|
||||||
|
"Connected as: ",
|
||||||
|
`${connection.user.username}#${connection.user.discriminator}`
|
||||||
|
),
|
||||||
|
React.createElement(
|
||||||
|
"div",
|
||||||
|
{style: {padding: "5px 10px 0 10px"}},
|
||||||
|
React.createElement(
|
||||||
|
"button",
|
||||||
|
{style: {width: "100%", minHeight: "20px"}, type: "button", className: "ui-button filled brand small grow"},
|
||||||
|
React.createElement(
|
||||||
|
"div",
|
||||||
|
{className: "ui-button-contents", onClick: this.connect},
|
||||||
|
"Reconnect"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,30 +0,0 @@
|
||||||
import {React} from "modules";
|
|
||||||
|
|
||||||
export default class Scroller extends React.Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.ref = React.createRef();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
//scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y
|
|
||||||
let wrapperClass = `scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d${this.props.fade ? " scrollerFade-1Ijw5y" : ""}`;
|
|
||||||
let scrollerClass = "scroller-2FKFPG scroller"; /* fuck */
|
|
||||||
if (this.props.sidebar) scrollerClass = "scroller-2FKFPG firefoxFixScrollFlex-cnI2ix sidebarRegionScroller-3MXcoP sidebar-region-scroller scroller";
|
|
||||||
if (this.props.contentColumn) {
|
|
||||||
scrollerClass = "scroller-2FKFPG firefoxFixScrollFlex-cnI2ix contentRegionScroller-26nc1e content-region-scroller scroller"; /* fuck */
|
|
||||||
wrapperClass = "scrollerWrap-2lJEkd firefoxFixScrollFlex-cnI2ix contentRegionScrollerWrap-3YZXdm content-region-scroller-wrap scrollerThemed-2oenus themeGhost-28MSn0 scrollerTrack-1ZIpsv";
|
|
||||||
}
|
|
||||||
const {children} = this.props;
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{key: "scrollerwrap", className: wrapperClass},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{key: "scroller", ref: this.ref, className: scrollerClass},
|
|
||||||
children
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,28 +0,0 @@
|
||||||
import {React} from "modules";
|
|
||||||
import Scroller from "./scroller";
|
|
||||||
|
|
||||||
export default class SidebarView extends React.Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {sidebar, content, tools} = this.props.children;
|
|
||||||
return React.createElement("div", {className: this.props.className || "", id: this.props.id || ""},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "standardSidebarView-3F1I7i ui-standard-sidebar-view"},
|
|
||||||
React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "sidebarRegion-VFTUkN sidebar-region"},
|
|
||||||
React.createElement(Scroller, {key: "sidebarScroller", sidebar: true, fade: sidebar.fade || true, dark: sidebar.dark || true}, sidebar.component)
|
|
||||||
),
|
|
||||||
React.createElement("div", {className: "contentRegion-3nDuYy content-region"},
|
|
||||||
React.createElement("div", {className: "contentTransitionWrap-3hqOEW content-transition-wrap"},
|
|
||||||
React.createElement(Scroller, {key: "contentScroller", contentColumn: true, fade: content.fade || true, dark: content.dark || true}, content.component, tools.component)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
));
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,62 +0,0 @@
|
||||||
import {React} from "modules";
|
|
||||||
|
|
||||||
class TabBarItem extends React.Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
selected: this.props.selected || false
|
|
||||||
};
|
|
||||||
this.onClick = this.onClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: `ui-tab-bar-item${this.props.selected ? " selected" : ""}`, onClick: this.onClick},
|
|
||||||
this.props.text
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick() {
|
|
||||||
if (this.props.onClick) {
|
|
||||||
this.props.onClick(this.props.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class TabBarSeparator extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return React.createElement("div", {className: "ui-tab-bar-separator margin-top-8 margin-bottom-8"});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class TabBarHeader extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return React.createElement(
|
|
||||||
"div",
|
|
||||||
{className: "ui-tab-bar-header"},
|
|
||||||
this.props.text
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class TabBar {
|
|
||||||
static get Item() {
|
|
||||||
return TabBarItem;
|
|
||||||
}
|
|
||||||
static get Header() {
|
|
||||||
return TabBarHeader;
|
|
||||||
}
|
|
||||||
static get Separator() {
|
|
||||||
return TabBarSeparator;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue