@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
60 lines (56 loc) • 1.91 kB
JavaScript
'use client';
;
var React = require('react');
var useCallbackRef = require('../utils/use-callback-ref/use-callback-ref.cjs');
function useDebouncedCallback(callback, options) {
const { delay, flushOnUnmount, leading } = typeof options === "number" ? { delay: options, flushOnUnmount: false, leading: false } : options;
const handleCallback = useCallbackRef.useCallbackRef(callback);
const debounceTimerRef = React.useRef(0);
const lastCallback = React.useMemo(() => {
const currentCallback = Object.assign(
(...args) => {
window.clearTimeout(debounceTimerRef.current);
const isFirstCall = currentCallback._isFirstCall;
currentCallback._isFirstCall = false;
if (leading && isFirstCall) {
handleCallback(...args);
return;
}
function clearTimeoutAndLeadingRef() {
window.clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = 0;
currentCallback._isFirstCall = true;
}
const flush = () => {
if (debounceTimerRef.current !== 0) {
clearTimeoutAndLeadingRef();
handleCallback(...args);
}
};
const cancel = () => {
clearTimeoutAndLeadingRef();
};
currentCallback.flush = flush;
currentCallback.cancel = cancel;
debounceTimerRef.current = window.setTimeout(flush, delay);
},
{ flush: () => {
}, cancel: () => {
}, _isFirstCall: true }
);
return currentCallback;
}, [handleCallback, delay, leading]);
React.useEffect(
() => () => {
if (flushOnUnmount) {
lastCallback.flush();
} else {
lastCallback.cancel();
}
},
[lastCallback, flushOnUnmount]
);
return lastCallback;
}
exports.useDebouncedCallback = useDebouncedCallback;
//# sourceMappingURL=use-debounced-callback.cjs.map