mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-10 05:27:03 +03:00
Move options associated with specific categories into their div
This commit is contained in:
Ajay
75
src/components/options/CategoryChooserComponent.tsx
Normal file
75
src/components/options/CategoryChooserComponent.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import * as React from "react";
|
||||
|
||||
import * as CompileConfig from "../../../config.json";
|
||||
import { Category } from "../../types";
|
||||
import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
|
||||
|
||||
export interface CategoryChooserProps {
|
||||
|
||||
}
|
||||
|
||||
export interface CategoryChooserState {
|
||||
|
||||
}
|
||||
|
||||
class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
|
||||
|
||||
constructor(props: CategoryChooserProps) {
|
||||
super(props);
|
||||
|
||||
// Setup state
|
||||
this.state = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
return (
|
||||
<table id="categoryChooserTable"
|
||||
className="categoryChooserTable">
|
||||
<tbody>
|
||||
{/* Headers */}
|
||||
<tr id={"CategoryOptionsRow"}
|
||||
className="categoryTableElement categoryTableHeader">
|
||||
<th id={"CategoryOptionName"}>
|
||||
{chrome.i18n.getMessage("category")}
|
||||
</th>
|
||||
|
||||
<th id={"CategorySkipOption"}
|
||||
className="skipOption">
|
||||
{chrome.i18n.getMessage("skipOption")}
|
||||
</th>
|
||||
|
||||
<th id={"CategoryColorOption"}
|
||||
className="colorOption">
|
||||
{chrome.i18n.getMessage("seekBarColor")}
|
||||
</th>
|
||||
|
||||
<th id={"CategoryPreviewColorOption"}
|
||||
className="previewColorOption">
|
||||
{chrome.i18n.getMessage("previewColor")}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{this.getCategorySkipOptions()}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
getCategorySkipOptions(): JSX.Element[] {
|
||||
const elements: JSX.Element[] = [];
|
||||
|
||||
for (const category of CompileConfig.categoryList) {
|
||||
elements.push(
|
||||
<CategorySkipOptionsComponent category={category as Category}
|
||||
key={category}>
|
||||
</CategorySkipOptionsComponent>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
}
|
||||
|
||||
export default CategoryChooserComponent;
|
||||
241
src/components/options/CategorySkipOptionsComponent.tsx
Normal file
241
src/components/options/CategorySkipOptionsComponent.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
import * as React from "react";
|
||||
|
||||
import Config from "../../config"
|
||||
import * as CompileConfig from "../../../config.json";
|
||||
import { Category, CategorySkipOption } from "../../types";
|
||||
|
||||
import { getCategorySuffix } from "../../utils/categoryUtils";
|
||||
import ToggleOptionComponent, { ToggleOptionProps } from "./ToggleOptionComponent";
|
||||
|
||||
export interface CategorySkipOptionsProps {
|
||||
category: Category;
|
||||
defaultColor?: string;
|
||||
defaultPreviewColor?: string;
|
||||
}
|
||||
|
||||
export interface CategorySkipOptionsState {
|
||||
color: string;
|
||||
previewColor: string;
|
||||
}
|
||||
|
||||
class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
|
||||
setBarColorTimeout: NodeJS.Timeout;
|
||||
|
||||
constructor(props: CategorySkipOptionsProps) {
|
||||
super(props);
|
||||
|
||||
// Setup state
|
||||
this.state = {
|
||||
color: props.defaultColor || Config.config.barTypes[this.props.category]?.color,
|
||||
previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color,
|
||||
}
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
let defaultOption = "disable";
|
||||
// Set the default opton properly
|
||||
for (const categorySelection of Config.config.categorySelections) {
|
||||
if (categorySelection.name === this.props.category) {
|
||||
switch (categorySelection.option) {
|
||||
case CategorySkipOption.ShowOverlay:
|
||||
defaultOption = "showOverlay";
|
||||
break;
|
||||
case CategorySkipOption.ManualSkip:
|
||||
defaultOption = "manualSkip";
|
||||
break;
|
||||
case CategorySkipOption.AutoSkip:
|
||||
defaultOption = "autoSkip";
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr id={this.props.category + "OptionsRow"}
|
||||
className="categoryTableElement">
|
||||
<td id={this.props.category + "OptionName"}
|
||||
className="categoryTableLabel">
|
||||
{chrome.i18n.getMessage("category_" + this.props.category)}
|
||||
</td>
|
||||
|
||||
<td id={this.props.category + "SkipOption"}
|
||||
className="skipOption">
|
||||
<select
|
||||
className="optionsSelector"
|
||||
defaultValue={defaultOption}
|
||||
onChange={this.skipOptionSelected.bind(this)}>
|
||||
{this.getCategorySkipOptions()}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
{this.props.category !== "chapter" &&
|
||||
<td id={this.props.category + "ColorOption"}
|
||||
className="colorOption">
|
||||
<input
|
||||
className="categoryColorTextBox option-text-box"
|
||||
type="color"
|
||||
onChange={(event) => this.setColorState(event, false)}
|
||||
value={this.state.color} />
|
||||
</td>
|
||||
}
|
||||
|
||||
{!["chapter", "exclusive_access"].includes(this.props.category) &&
|
||||
<td id={this.props.category + "PreviewColorOption"}
|
||||
className="previewColorOption">
|
||||
<input
|
||||
className="categoryColorTextBox option-text-box"
|
||||
type="color"
|
||||
onChange={(event) => this.setColorState(event, true)}
|
||||
value={this.state.previewColor} />
|
||||
</td>
|
||||
}
|
||||
|
||||
</tr>
|
||||
|
||||
<tr id={this.props.category + "DescriptionRow"}
|
||||
className="small-description categoryTableDescription">
|
||||
<td
|
||||
colSpan={2}>
|
||||
{chrome.i18n.getMessage("category_" + this.props.category + "_description")}
|
||||
{' '}
|
||||
<a href={CompileConfig.wikiLinks[this.props.category]} target="_blank" rel="noreferrer">
|
||||
{`${chrome.i18n.getMessage("LearnMore")}`}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{this.getExtraOptionComponents(this.props.category)}
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
let option: CategorySkipOption;
|
||||
|
||||
this.removeCurrentCategorySelection();
|
||||
|
||||
switch (event.target.value) {
|
||||
case "disable":
|
||||
return;
|
||||
case "showOverlay":
|
||||
option = CategorySkipOption.ShowOverlay;
|
||||
|
||||
break;
|
||||
case "manualSkip":
|
||||
option = CategorySkipOption.ManualSkip;
|
||||
|
||||
break;
|
||||
case "autoSkip":
|
||||
option = CategorySkipOption.AutoSkip;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
Config.config.categorySelections.push({
|
||||
name: this.props.category,
|
||||
option: option
|
||||
});
|
||||
|
||||
// Forces the Proxy to send this to the chrome storage API
|
||||
Config.config.categorySelections = Config.config.categorySelections;
|
||||
}
|
||||
|
||||
/** Removes this category from the config list of category selections */
|
||||
removeCurrentCategorySelection(): void {
|
||||
// Remove it if it exists
|
||||
for (let i = 0; i < Config.config.categorySelections.length; i++) {
|
||||
if (Config.config.categorySelections[i].name === this.props.category) {
|
||||
Config.config.categorySelections.splice(i, 1);
|
||||
|
||||
// Forces the Proxy to send this to the chrome storage API
|
||||
Config.config.categorySelections = Config.config.categorySelections;
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getCategorySkipOptions(): JSX.Element[] {
|
||||
const elements: JSX.Element[] = [];
|
||||
|
||||
let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
|
||||
if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
|
||||
else if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
|
||||
|
||||
for (const optionName of optionNames) {
|
||||
elements.push(
|
||||
<option key={optionName} value={optionName}>
|
||||
{chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category)
|
||||
: optionName)}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean): void {
|
||||
clearTimeout(this.setBarColorTimeout);
|
||||
|
||||
if (preview) {
|
||||
this.setState({
|
||||
previewColor: event.currentTarget.value
|
||||
});
|
||||
|
||||
Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value;
|
||||
|
||||
} else {
|
||||
this.setState({
|
||||
color: event.currentTarget.value
|
||||
});
|
||||
|
||||
Config.config.barTypes[this.props.category].color = event.currentTarget.value;
|
||||
}
|
||||
|
||||
// Make listener get called
|
||||
this.setBarColorTimeout = setTimeout(() => {
|
||||
Config.config.barTypes = Config.config.barTypes;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
getExtraOptionComponents(category: string): JSX.Element[] {
|
||||
const result = [];
|
||||
for (const option of this.getExtraOptions(category)) {
|
||||
result.push(
|
||||
<tr key={option.configKey}>
|
||||
<td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
|
||||
<ToggleOptionComponent
|
||||
configKey={option.configKey}
|
||||
label={option.label}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
getExtraOptions(category: string): ToggleOptionProps[] {
|
||||
switch (category) {
|
||||
case "chapter":
|
||||
return [{
|
||||
configKey: "renderSegmentsAsChapters",
|
||||
label: chrome.i18n.getMessage("renderAsChapters"),
|
||||
}];
|
||||
case "music_offtopic":
|
||||
return [{
|
||||
configKey: "autoSkipOnMusicVideos",
|
||||
label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
|
||||
}];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default CategorySkipOptionsComponent;
|
||||
75
src/components/options/KeybindComponent.tsx
Normal file
75
src/components/options/KeybindComponent.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import Config from "../../config";
|
||||
import { Keybind } from "../../types";
|
||||
import KeybindDialogComponent from "./KeybindDialogComponent";
|
||||
import { keybindEquals, keybindToString, formatKey } from "../../utils/configUtils";
|
||||
|
||||
export interface KeybindProps {
|
||||
option: string;
|
||||
}
|
||||
|
||||
export interface KeybindState {
|
||||
keybind: Keybind;
|
||||
}
|
||||
|
||||
let dialog;
|
||||
|
||||
class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
|
||||
constructor(props: KeybindProps) {
|
||||
super(props);
|
||||
this.state = {keybind: Config.config[this.props.option]};
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
return(
|
||||
<>
|
||||
<div className="keybind-buttons inline" title={chrome.i18n.getMessage("change")} onClick={() => this.openEditDialog()}>
|
||||
{this.state.keybind?.ctrl && <div className="key keyControl">Ctrl</div>}
|
||||
{this.state.keybind?.ctrl && <span className="keyControl">+</span>}
|
||||
{this.state.keybind?.alt && <div className="key keyAlt">Alt</div>}
|
||||
{this.state.keybind?.alt && <span className="keyAlt">+</span>}
|
||||
{this.state.keybind?.shift && <div className="key keyShift">Shift</div>}
|
||||
{this.state.keybind?.shift && <span className="keyShift">+</span>}
|
||||
{this.state.keybind?.key != null && <div className="key keyBase">{formatKey(this.state.keybind.key)}</div>}
|
||||
{this.state.keybind == null && <span className="unbound">{chrome.i18n.getMessage("notSet")}</span>}
|
||||
</div>
|
||||
|
||||
{this.state.keybind != null &&
|
||||
<div className="option-button trigger-button inline" onClick={() => this.unbind()}>
|
||||
{chrome.i18n.getMessage("unbind")}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
equals(other: Keybind): boolean {
|
||||
return keybindEquals(this.state.keybind, other);
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return keybindToString(this.state.keybind);
|
||||
}
|
||||
|
||||
openEditDialog(): void {
|
||||
dialog = parent.document.createElement("div");
|
||||
dialog.id = "keybind-dialog";
|
||||
parent.document.body.prepend(dialog);
|
||||
ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
|
||||
}
|
||||
|
||||
closeEditDialog(updateWith: Keybind): void {
|
||||
ReactDOM.unmountComponentAtNode(dialog);
|
||||
dialog.remove();
|
||||
if (updateWith != null)
|
||||
this.setState({keybind: updateWith});
|
||||
}
|
||||
|
||||
unbind(): void {
|
||||
this.setState({keybind: null});
|
||||
Config.config[this.props.option] = null;
|
||||
}
|
||||
}
|
||||
|
||||
export default KeybindComponent;
|
||||
165
src/components/options/KeybindDialogComponent.tsx
Normal file
165
src/components/options/KeybindDialogComponent.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import * as React from "react";
|
||||
import { ChangeEvent } from "react";
|
||||
import Config from "../../config";
|
||||
import { Keybind } from "../../types";
|
||||
import { keybindEquals, formatKey } from "../../utils/configUtils";
|
||||
|
||||
export interface KeybindDialogProps {
|
||||
option: string;
|
||||
closeListener: (updateWith) => void;
|
||||
}
|
||||
|
||||
export interface KeybindDialogState {
|
||||
key: Keybind;
|
||||
error: ErrorMessage;
|
||||
}
|
||||
|
||||
interface ErrorMessage {
|
||||
message: string;
|
||||
blocking: boolean;
|
||||
}
|
||||
|
||||
class KeybindDialogComponent extends React.Component<KeybindDialogProps, KeybindDialogState> {
|
||||
|
||||
constructor(props: KeybindDialogProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
key: {
|
||||
key: null,
|
||||
code: null,
|
||||
ctrl: false,
|
||||
alt: false,
|
||||
shift: false
|
||||
},
|
||||
error: {
|
||||
message: null,
|
||||
blocking: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
return(
|
||||
<>
|
||||
<div className="blocker"></div>
|
||||
<div className="dialog">
|
||||
<div id="change-keybind-description">{chrome.i18n.getMessage("keybindDescription")}</div>
|
||||
<div id="change-keybind-settings">
|
||||
<div id="change-keybind-modifiers" className="inline">
|
||||
<div>
|
||||
<input id="change-keybind-ctrl" type="checkbox" onChange={this.keybindModifierChecked} />
|
||||
<label htmlFor="change-keybind-ctrl">Ctrl</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="change-keybind-alt" type="checkbox" onChange={this.keybindModifierChecked} />
|
||||
<label htmlFor="change-keybind-alt">Alt</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="change-keybind-shift" type="checkbox" onChange={this.keybindModifierChecked} />
|
||||
<label htmlFor="change-keybind-shift">Shift</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key inline">{formatKey(this.state.key.key)}</div>
|
||||
</div>
|
||||
<div id="change-keybind-error">{this.state.error?.message}</div>
|
||||
<div id="change-keybind-buttons">
|
||||
<div className={"option-button save-button inline" + ((this.state.error?.blocking || this.state.key.key == null) ? " disabled" : "")} onClick={() => this.save()}>
|
||||
{chrome.i18n.getMessage("save")}
|
||||
</div>
|
||||
<div className="option-button cancel-button inline" onClick={() => this.props.closeListener(null)}>
|
||||
{chrome.i18n.getMessage("cancel")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
parent.document.addEventListener("keydown", this.keybindKeyPressed);
|
||||
document.addEventListener("keydown", this.keybindKeyPressed);
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
parent.document.removeEventListener("keydown", this.keybindKeyPressed);
|
||||
document.removeEventListener("keydown", this.keybindKeyPressed);
|
||||
}
|
||||
|
||||
keybindKeyPressed = (e: KeyboardEvent): void => {
|
||||
if (!e.altKey && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.getModifierState("AltGraph")) {
|
||||
if (e.code == "Escape") {
|
||||
this.props.closeListener(null);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
key: {
|
||||
key: e.key,
|
||||
code: e.code,
|
||||
ctrl: this.state.key.ctrl,
|
||||
alt: this.state.key.alt,
|
||||
shift: this.state.key.shift}
|
||||
}, () => this.setState({ error: this.isKeybindAvailable() }));
|
||||
}
|
||||
}
|
||||
|
||||
keybindModifierChecked = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
const id = e.target.id;
|
||||
const val = e.target.checked;
|
||||
|
||||
this.setState({
|
||||
key: {
|
||||
key: this.state.key.key,
|
||||
code: this.state.key.code,
|
||||
ctrl: id == "change-keybind-ctrl" ? val: this.state.key.ctrl,
|
||||
alt: id == "change-keybind-alt" ? val: this.state.key.alt,
|
||||
shift: id == "change-keybind-shift" ? val: this.state.key.shift}
|
||||
}, () => this.setState({ error: this.isKeybindAvailable() }));
|
||||
}
|
||||
|
||||
isKeybindAvailable(): ErrorMessage {
|
||||
if (this.state.key.key == null)
|
||||
return null;
|
||||
|
||||
let youtubeShortcuts: Keybind[];
|
||||
if (/[a-zA-Z0-9,.+\-\][:]/.test(this.state.key.key)) {
|
||||
youtubeShortcuts = [{key: "k"}, {key: "j"}, {key: "l"}, {key: "p", shift: true}, {key: "n", shift: true}, {key: ","}, {key: "."}, {key: ",", shift: true}, {key: ".", shift: true},
|
||||
{key: "ArrowRight"}, {key: "ArrowLeft"}, {key: "ArrowUp"}, {key: "ArrowDown"}, {key: "ArrowRight", ctrl: true}, {key: "ArrowLeft", ctrl: true}, {key: "c"}, {key: "o"},
|
||||
{key: "w"}, {key: "+"}, {key: "-"}, {key: "f"}, {key: "t"}, {key: "i"}, {key: "m"}, {key: "a"}, {key: "s"}, {key: "d"}, {key: "Home"}, {key: "End"},
|
||||
{key: "0"}, {key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}, {key: "]"}, {key: "["}];
|
||||
} else {
|
||||
youtubeShortcuts = [{key: null, code: "KeyK"}, {key: null, code: "KeyJ"}, {key: null, code: "KeyL"}, {key: null, code: "KeyP", shift: true}, {key: null, code: "KeyN", shift: true},
|
||||
{key: null, code: "Comma"}, {key: null, code: "Period"}, {key: null, code: "Comma", shift: true}, {key: null, code: "Period", shift: true}, {key: null, code: "Space"},
|
||||
{key: null, code: "KeyC"}, {key: null, code: "KeyO"}, {key: null, code: "KeyW"}, {key: null, code: "Equal"}, {key: null, code: "Minus"}, {key: null, code: "KeyF"}, {key: null, code: "KeyT"},
|
||||
{key: null, code: "KeyI"}, {key: null, code: "KeyM"}, {key: null, code: "KeyA"}, {key: null, code: "KeyS"}, {key: null, code: "KeyD"}, {key: null, code: "BracketLeft"}, {key: null, code: "BracketRight"}];
|
||||
}
|
||||
|
||||
for (const shortcut of youtubeShortcuts) {
|
||||
const withShift = Object.assign({}, shortcut);
|
||||
if (!/[0-9]/.test(this.state.key.key)) //shift+numbers don't seem to do anything on youtube, all other keys do
|
||||
withShift.shift = true;
|
||||
if (this.equals(shortcut) || this.equals(withShift))
|
||||
return {message: chrome.i18n.getMessage("youtubeKeybindWarning"), blocking: false};
|
||||
}
|
||||
|
||||
if (this.props.option != "skipKeybind" && this.equals(Config.config['skipKeybind']) ||
|
||||
this.props.option != "submitKeybind" && this.equals(Config.config['submitKeybind']) ||
|
||||
this.props.option != "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
|
||||
return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
equals(other: Keybind): boolean {
|
||||
return keybindEquals(this.state.key, other);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
if (this.state.key.key != null && !this.state.error?.blocking) {
|
||||
Config.config[this.props.option] = this.state.key;
|
||||
this.props.closeListener(this.state.key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default KeybindDialogComponent;
|
||||
51
src/components/options/ToggleOptionComponent.tsx
Normal file
51
src/components/options/ToggleOptionComponent.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import * as React from "react";
|
||||
|
||||
import Config from "../../config";
|
||||
|
||||
export interface ToggleOptionProps {
|
||||
configKey: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface ToggleOptionState {
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOptionState> {
|
||||
|
||||
constructor(props: ToggleOptionProps) {
|
||||
super(props);
|
||||
|
||||
// Setup state
|
||||
this.state = {
|
||||
enabled: Config.config[props.configKey]
|
||||
}
|
||||
}
|
||||
|
||||
render(): React.ReactElement {
|
||||
return (
|
||||
<div>
|
||||
<div className="switch-container">
|
||||
<label className="switch">
|
||||
<input id={this.props.configKey} type="checkbox" checked={this.state.enabled} onChange={(e) => this.clicked(e)}/>
|
||||
<span className="slider round"></span>
|
||||
</label>
|
||||
<label className="switch-label" htmlFor={this.props.configKey}>
|
||||
{this.props.label}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
clicked(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
Config.config[this.props.configKey] = event.target.checked;
|
||||
|
||||
this.setState({
|
||||
enabled: event.target.checked
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default ToggleOptionComponent;
|
||||
Reference in New Issue
Block a user