15
15
* limitations under the License.
16
16
*/
17
17
18
- import React , { Component , createRef } from 'react' ;
18
+ import { Component } from 'react' ;
19
19
import * as accountApi from '../../api/account' ;
20
- import { Input } from '../../components/forms' ;
21
20
import { translate , TranslateProps } from '../../decorators/translate' ;
22
21
import { A } from '../anchor/anchor' ;
23
22
import { Dialog } from '../dialog/dialog' ;
24
23
import { CopyableInput } from '../copy/Copy' ;
25
- import { Edit , EditLight , ExpandIcon , Save , SaveLight } from '../icon/icon' ;
24
+ import { ExpandIcon } from '../icon/icon' ;
26
25
import { ProgressRing } from '../progressRing/progressRing' ;
27
26
import { FiatConversion } from '../rates/rates' ;
28
27
import { Amount } from '../../components/amount/amount' ;
29
28
import { ArrowIn , ArrowOut , ArrowSelf } from './components/icons' ;
30
- import { getDarkmode } from '../darkmode/darkmode ' ;
29
+ import { Note } from './note ' ;
31
30
import parentStyle from './transactions.module.css' ;
32
31
import style from './transaction.module.css' ;
33
32
34
33
interface State {
35
34
transactionDialog : boolean ;
36
- newNote : string ;
37
- editMode : boolean ;
38
35
transactionInfo ?: accountApi . ITransaction ;
39
36
}
40
37
@@ -47,13 +44,8 @@ interface TransactionProps extends accountApi.ITransaction {
47
44
type Props = TransactionProps & TranslateProps ;
48
45
49
46
class Transaction extends Component < Props , State > {
50
- private input = createRef < HTMLInputElement > ( ) ;
51
- private editButton = createRef < HTMLButtonElement > ( ) ;
52
-
53
47
public readonly state : State = {
54
48
transactionDialog : false ,
55
- newNote : this . props . note ,
56
- editMode : ! this . props . note ,
57
49
} ;
58
50
59
51
private parseTimeShort = ( time : string ) => {
@@ -74,8 +66,6 @@ class Transaction extends Component<Props, State> {
74
66
this . setState ( {
75
67
transactionInfo : transaction ,
76
68
transactionDialog : true ,
77
- newNote : this . props . note ,
78
- editMode : ! this . props . note ,
79
69
} ) ;
80
70
} )
81
71
. catch ( console . error ) ;
@@ -85,37 +75,6 @@ class Transaction extends Component<Props, State> {
85
75
this . setState ( { transactionDialog : false } ) ;
86
76
} ;
87
77
88
- private handleNoteInput = ( e : Event ) => {
89
- const target = e . target as HTMLInputElement ;
90
- this . setState ( { newNote : target . value } ) ;
91
- } ;
92
-
93
- private handleEdit = ( e : React . SyntheticEvent ) => {
94
- e . preventDefault ( ) ;
95
- if ( this . state . editMode && this . props . note !== this . state . newNote ) {
96
- accountApi . postNotesTx ( this . props . accountCode , {
97
- internalTxID : this . props . internalID ,
98
- note : this . state . newNote ,
99
- } )
100
- . catch ( console . error ) ;
101
- }
102
- this . focusEdit ( ) ;
103
- this . setState (
104
- ( { editMode } ) => ( { editMode : ! editMode } ) ,
105
- this . focusEdit ,
106
- ) ;
107
- } ;
108
-
109
- private focusEdit = ( ) => {
110
- if ( this . editButton . current ) {
111
- this . editButton . current . blur ( ) ;
112
- }
113
- if ( this . state . editMode && this . input . current ) {
114
- this . input . current . scrollLeft = this . input . current . scrollWidth ;
115
- this . input . current . focus ( ) ;
116
- }
117
- } ;
118
-
119
78
public render ( ) {
120
79
const {
121
80
t,
@@ -133,8 +92,6 @@ class Transaction extends Component<Props, State> {
133
92
} = this . props ;
134
93
const {
135
94
transactionDialog,
136
- newNote,
137
- editMode,
138
95
transactionInfo,
139
96
} = this . state ;
140
97
const arrow = type === 'receive' ? (
@@ -153,7 +110,6 @@ class Transaction extends Component<Props, State> {
153
110
failed : t ( 'transaction.status.failed' ) ,
154
111
} [ status ] ;
155
112
const progress = numConfirmations < numConfirmationsComplete ? ( numConfirmations / numConfirmationsComplete ) * 100 : 100 ;
156
- const darkmode = getDarkmode ( ) ;
157
113
158
114
return (
159
115
< div className = { [ style . container , index === 0 ? style . first : '' ] . join ( ' ' ) } >
@@ -238,34 +194,11 @@ class Transaction extends Component<Props, State> {
238
194
slim
239
195
medium >
240
196
{ transactionInfo && < >
241
- < form onSubmit = { this . handleEdit } className = { style . detailInput } >
242
- < label htmlFor = "note" > { t ( 'note.title' ) } </ label >
243
- < Input
244
- align = "right"
245
- autoFocus = { editMode }
246
- className = { style . textOnlyInput }
247
- readOnly = { ! editMode }
248
- type = "text"
249
- id = "note"
250
- transparent
251
- placeholder = { t ( 'note.input.placeholder' ) }
252
- value = { newNote }
253
- maxLength = { 256 }
254
- onInput = { this . handleNoteInput }
255
- ref = { this . input } />
256
- < button
257
- className = { style . editButton }
258
- onClick = { this . handleEdit }
259
- title = { t ( `transaction.note.${ editMode ? 'save' : 'edit' } ` ) }
260
- type = "button"
261
- ref = { this . editButton } >
262
- {
263
- editMode
264
- ? darkmode ? < SaveLight /> : < Save />
265
- : darkmode ? < EditLight /> : < Edit />
266
- }
267
- </ button >
268
- </ form >
197
+ < Note
198
+ accountCode = { this . props . accountCode }
199
+ internalID = { this . props . internalID }
200
+ note = { this . props . note }
201
+ />
269
202
< div className = { style . detail } >
270
203
< label > { t ( 'transaction.details.type' ) } </ label >
271
204
< p > { arrow } </ p >
0 commit comments