mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-01-10 09:56:24 +00:00
fix up some stuff
This commit is contained in:
parent
7c729de800
commit
5e616fc146
1 changed files with 58 additions and 19 deletions
|
@ -6,20 +6,22 @@
|
||||||
|
|
||||||
import { classNameFactory } from "@api/Styles";
|
import { classNameFactory } from "@api/Styles";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Flex } from "@components/Flex";
|
|
||||||
import { debounce } from "@shared/debounce";
|
import { debounce } from "@shared/debounce";
|
||||||
import { Margins } from "@utils/margins";
|
import { Margins } from "@utils/margins";
|
||||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||||
import { wordsFromCamel, wordsToTitle } from "@utils/text";
|
import { wordsFromCamel, wordsToTitle } from "@utils/text";
|
||||||
import { OptionType, PluginOptionList } from "@utils/types";
|
import { OptionType, PluginOptionList } from "@utils/types";
|
||||||
import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy } from "@webpack";
|
import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy } from "@webpack";
|
||||||
import { Avatar, Button, ChannelStore, Forms, GuildStore, IconUtils, React, Text, TextInput, useCallback, useEffect, useRef, useState } from "@webpack/common";
|
import { Avatar, Button, ChannelStore, Flex, Forms, GuildStore, Heading, IconUtils, React, Text, TextInput, useCallback, useEffect, useRef, useState } from "@webpack/common";
|
||||||
import { Channel, Guild } from "discord-types/general";
|
import { Channel, Guild } from "discord-types/general";
|
||||||
|
|
||||||
import { ISettingElementProps } from ".";
|
import { ISettingElementProps } from ".";
|
||||||
|
|
||||||
const cl = classNameFactory("vc-plugin-modal-");
|
const cl = classNameFactory("vc-plugin-modal-");
|
||||||
|
|
||||||
|
|
||||||
|
// TODO add interfaces for the stuff from the modal instead of using any
|
||||||
|
|
||||||
const UserMentionComponent = findComponentByCodeLazy(".USER_MENTION)");
|
const UserMentionComponent = findComponentByCodeLazy(".USER_MENTION)");
|
||||||
const getDMChannelIcon = findByCodeLazy(".getChannelIconURL({");
|
const getDMChannelIcon = findByCodeLazy(".getChannelIconURL({");
|
||||||
const GroupDMAvatars = findComponentByCodeLazy(".AvatarSizeSpecs[", "getAvatarURL");
|
const GroupDMAvatars = findComponentByCodeLazy(".AvatarSizeSpecs[", "getAvatarURL");
|
||||||
|
@ -60,8 +62,13 @@ export function SettingArrayComponent({
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
pluginSettings[id] = items;
|
pluginSettings[id] = items;
|
||||||
|
onChange(items);
|
||||||
}, [items, pluginSettings, id]);
|
}, [items, pluginSettings, id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onError(error !== null);
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
if (items.length === 0 && pluginSettings[id].length !== 0) {
|
if (items.length === 0 && pluginSettings[id].length !== 0) {
|
||||||
setItems(pluginSettings[id]);
|
setItems(pluginSettings[id]);
|
||||||
}
|
}
|
||||||
|
@ -79,6 +86,11 @@ export function SettingArrayComponent({
|
||||||
"guilds": [],
|
"guilds": [],
|
||||||
"users": []
|
"users": []
|
||||||
});
|
});
|
||||||
|
const [selected, setSelected] = useState<any[]>([]);
|
||||||
|
|
||||||
|
const onConfirm = () => {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
const searchHandlerRef = useRef<typeof SearchHandler | null>(null);
|
const searchHandlerRef = useRef<typeof SearchHandler | null>(null);
|
||||||
|
|
||||||
|
@ -114,13 +126,21 @@ export function SettingArrayComponent({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||||
<ModalHeader>
|
<ModalHeader
|
||||||
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Search for {
|
className={cl("search-modal-header")}
|
||||||
|
direction={Flex.Direction.VERTICAL}
|
||||||
|
align={Flex.Align.START}
|
||||||
|
justify={Flex.Justify.BETWEEN}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "100%", marginBottom: "8px" }}>
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
|
||||||
|
<Heading variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Search for {
|
||||||
option.type === OptionType.USERS ? "Users" : option.type === OptionType.CHANNELS ? "Channels" : "Guilds"
|
option.type === OptionType.USERS ? "Users" : option.type === OptionType.CHANNELS ? "Channels" : "Guilds"
|
||||||
}</Text>
|
}</Heading>
|
||||||
|
<Heading variant="heading-sm/normal" style={{ color: "var(--header-muted)" }}>All selected items will be added to {wordsToTitle(wordsFromCamel(id))}</Heading>
|
||||||
|
</div>
|
||||||
<ModalCloseButton onClick={close} />
|
<ModalCloseButton onClick={close} />
|
||||||
</ModalHeader>
|
</div>
|
||||||
<ModalContent>
|
|
||||||
<SearchBarWrapper.SearchBar
|
<SearchBarWrapper.SearchBar
|
||||||
size={SearchBarModule.SearchBar.Sizes.MEDIUM}
|
size={SearchBarModule.SearchBar.Sizes.MEDIUM}
|
||||||
placeholder={"Search for a" + (option.type === OptionType.USERS ? " user" : option.type === OptionType.CHANNELS ? " channel" : " guild")}
|
placeholder={"Search for a" + (option.type === OptionType.USERS ? " user" : option.type === OptionType.CHANNELS ? " channel" : " guild")}
|
||||||
|
@ -128,14 +148,28 @@ export function SettingArrayComponent({
|
||||||
onChange={setSearchText}
|
onChange={setSearchText}
|
||||||
autofocus={true}
|
autofocus={true}
|
||||||
/>
|
/>
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalContent>
|
||||||
|
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
||||||
<ModalFooter>
|
<ModalFooter>
|
||||||
|
<Button
|
||||||
|
color={Button.Colors.BRAND}
|
||||||
|
onClick={onConfirm}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color={Button.Colors.TRANSPARENT}
|
||||||
|
look={Button.Looks.LINK}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
|
|
||||||
</ModalRoot>
|
</ModalRoot >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -342,12 +376,17 @@ export function SettingArrayComponent({
|
||||||
if (text === "") {
|
if (text === "") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (option.type !== OptionType.ARRAY && !(text.length >= 18 && text.length <= 19 && !isNaN(Number(text)))) {
|
if (option.type !== OptionType.ARRAY) {
|
||||||
openSearchModal();
|
if (isNaN(Number(text))) {
|
||||||
|
openSearchModal(text);
|
||||||
setText("");
|
setText("");
|
||||||
// FIXME
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!(text.length >= 18 && text.length <= 19)) {
|
||||||
|
setError("Invalid ID");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (items.includes(text)) {
|
if (items.includes(text)) {
|
||||||
setError("This item is already added");
|
setError("This item is already added");
|
||||||
|
@ -398,7 +437,7 @@ export function SettingArrayComponent({
|
||||||
>
|
>
|
||||||
<TextInput
|
<TextInput
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Add Item (as ID)"
|
placeholder="Add Item (ID or Name)"
|
||||||
id={cl("input")}
|
id={cl("input")}
|
||||||
onChange={v => setText(v)}
|
onChange={v => setText(v)}
|
||||||
value={text}
|
value={text}
|
||||||
|
@ -414,7 +453,7 @@ export function SettingArrayComponent({
|
||||||
<Button
|
<Button
|
||||||
id={cl("search-button")}
|
id={cl("search-button")}
|
||||||
size={Button.Sizes.MIN}
|
size={Button.Sizes.MIN}
|
||||||
onClick={openSearchModal}
|
onClick={() => openSearchModal(text)}
|
||||||
style={
|
style={
|
||||||
{ background: "none" }
|
{ background: "none" }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue