63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo, useEffect, useRef } from '../../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import renderText from '../../common/helpers/renderText';
|
|
|
|
import Icon from '../../common/icons/Icon';
|
|
import Button from '../../ui/Button';
|
|
|
|
type OwnProps = {
|
|
isOpen?: boolean;
|
|
onClick: VoidFunction;
|
|
text: string;
|
|
isDisabled?: boolean;
|
|
};
|
|
|
|
const BotMenuButton: FC<OwnProps> = ({
|
|
isOpen,
|
|
onClick,
|
|
text,
|
|
isDisabled,
|
|
}) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const textRef = useRef<HTMLSpanElement>(null);
|
|
|
|
useEffect(() => {
|
|
const textEl = textRef.current;
|
|
if (!textEl) return;
|
|
|
|
const width = textEl.scrollWidth + 1; // Make width slightly bigger prevent ellipsis in some cases
|
|
|
|
const composerEl = textEl.closest('.Composer') as HTMLElement;
|
|
composerEl.style.setProperty('--bot-menu-text-width', `${width}px`);
|
|
}, [isOpen, text]);
|
|
|
|
useEffect(() => {
|
|
const textEl = textRef.current;
|
|
if (!textEl) return undefined;
|
|
|
|
const composerEl = textEl.closest('.Composer') as HTMLElement;
|
|
|
|
return () => {
|
|
composerEl.style.removeProperty('--bot-menu-text-width');
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Button
|
|
className={buildClassName('bot-menu', isOpen && 'open')}
|
|
round
|
|
color="translucent"
|
|
disabled={isDisabled}
|
|
onClick={onClick}
|
|
ariaLabel="Open bot command keyboard"
|
|
>
|
|
<Icon name="webapp" className={buildClassName('bot-menu-icon', isOpen && 'open')} />
|
|
<span ref={textRef} className="bot-menu-text">{renderText(text)}</span>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default memo(BotMenuButton);
|