fix: handle RTL alignment

Crissium · Oct 14, 2023 · e8dace8 · e8dace8
1 parent e14357d
commit e8dace8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/client/src/components/History.js b/client/src/components/History.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { API_PREFIX } from '../config';
-import { loadDataFromJsonResponse } from '../utils';
+import { loadDataFromJsonResponse, isRTL } from '../utils';
 
 export function History(props) {
 	const { showHeadingsAndButtons, history, setHistory, historySize, search } = props;
@@ -48,6 +48,7 @@ export function History(props) {
 				{history.map((item) => (
 					<li
 						className='clickable'
+						style={{direction: isRTL(item) ? 'rtl' : 'ltr'}}
 						key={item}
 						onClick={() => search(item)}
 					>

diff --git a/client/src/components/Input.js b/client/src/components/Input.js
@@ -20,6 +20,7 @@ export function Input(props) {
 				value={query}
 				autoFocus={true}
 				autoCapitalize='off'
+				dir='auto'
 				onFocus={handleMobileInputFocus}
 				onChange={handleQueryChange}
 				onKeyDown={handleEnterKeydown}
@@ -32,6 +33,7 @@ export function Input(props) {
 				placeholder='Search…'
 				value={query}
 				autoFocus={true}
+				dir='auto'
 				onChange={handleQueryChange}
 				onKeyDown={handleEnterKeydown}
 			/>

diff --git a/client/src/components/Suggestions.js b/client/src/components/Suggestions.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
+import { isRTL } from '../utils';
 
 export function Suggestions(props) {
 	const { suggestions, selectedSuggestionIndex, setSelectedSuggestionIndex, search } = props;
@@ -43,6 +44,7 @@ export function Suggestions(props) {
 					return (
 						<li
 							key={index}
+							style={{textAlign: isRTL(suggestion) ? 'right' : 'left'}}
 							onClick={() => search(suggestion)}
 							className={getSuggestionClassName(suggestion.length, index)}
 						>

diff --git a/client/src/utils.js b/client/src/utils.js
@@ -34,4 +34,14 @@ export function getSetFromLangString(lang) {
 		set.add(l);
 	}
 	return set;
+}
+
+export function isRTL(s) {
+	var ltrChars =
+		'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' +
+		'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF';
+	var rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
+	var rtlDirCheck = new RegExp('^[^' + ltrChars + ']*[' + rtlChars + ']');
+
+	return rtlDirCheck.test(s);
 }