feat: custom components in settings (#165)
This commit is contained in:
parent
49e72bab32
commit
13882b5732
@ -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>;
|
||||
|
@ -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 });
|
||||
}
|
@ -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";
|
||||
|
@ -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; };
|
||||
|
Loading…
Reference in New Issue
Block a user