refactor(GeneralLedger)

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-
-import { defaultExpanderReducer } from 'utils';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+
+import { FinancialSheet, DataTable } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
 
@@ -27,11 +27,10 @@ export default function GeneralLedgerTable({ companyName }) {
   const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
-    tableRows,
-  ]);
-
-  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 1),
+    [tableRows],
+  );
 
   return (
     <FinancialSheet
@@ -42,11 +41,13 @@ export default function GeneralLedgerTable({ companyName }) {
       loading={isLoading}
       fullWidth={true}
     >
-      <DataTable
-        noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
+      <GeneralLedgerDataTable
+        noResults={intl.get(
+          'this_report_does_not_contain_any_data_between_date_period',
+        )}
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={30}
@@ -55,14 +56,64 @@ export default function GeneralLedgerTable({ companyName }) {
         expandToggleColumn={1}
         sticky={true}
         TableRowsRenderer={TableVirtualizedListRows}
-
         // #TableVirtualizedListRows props.
         vListrowHeight={28}
         vListOverscanRowCount={0}
         TableCellRenderer={TableFastCell}
-
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const GeneralLedgerDataTable = styled(DataTable)`
+  .tbody {
+    .tr .td {
+      padding-top: 0.2rem;
+      padding-bottom: 0.2rem;
+    }
+    .tr.is-expanded {
+      .td:not(.date) .cell-inner {
+        opacity: 0;
+      }
+    }
+
+    .tr:not(.no-results) .td {
+      border-left: 1px solid #ececec;
+    }
+    .tr:last-child .td {
+      border-bottom: 1px solid #ececec;
+    }
+
+    .tr.row_type {
+      &--ACCOUNT_ROW {
+        .td {
+          &.date {
+            font-weight: 500;
+          }
+
+          &.name {
+            border-left-color: transparent;
+          }
+        }
+
+        &:not(:first-child).is-expanded .td {
+          border-top: 1px solid #ddd;
+        }
+      }
+
+      &--OPENING_BALANCE,
+      &--CLOSING_BALANCE {
+        .amount {
+          font-weight: 500;
+        }
+      }
+
+      &--CLOSING_BALANCE {
+        .name {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+`;