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 { 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>;
|
||||||
|
@ -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 "./SettingBooleanComponent";
|
||||||
|
export * from "./SettingCustomComponent";
|
||||||
export * from "./SettingNumericComponent";
|
export * from "./SettingNumericComponent";
|
||||||
export * from "./SettingSelectComponent";
|
export * from "./SettingSelectComponent";
|
||||||
export * from "./SettingSliderComponent";
|
export * from "./SettingSliderComponent";
|
||||||
|
@ -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; };
|
||||||
|
Loading…
Reference in New Issue
Block a user