diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx
index 970eb5251..9a47c322f 100644
--- a/src/components/PluginSettings/PluginModal.tsx
+++ b/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();
break;
}
+ case OptionType.COMPONENT: {
+ options.push();
+ break;
+ }
}
}
return {options};
diff --git a/src/components/PluginSettings/components/SettingCustomComponent.tsx b/src/components/PluginSettings/components/SettingCustomComponent.tsx
new file mode 100644
index 000000000..dd704bf39
--- /dev/null
+++ b/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 .
+*/
+
+import { PluginOptionComponent } from "../../../utils/types";
+import { ISettingElementProps } from ".";
+
+export function SettingCustomComponent({ option, onChange, onError }: ISettingElementProps) {
+ return option.component({ setValue: onChange, setError: onError, option });
+}
diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts
index 1712987a8..507b53a5d 100644
--- a/src/components/PluginSettings/components/index.ts
+++ b/src/components/PluginSettings/components/index.ts
@@ -30,6 +30,7 @@ export interface ISettingElementProps {
}
export * from "./SettingBooleanComponent";
+export * from "./SettingCustomComponent";
export * from "./SettingNumericComponent";
export * from "./SettingSelectComponent";
export * from "./SettingSliderComponent";
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 41dd0c1cd..689baa7ef 100644
--- a/src/utils/types.ts
+++ b/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 = { ok: true; value: V; } | { ok: false, error: any; };