From fd649202728a2b7934c4dbb49d034b4f51e1f2e7 Mon Sep 17 00:00:00 2001
From: Karim Laham <karim.laham@anghami.com>
Date: Tue, 1 Oct 2024 16:33:50 +0400
Subject: [PATCH] feat: add dynamic RTL switching function and update README
 (#120)

---
 README.md                |  3 +++
 src/SpatialNavigation.ts | 12 +++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f42db27..45b4d81 100644
--- a/README.md
+++ b/README.md
@@ -395,6 +395,9 @@ Manually recalculate all the layouts. Rarely used.
 This hook is the main link between the React component (its DOM element) and the navigation service.
 It is used to register the component in the service, get its `focusKey`, `focused` state etc.
 
+### `updateRtl` (function)
+Manually update the focus behavior (whether RTL or LTR)
+
 ```jsx
 const {/* hook output */ } = useFocusable({/* hook params */ });
 ```
diff --git a/src/SpatialNavigation.ts b/src/SpatialNavigation.ts
index 27f94cd..b06c8a7 100644
--- a/src/SpatialNavigation.ts
+++ b/src/SpatialNavigation.ts
@@ -641,6 +641,7 @@ class SpatialNavigationService {
     this.setKeyMap = this.setKeyMap.bind(this);
     this.getCurrentFocusKey = this.getCurrentFocusKey.bind(this);
     this.doesFocusableExist = this.doesFocusableExist.bind(this);
+    this.updateRtl = this.updateRtl.bind(this);
 
     this.setFocusDebounced = debounce(this.setFocus, AUTO_RESTORE_FOCUS_DELAY, {
       leading: false,
@@ -1707,6 +1708,14 @@ class SpatialNavigationService {
   doesFocusableExist(focusKey: string) {
     return !!this.focusableComponents[focusKey];
   }
+
+  /**
+   * This function updates the writing direction
+   * @param rtl whether the writing direction is right-to-left
+   */
+  updateRtl(rtl: boolean) {
+    this.writingDirection = rtl ? WritingDirection.RTL : WritingDirection.LTR;
+  }
 }
 
 /**
@@ -1726,5 +1735,6 @@ export const {
   resume,
   updateAllLayouts,
   getCurrentFocusKey,
-  doesFocusableExist
+  doesFocusableExist,
+  updateRtl
 } = SpatialNavigation;