mirror/Vencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2025-02-24 07:25:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

Init commit

Browse source
This commit is contained in:
Benjas333 2025-02-10 16:53:31 -06:00
parent fcf8690d26
commit 406a5bcbf8
2 changed files with 183 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

163
src/plugins/messageTags/components/ParamsConfigModal.tsx Normal file
View file

@ -0,0 +1,163 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2025 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import "../styles/main.css";
import { classNameFactory } from "@api/Styles";
import { CheckedTextInput } from "@components/CheckedTextInput";
import { Flex } from "@components/Flex";
import { Margins } from "@utils/margins";
import { classes } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
import { Button, Forms, TextInput, useState } from "@webpack/common";
import { Param } from "..";
const cl = classNameFactory("vc-parameters-configurator-modal-");
function ParamDefiner({ name, value, onChange }: { name: string, value: string, onChange: (newValue: string) => void }) {
return (
<>
<Forms.FormTitle tag="h6" className={cl("title")}>
{`"${name}" default value:`}
</Forms.FormTitle>
<div className={cl("text-input")}>
<TextInput
placeholder="Leave empty for Required option"
value={value}
onChange={e => onChange(e)}
/>
</div>
</>
);
}
export function ParamsConfigModal({ modalProps, params, onSave }: { modalProps: ModalProps; params: string[]; onSave: (values: { [key: string]: string }) => void; }) {
const [paramValues, setParamValues] = useState<{ [key: string]: string }>(() => {
const initialValues: { [key: string]: string } = {};
params.forEach(p => {
initialValues[p] = "";
});
return initialValues;
});
const handleSave = () => {
onSave(paramValues);
modalProps.onClose();
};
return (
<ModalRoot {...modalProps} size={ModalSize.DYNAMIC}>
<ModalHeader className={cl("header")}>
<Forms.FormTitle tag="h5" className={cl("title")}>
MessageTags Parameters Configurator
</Forms.FormTitle>
<ModalCloseButton onClick={modalProps.onClose} className={cl("close-button")} />
</ModalHeader>
<ModalContent className={cl("content")}>
{params.map((param, index) => (
<ParamDefiner
key={index}
name={param}
value={paramValues[param]}
onChange={newValue =>
setParamValues(prev => ({ ...prev, [param]: newValue }))
}
/>
))}
<Flex className={classes(Margins.bottom8, Margins.top8)}>
<Button
look={Button.Looks.LINK}
color={Button.Colors.PRIMARY}
onClick={modalProps.onClose}
>
Cancel
</Button>
<Button
look={Button.Looks.FILLED}
color={Button.Colors.BRAND}
onClick={handleSave}
>
Save & Close
</Button>
</Flex>
</ModalContent>
</ModalRoot>
);
}
function ParamPreviewer({ name, value, onChange }: { name: string, value: string, onChange: (newValue: string) => void }) {
return (
<>
<Forms.FormTitle tag="h6" className={cl("title")}>
{`"${name}" value:`}
</Forms.FormTitle>
<div className={cl("text-input")}>
<CheckedTextInput
value={value}
onChange={e => onChange(e)}
validate={v => !!v || "Value must not be empty."}
/>
</div>
</>
);
}
export function ParamsPreviewModal({ modalProps, params, onSave }: { modalProps: ModalProps; params: Param[]; onSave: (values: { [key: string]: string }) => void; }) {
const [paramValues, setParamValues] = useState<{ [key: string]: string }>(() => {
const initialValues: { [key: string]: string } = {};
params.forEach(p => {
initialValues[p.name] = p.default || "";
});
return initialValues;
});
const handleSave = () => {
onSave(paramValues);
modalProps.onClose();
};
return (
<ModalRoot {...modalProps} size={ModalSize.DYNAMIC}>
<ModalHeader className={cl("header")}>
<Forms.FormTitle tag="h5" className={cl("title")}>
MessageTags Parameters Configurator
</Forms.FormTitle>
<ModalCloseButton onClick={modalProps.onClose} className={cl("close-button")} />
</ModalHeader>
<ModalContent className={cl("content")}>
{params.map((param, index) => (
<ParamPreviewer
key={index}
name={param.name}
value={paramValues[param.name]}
onChange={newValue =>
setParamValues(prev => ({ ...prev, [param.name]: newValue }))
}
/>
))}
<Flex className={classes(Margins.bottom8, Margins.top8)}>
<Button
look={Button.Looks.LINK}
color={Button.Colors.PRIMARY}
onClick={modalProps.onClose}
>
Cancel
</Button>
<Button
look={Button.Looks.FILLED}
color={Button.Colors.BRAND}
onClick={handleSave}
>
Save & Close
</Button>
</Flex>
</ModalContent>
</ModalRoot>
);
}

20
src/plugins/messageTags/styles/main.css Normal file
View file

@ -0,0 +1,20 @@
.vc-parameters-configurator-modal-header {
place-content: center space-between;
}
.vc-parameters-configurator-modal-title {
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.vc-parameters-configurator-modal-text-input {
min-width: 25vw;
padding-top: 5px;
padding-bottom: 5px;
}
.vc-parameters-configurator-modal-close-button {
padding: 0;
}