From cb3153d73ddb0ab88f6dbd9c0a07a4d72af1faec Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Mon, 5 Aug 2019 15:19:14 +0800
Subject: [PATCH] feat(neuron-ui): disable fadein animation on details list

---
 .../src/components/Addresses/index.tsx        |  2 ++
 .../src/components/Overview/index.tsx         |  7 ++++++-
 .../src/components/TransactionList/index.tsx  |  2 ++
 .../neuron-ui/src/utils/fabricUIRender.tsx    | 19 +++++++++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/neuron-ui/src/utils/fabricUIRender.tsx

diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
index 2d3ba58714..9789be7942 100644
--- a/packages/neuron-ui/src/components/Addresses/index.tsx
+++ b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -17,6 +17,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
+import { onRenderRow } from 'utils/fabricUIRender'
 
 const Addresses = ({
   app: {
@@ -180,6 +181,7 @@ const Addresses = ({
         contextMenu({ type: 'addressList', id: item.identifier })
       }}
       className="listWithDesc"
+      onRenderRow={onRenderRow}
     />
   )
 }
diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
index f5aa88ed5d..7ac7af6500 100644
--- a/packages/neuron-ui/src/components/Overview/index.tsx
+++ b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -103,9 +103,14 @@ const Overview = ({
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {
     if (props) {
-      const customStyles: Partial<IDetailsRowStyles> = {}
+      const customStyles: Partial<IDetailsRowStyles> = {
+        root: {
+          animationDuration: '0!important',
+        },
+      }
       if (props.item.status === 'failed') {
         customStyles.root = {
+          animationDuration: '0!important',
           color: 'red',
         }
       }
diff --git a/packages/neuron-ui/src/components/TransactionList/index.tsx b/packages/neuron-ui/src/components/TransactionList/index.tsx
index 12cf93e6a6..ddb308cb7b 100644
--- a/packages/neuron-ui/src/components/TransactionList/index.tsx
+++ b/packages/neuron-ui/src/components/TransactionList/index.tsx
@@ -17,6 +17,7 @@ import { contextMenu, showTransactionDetails } from 'services/remote'
 
 import { useLocalDescription } from 'utils/hooks'
 import { shannonToCKBFormatter, uniformTimeFormatter as timeFormatter, uniformTimeFormatter } from 'utils/formatters'
+import { onRenderRow } from 'utils/fabricUIRender'
 
 const theme = getTheme()
 
@@ -212,6 +213,7 @@ const TransactionList = ({
         }
       }}
       className="listWithDesc"
+      onRenderRow={onRenderRow}
     />
   )
 }
diff --git a/packages/neuron-ui/src/utils/fabricUIRender.tsx b/packages/neuron-ui/src/utils/fabricUIRender.tsx
new file mode 100644
index 0000000000..171ebca419
--- /dev/null
+++ b/packages/neuron-ui/src/utils/fabricUIRender.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { DetailsRow, IDetailsRowProps } from 'office-ui-fabric-react'
+
+export const onRenderRow = (rowProps?: IDetailsRowProps) => {
+  return rowProps ? (
+    <DetailsRow
+      {...rowProps}
+      styles={{
+        root: {
+          animationDuration: '0!important',
+        },
+      }}
+    />
+  ) : null
+}
+
+export default {
+  onRenderRow,
+}