mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 20:08:43 +08:00
38 lines
955 B
TypeScript
38 lines
955 B
TypeScript
|
import React from 'react';
|
||
|
import raf from 'rc-util/lib/raf';
|
||
|
|
||
|
/**
|
||
|
* When click on the label,
|
||
|
* the event will be stopped to prevent the label from being clicked twice.
|
||
|
* label click -> input click -> label click again
|
||
|
*/
|
||
|
export default function useBubbleLock(
|
||
|
onOriginInputClick?: React.MouseEventHandler<HTMLInputElement>,
|
||
|
) {
|
||
|
const labelClickLockRef = React.useRef<number | null>(null);
|
||
|
|
||
|
const clearLock = () => {
|
||
|
raf.cancel(labelClickLockRef.current!);
|
||
|
labelClickLockRef.current = null;
|
||
|
};
|
||
|
|
||
|
const onLabelClick: React.MouseEventHandler<HTMLLabelElement> = () => {
|
||
|
clearLock();
|
||
|
|
||
|
labelClickLockRef.current = raf(() => {
|
||
|
labelClickLockRef.current = null;
|
||
|
});
|
||
|
};
|
||
|
|
||
|
const onInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
|
||
|
if (labelClickLockRef.current) {
|
||
|
e.stopPropagation();
|
||
|
clearLock();
|
||
|
}
|
||
|
|
||
|
onOriginInputClick?.(e);
|
||
|
};
|
||
|
|
||
|
return [onLabelClick, onInputClick] as const;
|
||
|
}
|