Skip to content

Commit

Permalink
feat: add dynamic RTL switching function and update README (#120)
Browse files Browse the repository at this point in the history
  • Loading branch information
karimlaham authored Oct 1, 2024
1 parent 0058b0f commit fd64920
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 1 deletion.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 */ });
```
Expand Down
12 changes: 11 additions & 1 deletion src/SpatialNavigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
}

/**
Expand All @@ -1726,5 +1735,6 @@ export const {
resume,
updateAllLayouts,
getCurrentFocusKey,
doesFocusableExist
doesFocusableExist,
updateRtl
} = SpatialNavigation;

0 comments on commit fd64920

Please sign in to comment.