74 lines
2 KiB
TypeScript
74 lines
2 KiB
TypeScript
import { ItemProps } from "../../interfaces/frontend"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { useDrawProps } from "@hooks/useDrawProps"
|
|
import classNames from "classnames"
|
|
import React, { CSSProperties, useEffect, useRef, useState } from "react"
|
|
import { HexColorPicker } from "react-colorful"
|
|
|
|
function Item({
|
|
props: { icon, text, amount, iconColor, disabled, callback },
|
|
}: {
|
|
props: ItemProps
|
|
}) {
|
|
const isColor = text === "Color"
|
|
const { color, setColor } = useDrawProps()
|
|
const [active, setActive] = useState(false)
|
|
const cpRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const inActive = (e: MouseEvent) => {
|
|
if (cpRef.current && !cpRef.current.contains(e.target as Node))
|
|
setActive(false)
|
|
}
|
|
|
|
// Add event listeners
|
|
if (!isColor) return
|
|
setTimeout(() => window.addEventListener("click", inActive), 200)
|
|
|
|
// Remove event listeners
|
|
return () => {
|
|
window.removeEventListener("click", inActive)
|
|
}
|
|
}, [active, isColor])
|
|
|
|
return (
|
|
<div className="item" onClick={isColor ? () => setActive(true) : callback}>
|
|
{isColor ? (
|
|
<div
|
|
ref={cpRef}
|
|
className={classNames("react-colorful-wrapper", { active: active })}
|
|
>
|
|
<HexColorPicker color={color} onChange={setColor} />
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
<div
|
|
className={classNames("container", {
|
|
amount: amount,
|
|
disabled: disabled,
|
|
})}
|
|
style={
|
|
amount
|
|
? ({
|
|
"--amount": JSON.stringify(amount.toString()),
|
|
} as CSSProperties)
|
|
: {}
|
|
}
|
|
>
|
|
{typeof icon === "string" ? (
|
|
<img
|
|
src={`/assets/${icon}.png`}
|
|
alt={`${icon}.png`}
|
|
className="pixelart"
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon icon={icon} color={iconColor ?? "#444"} />
|
|
)}
|
|
</div>
|
|
<span>{text}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Item
|