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";