From 7be11cd9734ccd03065603d2909046e9c9640104 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 27 Jun 2023 11:06:39 +1000
Subject: [PATCH] feat: moved html direction logic into i18n util

updated Flex component with RTL support, create getWritingDirection selector
---
 ts/components/basic/Flex.tsx |  4 ++++
 ts/components/menu/Menu.tsx  |  8 +-------
 ts/state/selectors/user.ts   |  6 ++----
 ts/util/i18n.ts              | 14 ++++++++++++++
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ts/components/basic/Flex.tsx b/ts/components/basic/Flex.tsx
index 11b7db2c3..b1c0ed51e 100644
--- a/ts/components/basic/Flex.tsx
+++ b/ts/components/basic/Flex.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { HTMLDirection } from '../../util/i18n';
 
 export interface FlexProps {
   children?: any;
@@ -36,6 +37,8 @@ export interface FlexProps {
   maxWidth?: string;
   minWidth?: string;
   maxHeight?: string;
+  /****** RTL support ********/
+  dir?: HTMLDirection;
 }
 
 export const Flex = styled.div<FlexProps>`
@@ -53,4 +56,5 @@ export const Flex = styled.div<FlexProps>`
   height: ${props => props.height || 'auto'};
   max-width: ${props => props.maxWidth || 'none'};
   min-width: ${props => props.minWidth || 'none'};
+  dir: ${props => props.dir || undefined};
 `;
diff --git a/ts/components/menu/Menu.tsx b/ts/components/menu/Menu.tsx
index d1010df93..605e1c374 100644
--- a/ts/components/menu/Menu.tsx
+++ b/ts/components/menu/Menu.tsx
@@ -373,12 +373,6 @@ export const MarkAllReadMenuItem = (): JSX.Element | null => {
   }
 };
 
-export function isRtlBody(): boolean {
-  const body = document.getElementsByTagName('body').item(0);
-
-  return body?.classList.contains('rtl') || false;
-}
-
 export const BlockMenuItem = (): JSX.Element | null => {
   const convoId = useConvoIdFromContext();
   const isMe = useIsMe(convoId);
@@ -577,7 +571,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => {
     return null;
   }
 
-  // const isRtlMode = isRtlBody();'
+  // const isRtlMode = isRtlBody();
 
   // exclude mentions_only settings for private chats as this does not make much sense
   const notificationForConvoOptions = ConversationNotificationSetting.filter(n =>
diff --git a/ts/state/selectors/user.ts b/ts/state/selectors/user.ts
index 400144cbc..91acbacfd 100644
--- a/ts/state/selectors/user.ts
+++ b/ts/state/selectors/user.ts
@@ -4,7 +4,7 @@ import { LocalizerType } from '../../types/Util';
 
 import { StateType } from '../reducer';
 import { UserStateType } from '../ducks/user';
-import { isRtlBody } from '../../components/menu/Menu';
+import { HTMLDirection, getHTMLDirection } from '../../util/i18n';
 
 export const getUser = (state: StateType): UserStateType => state.user;
 
@@ -15,6 +15,4 @@ export const getOurNumber = createSelector(
 
 export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);
 
-export const getWritingDirection = createSelector(getUser, (): string =>
-  isRtlBody() ? 'rtl' : 'ltr'
-);
+export const getWritingDirection = createSelector(getUser, (): HTMLDirection => getHTMLDirection());
diff --git a/ts/util/i18n.ts b/ts/util/i18n.ts
index 90ccf33f2..1ad307250 100644
--- a/ts/util/i18n.ts
+++ b/ts/util/i18n.ts
@@ -63,3 +63,17 @@ export const loadEmojiPanelI18n = async () => {
     }
   }
 };
+
+// RTL Support
+
+export type HTMLDirection = 'ltr' | 'rtl';
+
+export function isRtlBody(): boolean {
+  const body = document.getElementsByTagName('body').item(0);
+
+  return body?.classList.contains('rtl') || false;
+}
+
+export function getHTMLDirection(): HTMLDirection {
+  return isRtlBody() ? 'rtl' : 'ltr';
+}