feat(neuron-ui): refine transaction list and address list

1. set desc column responsive 2. update the ellipsis in address field
nervosnetwork · Sep 11, 2019 · e78dd9f · e78dd9f
1 parent a21bc7e
commit e78dd9f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -70,8 +70,22 @@ const Addresses = ({
         className: 'monospacedFont',
         minWidth: 100,
         maxWidth: 500,
-        onRender: (item?: State.Address) => {
+        onRender: (item?: State.Address, _index?: number, column?: IColumn) => {
           if (item) {
+            if (column && (column.calculatedWidth || 0) < 400) {
+              return (
+                <div
+                  title={item.address}
+                  style={{
+                    overflow: 'hidden',
+                    display: 'flex',
+                  }}
+                >
+                  <span className="text-overflow">{item.address.slice(0, -6)}</span>
+                  <span>{item.address.slice(-6)}</span>
+                </div>
+              )
+            }
             return (
               <span className="text-overflow" title={item.address}>
                 {item.address}
@@ -86,7 +100,6 @@ const Addresses = ({
         key: 'description',
         fieldName: 'description',
         minWidth: 100,
-        maxWidth: 300,
         onRender: (item?: State.Address) => {
           const isSelected = item && localDescription.key === item.address
           return item ? (

diff --git a/packages/neuron-ui/src/components/TransactionList/index.tsx b/packages/neuron-ui/src/components/TransactionList/index.tsx
@@ -172,7 +172,6 @@ const TransactionList = ({
           key: 'description',
           fieldName: 'description',
           minWidth: 100,
-          maxWidth: 100,
           onRender: (item?: FormatTransaction) => {
             const isSelected = item && localDescription.key === item.hash
             return item ? (