BetterDiscordApp-rauenzi/src/ui/settings/themecard.js

87 lines
3.8 KiB
JavaScript

import {SettingsCookie, ThemeCookie, Themes} from "data";
import {BDV2, Core, ThemeManager} from "modules";
import ReloadIcon from "../icons/reload";
export default class V2C_ThemeCard extends BDV2.reactComponent {
constructor(props) {
super(props);
this.setInitialState();
this.onChange = this.onChange.bind(this);
this.reload = this.reload.bind(this);
}
setInitialState() {
this.state = {
checked: ThemeCookie[this.props.theme.name],
reloads: 0
};
}
// componentDidMount() {
// BDEvents.on("theme-reloaded", this.onReload);
// }
// componentWillUnmount() {
// BDEvents.off("theme-reloaded", this.onReload);
// }
onReload(themeName) {
if (themeName !== this.props.theme.name) return;
this.setState({reloads: this.state.reloads + 1});
}
reload() {
const theme = this.props.theme.name;
const error = ThemeManager.reloadTheme(theme);
if (error) Core.showToast(`Could not reload ${Themes[theme].name}. Check console for details.`, {type: "error"});
else Core.showToast(`${Themes[theme].name} v${Themes[theme].version} has been reloaded.`, {type: "success"});
// this.setState(this.state);
this.props.theme = Themes[theme];
this.onReload(this.props.theme.name);
}
render() {
const {theme} = this.props;
const name = theme.name;
const description = theme.description;
const version = theme.version;
const author = theme.author;
const website = Themes[name].website;
const source = Themes[name].source;
return BDV2.react.createElement("li", {"data-name": name, "data-version": version, "className": "settings-closed ui-switch-item"},
BDV2.react.createElement("div", {className: "bda-header"},
BDV2.react.createElement("span", {className: "bda-header-title"},
BDV2.react.createElement("span", {className: "bda-name"}, name),
" v",
BDV2.react.createElement("span", {className: "bda-version"}, version),
" by ",
BDV2.react.createElement("span", {className: "bda-author"}, author)
),
BDV2.react.createElement("div", {className: "bda-controls"},
!SettingsCookie["fork-ps-5"] && BDV2.react.createElement(ReloadIcon, {className: "bd-reload-card", onClick: this.reload}),
BDV2.react.createElement("label", {className: "ui-switch-wrapper ui-flex-child", style: {flex: "0 0 auto"}},
BDV2.react.createElement("input", {checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox"}),
BDV2.react.createElement("div", {className: this.state.checked ? "ui-switch checked" : "ui-switch"})
)
)
),
BDV2.react.createElement("div", {className: "bda-description-wrap scroller-wrap fade"},
BDV2.react.createElement("div", {className: "bda-description scroller"}, description)
),
(website || source) && BDV2.react.createElement("div", {className: "bda-footer"},
BDV2.react.createElement("span", {className: "bda-links"},
website && BDV2.react.createElement("a", {className: "bda-link", href: website, target: "_blank"}, "Website"),
website && source && " | ",
source && BDV2.react.createElement("a", {className: "bda-link", href: source, target: "_blank"}, "Source")
)
)
);
}
onChange() {
this.setState({checked: !this.state.checked});
ThemeManager.toggleTheme(this.props.theme.name);
}
}