feat: custom components in settings (#165)

This commit is contained in:
megumin 2022-10-26 22:42:26 +01:00 committed by GitHub
parent 49e72bab32
commit 13882b5732
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 3 deletions

View file

@ -30,10 +30,11 @@ import ErrorBoundary from "../ErrorBoundary";
import { Flex } from "../Flex"; import { Flex } from "../Flex";
import { import {
SettingBooleanComponent, SettingBooleanComponent,
SettingCustomComponent,
SettingInputComponent, SettingInputComponent,
SettingNumericComponent, SettingNumericComponent,
SettingSelectComponent, SettingSelectComponent,
SettingSliderComponent, SettingSliderComponent
} from "./components"; } from "./components";
const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers")); 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} />); options.push(<SettingSliderComponent key={key} option={setting} {...props} />);
break; break;
} }
case OptionType.COMPONENT: {
options.push(<SettingCustomComponent key={key} option={setting} {...props} />);
break;
}
} }
} }
return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>; return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>;

View file

@ -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 });
}

View file

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

View file

@ -96,6 +96,7 @@ export enum OptionType {
BOOLEAN, BOOLEAN,
SELECT, SELECT,
SLIDER, SLIDER,
COMPONENT,
} }
export type PluginOptionsItem = export type PluginOptionsItem =
@ -103,7 +104,8 @@ export type PluginOptionsItem =
| PluginOptionNumber | PluginOptionNumber
| PluginOptionBoolean | PluginOptionBoolean
| PluginOptionSelect | PluginOptionSelect
| PluginOptionSlider; | PluginOptionSlider
| PluginOptionComponent;
export interface PluginOptionBase { export interface PluginOptionBase {
description: string; description: string;
@ -176,7 +178,32 @@ export interface PluginOptionSlider extends PluginOptionBase {
/** /**
* Prevents the user from saving settings if this is false or a string * 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; }; export type IpcRes<V = any> = { ok: true; value: V; } | { ok: false, error: any; };