Fix Error On Compile

This commit is contained in:
thororen1234 2025-05-21 16:26:30 -04:00
parent f0229d6185
commit b4cde05582
No known key found for this signature in database
2 changed files with 33 additions and 32 deletions

View file

@ -5,18 +5,17 @@
*/ */
import { Text, Tooltip } from "@webpack/common"; import { Text, Tooltip } from "@webpack/common";
import type { ComponentProps } from "react"; import type { ComponentProps, RefObject } from "react";
import { buttonRef } from "./BuilderColorButton";
export interface BuilderButtonProps { export interface BuilderButtonProps {
label?: string | undefined; label?: string | undefined;
tooltip?: string | undefined; tooltip?: string | undefined;
selectedStyle?: ComponentProps<"div">["style"]; selectedStyle?: ComponentProps<"div">["style"];
buttonProps?: ComponentProps<"div"> | undefined; buttonProps?: ComponentProps<"div"> | undefined;
buttonRef?: RefObject<null>;
} }
export const BuilderButton = ({ label, tooltip, selectedStyle, buttonProps }: BuilderButtonProps) => ( export const BuilderButton = ({ buttonRef, label, tooltip, selectedStyle, buttonProps }: BuilderButtonProps) => (
<Tooltip text={tooltip} shouldShow={!!tooltip}> <Tooltip text={tooltip} shouldShow={!!tooltip}>
{tooltipProps => ( {tooltipProps => (
<div style={{ width: "60px" }}> <div style={{ width: "60px" }}>

View file

@ -13,32 +13,34 @@ export interface BuilderColorButtonProps extends Pick<BuilderButtonProps, "label
setColor: (color: number | null) => void; setColor: (color: number | null) => void;
} }
export const buttonRef = useRef(null); export function BuilderColorButton({ label, color, setColor, suggestedColors }: BuilderColorButtonProps) {
const buttonRef = useRef(null);
export const BuilderColorButton = ({ label, color, setColor, suggestedColors }: BuilderColorButtonProps) => ( return (
<Popout <Popout
position="bottom" position="bottom"
targetElementRef={buttonRef} targetElementRef={buttonRef}
renderPopout={() => ( renderPopout={() => (
<CustomColorPicker <CustomColorPicker
value={color} value={color}
onChange={setColor} onChange={setColor}
showEyeDropper={true} showEyeDropper={true}
suggestedColors={suggestedColors} suggestedColors={suggestedColors}
/>
)}
>
{popoutProps => {
const hexColor = color ? "#" + color.toString(16).padStart(6, "0") : undefined;
return (
<BuilderButton
label={label}
tooltip={hexColor}
selectedStyle={hexColor ? { background: hexColor } : undefined}
buttonProps={popoutProps}
/> />
); )}
}} >
</Popout> {popoutProps => {
); const hexColor = color ? "#" + color.toString(16).padStart(6, "0") : undefined;
return (
<BuilderButton
label={label}
tooltip={hexColor}
selectedStyle={hexColor ? { background: hexColor } : undefined}
buttonProps={popoutProps}
buttonRef={buttonRef}
/>
);
}}
</Popout>
);
}