diff --git a/src/common/components/skeleton/skeleton.tsx b/src/common/components/skeleton/skeleton.tsx index f79a8e8cf..cd4dcd13c 100644 --- a/src/common/components/skeleton/skeleton.tsx +++ b/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 {} diff --git a/src/common/components/tree/tree.tsx b/src/common/components/tree/tree.tsx index 86eb74514..1c2c90cd1 100644 --- a/src/common/components/tree/tree.tsx +++ b/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 = (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 (
{ + return locale.toLowerCase() === 'he'; +}; + +export const getTextDirection = (locale: string) => { + const isRtlVal = isRtl(locale); + return isRtlVal ? 'rtl' : 'ltr'; +}; diff --git a/src/discrete-layer/components/job-manager/grids/job-manager-grid.common.tsx b/src/discrete-layer/components/job-manager/grids/job-manager-grid.common.tsx index b8dc3a3e8..4996fb202 100644 --- a/src/discrete-layer/components/job-manager/grids/job-manager-grid.common.tsx +++ b/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 = (props) => { }; const baseGridOption: GridComponentOptions = { - enableRtl: CONFIG.I18N.DEFAULT_LANGUAGE.toUpperCase() === 'HE', + enableRtl: isRtl(CONFIG.I18N.DEFAULT_LANGUAGE), enableFilterHandlers: true, suppressRowTransform: true, pagination: pagination, diff --git a/src/discrete-layer/components/layer-details/field-value-presentors/autocomplete.value-presentor.tsx b/src/discrete-layer/components/layer-details/field-value-presentors/autocomplete.value-presentor.tsx index 45dc548d8..63ac0e83e 100644 --- a/src/discrete-layer/components/layer-details/field-value-presentors/autocomplete.value-presentor.tsx +++ b/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([]); - 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, }; diff --git a/src/discrete-layer/components/layer-details/field-value-presentors/form.input.text.field.tsx b/src/discrete-layer/components/layer-details/field-value-presentors/form.input.text.field.tsx index d66217fa0..2321a20a1 100644 --- a/src/discrete-layer/components/layer-details/field-value-presentors/form.input.text.field.tsx +++ b/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 = ({ // @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 ( <> diff --git a/src/discrete-layer/components/layers-results/layers-results.tsx b/src/discrete-layer/components/layers-results/layers-results.tsx index 847b7f668..0aa4841a6 100644 --- a/src/discrete-layer/components/layers-results/layers-results.tsx +++ b/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 = 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], diff --git a/src/discrete-layer/components/map-container/contextMenus/context-menu.tsx b/src/discrete-layer/components/map-container/contextMenus/context-menu.tsx index 47d9b9152..7db1ab48d 100644 --- a/src/discrete-layer/components/map-container/contextMenus/context-menu.tsx +++ b/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> = ({ 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, diff --git a/src/discrete-layer/components/map-container/geojson-map-features/geojson-feature-with-infobox.component.tsx b/src/discrete-layer/components/map-container/geojson-map-features/geojson-feature-with-infobox.component.tsx index f4cd96021..214ade502 100644 --- a/src/discrete-layer/components/map-container/geojson-map-features/geojson-feature-with-infobox.component.tsx +++ b/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 color: (theme.custom as unknown as Record).GC_WARNING_HIGH, textAlign: 'center', }} - dir={intl.locale === 'he' ? 'rtl' : 'ltr'} + dir={getTextDirection(intl.locale)} > {intl.formatMessage({ id: 'polygonParts-info.part-to-large.message' })} @@ -176,7 +177,7 @@ export const GeojsonFeatureWithInfoBox: React.FC {noInfoMessage} diff --git a/src/discrete-layer/components/map-container/layers-footprints.tsx b/src/discrete-layer/components/map-container/layers-footprints.tsx index b38bb5b9f..0e4855a51 100644 --- a/src/discrete-layer/components/map-container/layers-footprints.tsx +++ b/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); diff --git a/src/discrete-layer/views/components/tabs-views-switcher.component.tsx b/src/discrete-layer/views/components/tabs-views-switcher.component.tsx index 244395001..32f575f12 100644 --- a/src/discrete-layer/views/components/tabs-views-switcher.component.tsx +++ b/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 = 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, }, ], diff --git a/src/discrete-layer/views/discrete-layer-view.tsx b/src/discrete-layer/views/discrete-layer-view.tsx index f9f98d827..6665ad21f 100644 --- a/src/discrete-layer/views/discrete-layer-view.tsx +++ b/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 ( diff --git a/src/index.tsx b/src/index.tsx index 8931cfb33..ad88e7a37 100644 --- a/src/index.tsx +++ b/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'; } })();