diff --git a/src/containers/FinancialStatements/BalanceSheet/components.js b/src/containers/FinancialStatements/BalanceSheet/components.js index cf135ae5d..8c86f1c88 100644 --- a/src/containers/FinancialStatements/BalanceSheet/components.js +++ b/src/containers/FinancialStatements/BalanceSheet/components.js @@ -1,6 +1,7 @@ import React from 'react'; import { Button } from '@blueprintjs/core'; +import { useAppIntlContext } from 'components/AppIntlProvider'; import { FormattedMessage as T, Icon, If } from 'components'; import { useBalanceSheetContext } from './BalanceSheetProvider'; @@ -58,8 +59,10 @@ export const useBalanceSheetColumns = () => { balanceSheet: { table }, } = useBalanceSheetContext(); + const { direction } = useAppIntlContext() + return React.useMemo( - () => dynamicColumns(table.columns, table.rows), - [table], + () => dynamicColumns(direction, table.columns, table.rows), + [direction, table], ); }; diff --git a/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.js b/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.js index 119fec54c..ff0134d32 100644 --- a/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.js +++ b/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.js @@ -16,11 +16,10 @@ const getReportColWidth = (data, accessor, headerText) => { ); }; - /** * Account name column mapper. */ -const accountNameMapper = R.curry((data, column) => { +const accountNameMapper = R.curry((direction, data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); const width = getReportColWidth(data, accessor, column.label); @@ -31,7 +30,7 @@ const accountNameMapper = R.curry((data, column) => { className: column.key, textOverview: true, width: Math.max(width, 300), - sticky: Align.Left, + sticky: direction === 'rtl' ? Align.Right : Align.Left, }; }); @@ -313,9 +312,9 @@ const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0; /** * Dynamic column mapper. */ -const dynamicColumnMapper = R.curry((data, column) => { +const dynamicColumnMapper = R.curry((direction, data, column) => { const indexTotalMapper = totalMapper(data); - const indexAccountNameMapper = accountNameMapper(data); + const indexAccountNameMapper = accountNameMapper(direction, data); const indexDatePeriodMapper = dateRangeMapper(data); return R.compose( @@ -328,6 +327,6 @@ const dynamicColumnMapper = R.curry((data, column) => { /** * Cash flow dynamic columns. */ -export const dynamicColumns = (columns, data) => { - return R.map(dynamicColumnMapper(data), columns); +export const dynamicColumns = (direction, columns, data) => { + return R.map(dynamicColumnMapper(direction, data), columns); }; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.js b/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.js index 337b1ba00..7daa3bbb4 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.js @@ -295,7 +295,7 @@ const totalColumnCompose = R.curry((data, column) => { /** * Account name column mapper. */ -const accountNameColumn = R.curry((data, column) => { +const accountNameColumn = R.curry((direction, data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); const width = getReportColWidth(data, accessor, column.label); @@ -306,7 +306,7 @@ const accountNameColumn = R.curry((data, column) => { className: column.key, textOverview: true, width: Math.max(width, 300), - sticky: Align.Left, + sticky: direction === 'rtl' ? Align.Right : Align.Left, }; }); @@ -360,9 +360,9 @@ const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0; * @param {} data * @param {} column */ -const dynamicColumnMapper = R.curry((data, column) => { +const dynamicColumnMapper = R.curry((direction, data, column) => { const indexTotalColumn = totalColumnCompose(data); - const indexAccountNameColumn = accountNameColumn(data); + const indexAccountNameColumn = accountNameColumn(direction, data); const indexDatePeriodMapper = dateRangeColumn(data); return R.compose( @@ -373,11 +373,8 @@ const dynamicColumnMapper = R.curry((data, column) => { }); /** - * - * @param {*} columns - * @param {*} data - * @returns + * Retrieves the dynamic columns of profit/loss sheet. */ -export const dynamicColumns = (columns, data) => { - return R.map(dynamicColumnMapper(data), columns); +export const dynamicColumns = (direction, columns, data) => { + return R.map(dynamicColumnMapper(direction, data), columns); }; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/hooks.js b/src/containers/FinancialStatements/ProfitLossSheet/hooks.js index aab7adb02..8ca8ea7d2 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/hooks.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/hooks.js @@ -1,19 +1,23 @@ import React from 'react'; import { dynamicColumns } from './dynamicColumns'; + import { useProfitLossSheetContext } from './ProfitLossProvider'; +import { useAppIntlContext } from '../../../components/AppIntlProvider'; /** * Retrieves the profit/loss table columns. - * @returns + * @returns */ export const useProfitLossSheetColumns = () => { const { profitLossSheet: { table }, } = useProfitLossSheetContext(); + const { direction } = useAppIntlContext(); + return React.useMemo( - () => dynamicColumns(table.columns || [], table.rows || []), - [table], + () => dynamicColumns(direction, table.columns, table.rows), + [direction, table], ); };