Skip to content

Commit fe9ccbc

Browse files
tom-untom-un
authored
Tomun/fixflow (#196)
* Fixed Flow, Lint, and Jest tests. Fixed broken macOS scroll key events. * Added ADO tests for jest, flow, lint, format-check * Rename yml file * Added displayName's to the yml steps * More flow fixes. macos specific files were being skipped in .flowconfig * Renamed e to event and event to nativeEvent * Fix lint errors
1 parent 3707a29 commit fe9ccbc

22 files changed

+145
-79
lines changed

‎.ado/apple-pr.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ pr:
77
- master
88

99
jobs:
10+
- job: JavaScriptRNPR
11+
displayName: JavaScript React Native PR
12+
pool:
13+
vmImage: macOS-10.14
14+
demands: ['xcode', 'sh', 'npm']
15+
steps:
16+
- template: templates/apple-job-javascript.yml
17+
1018
- job: AppleRNPR
1119
displayName: Apple React Native PR
1220
strategy:

‎.ado/templates/apple-job-javascript.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
steps:
2+
- script: 'brew bundle'
3+
displayName: 'brew bundle'
4+
5+
- script: brew link node@10 --overwrite --force
6+
displayName: 'ensure node 10'
7+
8+
- template: apple-xcode-select.yml
9+
10+
- script: 'yarn install'
11+
displayName: 'yarn install'
12+
13+
- script: 'yarn test-ci'
14+
displayName: 'yarn test-ci'
15+
16+
- script: 'yarn flow'
17+
displayName: 'yarn flow'
18+
19+
- script: 'yarn lint'
20+
displayName: 'yarn lint'
21+
22+
- script: 'yarn format-check'
23+
displayName: 'yarn format-check'

‎.flowconfig‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
[ignore]
22
; We fork some components by platform
33
.*/*[.]android.js
4-
.*/*[.]macos.js
54

65
; Ignore templates for 'react-native init'
76
<PROJECT_ROOT>/template/.*

‎Libraries/Components/ScrollView/ScrollView.js‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import type {
3131
PressEvent,
3232
ScrollEvent,
3333
LayoutEvent,
34-
KeyboardEvent,
3534
} from '../../Types/CoreEventTypes';
3635
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
3736
import type {NativeMethodsMixinType} from '../../Renderer/shims/ReactNativeTypes';
@@ -883,58 +882,61 @@ class ScrollView extends React.Component<Props, State> {
883882
}
884883

885884
// [TODO(macOS ISS#2323203)
886-
_handleKeyDown = (e: KeyboardEvent) => {
887-
if (this.props.onKeyDown) {
888-
this.props.onKeyDown(e);
885+
_handleKeyDown = (event: ScrollEvent) => {
886+
if (this.props.onScrollKeyDown) {
887+
this.props.onScrollKeyDown(event);
889888
} else {
890-
const event = e.nativeEvent;
891-
const key = event.key;
892-
const kMinScrollOffset = 10;
893-
894889
if (Platform.OS === 'macos') {
890+
const nativeEvent = event.nativeEvent;
891+
const key = nativeEvent.key;
892+
const kMinScrollOffset = 10;
895893
if (key === 'PAGE_UP') {
896894
this._handleScrollByKeyDown(event, {
897-
x: event.contentOffset.x,
898-
y: event.contentOffset.y + -event.layoutMeasurement.height,
895+
x: nativeEvent.contentOffset.x,
896+
y:
897+
nativeEvent.contentOffset.y +
898+
-nativeEvent.layoutMeasurement.height,
899899
});
900900
} else if (key === 'PAGE_DOWN') {
901901
this._handleScrollByKeyDown(event, {
902-
x: event.contentOffset.x,
903-
y: event.contentOffset.y + event.layoutMeasurement.height,
902+
x: nativeEvent.contentOffset.x,
903+
y:
904+
nativeEvent.contentOffset.y +
905+
nativeEvent.layoutMeasurement.height,
904906
});
905907
} else if (key === 'LEFT_ARROW') {
906908
this._handleScrollByKeyDown(event, {
907909
x:
908-
event.contentOffset.x +
909-
-(this.props.horizontalLineScroll === undefined
910+
nativeEvent.contentOffset.x +
911+
-(this.props.horizontalLineScroll !== undefined
910912
? this.props.horizontalLineScroll
911913
: kMinScrollOffset),
912-
y: event.contentOffset.y,
914+
y: nativeEvent.contentOffset.y,
913915
});
914916
} else if (key === 'RIGHT_ARROW') {
915917
this._handleScrollByKeyDown(event, {
916918
x:
917-
event.contentOffset.x +
918-
(this.props.horizontalLineScroll === undefined
919+
nativeEvent.contentOffset.x +
920+
(this.props.horizontalLineScroll !== undefined
919921
? this.props.horizontalLineScroll
920922
: kMinScrollOffset),
921-
y: event.contentOffset.y,
923+
y: nativeEvent.contentOffset.y,
922924
});
923925
} else if (key === 'DOWN_ARROW') {
924926
this._handleScrollByKeyDown(event, {
925-
x: event.contentOffset.x,
927+
x: nativeEvent.contentOffset.x,
926928
y:
927-
event.contentOffset.y +
928-
(this.props.verticalLineScroll === undefined
929+
nativeEvent.contentOffset.y +
930+
(this.props.verticalLineScroll !== undefined
929931
? this.props.verticalLineScroll
930932
: kMinScrollOffset),
931933
});
932934
} else if (key === 'UP_ARROW') {
933935
this._handleScrollByKeyDown(event, {
934-
x: event.contentOffset.x,
936+
x: nativeEvent.contentOffset.x,
935937
y:
936-
event.contentOffset.y +
937-
-(this.props.verticalLineScroll === undefined
938+
nativeEvent.contentOffset.y +
939+
-(this.props.verticalLineScroll !== undefined
938940
? this.props.verticalLineScroll
939941
: kMinScrollOffset),
940942
});
@@ -943,11 +945,13 @@ class ScrollView extends React.Component<Props, State> {
943945
}
944946
};
945947

946-
_handleScrollByKeyDown = (e: ScrollEvent, newOffset) => {
948+
_handleScrollByKeyDown = (event: ScrollEvent, newOffset) => {
947949
const maxX =
948-
e.nativeEvent.contentSize.width - e.nativeEvent.layoutMeasurement.width;
950+
event.nativeEvent.contentSize.width -
951+
event.nativeEvent.layoutMeasurement.width;
949952
const maxY =
950-
e.nativeEvent.contentSize.height - e.nativeEvent.layoutMeasurement.height;
953+
event.nativeEvent.contentSize.height -
954+
event.nativeEvent.layoutMeasurement.height;
951955
this.scrollTo({
952956
x: Math.max(0, Math.min(maxX, newOffset.x)),
953957
y: Math.max(0, Math.min(maxY, newOffset.y)),
@@ -1133,7 +1137,7 @@ class ScrollView extends React.Component<Props, State> {
11331137
// Override the onContentSizeChange from props, since this event can
11341138
// bubble up from TextInputs
11351139
onContentSizeChange: null,
1136-
onKeyDown: this._handleKeyDown, // TODO(macOS ISS#2323203)
1140+
onScrollKeyDown: this._handleKeyDown, // TODO(macOS ISS#2323203)
11371141
onLayout: this._handleLayout,
11381142
onMomentumScrollBegin: this._scrollResponder
11391143
.scrollResponderHandleMomentumScrollBegin,

‎Libraries/Components/View/ViewPropTypes.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type {
1414
PressEvent,
1515
Layout,
1616
LayoutEvent,
17-
KeyboardEvent,
17+
ScrollEvent, // TODO(macOS ISS#2323203)
1818
} from '../../Types/CoreEventTypes';
1919
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
2020
import type {Node} from 'react';
@@ -58,10 +58,10 @@ type DirectEventProps = $ReadOnly<{|
5858
onDoubleClick?: ?(event: SyntheticEvent<{}>) => mixed, // TODO(macOS ISS#2323203)
5959

6060
/**
61-
* When `accessible` is true, the system will try to invoke this function
61+
* When `acceptsKeyboardFocus` is true, the system will try to invoke this function
6262
* when the user performs accessibility key down gesture.
6363
*/
64-
onKeyDown?: ?(event: KeyboardEvent) => mixed, // TODO(macOS ISS#2323203)
64+
onScrollKeyDown?: ?(event: ScrollEvent) => mixed, // TODO(macOS ISS#2323203)
6565

6666
onMouseEnter?: (event: SyntheticEvent<{}>) => mixed, // [TODO(macOS ISS#2323203)
6767

‎Libraries/Lists/VirtualizedList.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import type {
3434
ViewToken,
3535
ViewabilityConfigCallbackPair,
3636
} from './ViewabilityHelper';
37+
import type {ScrollEvent} from '../Types/CoreEventTypes'; // TODO(macOS ISS#2323203)
3738

3839
type Item = any;
3940

@@ -1098,7 +1099,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
10981099
}
10991100

11001101
_defaultRenderScrollComponent = props => {
1101-
let keyEventHandler = this.props.onKeyDown; // [TODO(macOS ISS#2323203)
1102+
let keyEventHandler = this.props.onScrollKeyDown; // [TODO(macOS ISS#2323203)
11021103
if (!keyEventHandler) {
11031104
keyEventHandler = this.props.enableSelectionOnKeyPress
11041105
? this._handleKeyDown
@@ -1119,7 +1120,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
11191120
// $FlowFixMe Invalid prop usage
11201121
<ScrollView
11211122
{...props}
1122-
onKeyDown={keyEventHandler} // TODO(macOS ISS#2323203)
1123+
onScrollKeyDown={keyEventHandler} // TODO(macOS ISS#2323203)
11231124
refreshControl={
11241125
props.refreshControl == null ? (
11251126
<RefreshControl
@@ -1135,7 +1136,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
11351136
);
11361137
} else {
11371138
// $FlowFixMe Invalid prop usage
1138-
return <ScrollView {...props} onKeyDown={keyEventHandler} />; // TODO(macOS ISS#2323203)
1139+
return <ScrollView {...props} onScrollKeyDown={keyEventHandler} />; // TODO(macOS ISS#2323203)
11391140
}
11401141
};
11411142

@@ -1280,7 +1281,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
12801281
}
12811282
};
12821283

1283-
_handleKeyDown = e => {
1284+
_handleKeyDown = (e: ScrollEvent) => {
12841285
if (this.props.onKeyDown) {
12851286
this.props.onKeyDown(e);
12861287
} else {

‎Libraries/Lists/VirtualizedSectionList.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import type {
2121
Props as VirtualizedListProps,
2222
SelectedRowIndexPathType, // TODO(macOS ISS#2323203)
2323
} from './VirtualizedList';
24+
import type {ScrollEvent} from '../Types/CoreEventTypes'; // TODO(macOS ISS#2323203)
2425

2526
type Item = any;
2627

@@ -296,7 +297,7 @@ class VirtualizedSectionList<
296297
this._listRef.ensureItemAtIndexIsVisible(index);
297298
};
298299

299-
_handleKeyDown = e => {
300+
_handleKeyDown = (e: ScrollEvent) => {
300301
if (Platform.OS === 'macos') {
301302
const event = e.nativeEvent;
302303
const key = event.key;
@@ -339,7 +340,7 @@ class VirtualizedSectionList<
339340
}; // ]TODO(macOS ISS#2323203)
340341

341342
render() {
342-
let keyEventHandler = this.props.onKeyDown; // [TODO(macOS ISS#2323203)
343+
let keyEventHandler = this.props.onScrollKeyDown; // [TODO(macOS ISS#2323203)
343344
if (!keyEventHandler) {
344345
keyEventHandler = this.props.enableSelectionOnKeyPress
345346
? this._handleKeyDown
@@ -349,7 +350,7 @@ class VirtualizedSectionList<
349350
<VirtualizedList
350351
{...this.state.childProps}
351352
ref={this._captureRef}
352-
onKeyDown={keyEventHandler}
353+
onScrollKeyDown={keyEventHandler}
353354
{...this.state.selectedRowIndexPath}
354355
/> // TODO(macOS ISS#2323203)
355356
);

‎Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ exports[`FlatList renders all the bells and whistles 1`] = `
3636
numColumns={2}
3737
onContentSizeChange={[Function]}
3838
onEndReachedThreshold={2}
39-
onKeyDown={null}
4039
onLayout={[Function]}
4140
onMomentumScrollEnd={[Function]}
4241
onRefresh={[MockFunction]}
4342
onScroll={[Function]}
4443
onScrollBeginDrag={[Function]}
4544
onScrollEndDrag={[Function]}
45+
onScrollKeyDown={null}
4646
refreshControl={
4747
<RefreshControlMock
4848
onRefresh={[MockFunction]}
@@ -140,12 +140,12 @@ exports[`FlatList renders empty list 1`] = `
140140
numColumns={1}
141141
onContentSizeChange={[Function]}
142142
onEndReachedThreshold={2}
143-
onKeyDown={null}
144143
onLayout={[Function]}
145144
onMomentumScrollEnd={[Function]}
146145
onScroll={[Function]}
147146
onScrollBeginDrag={[Function]}
148147
onScrollEndDrag={[Function]}
148+
onScrollKeyDown={null}
149149
removeClippedSubviews={false}
150150
renderItem={[Function]}
151151
scrollEventThrottle={50}
@@ -170,12 +170,12 @@ exports[`FlatList renders null list 1`] = `
170170
numColumns={1}
171171
onContentSizeChange={[Function]}
172172
onEndReachedThreshold={2}
173-
onKeyDown={null}
174173
onLayout={[Function]}
175174
onMomentumScrollEnd={[Function]}
176175
onScroll={[Function]}
177176
onScrollBeginDrag={[Function]}
178177
onScrollEndDrag={[Function]}
178+
onScrollKeyDown={null}
179179
removeClippedSubviews={false}
180180
renderItem={[Function]}
181181
scrollEventThrottle={50}
@@ -213,12 +213,12 @@ exports[`FlatList renders simple list 1`] = `
213213
numColumns={1}
214214
onContentSizeChange={[Function]}
215215
onEndReachedThreshold={2}
216-
onKeyDown={null}
217216
onLayout={[Function]}
218217
onMomentumScrollEnd={[Function]}
219218
onScroll={[Function]}
220219
onScrollBeginDrag={[Function]}
221220
onScrollEndDrag={[Function]}
221+
onScrollKeyDown={null}
222222
removeClippedSubviews={false}
223223
renderItem={[Function]}
224224
scrollEventThrottle={50}

‎Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
2626
maxToRenderPerBatch={10}
2727
onContentSizeChange={[Function]}
2828
onEndReachedThreshold={2}
29-
onKeyDown={null}
3029
onLayout={[Function]}
3130
onMomentumScrollEnd={[Function]}
3231
onScroll={[Function]}
3332
onScrollBeginDrag={[Function]}
3433
onScrollEndDrag={[Function]}
34+
onScrollKeyDown={null}
3535
renderItem={[Function]}
3636
renderSectionHeader={[Function]}
3737
rowIndex={-1}
@@ -109,12 +109,12 @@ exports[`SectionList renders a footer when there is no data 1`] = `
109109
maxToRenderPerBatch={10}
110110
onContentSizeChange={[Function]}
111111
onEndReachedThreshold={2}
112-
onKeyDown={null}
113112
onLayout={[Function]}
114113
onMomentumScrollEnd={[Function]}
115114
onScroll={[Function]}
116115
onScrollBeginDrag={[Function]}
117116
onScrollEndDrag={[Function]}
117+
onScrollKeyDown={null}
118118
renderItem={[Function]}
119119
renderSectionFooter={[Function]}
120120
renderSectionHeader={[Function]}
@@ -178,12 +178,12 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
178178
maxToRenderPerBatch={10}
179179
onContentSizeChange={[Function]}
180180
onEndReachedThreshold={2}
181-
onKeyDown={null}
182181
onLayout={[Function]}
183182
onMomentumScrollEnd={[Function]}
184183
onScroll={[Function]}
185184
onScrollBeginDrag={[Function]}
186185
onScrollEndDrag={[Function]}
186+
onScrollKeyDown={null}
187187
renderItem={[Function]}
188188
renderSectionFooter={[Function]}
189189
rowIndex={-1}
@@ -278,13 +278,13 @@ exports[`SectionList renders all the bells and whistles 1`] = `
278278
maxToRenderPerBatch={10}
279279
onContentSizeChange={[Function]}
280280
onEndReachedThreshold={2}
281-
onKeyDown={null}
282281
onLayout={[Function]}
283282
onMomentumScrollEnd={[Function]}
284283
onRefresh={[MockFunction]}
285284
onScroll={[Function]}
286285
onScrollBeginDrag={[Function]}
287286
onScrollEndDrag={[Function]}
287+
onScrollKeyDown={null}
288288
refreshControl={
289289
<RefreshControlMock
290290
onRefresh={[MockFunction]}
@@ -516,12 +516,12 @@ exports[`SectionList renders empty list 1`] = `
516516
maxToRenderPerBatch={10}
517517
onContentSizeChange={[Function]}
518518
onEndReachedThreshold={2}
519-
onKeyDown={null}
520519
onLayout={[Function]}
521520
onMomentumScrollEnd={[Function]}
522521
onScroll={[Function]}
523522
onScrollBeginDrag={[Function]}
524523
onScrollEndDrag={[Function]}
524+
onScrollKeyDown={null}
525525
renderItem={[Function]}
526526
rowIndex={-1}
527527
scrollEventThrottle={50}

0 commit comments

Comments
 (0)