mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-07 21:53:04 -04:00
Fix VencordToolbox & PermissionsViewer
Fixes components using popups as they now require you to pass a targetElementRef
This commit is contained in:
parent
e487529f06
commit
bd4519a816
3 changed files with 39 additions and 29 deletions
|
@ -26,7 +26,7 @@ import { Devs } from "@utils/constants";
|
|||
import { classes } from "@utils/misc";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, match, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
|
||||
import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, match, Menu, PermissionsBits, Popout, TooltipContainer, useRef, UserStore } from "@webpack/common";
|
||||
import type { Guild, GuildMember } from "discord-types/general";
|
||||
|
||||
import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
|
||||
|
@ -173,32 +173,38 @@ export default definePlugin({
|
|||
}
|
||||
],
|
||||
|
||||
ViewPermissionsButton: ErrorBoundary.wrap(({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) => (
|
||||
<Popout
|
||||
position="bottom"
|
||||
align="center"
|
||||
renderPopout={({ closePopout }) => (
|
||||
<Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
|
||||
<UserPermissions guild={guild} guildMember={guildMember} closePopout={closePopout} />
|
||||
</Dialog>
|
||||
)}
|
||||
>
|
||||
{popoutProps => (
|
||||
<TooltipContainer text="View Permissions">
|
||||
<Button
|
||||
{...popoutProps}
|
||||
color={Button.Colors.CUSTOM}
|
||||
look={Button.Looks.FILLED}
|
||||
size={Button.Sizes.NONE}
|
||||
innerClassName={classes(RoleButtonClasses.buttonInner, RoleButtonClasses.icon)}
|
||||
className={classes(RoleButtonClasses.button, RoleButtonClasses.icon, "vc-permviewer-role-button")}
|
||||
>
|
||||
<SafetyIcon height="16" width="16" />
|
||||
</Button>
|
||||
</TooltipContainer>
|
||||
)}
|
||||
</Popout>
|
||||
), { noop: true }),
|
||||
ViewPermissionsButton: ErrorBoundary.wrap(({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) => {
|
||||
const buttonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<Popout
|
||||
position="bottom"
|
||||
align="center"
|
||||
targetElementRef={buttonRef}
|
||||
renderPopout={({ closePopout }) => (
|
||||
<Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
|
||||
<UserPermissions guild={guild} guildMember={guildMember} closePopout={closePopout} />
|
||||
</Dialog>
|
||||
)}
|
||||
>
|
||||
{popoutProps => (
|
||||
<TooltipContainer text="View Permissions">
|
||||
<Button
|
||||
{...popoutProps}
|
||||
buttonRef={buttonRef}
|
||||
color={Button.Colors.CUSTOM}
|
||||
look={Button.Looks.FILLED}
|
||||
size={Button.Sizes.NONE}
|
||||
innerClassName={classes(RoleButtonClasses.buttonInner, RoleButtonClasses.icon)}
|
||||
className={classes(RoleButtonClasses.button, RoleButtonClasses.icon, "vc-permviewer-role-button")}
|
||||
>
|
||||
<SafetyIcon height="16" width="16" />
|
||||
</Button>
|
||||
</TooltipContainer>
|
||||
)}
|
||||
</Popout>
|
||||
);
|
||||
}, { noop: true }),
|
||||
|
||||
contextMenus: {
|
||||
"user-context": makeContextMenuPatch("roles", MenuItemParentType.User),
|
||||
|
|
|
@ -24,7 +24,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
|
|||
import { Devs } from "@utils/constants";
|
||||
import definePlugin from "@utils/types";
|
||||
import { findComponentByCodeLazy } from "@webpack";
|
||||
import { Menu, Popout, useState } from "@webpack/common";
|
||||
import { Menu, Popout, useRef, useState } from "@webpack/common";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_TOP:", '.iconBadge,"top"');
|
||||
|
@ -95,6 +95,7 @@ function VencordPopoutIcon(isShown: boolean) {
|
|||
}
|
||||
|
||||
function VencordPopoutButton() {
|
||||
const buttonRef = useRef(null);
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
return (
|
||||
|
@ -104,10 +105,12 @@ function VencordPopoutButton() {
|
|||
animation={Popout.Animation.NONE}
|
||||
shouldShow={show}
|
||||
onRequestClose={() => setShow(false)}
|
||||
targetElementRef={buttonRef}
|
||||
renderPopout={() => VencordPopout(() => setShow(false))}
|
||||
>
|
||||
{(_, { isShown }) => (
|
||||
<HeaderBarIcon
|
||||
ref={buttonRef}
|
||||
className="vc-toolbox-btn"
|
||||
onClick={() => setShow(v => !v)}
|
||||
tooltip={isShown ? null : "Vencord Toolbox"}
|
||||
|
|
3
src/webpack/common/types/components.d.ts
vendored
3
src/webpack/common/types/components.d.ts
vendored
|
@ -16,7 +16,7 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import type { ComponentClass, ComponentPropsWithRef, ComponentType, CSSProperties, FunctionComponent, HtmlHTMLAttributes, HTMLProps, JSX, KeyboardEvent, MouseEvent, PointerEvent, PropsWithChildren, ReactNode, Ref } from "react";
|
||||
import type { ComponentClass, ComponentPropsWithRef, ComponentType, CSSProperties, FunctionComponent, HtmlHTMLAttributes, HTMLProps, JSX, KeyboardEvent, MouseEvent, PointerEvent, PropsWithChildren, ReactNode, Ref, RefObject } from "react";
|
||||
|
||||
|
||||
export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/semibold" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/semibold" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/semibold" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
|
||||
|
@ -426,6 +426,7 @@ export type Popout = ComponentType<{
|
|||
}
|
||||
): ReactNode;
|
||||
shouldShow?: boolean;
|
||||
targetElementRef: RefObject<any>;
|
||||
renderPopout(args: {
|
||||
closePopout(): void;
|
||||
isPositioned: boolean;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue