Add channel skip profiles

src/components/options/ToggleOptionComponent.tsx

@@ -1,57 +1,50 @@
 import * as React from "react";
-
-import Config from "../../config";
+import ResetIcon from "../../svg-icons/resetIcon";
 
 export interface ToggleOptionProps { 
-    configKey: string;
     label: string;
+    description?: string;
     disabled?: boolean;
     style?: React.CSSProperties;
+    checked: boolean | null;
+    onChange(checked: boolean): void;
+    partiallyHidden?: boolean;
+    showResetButton?: boolean;
+    onReset?(): void;
 }
 
-export interface ToggleOptionState {
-    enabled: boolean;
-}
+export function ToggleOptionComponent(props: ToggleOptionProps): React.ReactElement {
+    return (
+        <div className={`sb-toggle-option ${props.disabled ? "disabled" : ""} ${props.partiallyHidden ? "partiallyHidden" : ""}`}>
+            <div className="switch-container" style={props.style}>
+                <label className="switch">
+                    <input id={props.label} 
+                        type="checkbox" 
+                        checked={props.checked} 
+                        disabled={props.disabled} 
+                        onChange={(e) => props.onChange(e.target.checked)}/>
+                    <span className="slider round"></span>
+                </label>
+                <label className="switch-label" htmlFor={props.label}>
+                    {props.label}
+                </label>
 
-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 className={`sb-toggle-option ${this.props.disabled ? "disabled" : ""}`}>
-                <div className="switch-container" style={this.props.style}>
-                    <label className="switch">
-                        <input id={this.props.configKey} 
-                            type="checkbox" 
-                            checked={this.state.enabled} 
-                            disabled={this.props.disabled} 
-                            onChange={(e) => this.clicked(e)}/>
-                        <span className="slider round"></span>
-                    </label>
-                    <label className="switch-label" htmlFor={this.props.configKey}>
-                        {this.props.label}
-                    </label>
-                </div>
+                {
+                    props.showResetButton &&
+                        <div className="reset-button sb-switch-label" title={chrome.i18n.getMessage("fallbackToDefault")} onClick={() => {
+                            props.onReset?.();
+                        }}>
+                            <ResetIcon/>
+                        </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;
+            {
+                props.description &&
+                    <div className="small-description">
+                        {props.description}
+                    </div>
+            }
+        </div>
+    );
+}