fix: add rtl utilities and use them

src/common/components/skeleton/skeleton.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import { default as RLSkeleton, SkeletonProps as RLSkeletonProps } from 'react-loading-skeleton';
 import { useTheme } from '@map-colonies/react-core';
 import CONFIG from '../../../common/config';
+import { getTextDirection } from '../../i18n/helpers';
 
 import 'react-loading-skeleton/dist/skeleton.css';
 
-const direction = CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE' ? 'rtl' : 'ltr';
+const direction = getTextDirection(CONFIG.I18N.DEFAULT_LANGUAGE);
 
 interface SkeletonProps extends RLSkeletonProps {}
 

src/common/components/tree/tree.tsx

@@ -5,6 +5,7 @@ import SortableTree, {
   ReactSortableTreeProps,
   TreeItem as RSTTreeItem,
 } from 'react-sortable-tree';
+import { getTextDirection } from '../../i18n/helpers';
 import CONFIG from '../../config';
 import { TreeThemes } from './themes/themes';
 import FileExplorerTheme from './renderers';
@@ -14,7 +15,7 @@ export interface TreeItem extends RSTTreeItem {}
 export const TreeComponent: React.FC<ReactSortableTreeProps> = (props) => {
   const theme = useTheme();
   const treeTheme = TreeThemes.getTheme(theme) as CSSProperties;
-  const rowDirection = CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE' ? 'rtl' : 'ltr';
+  const rowDirection = getTextDirection(CONFIG.I18N.DEFAULT_LANGUAGE);
 
   return (
     <div

src/common/i18n/helpers.ts

@@ -0,0 +1,8 @@
+export const isRtl = (locale: string) => {
+  return locale.toLowerCase() === 'he';
+};
+
+export const getTextDirection = (locale: string) => {
+  const isRtlVal = isRtl(locale);
+  return isRtlVal ? 'rtl' : 'ltr';
+};

src/discrete-layer/components/job-manager/grids/job-manager-grid.common.tsx

@@ -1,6 +1,7 @@
 import { ColDef, ColGroupDef, GetRowIdParams } from 'ag-grid-community';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { isRtl } from '../../../../common/i18n/helpers';
 import CONFIG from '../../../../common/config';
 import {
   GridApi,
@@ -343,7 +344,7 @@ const JobManagerGrid: React.FC<ICommonJobManagerGridProps> = (props) => {
   };
 
   const baseGridOption: GridComponentOptions = {
-    enableRtl: CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE',
+    enableRtl: isRtl(CONFIG.I18N.DEFAULT_LANGUAGE),
     enableFilterHandlers: true,
     suppressRowTransform: true,
     pagination: pagination,

src/discrete-layer/components/layer-details/field-value-presentors/autocomplete.value-presentor.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import { Box, Autocomplete } from '@map-colonies/react-components';
 import { TextField } from '@map-colonies/react-core';
 import { Mode } from '../../../../common/models/mode.enum';
+import { getTextDirection } from '../../../../common/i18n/helpers';
 import CONFIG from '../../../../common/config';
 import TooltippedValue from '../../../../common/components/form/tooltipped.value';
 import { RecordType, useQuery } from '../../../models';
@@ -32,7 +33,7 @@ export const AutocompleteValuePresentorComponent: React.FC<AutocompleteValuePres
     );
     const [autocompleteValues, setAutocompleteValues] = useState<string[]>([]);
 
-    const direction = CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE' ? 'rtl' : 'ltr';
+    const direction = getTextDirection(CONFIG.I18N.DEFAULT_LANGUAGE);
     const required = {
       required: fieldInfo.isRequired === true ? true : false,
     };

src/discrete-layer/components/layer-details/field-value-presentors/form.input.text.field.tsx

@@ -9,6 +9,7 @@ import CONFIG from '../../../../common/config';
 import { convertExponentialToDecimal } from '../../../../common/helpers/number';
 import useDebounceField from '../../../../common/hooks/debounce-field.hook';
 import { Mode } from '../../../../common/models/mode.enum';
+import { isRtl } from '../../../../common/i18n/helpers';
 import {
   UpdateRulesModelType,
   ValidationConfigModelType,
@@ -89,8 +90,7 @@ export const FormInputTextFieldComponent: React.FC<FormInputTextFieldProps> = ({
     // @ts-ignore
     if (min && max) {
       validationProps = { min, max, step: precisionAllowed };
-      placeholder =
-        CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE' ? `${max} - ${min}` : `${min} - ${max}`;
+      placeholder = isRtl(CONFIG.I18N.DEFAULT_LANGUAGE) ? `${max} - ${min}` : `${min} - ${max}`;
     }
     return (
       <>

src/discrete-layer/components/layers-results/layers-results.tsx

@@ -4,6 +4,7 @@ import { ColDef, RowDataUpdatedEvent, ValueGetterParams } from 'ag-grid-communit
 import { observer } from 'mobx-react-lite';
 import { isEmpty } from 'lodash';
 import { Box } from '@map-colonies/react-components';
+import { isRtl } from '../../../common/i18n/helpers';
 import {
   GridComponent,
   GridComponentOptions,
@@ -266,7 +267,7 @@ export const LayersResults: React.FC<LayersResultsProps> = observer((props) => {
   ];
 
   const gridOptions: GridComponentOptions = {
-    enableRtl: CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE',
+    enableRtl: isRtl(CONFIG.I18N.DEFAULT_LANGUAGE),
     pagination: PAGINATION,
     paginationPageSize: PAGE_SIZE,
     paginationPageSizeSelector: false, //[PAGE_SIZE, 20, 50, 100],

src/discrete-layer/components/map-container/contextMenus/context-menu.tsx

@@ -13,6 +13,7 @@ import { Box, IContextMenuData } from '@map-colonies/react-components';
 import CONFIG from '../../../../common/config';
 import './context-menu.css';
 import { useIntl } from 'react-intl';
+import { getTextDirection } from '../../../../common/i18n/helpers';
 import {
   ActionSpreadPreference,
   SeparatorPosition,
@@ -60,7 +61,7 @@ export const ContextMenu: React.FC<PropsWithChildren<IMapContextMenuData>> = ({
   const intl = useIntl();
   const imageryContextMenuRef = useRef(null);
   const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
-  const direction = CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE' ? 'rtl' : 'ltr';
+  const direction = getTextDirection(CONFIG.I18N.DEFAULT_LANGUAGE);
 
   const { show, hideAll } = useContextMenu({
     id: contextMenuId,

src/discrete-layer/components/map-container/geojson-map-features/geojson-feature-with-infobox.component.tsx

@@ -13,6 +13,7 @@ import {
   CesiumVerticalOrigin,
 } from '@map-colonies/react-components';
 import { Typography, useTheme } from '@map-colonies/react-core';
+import { getTextDirection } from '../../../../common/i18n/helpers';
 import { useForceEntitySelection } from '../../../../common/hooks/useForceEntitySelection.hook';
 import { IPosition, useHeightFromTerrain } from '../../../../common/hooks/useHeightFromTerrain';
 import useStaticHTML from '../../../../common/hooks/useStaticHtml';
@@ -153,7 +154,7 @@ export const GeojsonFeatureWithInfoBox: React.FC<GeojsonFeatureWithInfoBoxProps>
                 color: (theme.custom as unknown as Record<string, string>).GC_WARNING_HIGH,
                 textAlign: 'center',
               }}
-              dir={intl.locale === 'he' ? 'rtl' : 'ltr'}
+              dir={getTextDirection(intl.locale)}
             >
               {intl.formatMessage({ id: 'polygonParts-info.part-to-large.message' })}
             </Typography>
@@ -176,7 +177,7 @@ export const GeojsonFeatureWithInfoBox: React.FC<GeojsonFeatureWithInfoBoxProps>
           <Typography
             tag="h3"
             style={{ color: theme.textPrimaryOnDark }}
-            dir={intl.locale === 'he' ? 'rtl' : 'ltr'}
+            dir={getTextDirection(intl.locale)}
           >
             {noInfoMessage}
           </Typography>

src/discrete-layer/components/map-container/layers-footprints.tsx

@@ -18,6 +18,7 @@ import {
   CesiumConstantPositionProperty,
   CesiumConstantProperty,
 } from '@map-colonies/react-components';
+import { isRtl } from '../../../common/i18n/helpers';
 import CONFIG from '../../../common/config';
 import { usePrevious } from '../../../common/hooks/previous.hook';
 import { useStore } from '../../models/RootStore';
@@ -49,7 +50,7 @@ function upperRight(points: CesiumCartesian3[]): CesiumCartesian3 {
 
 function getLabelPosition(points: CesiumCartesian3[]): CesiumConstantPositionProperty {
   //**********  https://sandcastle.cesium.com/index.html?src=GeoJSON%20and%20TopoJSON.html
-  const center = CONFIG.I18N.DEFAULT_LANGUAGE == 'he' ? upperRight(points) : upperLeft(points);
+  const center = isRtl(CONFIG.I18N.DEFAULT_LANGUAGE) ? upperRight(points) : upperLeft(points);
   // **** Get center of "polygon" points ****
   // const center = CesiumBoundingSphere.fromPoints(points).center;
   // CesiumEllipsoid.WGS84.scaleToGeodeticSurface(center, center);

src/discrete-layer/views/components/tabs-views-switcher.component.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useIntl } from 'react-intl';
 import { Box } from '@map-colonies/react-components';
 import { IconButton, Tooltip, useTheme } from '@map-colonies/react-core';
+import { isRtl } from '../../../common/i18n/helpers';
 import { useStore } from '../../models/RootStore';
 import { TabViews } from '../tab-views';
 
@@ -44,7 +45,7 @@ export const TabViewsSwitcher: React.FC<TabViewsSwitcherComponentProps> = observ
       {
         idx: TabViews.EXPORT_LAYER,
         title: 'tab-views.export-layer',
-        iconClassName: intl.locale === 'en' ? 'mc-icon-Export' : 'mc-icon-Export-Left',
+        iconClassName: isRtl(intl.locale) ? 'mc-icon-Export-Left' : 'mc-icon-Export',
         dependentValue: store.exportStore.layerToExport,
       },
     ],

src/discrete-layer/views/discrete-layer-view.tsx

@@ -35,6 +35,7 @@ import {
 } from '@map-colonies/react-components';
 import { GeocoderOptions } from '@map-colonies/react-components/dist/cesium-map/geocoder/geocoder-panel';
 import { IMapLegend } from '@map-colonies/react-components/dist/cesium-map/legend';
+import { getTextDirection, isRtl } from '../../common/i18n/helpers';
 import { AutoDirectionBox } from '../../common/components/auto-direction-box/auto-direction-box.component';
 // import { BrowserCompatibilityChecker } from '../../common/components/browser-compatibility-checker/browser-compatibility-checker';
 import GPUInsufficiencyDetector from '../../common/components/gpu-insufficiency-detector/gpu-insufficiency-detector';
@@ -286,7 +287,7 @@ const DiscreteLayerView: React.FC = observer(() => {
   /* eslint-disable */
   const mapSettingsLocale = useMemo(
     () => ({
-      DIRECTION: intl.locale === 'he' ? 'rtl' : 'ltr',
+      DIRECTION: getTextDirection(intl.locale),
       METERS_UNIT: intl.formatMessage({ id: 'map.scale.units.meters' }),
       KILOMETERS_UNIT: intl.formatMessage({ id: 'map.scale.units.kilometers' }),
       ZOOM_LABEL: intl.formatMessage({ id: 'map.zoom.label' }),
@@ -649,7 +650,7 @@ const DiscreteLayerView: React.FC = observer(() => {
     {
       idx: TabViews.EXPORT_LAYER,
       title: 'tab-views.export-layer',
-      iconClassName: intl.locale === 'en' ? 'mc-icon-Export' : 'mc-icon-Export-Left',
+      iconClassName: isRtl(intl.locale) ? 'mc-icon-Export-Left' : 'mc-icon-Export',
     },
   ];
 
@@ -691,9 +692,9 @@ const DiscreteLayerView: React.FC = observer(() => {
   const isAdminUser = store.userStore.user?.role === UserRole.ADMIN;
 
   const PanelExpanderButton: React.FC = () => {
-    const isRtl = intl.locale === 'he';
-    const iconClassExpand = isRtl ? 'mc-icon-Arrows-Left' : 'mc-icon-Arrows-Right';
-    const iconClassCollapse = isRtl ? 'mc-icon-Arrows-Right' : 'mc-icon-Arrows-Left';
+    const isRtlVal = isRtl(intl.locale);
+    const iconClassExpand = isRtlVal ? 'mc-icon-Arrows-Left' : 'mc-icon-Arrows-Right';
+    const iconClassCollapse = isRtlVal ? 'mc-icon-Arrows-Right' : 'mc-icon-Arrows-Left';
     const className = `${tabsPanelExpanded ? iconClassCollapse : iconClassExpand}`;
 
     return (

src/index.tsx

@@ -8,6 +8,7 @@ import {
   rootStore,
 } from './discrete-layer/models/RootStore';
 import { SearchResponse } from './discrete-layer/models/discreteLayersStore';
+import { isRtl } from './common/i18n/helpers';
 import CONFIG from './common/config';
 import { syncHttpClientGql } from './syncHttpClientGql';
 
@@ -41,7 +42,7 @@ const store = rootStore.create(
 
   document.documentElement.lang = lang;
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (lang === 'he') {
+  if (isRtl(lang)) {
     document.body.dir = 'rtl';
   }
 })();