diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx index 970eb525..9a47c322 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 00000000..dd704bf3 --- /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 1712987a..507b53a5 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 41dd0c1c..689baa7e 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; };