@tanstack/query-core
Version:
The framework agnostic core that powers TanStack Query
118 lines (117 loc) • 3.61 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_subscribable = require("./subscribable.cjs");
//#region src/focusManager.ts
/**
* The `FocusManager` manages the focus state within TanStack Query.
*
* It can be used to change the default event listeners or to manually change the focus state.
*/
var FocusManager = class extends require_subscribable.Subscribable {
#focused;
#cleanup;
#setup;
constructor() {
super();
this.#setup = (onFocus) => {
if (typeof window !== "undefined" && window.addEventListener) {
const listener = () => onFocus();
window.addEventListener("visibilitychange", listener, false);
return () => {
window.removeEventListener("visibilitychange", listener);
};
}
};
}
onSubscribe() {
if (!this.#cleanup) this.setEventListener(this.#setup);
}
onUnsubscribe() {
if (!this.hasListeners()) {
this.#cleanup?.();
this.#cleanup = void 0;
}
}
/**
* `setEventListener` can be used to set a custom event listener that will
* be used to determine the focus state. The provided `setup` function
* receives a `setFocused` callback: call it with a `boolean` to manually
* set the focus state, or with no arguments to re-evaluate the current
* focus state and notify subscribers.
* @param setup - Receives the `setFocused` callback, registers the event listener, and may return
* a cleanup function that is called when the listener is replaced or no longer needed.
* @example
* ```ts
* import { focusManager } from '@tanstack/query-core'
*
* focusManager.setEventListener((handleFocus) => {
* const listener = () => handleFocus()
* // Listen to visibilitychange
* if (typeof window !== 'undefined' && window.addEventListener) {
* window.addEventListener('visibilitychange', listener, false)
* }
*
* return () => {
* // Be sure to unsubscribe if a new handler is set
* window.removeEventListener('visibilitychange', listener)
* }
* })
* ```
*/
setEventListener(setup) {
this.#setup = setup;
this.#cleanup?.();
this.#cleanup = setup((focused) => {
if (typeof focused === "boolean") this.setFocused(focused);
else this.onFocus();
});
}
/**
* `setFocused` can be used to manually set the focus state. Set `undefined`
* to fall back to the default focus check.
* @param focused - The focus state, or `undefined` to use the default focus check.
* @example
* ```ts
* import { focusManager } from '@tanstack/query-core'
*
* // Set focused
* focusManager.setFocused(true)
*
* // Set unfocused
* focusManager.setFocused(false)
*
* // Fallback to the default focus check
* focusManager.setFocused(undefined)
* ```
*/
setFocused(focused) {
if (this.#focused !== focused) {
this.#focused = focused;
this.onFocus();
}
}
/**
* `onFocus` notifies all subscribed listeners with the current focus state.
*/
onFocus() {
const isFocused = this.isFocused();
this.listeners.forEach((listener) => {
listener(isFocused);
});
}
/**
* `isFocused` can be used to get the current focus state.
* @returns The focus state set with `setFocused`, or otherwise whether the document is visible.
*/
isFocused() {
if (typeof this.#focused === "boolean") return this.#focused;
return globalThis.document?.visibilityState !== "hidden";
}
};
/**
* Singleton instance of {@link FocusManager}, used to manage and observe the focus state within TanStack Query.
*/
const focusManager = new FocusManager();
//#endregion
exports.FocusManager = FocusManager;
exports.focusManager = focusManager;
//# sourceMappingURL=focusManager.cjs.map