61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, { useRef, useCallback, memo } from '../../lib/teact/teact';
|
|
|
|
import { IS_TOUCH_ENV } from '../../util/environment';
|
|
|
|
import type { OwnProps as ButtonProps } from './Button';
|
|
import Button from './Button';
|
|
|
|
type OwnProps = {
|
|
onActivate: NoneToVoidFunction;
|
|
} & Omit<ButtonProps, (
|
|
'onClick' | 'onMouseDown' |
|
|
'onMouseEnter' | 'onMouseLeave' |
|
|
'onFocus'
|
|
)>;
|
|
|
|
const BUTTON_ACTIVATE_DELAY = 200;
|
|
let openTimeout: number | undefined;
|
|
let isFirstTimeActivation = true;
|
|
|
|
const ResponsiveHoverButton: FC<OwnProps> = ({ onActivate, ...buttonProps }) => {
|
|
const isMouseInside = useRef(false);
|
|
|
|
const handleMouseEnter = useCallback(() => {
|
|
isMouseInside.current = true;
|
|
|
|
// This is used to counter additional delay caused by asynchronous module loading
|
|
if (isFirstTimeActivation) {
|
|
isFirstTimeActivation = false;
|
|
onActivate();
|
|
return;
|
|
}
|
|
|
|
if (openTimeout) {
|
|
clearTimeout(openTimeout);
|
|
openTimeout = undefined;
|
|
}
|
|
openTimeout = window.setTimeout(() => {
|
|
if (isMouseInside.current) {
|
|
onActivate();
|
|
}
|
|
}, BUTTON_ACTIVATE_DELAY);
|
|
}, [onActivate]);
|
|
|
|
const handleMouseLeave = useCallback(() => {
|
|
isMouseInside.current = false;
|
|
}, []);
|
|
|
|
return (
|
|
<Button
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...buttonProps}
|
|
onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
|
|
onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
|
|
onClick={onActivate}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default memo(ResponsiveHoverButton);
|