mirrors/Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord.git synced 2025-01-10 09:56:24 +00:00
Code Activity

fix

Browse source
This commit is contained in:
Elvy 2025-01-04 20:16:19 +01:00
parent 334678d0de
commit f82cb5188b
1 changed files with 38 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/PluginSettings/components/SettingArrayComponent.tsx
View file

@ -23,6 +23,8 @@ const UserMentionComponent = findComponentByCodeLazy(".USER_MENTION)");
const getDMChannelIcon = findByCodeLazy(".getChannelIconURL({"); const getDMChannelIcon = findByCodeLazy(".getChannelIconURL({");
const GroupDMAvatars = findComponentByCodeLazy(".AvatarSizeSpecs[", "getAvatarURL"); const GroupDMAvatars = findComponentByCodeLazy(".AvatarSizeSpecs[", "getAvatarURL");
const SearchBar = findComponentByCodeLazy("focus(){let{current:");
const CloseIcon = () => { const CloseIcon = () => {
return <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="18" height="18"> return <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="18" height="18">
@ -36,12 +38,12 @@ const CheckMarkIcon = () => {
</svg>; </svg>;
}; };
const SearchIcon = () => {
interface UserMentionComponentProps { return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
id: string; <circle cx="11" cy="11" r="8"></circle>
channelId: string; <line x1="16" y1="16" x2="22" y2="22"></line>
guildId: string; </svg>;
} };
export function SettingArrayComponent({ export function SettingArrayComponent({
option, option,
@ -53,6 +55,7 @@ export function SettingArrayComponent({
}: ISettingElementProps<PluginOptionList>) { }: ISettingElementProps<PluginOptionList>) {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [items, setItems] = useState<string[]>([]); const [items, setItems] = useState<string[]>([]);
const [text, setText] = useState<string>("");
useEffect(() => { useEffect(() => {
pluginSettings[id] = items; pluginSettings[id] = items;
@ -104,6 +107,7 @@ export function SettingArrayComponent({
key={index} key={index}
style={{ style={{
gap: "1px", gap: "1px",
marginBottom: "8px"
}} }}
> >
{guild ? ( {guild ? (
@ -251,32 +255,33 @@ export function SettingArrayComponent({
} }
function handleSubmit() { function handleSubmit() {
const inputElement = document.getElementById(`vc-plugin-modal-input-${option.type === OptionType.CHANNELS ? "channel" : option.type === OptionType.GUILDS ? "guild" : option.type === OptionType.USERS ? "user" : "string"}`) as HTMLInputElement; if (text === "") {
if (!inputElement || inputElement.value === "") {
return; return;
} }
// TODO add picker for users etc? if (option.type !== OptionType.ARRAY && !(text.length >= 18 && text.length <= 19 && !isNaN(Number(text)))) {
if (option.type !== OptionType.ARRAY && !(inputElement.value.length >= 18 && inputElement.value.length <= 19 && !isNaN(Number(inputElement.value)))) { // openSearchModal();
setError("Value is not a valid snowflake ID"); setText("");
// FIXME
return; return;
} }
if (items.includes(inputElement.value)) { if (items.includes(text)) {
setError("This item is already added"); setError("This item is already added");
inputElement.value = ""; setText("");
return; return;
} }
setItems([...items, inputElement.value]); setItems([...items, text]);
inputElement.value = ""; setText("");
setError(null);
} }
return ( return (
<Forms.FormSection> <Forms.FormSection>
<Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle> <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
<Forms.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText> <Forms.FormText className={Margins.bottom8} type="description">{option.description}</Forms.FormText>
<ErrorBoundary noop> <ErrorBoundary noop>
{option.type === OptionType.ARRAY || option.type === OptionType.USERS ? {option.type === OptionType.ARRAY || option.type === OptionType.USERS ?
items.map((item, index) => ( items.map((item, index) => (
@ -285,6 +290,7 @@ export function SettingArrayComponent({
key={index} key={index}
style={{ style={{
gap: "1px", gap: "1px",
marginBottom: "8px"
}} }}
> >
{option.type === OptionType.USERS ? ( {option.type === OptionType.USERS ? (
@ -303,14 +309,15 @@ export function SettingArrayComponent({
<Flex <Flex
flexDirection="row" flexDirection="row"
style={{ style={{
gap: "5px", gap: "3px"
marginTop: "10px",
}} }}
> >
<TextInput <TextInput
type="text" type="text"
placeholder="Add Item (as ID)" placeholder="Add Item (as ID)"
id={`vc-plugin-modal-input-${option.type === OptionType.CHANNELS ? "channel" : option.type === OptionType.GUILDS ? "guild" : option.type === OptionType.USERS ? "user" : "string"}`} id={cl("input")}
onChange={v => setText(v)}
value={text}
/> />
<Button <Button
size={Button.Sizes.MIN} size={Button.Sizes.MIN}
@ -320,6 +327,18 @@ export function SettingArrayComponent({
> >
<CheckMarkIcon /> <CheckMarkIcon />
</Button> </Button>
<Button
id={cl("search-button")}
size={Button.Sizes.MIN}
onClick={() => {
// openSearchModal();
}}
style={
{ background: "none" }
}
>
<SearchIcon />
</Button>
</Flex> </Flex>
</ErrorBoundary> </ErrorBoundary>
{error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>} {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}