feat: add an edit button by the side of description

Keith-CY · Keith-CY · commit 031fed021d1d · 2019-09-03T11:24:51.000+08:00
diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -6,7 +6,7 @@ import {
   TextField,
   IColumn,
   CheckboxVisibility,
-  ITextFieldStyleProps,
+  IconButton,
   getTheme,
 } from 'office-ui-fabric-react'
 
@@ -39,7 +39,7 @@ const Addresses = ({
     onDescriptionPress,
     onDescriptionFieldBlur,
     onDescriptionChange,
-    onDescriptionFocus,
+    onDescriptionSelected,
   } = useLocalDescription('address', walletID, dispatch)
 
   const theme = getTheme()
@@ -88,31 +88,40 @@ const Addresses = ({
         minWidth: 100,
         maxWidth: 300,
         onRender: (item?: State.Address) => {
+          const isSelected = item && localDescription.key === item.address
           return item ? (
-            <TextField
-              borderless
-              title={item.description}
-              value={localDescription.key === item.address ? localDescription.description : item.description || ''}
-              onBlur={onDescriptionFieldBlur(item.address, item.description)}
-              onFocus={onDescriptionFocus}
-              onKeyPress={onDescriptionPress(item.address, item.description)}
-              onChange={onDescriptionChange(item.address)}
-              disabled={localDescription.key === item.address && isUpdatingDescription}
-              iconProps={{
-                iconName: localDescription.key === item.address && isUpdatingDescription ? 'Updating' : '',
-              }}
-              styles={(props: ITextFieldStyleProps) => {
-                return {
+            <>
+              <TextField
+                borderless
+                title={item.description}
+                value={isSelected ? localDescription.description : item.description || ''}
+                onBlur={isSelected ? onDescriptionFieldBlur(item.address, item.description) : undefined}
+                onKeyPress={isSelected ? onDescriptionPress(item.address, item.description) : undefined}
+                onChange={isSelected ? onDescriptionChange(item.address) : undefined}
+                disabled={isSelected && isUpdatingDescription}
+                iconProps={{
+                  iconName: isSelected && isUpdatingDescription ? 'Updating' : '',
+                }}
+                readOnly={!isSelected}
+                styles={{
                   root: {
                     flex: 1,
                   },
                   fieldGroup: {
-                    borderColor: props.focused ? semanticColors.inputBorder : 'transparent',
-                    border: '1px solid',
+                    backgroundColor: isSelected ? '#fff' : 'transparent',
+                    borderColor: 'transparent',
+                    border: isSelected ? '1px solid' : 'none',
                   },
-                }
-              }}
-            />
+                }}
+              />
+              {isSelected ? null : (
+                <IconButton
+                  iconProps={{ iconName: 'Edit' }}
+                  className="editButton"
+                  onClick={onDescriptionSelected(item.address, item.description)}
+                />
+              )}
+            </>
           ) : null
         },
       },
@@ -152,7 +161,7 @@ const Addresses = ({
       localDescription,
       onDescriptionFieldBlur,
       onDescriptionPress,
-      onDescriptionFocus,
+      // onDescriptionFocus,
       isUpdatingDescription,
       t,
       semanticColors,
diff --git a/packages/neuron-ui/src/components/TransactionList/index.tsx b/packages/neuron-ui/src/components/TransactionList/index.tsx
@@ -5,10 +5,10 @@ import {
   Text,
   ShimmeredDetailsList,
   TextField,
+  IconButton,
   IColumn,
   IGroup,
   CheckboxVisibility,
-  ITextFieldStyleProps,
   getTheme,
 } from 'office-ui-fabric-react'
 
@@ -73,7 +73,7 @@ const TransactionList = ({
     onDescriptionPress,
     onDescriptionFieldBlur,
     onDescriptionChange,
-    onDescriptionFocus,
+    onDescriptionSelected,
   } = useLocalDescription('transaction', walletID, dispatch)
 
   const transactionColumns: IColumn[] = useMemo(
@@ -175,28 +175,37 @@ const TransactionList = ({
           minWidth: 100,
           maxWidth: 100,
           onRender: (item?: FormatTransaction) => {
+            const isSelected = item && localDescription.key === item.hash
             return item ? (
-              <TextField
-                title={item.description}
-                value={localDescription.key === item.hash ? localDescription.description : item.description || ''}
-                onFocus={onDescriptionFocus}
-                onBlur={onDescriptionFieldBlur(item.hash, item.description)}
-                onKeyPress={onDescriptionPress(item.hash, item.description)}
-                onChange={onDescriptionChange(item.hash)}
-                disabled={localDescription.key === item.hash && isUpdatingDescription}
-                iconProps={{
-                  iconName: localDescription.key === item.hash && isUpdatingDescription ? 'Updating' : '',
-                }}
-                borderless
-                styles={(props: ITextFieldStyleProps) => {
-                  return {
+              <>
+                <TextField
+                  title={item.description}
+                  value={isSelected ? localDescription.description : item.description || ''}
+                  onBlur={isSelected ? onDescriptionFieldBlur(item.hash, item.description) : undefined}
+                  onKeyPress={isSelected ? onDescriptionPress(item.hash, item.description) : undefined}
+                  onChange={isSelected ? onDescriptionChange(item.hash) : undefined}
+                  disabled={isSelected && isUpdatingDescription}
+                  iconProps={{
+                    iconName: isSelected && isUpdatingDescription ? 'Updating' : '',
+                  }}
+                  borderless
+                  readOnly={!isSelected}
+                  styles={{
                     fieldGroup: {
-                      borderColor: '#ccc',
-                      border: props.focused ? '1px solid' : 'none',
+                      backgroundColor: isSelected ? '#fff' : 'transparent',
+                      borderColor: 'transparent',
+                      border: isSelected ? '1px solid' : 'none',
                     },
-                  }
-                }}
-              />
+                  }}
+                />
+                {isSelected ? null : (
+                  <IconButton
+                    iconProps={{ iconName: 'Edit' }}
+                    className="editButton"
+                    onClick={onDescriptionSelected(item.hash, item.description)}
+                  />
+                )}
+              </>
             ) : null
           },
         },
@@ -224,7 +233,7 @@ const TransactionList = ({
       onDescriptionChange,
       onDescriptionFieldBlur,
       onDescriptionPress,
-      onDescriptionFocus,
+      onDescriptionSelected,
       isUpdatingDescription,
       t,
     ]
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
@@ -29,15 +29,20 @@ export const updateTransactionDescription = (params: Controller.UpdateTransactio
       updateDescription: true,
     },
   })
+  const descriptionParams = {
+    hash: params.hash,
+    description: params.description,
+  }
+  dispatch({
+    type: NeuronWalletActions.UpdateTransactionDescription,
+    payload: descriptionParams,
+  }) // update local description before remote description to avoid the flicker on the field
   updateRemoteTransactionDescription(params)
     .then(res => {
       if (res.status) {
         dispatch({
           type: NeuronWalletActions.UpdateTransactionDescription,
-          payload: {
-            hash: params.hash,
-            description: params.description,
-          },
+          payload: descriptionParams,
         })
       } else {
         addNotification(failureResToNotification(res))(dispatch)
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts
@@ -209,15 +209,20 @@ export const updateAddressDescription = (params: Controller.UpdateAddressDescrip
       updateDescription: true,
     },
   })
+  const descriptionParams = {
+    address: params.address,
+    description: params.description,
+  }
+  dispatch({
+    type: NeuronWalletActions.UpdateAddressDescription,
+    payload: descriptionParams,
+  })
   updateRemoteAddressDescription(params)
     .then(res => {
       if (res.status) {
         dispatch({
           type: NeuronWalletActions.UpdateAddressDescription,
-          payload: {
-            address: params.address,
-            description: params.description,
-          },
+          payload: descriptionParams,
         })
       } else {
         addNotification(failureResToNotification(res))(dispatch)
diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss
@@ -57,12 +57,28 @@ navbar {
   .ms-DetailsRow-cell {
     display: flex;
     align-items: center;
+
+    .editButton {
+      position: absolute;
+      right: 0;
+      justify-content: center;
+      align-items: center;
+      display: none;
+      background-color: transparent;
+    }
+
+    &:hover {
+      .editButton {
+        display: flex;
+      }
+    }
   }
 
   .text-overflow {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
 }
 
 // hack fabric ui experimental pagination style
diff --git a/packages/neuron-ui/src/theme.tsx b/packages/neuron-ui/src/theme.tsx
@@ -10,6 +10,7 @@ import {
   Close as FailIcon,
   Copy as CopyIcon,
   Down as ArrowDownIcon,
+  FormEdit as EditIcon,
   FormClose as ClearIcon,
   FormAdd as CreateIcon,
   FormPreviousLink as LeaveIcon,
@@ -56,6 +57,7 @@ registerIcons({
     info: <InfoIcon size="16px" />,
     errorbadge: <AlertIcon size="16px" />,
     completed: <SuccessIcon size="16px" />,
+    cancel: <DismissIcon size="16px" />,
     MiniCopy: <CopyIcon size="small" color={semanticColors.primaryButtonBackground} />,
     Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
     FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
@@ -83,6 +85,7 @@ registerIcons({
     TransactionFailure: <FailIcon size="14px" color="#d50000" />,
     TransactionPending: <PendingIcon size="14px" style={{ animation: 'rotate360 3s linear infinite' }} />,
     Keystore: <KeystoreIcon color="white" style={{ transform: 'scale(0.6)' }} />,
+    Edit: <EditIcon color="#000" size="20px" />,
   },
 })
 
diff --git a/packages/neuron-ui/src/utils/hooks.ts b/packages/neuron-ui/src/utils/hooks.ts
@@ -32,6 +32,8 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
           description: localDescription.description,
         })(dispatch)
       }
+
+      setLocalDescription({ key: '', description: '' })
     },
     [type, walletID, localDescription, dispatch]
   )
@@ -59,15 +61,18 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
     },
     [setLocalDescription]
   )
-  const onDescriptionFocus = useCallback(() => {
-    setLocalDescription({ key: '', description: '' })
-  }, [setLocalDescription])
+  const onDescriptionSelected = useCallback(
+    (hash: string, originDesc: string) => () => {
+      setLocalDescription({ key: hash, description: originDesc })
+    },
+    [setLocalDescription]
+  )
   return {
     localDescription,
     onDescriptionFieldBlur,
     onDescriptionPress,
     onDescriptionChange,
-    onDescriptionFocus,
+    onDescriptionSelected,
   }
 }
 
