36 lines
937 B
TypeScript
36 lines
937 B
TypeScript
import { RefObject } from 'react';
|
|
import { useEffect } from '../lib/teact/teact';
|
|
import { IS_SINGLE_COLUMN_LAYOUT } from '../util/environment';
|
|
|
|
// Focus slows down animation, also it breaks transition layout in Chrome
|
|
const FOCUS_DELAY_MS = 500;
|
|
const MODAL_HIDE_DELAY_MS = 300;
|
|
|
|
export default function useInputFocusOnOpen(
|
|
inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
|
|
isOpen?: boolean,
|
|
onClose?: NoneToVoidFunction,
|
|
) {
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
if (!IS_SINGLE_COLUMN_LAYOUT) {
|
|
setTimeout(() => {
|
|
requestAnimationFrame(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
});
|
|
}, FOCUS_DELAY_MS);
|
|
}
|
|
} else {
|
|
if (inputRef.current) {
|
|
inputRef.current.blur();
|
|
}
|
|
|
|
if (onClose) {
|
|
setTimeout(onClose, MODAL_HIDE_DELAY_MS);
|
|
}
|
|
}
|
|
}, [inputRef, isOpen, onClose]);
|
|
}
|