feat(BS|PL): sticky columns in RTL mode.

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),
+    () => dynamicColumns(direction, table.columns, table.rows),
-    [table],
+    [direction, table],
   );
 };

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) => {
+export const dynamicColumns = (direction, columns, data) => {
-  return R.map(dynamicColumnMapper(data), columns);
+  return R.map(dynamicColumnMapper(direction, data), columns);
 };

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) => {
 });
 
 /**
- *
+ * Retrieves the dynamic columns of profit/loss sheet.
- * @param {*} columns
- * @param {*} data
- * @returns
  */
-export const dynamicColumns = (columns, data) => {
+export const dynamicColumns = (direction, columns, data) => {
-  return R.map(dynamicColumnMapper(data), columns);
+  return R.map(dynamicColumnMapper(direction, data), columns);
 };

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 || []),
+    () => dynamicColumns(direction, table.columns, table.rows),
-    [table],
+    [direction, table],
   );
 };