feat(neuron-ui): update history list to make it more compact

Author: Keith-CY

packages/neuron-ui/src/components/CustomRows/GroupHeader.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Stack, Text, getTheme } from 'office-ui-fabric-react'
+
+const {
+  palette: { neutralLighterAlt, neutralSecondary, neutralLighter },
+} = getTheme()
+
+const GroupHeader = ({ group }: any) => {
+  const { name } = group
+  return (
+    <Stack
+      tokens={{ padding: 15 }}
+      styles={{
+        root: {
+          background: neutralLighterAlt,
+          borderTop: `1px solid ${neutralSecondary}`,
+          borderBottom: `1px solid ${neutralLighter}`,
+          padding: `15px 12px 5px`,
+          minWidth: '100%!important',
+        },
+      }}
+    >
+      <Text variant="medium">{name}</Text>
+    </Stack>
+  )
+}
+export default GroupHeader

packages/neuron-ui/src/components/CustomRows/HistoryRow.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { DetailsRow, IDetailsRowProps } from 'office-ui-fabric-react'
+
+const HistoryRow = (props?: IDetailsRowProps) => {
+  return props ? (
+    <DetailsRow
+      {...props}
+      styles={{
+        root: {
+          animationDuration: '0!important',
+          minWidth: '100%!important',
+        },
+        cell: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      }}
+    />
+  ) : null
+}
+
+export default HistoryRow

packages/neuron-ui/src/components/TransactionList/index.tsx

@@ -1,17 +1,19 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Stack,
-  Text,
   ShimmeredDetailsList,
   TextField,
   IconButton,
   IColumn,
   IGroup,
   CheckboxVisibility,
+  CollapseAllVisibility,
   getTheme,
 } from 'office-ui-fabric-react'
 
+import GroupHeader from 'components/CustomRows/GroupHeader'
+import HistoryRow from 'components/CustomRows/HistoryRow'
+
 import { StateDispatch } from 'states/stateProvider/reducer'
 import { contextMenu, showTransactionDetails } from 'services/remote'
 
@@ -22,7 +24,6 @@ import {
   uniformTimeFormatter,
   localNumberFormatter,
 } from 'utils/formatters'
-import { onRenderRow } from 'utils/fabricUIRender'
 import { CONFIRMATION_THRESHOLD } from 'utils/const'
 
 const theme = getTheme()
@@ -32,24 +33,6 @@ interface FormatTransaction extends State.Transaction {
   date: string
 }
 
-const onRenderHeader = ({ group }: any) => {
-  const { name } = group
-  return (
-    <Stack
-      tokens={{ padding: 15 }}
-      styles={{
-        root: {
-          background: theme.palette.neutralLighterAlt,
-          borderTop: `1px solid ${theme.palette.neutralSecondary}`,
-          borderBottom: `1px solid ${theme.palette.neutralLighter}`,
-        },
-      }}
-    >
-      <Text variant="large">{name}</Text>
-    </Stack>
-  )
-}
-
 const TransactionList = ({
   isLoading = false,
   items = [],
@@ -185,6 +168,10 @@ const TransactionList = ({
                   borderless
                   readOnly={!isSelected}
                   styles={{
+                    root: {
+                      flex: '1',
+                      paddingRight: '15px',
+                    },
                     fieldGroup: {
                       backgroundColor: isSelected ? '#fff' : 'transparent',
                       borderColor: 'transparent',
@@ -268,9 +255,10 @@ const TransactionList = ({
       enableShimmer={isLoading}
       columns={transactionColumns}
       items={txs}
-      groups={groups.filter(group => group.count !== 0)}
+      groups={groups}
       groupProps={{
-        onRenderHeader,
+        collapseAllVisibility: CollapseAllVisibility.hidden,
+        onRenderHeader: GroupHeader,
       }}
       checkboxVisibility={CheckboxVisibility.hidden}
       onItemInvoked={item => {
@@ -282,7 +270,7 @@ const TransactionList = ({
         }
       }}
       className="listWithDesc"
-      onRenderRow={onRenderRow}
+      onRenderRow={HistoryRow}
     />
   )
 }