Skip to content

Commit

Permalink
feat: add an edit button by the side of description
Browse files Browse the repository at this point in the history
  • Loading branch information
@Keith-CY
Keith-CY committed Sep 3, 2019
1 parent 6c783e3 commit 031fed0
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 56 deletions.
53 changes: 31 additions & 22 deletions packages/neuron-ui/src/components/Addresses/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
TextField,
IColumn,
CheckboxVisibility,
ITextFieldStyleProps,
IconButton,
getTheme,
} from 'office-ui-fabric-react'

Expand Down Expand Up @@ -39,7 +39,7 @@ const Addresses = ({
onDescriptionPress,
onDescriptionFieldBlur,
onDescriptionChange,
onDescriptionFocus,
onDescriptionSelected,
} = useLocalDescription('address', walletID, dispatch)

const theme = getTheme()
Expand Down Expand Up @@ -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
},
},
Expand Down Expand Up @@ -152,7 +161,7 @@ const Addresses = ({
localDescription,
onDescriptionFieldBlur,
onDescriptionPress,
onDescriptionFocus,
// onDescriptionFocus,
isUpdatingDescription,
t,
semanticColors,
Expand Down
53 changes: 31 additions & 22 deletions packages/neuron-ui/src/components/TransactionList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import {
Text,
ShimmeredDetailsList,
TextField,
IconButton,
IColumn,
IGroup,
CheckboxVisibility,
ITextFieldStyleProps,
getTheme,
} from 'office-ui-fabric-react'

Expand Down Expand Up @@ -73,7 +73,7 @@ const TransactionList = ({
onDescriptionPress,
onDescriptionFieldBlur,
onDescriptionChange,
onDescriptionFocus,
onDescriptionSelected,
} = useLocalDescription('transaction', walletID, dispatch)

const transactionColumns: IColumn[] = useMemo(
Expand Down Expand Up @@ -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
},
},
Expand Down Expand Up @@ -224,7 +233,7 @@ const TransactionList = ({
onDescriptionChange,
onDescriptionFieldBlur,
onDescriptionPress,
onDescriptionFocus,
onDescriptionSelected,
isUpdatingDescription,
t,
]
Expand Down
13 changes: 9 additions & 4 deletions packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
13 changes: 9 additions & 4 deletions packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
16 changes: 16 additions & 0 deletions packages/neuron-ui/src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/neuron-ui/src/theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)' }} />,
Expand Down Expand Up @@ -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" />,
},
})

Expand Down
13 changes: 9 additions & 4 deletions packages/neuron-ui/src/utils/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
description: localDescription.description,
})(dispatch)
}

setLocalDescription({ key: '', description: '' })
},
[type, walletID, localDescription, dispatch]
)
Expand Down Expand Up @@ -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,
}
}

Expand Down

0 comments on commit 031fed0

Please sign in to comment.