1- import React , { useMemo } from 'react'
1+ import React , { useEffect , useMemo } from 'react'
2+ import { RouteComponentProps } from 'react-router-dom'
23import { useTranslation } from 'react-i18next'
3- import { DetailsList , IColumn , DetailsListLayoutMode , CheckboxVisibility } from 'office-ui-fabric-react'
4+ import { DetailsList , TextField , IColumn , DetailsListLayoutMode , CheckboxVisibility } from 'office-ui-fabric-react'
45
56import { StateWithDispatch } from 'states/stateProvider/reducer'
67
78import { appCalls } from 'services/UILayer'
89
910import { useLocalDescription } from 'utils/hooks'
10- import DescriptionField from 'widgets/InlineInput/DescriptionField'
11- import { MIN_CELL_WIDTH } from 'utils/const'
11+ import { MIN_CELL_WIDTH , Routes } from 'utils/const'
1212
13- const addressColumns : IColumn [ ] = [
14- {
15- name : 'addresses.type' ,
16- key : 'type' ,
17- fieldName : 'type' ,
18- minWidth : MIN_CELL_WIDTH ,
19- maxWidth : 120 ,
20- isResizable : true ,
21- isCollapsible : false ,
22- } ,
23- {
24- name : 'addresses.address' ,
25- key : 'address' ,
26- fieldName : 'address' ,
27- className : 'fixedWidth' ,
28- minWidth : MIN_CELL_WIDTH ,
29- maxWidth : 450 ,
30- isResizable : true ,
31- isCollapsible : false ,
32- } ,
33- {
34- name : 'addresses.description' ,
35- key : 'description' ,
36- fieldName : 'description' ,
37- minWidth : MIN_CELL_WIDTH ,
38- maxWidth : 350 ,
39- isResizable : true ,
40- isCollapsible : false ,
41- } ,
42- {
43- name : 'addresses.balance' ,
44- key : 'balance' ,
45- fieldName : 'balance' ,
46- minWidth : MIN_CELL_WIDTH ,
47- maxWidth : 250 ,
48- isResizable : true ,
49- isCollapsible : false ,
50- } ,
51- {
52- name : 'addresses.transactions' ,
53- key : 'transactions' ,
54- fieldName : 'transactions' ,
55- minWidth : MIN_CELL_WIDTH ,
56- maxWidth : 150 ,
57- isResizable : true ,
58- isCollapsible : false ,
59- } ,
60- ]
61-
62- const Addresses = ( { dispatch, wallet : { addresses = [ ] } } : React . PropsWithoutRef < StateWithDispatch > ) => {
13+ const Addresses = ( {
14+ wallet : { id, addresses = [ ] } ,
15+ settings : { showAddressBook = false } ,
16+ dispatch,
17+ history,
18+ } : React . PropsWithoutRef < StateWithDispatch & RouteComponentProps > ) => {
6319 const [ t ] = useTranslation ( )
20+ useEffect ( ( ) => {
21+ if ( ! showAddressBook ) {
22+ history . push ( Routes . Overview )
23+ }
24+ } , [ showAddressBook , history ] )
6425
6526 const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription (
6627 'address' ,
28+ id ,
6729 useMemo (
6830 ( ) =>
69- addresses . map ( ( { address : key , description } ) => ( {
31+ addresses . map ( ( { address : key = '' , description = '' } ) => ( {
7032 key,
7133 description,
7234 } ) ) ,
@@ -75,38 +37,86 @@ const Addresses = ({ dispatch, wallet: { addresses = [] } }: React.PropsWithoutR
7537 dispatch
7638 )
7739
78- const addressesItems = useMemo (
79- ( ) =>
80- addresses . map ( ( { type, identifier, address, txCount, balance, description } , idx ) => ( {
81- key : identifier ,
82- type : type === 0 ? t ( 'addresses.receiving-address' ) : t ( 'addresses.change-address' ) ,
83- address,
84- identifier,
85- description : (
86- < DescriptionField
87- type = "text"
88- title = { description }
89- value = { localDescription [ idx ] }
90- onKeyPress = { onDescriptionPress ( idx ) }
91- onBlur = { onDescriptionFieldBlur ( idx ) }
92- onChange = { onDescriptionChange ( idx ) }
93- maxLength = { 300 }
94- />
95- ) ,
96- balance,
97- transactions : txCount ,
98- } ) ) ,
99- [ addresses , onDescriptionChange , localDescription , onDescriptionFieldBlur , onDescriptionPress , t ]
40+ const addressColumns : IColumn [ ] = useMemo (
41+ ( ) => [
42+ {
43+ name : 'addresses.type' ,
44+ key : 'type' ,
45+ fieldName : 'type' ,
46+ minWidth : MIN_CELL_WIDTH ,
47+ maxWidth : 120 ,
48+ isResizable : true ,
49+ isCollapsible : false ,
50+ onRender : ( item ?: State . Address ) => {
51+ if ( undefined === item ) {
52+ return null
53+ }
54+ if ( item . type === 0 ) {
55+ return < span style = { { color : '#28b463' } } > { t ( 'addresses.receiving-address' ) } </ span >
56+ }
57+ return < span style = { { color : '#cccc00' } } > { t ( 'addresses.change-address' ) } </ span >
58+ } ,
59+ } ,
60+ {
61+ name : 'addresses.address' ,
62+ key : 'address' ,
63+ fieldName : 'address' ,
64+ className : 'fixedWidth' ,
65+ minWidth : MIN_CELL_WIDTH ,
66+ maxWidth : 450 ,
67+ isResizable : true ,
68+ isCollapsible : false ,
69+ } ,
70+ {
71+ name : 'addresses.description' ,
72+ key : 'description' ,
73+ fieldName : 'description' ,
74+ minWidth : MIN_CELL_WIDTH ,
75+ maxWidth : 350 ,
76+ isResizable : true ,
77+ isCollapsible : false ,
78+ onRender : ( item ?: State . Address , idx ?: number ) => {
79+ return item && undefined !== idx ? (
80+ < TextField
81+ title = { item . description }
82+ value = { localDescription [ idx ] || '' }
83+ onKeyPress = { onDescriptionPress ( idx ) }
84+ onBlur = { onDescriptionFieldBlur ( idx ) }
85+ onChange = { onDescriptionChange ( idx ) }
86+ />
87+ ) : null
88+ } ,
89+ } ,
90+ {
91+ name : 'addresses.balance' ,
92+ key : 'balance' ,
93+ fieldName : 'balance' ,
94+ minWidth : MIN_CELL_WIDTH ,
95+ maxWidth : 250 ,
96+ isResizable : true ,
97+ isCollapsible : false ,
98+ } ,
99+ {
100+ name : 'addresses.transactions' ,
101+ key : 'transactions' ,
102+ fieldName : 'txCount' ,
103+ minWidth : MIN_CELL_WIDTH ,
104+ maxWidth : 150 ,
105+ isResizable : true ,
106+ isCollapsible : false ,
107+ } ,
108+ ] ,
109+ [ onDescriptionChange , localDescription , onDescriptionFieldBlur , onDescriptionPress , t ]
100110 )
101111
102112 return (
103113 < DetailsList
104114 checkboxVisibility = { CheckboxVisibility . hidden }
105115 layoutMode = { DetailsListLayoutMode . justified }
106116 columns = { addressColumns . map ( col => ( { ...col , name : t ( col . name ) } ) ) }
107- items = { addressesItems }
117+ items = { addresses }
108118 onItemContextMenu = { item => {
109- appCalls . contextMenu ( { type : 'addressList' , id : item . key } )
119+ appCalls . contextMenu ( { type : 'addressList' , id : item . identifier } )
110120 } }
111121 />
112122 )
0 commit comments