@@ -8,7 +8,7 @@ import { MonitorConnection } from './monitor-connection';
8
8
import dateFormat = require( 'dateformat' ) ;
9
9
import { messageToLines , truncateLines } from './monitor-utils' ;
10
10
11
- export type Line = { message : string ; timestamp ?: Date } ;
11
+ export type Line = { message : string ; timestamp ?: Date ; lineLen : number } ;
12
12
13
13
export class SerialMonitorOutput extends React . Component <
14
14
SerialMonitorOutput . Props ,
@@ -17,11 +17,12 @@ export class SerialMonitorOutput extends React.Component<
17
17
/**
18
18
* Do not touch it. It is used to be able to "follow" the serial monitor log.
19
19
*/
20
- protected anchor : HTMLElement | null ;
21
20
protected toDisposeBeforeUnmount = new DisposableCollection ( ) ;
21
+ private listRef : React . RefObject < any > ;
22
22
23
23
constructor ( props : Readonly < SerialMonitorOutput . Props > ) {
24
24
super ( props ) ;
25
+ this . listRef = React . createRef ( ) ;
25
26
this . state = {
26
27
lines : [ ] ,
27
28
timestamp : this . props . monitorModel . timestamp ,
@@ -35,7 +36,7 @@ export class SerialMonitorOutput extends React.Component<
35
36
< AutoSizer >
36
37
{ ( { height, width } ) => (
37
38
< List
38
- className = "List "
39
+ className = "serial-monitor-messages "
39
40
height = { height }
40
41
itemData = {
41
42
{
@@ -46,22 +47,13 @@ export class SerialMonitorOutput extends React.Component<
46
47
itemCount = { this . state . lines . length }
47
48
itemSize = { 20 }
48
49
width = { width }
50
+ ref = { this . listRef }
51
+ onItemsRendered = { this . scrollToBottom }
49
52
>
50
53
{ Row }
51
54
</ List >
52
55
) }
53
56
</ AutoSizer >
54
- { /* <div style={{ whiteSpace: 'pre', fontFamily: 'monospace' }}>
55
- {this.state.lines.map((line, i) => (
56
- <MonitorTextLine text={line} key={i} />
57
- ))}
58
- </div> */ }
59
- < div
60
- style = { { float : 'left' , clear : 'both' } }
61
- ref = { ( element ) => {
62
- this . anchor = element ;
63
- } }
64
- />
65
57
</ React . Fragment >
66
58
) ;
67
59
}
@@ -94,25 +86,23 @@ export class SerialMonitorOutput extends React.Component<
94
86
const { timestamp } = this . props . monitorModel ;
95
87
this . setState ( { timestamp } ) ;
96
88
}
89
+ if ( property === 'autoscroll' ) {
90
+ this . scrollToBottom ( ) ;
91
+ }
97
92
} ) ,
98
93
] ) ;
99
94
}
100
95
101
- componentDidUpdate ( ) : void {
102
- this . scrollToBottom ( ) ;
103
- }
104
-
105
96
componentWillUnmount ( ) : void {
106
97
// TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
107
98
this . toDisposeBeforeUnmount . dispose ( ) ;
108
99
}
109
100
110
- protected scrollToBottom ( ) : void {
111
- if ( this . props . monitorModel . autoscroll && this . anchor ) {
112
- this . anchor . scrollIntoView ( ) ;
113
- // this.listRef.current.scrollToItem(this.state.lines.length);
101
+ scrollToBottom = ( ( ) : void => {
102
+ if ( this . listRef . current && this . props . monitorModel . autoscroll ) {
103
+ this . listRef . current . scrollToItem ( this . state . lines . length , 'end' ) ;
114
104
}
115
- }
105
+ } ) . bind ( this ) ;
116
106
}
117
107
118
108
const Row = ( {
@@ -129,10 +119,13 @@ const Row = ({
129
119
`${ dateFormat ( data . lines [ index ] . timestamp , 'H:M:ss.l' ) } -> ` ) ||
130
120
'' ;
131
121
return (
132
- < div style = { style } >
133
- { timestamp }
134
- { data . lines [ index ] . message }
135
- </ div >
122
+ ( data . lines [ index ] . lineLen && (
123
+ < div style = { style } >
124
+ { timestamp }
125
+ { data . lines [ index ] . message }
126
+ </ div >
127
+ ) ) ||
128
+ null
136
129
) ;
137
130
} ;
138
131
0 commit comments