mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-16 09:57:08 -04:00
Fix Error On Compile
This commit is contained in:
parent
f0229d6185
commit
b4cde05582
2 changed files with 33 additions and 32 deletions
|
@ -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" }}>
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue