1
- // ignore_for_file: deprecated_member_use_from_same_package
2
1
import 'dart:async' ;
3
2
import 'dart:convert' ;
4
3
import 'dart:html' ;
@@ -28,7 +27,7 @@ import 'package:react/react_dom.dart' as react_dom;
28
27
/// This is the first custom [Component] .
29
28
///
30
29
/// It is just an HTML `<tr>` element displaying a single API response to the user.
31
- class _GeocodesResultItem extends react.Component {
30
+ class _GeocodesResultItem extends react.Component2 {
32
31
/// The only function you must implement in the custom component is [render] .
33
32
///
34
33
/// Every [Component] has a map of properties called [Component.props] . It can be specified during creation.
@@ -48,11 +47,11 @@ class _GeocodesResultItem extends react.Component {
48
47
/// shortly.
49
48
///
50
49
/// This is the only correct way to create a [Component] . Do not use the constructor!
51
- var geocodesResultItem = react.registerComponent (() => new _GeocodesResultItem ());
50
+ var GeocodesResultItem = react.registerComponent2 (() => _GeocodesResultItem ());
52
51
53
52
/// In this component we'll build an HTML `<table>` element full of the `<tr>` elements generated by
54
53
/// [_GeocodesResultItem]
55
- class _GeocodesResultList extends react.Component {
54
+ class _GeocodesResultList extends react.Component2 {
56
55
@override
57
56
render () {
58
57
// Built-in HTML DOM components also have props - which correspond to HTML element attributes.
@@ -83,7 +82,7 @@ class _GeocodesResultList extends react.Component {
83
82
// The second argument contains the body of the component (as you have already seen).
84
83
//
85
84
// It can be a String, a Component or an Iterable.
86
- props['data' ].map ((item) => geocodesResultItem ({
85
+ props['data' ].map ((item) => GeocodesResultItem ({
87
86
'key' : item['formatted_address' ],
88
87
'lat' : item['geometry' ]['location' ]['lat' ],
89
88
'lng' : item['geometry' ]['location' ]['lng' ],
@@ -95,7 +94,7 @@ class _GeocodesResultList extends react.Component {
95
94
}
96
95
}
97
96
98
- var geocodesResultList = react.registerComponent (() => new _GeocodesResultList ());
97
+ var GeocodesResultList = react.registerComponent2 (() => _GeocodesResultList ());
99
98
100
99
/// In this [Component] we'll build a search form.
101
100
///
@@ -104,11 +103,11 @@ var geocodesResultList = react.registerComponent(() => new _GeocodesResultList()
104
103
/// > The functions can be [Component] parameters _(handy for callbacks)_
105
104
///
106
105
/// > The DOM [Element] s can be accessed using `ref` s.
107
- class _GeocodesForm extends react.Component {
108
- var searchInputInstance ;
106
+ class _GeocodesForm extends react.Component2 {
107
+ final searchInputRef = react. createRef < InputElement >() ;
109
108
110
109
@override
111
- getInitialState () => {
110
+ get initialState => {
112
111
'value' : '' ,
113
112
};
114
113
@@ -136,7 +135,7 @@ class _GeocodesForm extends react.Component {
136
135
'value' : state['value' ],
137
136
'onChange' : handleChange,
138
137
// Input is referenced to access it's value
139
- 'ref' : (searchInputInstance) => this .searchInputInstance = searchInputInstance ,
138
+ 'ref' : searchInputRef ,
140
139
}),
141
140
react.span ({
142
141
'key' : 'spacer' ,
@@ -158,7 +157,7 @@ class _GeocodesForm extends react.Component {
158
157
/// Handle form submission via `props.onSubmit`
159
158
onFormSubmit (react.SyntheticEvent event) {
160
159
event.preventDefault ();
161
- InputElement inputElement = react_dom. findDOMNode (searchInputInstance) ;
160
+ final inputElement = searchInputRef.current ;
162
161
// The input's value is accessed.
163
162
var address = inputElement.value;
164
163
inputElement.value = '' ;
@@ -167,10 +166,10 @@ class _GeocodesForm extends react.Component {
167
166
}
168
167
}
169
168
170
- var geocodesForm = react.registerComponent (() => new _GeocodesForm ());
169
+ var GeocodesForm = react.registerComponent2 (() => _GeocodesForm ());
171
170
172
171
/// Renders an HTML `<li>` to be used as a child within the [_GeocodesHistoryList] .
173
- class _GeocodesHistoryItem extends react.Component {
172
+ class _GeocodesHistoryItem extends react.Component2 {
174
173
reload (e) {
175
174
props['reloader' ](props['query' ]);
176
175
}
@@ -189,12 +188,12 @@ class _GeocodesHistoryItem extends react.Component {
189
188
}
190
189
}
191
190
192
- var geocodesHistoryItem = react.registerComponent (() => new _GeocodesHistoryItem ());
191
+ var GeocodesHistoryItem = react.registerComponent2 (() => _GeocodesHistoryItem ());
193
192
194
193
/// Renders the "history list"
195
194
///
196
195
/// NOTE: It just passes the callback from the parent.
197
- class _GeocodesHistoryList extends react.Component {
196
+ class _GeocodesHistoryList extends react.Component2 {
198
197
@override
199
198
render () {
200
199
return react.div ({}, [
@@ -203,7 +202,7 @@ class _GeocodesHistoryList extends react.Component {
203
202
{
204
203
'key' : 'list' ,
205
204
},
206
- new List .from (props['data' ].keys.map ((key) => geocodesHistoryItem ({
205
+ new List .from (props['data' ].keys.map ((key) => GeocodesHistoryItem ({
207
206
'key' : key,
208
207
'query' : props['data' ][key]['query' ],
209
208
'status' : props['data' ][key]['status' ],
@@ -214,7 +213,7 @@ class _GeocodesHistoryList extends react.Component {
214
213
}
215
214
}
216
215
217
- var geocodesHistoryList = react.registerComponent (() => new _GeocodesHistoryList ());
216
+ var GeocodesHistoryList = react.registerComponent2 (() => _GeocodesHistoryList ());
218
217
219
218
/// The root [Component] of our application.
220
219
///
@@ -234,9 +233,9 @@ var geocodesHistoryList = react.registerComponent(() => new _GeocodesHistoryList
234
233
///
235
234
/// When the request is sent, it has `pending` status in the history. This changes to `OK` or `error` when the answer
236
235
/// _(or timeout)_ comes. If the new request is sent meanwhile, the old one is cancelled.
237
- class _GeocodesApp extends react.Component {
236
+ class _GeocodesApp extends react.Component2 {
238
237
@override
239
- getInitialState () => {
238
+ get initialState => {
240
239
'shown_addresses' : [], // Data from last query.
241
240
'history' : {} // Map of past queries.
242
241
};
@@ -304,17 +303,17 @@ class _GeocodesApp extends react.Component {
304
303
render () {
305
304
return react.div ({}, [
306
305
react.h1 ({'key' : '1' }, 'Geocode resolver' ),
307
- geocodesResultList ({
306
+ GeocodesResultList ({
308
307
'key' : '2' ,
309
308
// The state values are passed to the children as the properties.
310
309
'data' : state['shown_addresses' ]
311
310
}),
312
- geocodesForm ({
311
+ GeocodesForm ({
313
312
'key' : '3' ,
314
313
// `newQuery` is the final callback of the button click.
315
314
'submitter' : newQuery
316
315
}),
317
- geocodesHistoryList ({
316
+ GeocodesHistoryList ({
318
317
'key' : '4' ,
319
318
'data' : state['history' ],
320
319
// `newQuery` is the final callback of the button click.
@@ -324,11 +323,12 @@ class _GeocodesApp extends react.Component {
324
323
}
325
324
}
326
325
327
- var geocodesApp = react.registerComponent (() => new _GeocodesApp ());
326
+ var GeocodesApp = react.registerComponent2 (() => _GeocodesApp ());
328
327
329
328
/// And finally, a few magic commands to wire it all up!
330
329
///
331
330
/// Select the root of the app and the place in the DOM where it should be mounted.
332
331
void main () {
333
- react_dom.render (geocodesApp ({}), querySelector ('#content' ));
332
+ final root = react_dom.createRoot (querySelector ('#content' ));
333
+ root.render (GeocodesApp ({}));
334
334
}
0 commit comments