feat: settings sliders (#120)
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
parent
efab399309
commit
1f50f78912
@ -15,10 +15,9 @@ import {
|
||||
SettingInputComponent,
|
||||
SettingNumericComponent,
|
||||
SettingSelectComponent,
|
||||
SettingSliderComponent,
|
||||
} from "./components";
|
||||
|
||||
const { FormSection, FormText, FormTitle } = Forms;
|
||||
|
||||
const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
|
||||
const AvatarStyles = lazyWebpack(filters.byProps(["moreUsers", "emptyUser", "avatarContainer", "clickableAvatar"]));
|
||||
const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
|
||||
@ -80,7 +79,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
||||
|
||||
function renderSettings() {
|
||||
if (!pluginSettings || !plugin.options) {
|
||||
return <FormText>There are no settings for this plugin.</FormText>;
|
||||
return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
|
||||
}
|
||||
|
||||
const options: JSX.Element[] = [];
|
||||
@ -110,6 +109,11 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
||||
}
|
||||
case OptionType.BOOLEAN: {
|
||||
options.push(<SettingBooleanComponent key={key} option={setting} {...props} />);
|
||||
break;
|
||||
}
|
||||
case OptionType.SLIDER: {
|
||||
options.push(<SettingSliderComponent key={key} option={setting} {...props} />);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -142,9 +146,9 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
||||
<Text variant="heading-md/bold">{plugin.name}</Text>
|
||||
</ModalHeader>
|
||||
<ModalContent style={{ marginBottom: 8, marginTop: 8 }}>
|
||||
<FormSection>
|
||||
<FormTitle tag="h3">About {plugin.name}</FormTitle>
|
||||
<FormText>{plugin.description}</FormText>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h3">About {plugin.name}</Forms.FormTitle>
|
||||
<Forms.FormText>{plugin.description}</Forms.FormText>
|
||||
<div style={{ marginTop: 8, marginBottom: 8, width: "fit-content" }}>
|
||||
<UserSummaryItem
|
||||
users={authors}
|
||||
@ -157,20 +161,20 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
||||
renderMoreUsers={renderMoreUsers}
|
||||
/>
|
||||
</div>
|
||||
</FormSection>
|
||||
</Forms.FormSection>
|
||||
{!!plugin.settingsAboutComponent && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<FormSection>
|
||||
<Forms.FormSection>
|
||||
<ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
|
||||
<plugin.settingsAboutComponent />
|
||||
</ErrorBoundary>
|
||||
</FormSection>
|
||||
</Forms.FormSection>
|
||||
</div>
|
||||
)}
|
||||
<FormSection>
|
||||
<FormTitle tag="h3">Settings</FormTitle>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
|
||||
{renderSettings()}
|
||||
</FormSection>
|
||||
</Forms.FormSection>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex>
|
||||
|
@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
|
||||
import { PluginOptionBoolean } from "../../../utils/types";
|
||||
import { Forms, React, Select } from "../../../webpack/common";
|
||||
|
||||
const { FormSection, FormTitle, FormText } = Forms;
|
||||
|
||||
export function SettingBooleanComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionBoolean>) {
|
||||
const def = pluginSettings[id] ?? option.default;
|
||||
|
||||
@ -31,8 +29,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
|
||||
}
|
||||
|
||||
return (
|
||||
<FormSection>
|
||||
<FormTitle>{option.description}</FormTitle>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{option.description}</Forms.FormTitle>
|
||||
<Select
|
||||
isDisabled={option.disabled?.() ?? false}
|
||||
options={options}
|
||||
@ -44,8 +42,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
|
||||
serialize={v => String(v)}
|
||||
{...option.componentProps}
|
||||
/>
|
||||
{error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
|
||||
</FormSection>
|
||||
{error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
|
||||
import { OptionType, PluginOptionNumber } from "../../../utils/types";
|
||||
import { Forms, React, TextInput } from "../../../webpack/common";
|
||||
|
||||
const { FormSection, FormTitle, FormText } = Forms;
|
||||
|
||||
const MAX_SAFE_NUMBER = BigInt(Number.MAX_SAFE_INTEGER);
|
||||
|
||||
export function SettingNumericComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionNumber>) {
|
||||
@ -33,8 +31,8 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
|
||||
}
|
||||
|
||||
return (
|
||||
<FormSection>
|
||||
<FormTitle>{option.description}</FormTitle>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{option.description}</Forms.FormTitle>
|
||||
<TextInput
|
||||
type="number"
|
||||
pattern="-?[0-9]+"
|
||||
@ -44,7 +42,7 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
|
||||
disabled={option.disabled?.() ?? false}
|
||||
{...option.componentProps}
|
||||
/>
|
||||
{error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
|
||||
</FormSection>
|
||||
{error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
|
||||
import { PluginOptionSelect } from "../../../utils/types";
|
||||
import { Forms, React, Select } from "../../../webpack/common";
|
||||
|
||||
const { FormSection, FormTitle, FormText } = Forms;
|
||||
|
||||
export function SettingSelectComponent({ option, pluginSettings, onChange, onError, id }: ISettingElementProps<PluginOptionSelect>) {
|
||||
const def = pluginSettings[id] ?? option.options?.find(o => o.default)?.value;
|
||||
|
||||
@ -25,8 +23,8 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
|
||||
}
|
||||
|
||||
return (
|
||||
<FormSection>
|
||||
<FormTitle>{option.description}</FormTitle>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{option.description}</Forms.FormTitle>
|
||||
<Select
|
||||
isDisabled={option.disabled?.() ?? false}
|
||||
options={option.options}
|
||||
@ -38,7 +36,7 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
|
||||
serialize={v => String(v)}
|
||||
{...option.componentProps}
|
||||
/>
|
||||
{error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
|
||||
</FormSection>
|
||||
{error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
@ -0,0 +1,49 @@
|
||||
import { ISettingElementProps } from ".";
|
||||
import { PluginOptionSlider } from "../../../utils/types";
|
||||
import { Forms, React, Slider } from "../../../webpack/common";
|
||||
|
||||
export function makeRange(start: number, end: number, step = 1) {
|
||||
const ranges: number[] = [];
|
||||
for (let value = start; value <= end; value += step) {
|
||||
ranges.push(Math.round(value * 100) / 100);
|
||||
}
|
||||
return ranges;
|
||||
}
|
||||
|
||||
export function SettingSliderComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionSlider>) {
|
||||
const def = pluginSettings[id] ?? option.default;
|
||||
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
onError(error !== null);
|
||||
}, [error]);
|
||||
|
||||
function handleChange(newValue: number): void {
|
||||
let isValid = (option.isValid && option.isValid(newValue)) ?? true;
|
||||
if (typeof isValid === "string") setError(isValid);
|
||||
else if (!isValid) setError("Invalid input provided.");
|
||||
else {
|
||||
setError(null);
|
||||
onChange(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{option.description}</Forms.FormTitle>
|
||||
<Slider
|
||||
disabled={option.disabled?.() ?? false}
|
||||
markers={option.markers}
|
||||
minValue={option.markers[0]}
|
||||
maxValue={option.markers[option.markers.length - 1]}
|
||||
initialValue={def}
|
||||
onValueChange={handleChange}
|
||||
onValueRender={(v: number) => String(v.toFixed(2))}
|
||||
stickToMarkers={option.stickToMarkers ?? true}
|
||||
{...option.componentProps}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
|
||||
import { PluginOptionString } from "../../../utils/types";
|
||||
import { Forms, React, TextInput } from "../../../webpack/common";
|
||||
|
||||
const { FormSection, FormTitle, FormText } = Forms;
|
||||
|
||||
export function SettingInputComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionString>) {
|
||||
const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
@ -23,8 +21,8 @@ export function SettingInputComponent({ option, pluginSettings, id, onChange, on
|
||||
}
|
||||
|
||||
return (
|
||||
<FormSection>
|
||||
<FormTitle>{option.description}</FormTitle>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{option.description}</Forms.FormTitle>
|
||||
<TextInput
|
||||
type="text"
|
||||
value={state}
|
||||
@ -33,7 +31,7 @@ export function SettingInputComponent({ option, pluginSettings, id, onChange, on
|
||||
disabled={option.disabled?.() ?? false}
|
||||
{...option.componentProps}
|
||||
/>
|
||||
{error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
|
||||
</FormSection>
|
||||
{error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
@ -15,3 +15,4 @@ export * from "./SettingBooleanComponent";
|
||||
export * from "./SettingNumericComponent";
|
||||
export * from "./SettingSelectComponent";
|
||||
export * from "./SettingTextComponent";
|
||||
export * from "./SettingSliderComponent";
|
||||
|
@ -1,8 +1,11 @@
|
||||
import definePlugin from "../utils/types";
|
||||
import { Devs } from "../utils/constants";
|
||||
import { Message, ReactionEmoji } from "discord-types/general";
|
||||
import { FluxDispatcher, SelectedChannelStore } from "../webpack/common";
|
||||
|
||||
import { makeRange } from "../components/PluginSettings/components/SettingSliderComponent";
|
||||
import { Devs } from "../utils/constants";
|
||||
import { sleep } from "../utils/misc";
|
||||
import definePlugin, { OptionType } from "../utils/types";
|
||||
import { Settings } from "../Vencord";
|
||||
import { FluxDispatcher, SelectedChannelStore } from "../webpack/common";
|
||||
|
||||
interface IMessageCreate {
|
||||
type: "MESSAGE_CREATE";
|
||||
@ -67,6 +70,16 @@ export default definePlugin({
|
||||
FluxDispatcher.unsubscribe("MESSAGE_CREATE", this.onMessage);
|
||||
FluxDispatcher.unsubscribe("MESSAGE_REACTION_ADD", this.onReaction);
|
||||
},
|
||||
|
||||
options: {
|
||||
volume: {
|
||||
description: "Volume of the 🗿🗿🗿",
|
||||
type: OptionType.SLIDER,
|
||||
markers: makeRange(0, 1, 0.1),
|
||||
default: 0.5,
|
||||
stickToMarkers: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function countOccurrences(sourceString: string, subString: string) {
|
||||
@ -101,5 +114,6 @@ function getMoyaiCount(message: string) {
|
||||
function boom() {
|
||||
const audioElement = document.createElement("audio");
|
||||
audioElement.src = MOYAI_URL;
|
||||
audioElement.volume = Settings.plugins.Moyai.volume;
|
||||
audioElement.play();
|
||||
}
|
||||
|
@ -70,13 +70,15 @@ export enum OptionType {
|
||||
BIGINT,
|
||||
BOOLEAN,
|
||||
SELECT,
|
||||
SLIDER,
|
||||
}
|
||||
|
||||
export type PluginOptionsItem =
|
||||
| PluginOptionString
|
||||
| PluginOptionNumber
|
||||
| PluginOptionBoolean
|
||||
| PluginOptionSelect;
|
||||
| PluginOptionSelect
|
||||
| PluginOptionSlider;
|
||||
|
||||
export interface PluginOptionBase {
|
||||
description: string;
|
||||
@ -132,4 +134,24 @@ export interface PluginOptionSelectOption {
|
||||
default?: boolean;
|
||||
}
|
||||
|
||||
export interface PluginOptionSlider extends PluginOptionBase {
|
||||
type: OptionType.SLIDER;
|
||||
/**
|
||||
* All the possible values in the slider. Needs at least two values.
|
||||
*/
|
||||
markers: number[];
|
||||
/**
|
||||
* Default value to use
|
||||
*/
|
||||
default: number;
|
||||
/**
|
||||
* If false, allow users to select values in-between your markers.
|
||||
*/
|
||||
stickToMarkers?: boolean;
|
||||
/**
|
||||
* Prevents the user from saving settings if this is false or a string
|
||||
*/
|
||||
isValid?(value: number): number;
|
||||
}
|
||||
|
||||
export type IpcRes<V = any> = { ok: true; value: V; } | { ok: false, error: any; };
|
||||
|
@ -31,6 +31,7 @@ export let TextInput: any;
|
||||
export let Text: (props: TextProps) => JSX.Element;
|
||||
|
||||
export const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
|
||||
export const Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
|
||||
|
||||
export let Parser: any;
|
||||
export let Alerts: {
|
||||
|
Loading…
Reference in New Issue
Block a user