@@ -3,7 +3,6 @@ import 'dart:math';
3
3
4
4
import 'package:react/hooks.dart' ;
5
5
import 'package:react/react.dart' as react;
6
- import 'package:react/react_client/react_interop.dart' ;
7
6
import 'package:react/react_dom.dart' as react_dom;
8
7
9
8
var hookTestFunctionComponent = react.registerFunctionComponent (HookTestComponent , displayName: 'useStateTest' );
@@ -107,14 +106,15 @@ Map reducer(Map state, Map action) {
107
106
case 'decrement' :
108
107
return {...state, 'count' : state['count' ] - 1 };
109
108
case 'reset' :
110
- return initializeCount (action['payload' ]);
109
+ return initializeCount (action['payload' ] as int );
111
110
default :
112
111
return state;
113
112
}
114
113
}
115
114
116
115
UseReducerTestComponent (Map props) {
117
- final state = useReducerLazy (reducer, props['initialCount' ] as int , initializeCount);
116
+ final initialCount = props['initialCount' ] as int ;
117
+ final state = useReducerLazy (reducer, initialCount, initializeCount);
118
118
119
119
return react.Fragment ({}, [
120
120
state.state['count' ],
@@ -134,7 +134,7 @@ UseReducerTestComponent(Map props) {
134
134
'key' : 'urt3' ,
135
135
'onClick' : (_) => state.dispatch ({
136
136
'type' : 'reset' ,
137
- 'payload' : props[ ' initialCount' ] ,
137
+ 'payload' : initialCount,
138
138
})
139
139
}, [
140
140
'reset'
@@ -297,7 +297,7 @@ final randomUseLayoutEffectTestComponent =
297
297
react.registerFunctionComponent (RandomUseLayoutEffectTestComponent , displayName: 'randomUseLayoutEffectTest' );
298
298
299
299
RandomUseLayoutEffectTestComponent (Map props) {
300
- final value = useState <num >(0 );
300
+ final value = useState <double >(0 );
301
301
302
302
useLayoutEffect (() {
303
303
if (value.value == 0 ) {
@@ -317,7 +317,7 @@ final randomUseEffectTestComponent =
317
317
react.registerFunctionComponent (RandomUseEffectTestComponent , displayName: 'randomUseEffectTest' );
318
318
319
319
RandomUseEffectTestComponent (Map props) {
320
- final value = useState <num >(0 );
320
+ final value = useState <double >(0 );
321
321
322
322
useEffect (() {
323
323
if (value.value == 0 ) {
@@ -357,7 +357,7 @@ final FancyInput = react.forwardRef2((props, ref) {
357
357
'value' : props['value' ],
358
358
'onChange' : (e) => props['update' ](e.target.value),
359
359
'placeholder' : props['placeholder' ],
360
- 'style' : {'borderColor' : props['hasError' ] ? 'crimson' : '#999' },
360
+ 'style' : {'borderColor' : ( props['hasError' ] as bool ) ? 'crimson' : '#999' },
361
361
});
362
362
});
363
363
@@ -370,8 +370,8 @@ UseImperativeHandleTestComponent(Map props) {
370
370
final error = useState ('' );
371
371
final message = useState ('' );
372
372
373
- Ref cityRef = useRef <FancyInputApi >();
374
- Ref stateRef = useRef <FancyInputApi >();
373
+ final cityRef = useRef <FancyInputApi >();
374
+ final stateRef = useRef <FancyInputApi >();
375
375
376
376
validate (_) {
377
377
if (! RegExp (r'^[a-zA-Z]+$' ).hasMatch (city.value)) {
@@ -415,21 +415,23 @@ UseImperativeHandleTestComponent(Map props) {
415
415
}
416
416
417
417
final FancyCounter = react.forwardRef2 ((props, ref) {
418
- final count = useState (0 );
418
+ final diff = props['diff' ] as num ;
419
+
420
+ final count = useState <num >(0 );
419
421
420
422
useImperativeHandle (
421
423
ref,
422
424
() {
423
425
print ('FancyCounter: useImperativeHandle re-assigns ref.current' );
424
426
return {
425
- 'increment' : () => count.setWithUpdater ((prev) => prev + props[ ' diff' ] ),
426
- 'decrement' : () => count.setWithUpdater ((prev) => prev - props[ ' diff' ] ),
427
+ 'increment' : () => count.setWithUpdater ((prev) => prev + diff),
428
+ 'decrement' : () => count.setWithUpdater ((prev) => prev - diff),
427
429
};
428
430
},
429
431
430
432
/// This dependency prevents unnecessary calls of createHandle, by only re-assigning
431
- /// ref.current when `props[' diff'] ` changes.
432
- [props[ ' diff' ] ],
433
+ /// ref.current when `diff` changes.
434
+ [diff],
433
435
);
434
436
435
437
return react.div ({}, count.value);
@@ -478,7 +480,7 @@ StateHook<bool> useFriendStatus(int friendID) {
478
480
final isOnline = useState (false );
479
481
480
482
void handleStatusChange (Map status) {
481
- isOnline.set (status['isOnline' ]);
483
+ isOnline.set (status['isOnline' ] as bool );
482
484
}
483
485
484
486
useEffect (() {
@@ -494,8 +496,8 @@ StateHook<bool> useFriendStatus(int friendID) {
494
496
return isOnline;
495
497
}
496
498
497
- final FriendListItem = react.registerFunctionComponent ((Map props) {
498
- final isOnline = useFriendStatus (props['friend' ]['id' ]);
499
+ final FriendListItem = react.registerFunctionComponent ((props) {
500
+ final isOnline = useFriendStatus (props['friend' ]['id' ] as int );
499
501
500
502
return react.li ({
501
503
'style' : {'color' : isOnline.value ? 'green' : 'black' }
@@ -505,7 +507,7 @@ final FriendListItem = react.registerFunctionComponent((Map props) {
505
507
}, displayName: 'FriendListItem' );
506
508
507
509
final UseDebugValueTestComponent = react.registerFunctionComponent (
508
- (Map props) => react.Fragment ({}, [
510
+ (props) => react.Fragment ({}, [
509
511
FriendListItem ({
510
512
'key' : 'friend1' ,
511
513
'friend' : {'id' : 1 , 'name' : 'user 1' },
0 commit comments