diff --git a/docs/api.md b/docs/api.md index 640ece75..ba59ab49 100644 --- a/docs/api.md +++ b/docs/api.md @@ -437,7 +437,7 @@ The Remote Control Configuration API is used to configure the remote control int ## Parameters -This object has two methods: +This object has two properties: - `remoteControlSubscriber: (direction: Direction) => TSubscriber`: A function that takes a callback as an argument. This callback is meant to be invoked with a `Direction` enum value whenever a remoteControl event that should change the focus occurs. The function should return a subscriber identifier that can be used to unsubscribe the event listener. - `remoteControlUnsubscriber: (subscriber: TSubscriber) => void`: A function that takes the subscriber identifier returned by `remoteControlSubscriber` as an argument. This function is meant to remove the remoteControl event listener associated with the given identifier. diff --git a/packages/lib/src/spatial-navigation/configureRemoteControl.ts b/packages/lib/src/spatial-navigation/configureRemoteControl.ts index a4186965..04abd7cd 100644 --- a/packages/lib/src/spatial-navigation/configureRemoteControl.ts +++ b/packages/lib/src/spatial-navigation/configureRemoteControl.ts @@ -8,14 +8,12 @@ export interface RemoteControlConfiguration { remoteControlUnsubscriber: (subscriber: SubscriberType) => void; } -export let remoteControlSubscriber: - | RemoteControlConfiguration['remoteControlSubscriber'] - | undefined = undefined; -export let remoteControlUnsubscriber: - | RemoteControlConfiguration['remoteControlUnsubscriber'] - | undefined = undefined; +const config: Partial = {}; export const configureRemoteControl = (options: RemoteControlConfiguration) => { - remoteControlSubscriber = options.remoteControlSubscriber; - remoteControlUnsubscriber = options.remoteControlUnsubscriber; + config.remoteControlSubscriber = options.remoteControlSubscriber; + config.remoteControlUnsubscriber = options.remoteControlUnsubscriber; }; + +export const getRemoteControlSubscriber = () => config.remoteControlSubscriber; +export const getRemoteControlUnsubscriber = () => config.remoteControlUnsubscriber; diff --git a/packages/lib/src/spatial-navigation/hooks/useRemoteControl.ts b/packages/lib/src/spatial-navigation/hooks/useRemoteControl.ts index efed741f..165fabe1 100644 --- a/packages/lib/src/spatial-navigation/hooks/useRemoteControl.ts +++ b/packages/lib/src/spatial-navigation/hooks/useRemoteControl.ts @@ -1,6 +1,9 @@ import SpatialNavigator from '../SpatialNavigator'; import { useEffect } from 'react'; -import { remoteControlSubscriber, remoteControlUnsubscriber } from '../configureRemoteControl'; +import { + getRemoteControlSubscriber, + getRemoteControlUnsubscriber, +} from '../configureRemoteControl'; import { useSpatialNavigationDeviceType } from '../context/DeviceContext'; export const useRemoteControl = ({ @@ -13,7 +16,7 @@ export const useRemoteControl = ({ const { setDeviceType, setScrollingIntervalId: setScrollingId } = useSpatialNavigationDeviceType(); useEffect(() => { - if (!remoteControlSubscriber) { + if (!getRemoteControlSubscriber()) { console.warn( '[React Spatial Navigation] You probably forgot to configure the remote control. Please call the configuration function.', ); @@ -25,20 +28,20 @@ export const useRemoteControl = ({ return () => undefined; } - const listener = remoteControlSubscriber((direction) => { + const listener = getRemoteControlSubscriber()?.((direction) => { setDeviceType('remoteKeys'); spatialNavigator.handleKeyDown(direction); setScrollingId(null); }); return () => { - if (!remoteControlUnsubscriber) { + if (!getRemoteControlUnsubscriber()) { console.warn( '[React Spatial Navigation] You did not provide a remote control unsubscriber. Are you sure you called configuration correctly?', ); return; } - remoteControlUnsubscriber(listener); + getRemoteControlUnsubscriber()?.(listener); }; }, [spatialNavigator, isActive, setDeviceType, setScrollingId]); };