53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { useRef, useState } from "react";
|
|
|
|
import styles from "./index.module.scss";
|
|
|
|
export default function ChatAction(props: {
|
|
text: string;
|
|
icon: JSX.Element;
|
|
onClick: () => void;
|
|
}) {
|
|
const iconRef = useRef<HTMLDivElement>(null);
|
|
const textRef = useRef<HTMLDivElement>(null);
|
|
const [width, setWidth] = useState({
|
|
full: 16,
|
|
icon: 16,
|
|
});
|
|
|
|
function updateWidth() {
|
|
if (!iconRef.current || !textRef.current) return;
|
|
const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
|
|
const textWidth = getWidth(textRef.current);
|
|
const iconWidth = getWidth(iconRef.current);
|
|
setWidth({
|
|
full: textWidth + iconWidth,
|
|
icon: iconWidth,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${styles["chat-input-action"]} clickable`}
|
|
onClick={() => {
|
|
props.onClick();
|
|
setTimeout(updateWidth, 1);
|
|
}}
|
|
onMouseEnter={updateWidth}
|
|
onTouchStart={updateWidth}
|
|
style={
|
|
{
|
|
"--icon-width": `${width.icon}px`,
|
|
"--full-width": `${width.full}px`,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<div ref={iconRef} className={styles["icon"]}>
|
|
{props.icon}
|
|
</div>
|
|
<div className={styles["text"]} ref={textRef}>
|
|
{props.text}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|