feat(BalanceSheet|ProfitLoss): comparions feature.

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -1,109 +1,82 @@
-import React, { useMemo, useCallback } from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import React from 'react';
+import styled from 'styled-components';
 
+import { TableStyle } from 'common';
+import { FormattedMessage as T } from 'components';
+
+import { useProfitLossSheetColumns } from './hooks';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import { CellTextSpan } from 'components/Datatable/Cells';
 
-import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils';
 import { useProfitLossSheetContext } from './ProfitLossProvider';
 
 export default function ProfitLossSheetTable({
   // #ownProps
   companyName,
 }) {
-  
-
   // Profit/Loss sheet context.
   const {
-    profitLossSheet: { tableRows, query, columns },
-    isLoading
+    profitLossSheet: { table },
+    isLoading,
   } = useProfitLossSheetContext();
 
-  const tableColumns = useMemo(
-    () => [
-      {
-        Header: intl.get('account'),
-        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-        className: 'name',
-        textOverview: true,
-        width: 240,
-      },
-      ...(query.display_columns_type === 'total'
-        ? [
-            {
-              Header: intl.get('total'),
-              Cell: CellTextSpan,
-              accessor: 'total.formatted_amount',
-              className: 'total',
-              width: 140,
-            },
-          ]
-        : []),
-      ...(query.display_columns_type === 'date_periods'
-        ? columns.map((column, index) => ({
-            id: `date_period_${index}`,
-            Header: column,
-            Cell: CellTextSpan,
-            accessor: `total_periods[${index}].formatted_amount`,
-            width: getColumnWidth(
-              tableRows,
-              `total_periods.${index}.formatted_amount`,
-              { minWidth: 100 },
-            ),
-            className: 'total-period',
-          }))
-        : []),
-    ],
-    [
-      query.display_columns_type,
-      tableRows,
-      columns,
-    ],
-  );
+  // Retrieves the profit/loss table columns.
+  const tableColumns = useProfitLossSheetColumns();
 
   // Retrieve default expanded rows of balance sheet.
-  const expandedRows = useMemo(
-    () => defaultExpanderReducer(tableRows, 3),
-    [tableRows],
+  const expandedRows = React.useMemo(
+    () => defaultExpanderReducer(table?.rows || [], 3),
+    [table],
   );
 
-  // Retrieve conditional datatable row classnames.
-  const rowClassNames = useCallback((row) => {
-    const { original } = row;
-    const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
-
-    return {
-      ...rowTypes.reduce((acc, rowType) => {
-        acc[`row_type--${rowType}`] = rowType;
-        return acc;
-      }, {}),
-    };
-  }, []);
-
   return (
     <FinancialSheet
       companyName={companyName}
       sheetType={<T id={'profit_loss_sheet'} />}
-      fromDate={query.from_date}
-      toDate={query.to_date}
+      // fromDate={query.from_date}
+      // toDate={query.to_date}
       name="profit-loss-sheet"
       loading={isLoading}
-      basis={query.basis}
+      // basis={query.basis}
     >
-      <DataTable
-        className="bigcapital-datatable--financial-report"
+      <ProfitLossDataTable
         columns={tableColumns}
-        data={tableRows}
+        data={table.rows}
         noInitialFetch={true}
         expanded={expandedRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         expandable={true}
         expandToggleColumn={1}
-        
         sticky={true}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const ProfitLossDataTable = styled(DataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
+      }
+      &.is-expanded {
+        .td:not(.name) .cell-inner {
+          opacity: 0;
+        }
+      }
+      &.row_type--TOTAL {
+        .td {
+          font-weight: 500;
+          border-top: 1px solid #bbb;
+        }
+      }
+      &:last-of-type .td{
+        border-bottom: 1px solid #bbb;
+      }
+    }
+  }
+`;