feat: custom components in settings (#165)

src/components/PluginSettings/PluginModal.tsx

@@ -30,10 +30,11 @@ import ErrorBoundary from "../ErrorBoundary";
 import { Flex } from "../Flex";
 import {
     SettingBooleanComponent,
+    SettingCustomComponent,
     SettingInputComponent,
     SettingNumericComponent,
     SettingSelectComponent,
-    SettingSliderComponent,
+    SettingSliderComponent
 } from "./components";
 
 const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
@@ -143,6 +144,10 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     options.push(<SettingSliderComponent key={key} option={setting} {...props} />);
                     break;
                 }
+                case OptionType.COMPONENT: {
+                    options.push(<SettingCustomComponent key={key} option={setting} {...props} />);
+                    break;
+                }
             }
         }
         return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>;

src/components/PluginSettings/components/SettingCustomComponent.tsx

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { PluginOptionComponent } from "../../../utils/types";
+import { ISettingElementProps } from ".";
+
+export function SettingCustomComponent({ option, onChange, onError }: ISettingElementProps<PluginOptionComponent>) {
+    return option.component({ setValue: onChange, setError: onError, option });
+}

src/components/PluginSettings/components/index.ts

@@ -30,6 +30,7 @@ export interface ISettingElementProps<T extends PluginOptionBase> {
 }
 
 export * from "./SettingBooleanComponent";
+export * from "./SettingCustomComponent";
 export * from "./SettingNumericComponent";
 export * from "./SettingSelectComponent";
 export * from "./SettingSliderComponent";

src/utils/types.ts

@@ -96,6 +96,7 @@ export enum OptionType {
     BOOLEAN,
     SELECT,
     SLIDER,
+    COMPONENT,
 }
 
 export type PluginOptionsItem =
@@ -103,7 +104,8 @@ export type PluginOptionsItem =
     | PluginOptionNumber
     | PluginOptionBoolean
     | PluginOptionSelect
-    | PluginOptionSlider;
+    | PluginOptionSlider
+    | PluginOptionComponent;
 
 export interface PluginOptionBase {
     description: string;
@@ -176,7 +178,32 @@ export interface PluginOptionSlider extends PluginOptionBase {
     /**
      * Prevents the user from saving settings if this is false or a string
      */
-    isValid?(value: number): number;
+    isValid?(value: number): boolean | string;
+}
+
+interface IPluginOptionComponentProps {
+    /**
+     * Run this when the value changes.
+     *
+     * NOTE: The user will still need to click save to apply these changes.
+     */
+    setValue(newValue: any): void;
+    /**
+     * Set to true to prevent the user from saving.
+     *
+     * NOTE: This will not show the error to the user. It will only stop them saving.
+     * Make sure to show the error in your component.
+     */
+    setError(error: boolean): void;
+    /**
+     * The options object
+     */
+    option: PluginOptionComponent;
+}
+
+export interface PluginOptionComponent extends PluginOptionBase {
+    type: OptionType.COMPONENT;
+    component: (props: IPluginOptionComponentProps) => JSX.Element;
 }
 
 export type IpcRes<V = any> = { ok: true; value: V; } | { ok: false, error: any; };