Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .ado/apple-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ pr:
- master

jobs:
- job: JavaScriptRNPR
displayName: JavaScript React Native PR
pool:
vmImage: macOS-10.14
demands: ['xcode', 'sh', 'npm']
steps:
- template: templates/apple-job-javascript.yml

- job: AppleRNPR
displayName: Apple React Native PR
strategy:
Expand Down
23 changes: 23 additions & 0 deletions .ado/templates/apple-job-javascript.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
steps:
- script: 'brew bundle'
displayName: 'brew bundle'

- script: brew link node@10 --overwrite --force
displayName: 'ensure node 10'

- template: apple-xcode-select.yml

- script: 'yarn install'
displayName: 'yarn install'

- script: 'yarn test-ci'
displayName: 'yarn test-ci'

- script: 'yarn flow'
displayName: 'yarn flow'

- script: 'yarn lint'
displayName: 'yarn lint'

- script: 'yarn format-check'
displayName: 'yarn format-check'
1 change: 0 additions & 1 deletion .flowconfig
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js
.*/*[.]macos.js

; Ignore templates for 'react-native init'
<PROJECT_ROOT>/template/.*
Expand Down
60 changes: 32 additions & 28 deletions Libraries/Components/ScrollView/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import type {
PressEvent,
ScrollEvent,
LayoutEvent,
KeyboardEvent,
} from '../../Types/CoreEventTypes';
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
import type {NativeMethodsMixinType} from '../../Renderer/shims/ReactNativeTypes';
Expand Down Expand Up @@ -883,58 +882,61 @@ class ScrollView extends React.Component<Props, State> {
}

// [TODO(macOS ISS#2323203)
_handleKeyDown = (e: KeyboardEvent) => {
if (this.props.onKeyDown) {
this.props.onKeyDown(e);
_handleKeyDown = (event: ScrollEvent) => {
if (this.props.onScrollKeyDown) {
this.props.onScrollKeyDown(event);
} else {
const event = e.nativeEvent;
const key = event.key;
const kMinScrollOffset = 10;

if (Platform.OS === 'macos') {
const nativeEvent = event.nativeEvent;
const key = nativeEvent.key;
const kMinScrollOffset = 10;
if (key === 'PAGE_UP') {
this._handleScrollByKeyDown(event, {
x: event.contentOffset.x,
y: event.contentOffset.y + -event.layoutMeasurement.height,
x: nativeEvent.contentOffset.x,
y:
nativeEvent.contentOffset.y +
-nativeEvent.layoutMeasurement.height,
});
} else if (key === 'PAGE_DOWN') {
this._handleScrollByKeyDown(event, {
x: event.contentOffset.x,
y: event.contentOffset.y + event.layoutMeasurement.height,
x: nativeEvent.contentOffset.x,
y:
nativeEvent.contentOffset.y +
nativeEvent.layoutMeasurement.height,
});
} else if (key === 'LEFT_ARROW') {
this._handleScrollByKeyDown(event, {
x:
event.contentOffset.x +
-(this.props.horizontalLineScroll === undefined
nativeEvent.contentOffset.x +
-(this.props.horizontalLineScroll !== undefined
? this.props.horizontalLineScroll
: kMinScrollOffset),
y: event.contentOffset.y,
y: nativeEvent.contentOffset.y,
});
} else if (key === 'RIGHT_ARROW') {
this._handleScrollByKeyDown(event, {
x:
event.contentOffset.x +
(this.props.horizontalLineScroll === undefined
nativeEvent.contentOffset.x +
(this.props.horizontalLineScroll !== undefined
? this.props.horizontalLineScroll
: kMinScrollOffset),
y: event.contentOffset.y,
y: nativeEvent.contentOffset.y,
});
} else if (key === 'DOWN_ARROW') {
this._handleScrollByKeyDown(event, {
x: event.contentOffset.x,
x: nativeEvent.contentOffset.x,
y:
event.contentOffset.y +
(this.props.verticalLineScroll === undefined
nativeEvent.contentOffset.y +
(this.props.verticalLineScroll !== undefined
? this.props.verticalLineScroll
: kMinScrollOffset),
});
} else if (key === 'UP_ARROW') {
this._handleScrollByKeyDown(event, {
x: event.contentOffset.x,
x: nativeEvent.contentOffset.x,
y:
event.contentOffset.y +
-(this.props.verticalLineScroll === undefined
nativeEvent.contentOffset.y +
-(this.props.verticalLineScroll !== undefined
? this.props.verticalLineScroll
: kMinScrollOffset),
});
Expand All @@ -943,11 +945,13 @@ class ScrollView extends React.Component<Props, State> {
}
};

_handleScrollByKeyDown = (e: ScrollEvent, newOffset) => {
_handleScrollByKeyDown = (event: ScrollEvent, newOffset) => {
const maxX =
e.nativeEvent.contentSize.width - e.nativeEvent.layoutMeasurement.width;
event.nativeEvent.contentSize.width -
event.nativeEvent.layoutMeasurement.width;
const maxY =
e.nativeEvent.contentSize.height - e.nativeEvent.layoutMeasurement.height;
event.nativeEvent.contentSize.height -
event.nativeEvent.layoutMeasurement.height;
this.scrollTo({
x: Math.max(0, Math.min(maxX, newOffset.x)),
y: Math.max(0, Math.min(maxY, newOffset.y)),
Expand Down Expand Up @@ -1133,7 +1137,7 @@ class ScrollView extends React.Component<Props, State> {
// Override the onContentSizeChange from props, since this event can
// bubble up from TextInputs
onContentSizeChange: null,
onKeyDown: this._handleKeyDown, // TODO(macOS ISS#2323203)
onScrollKeyDown: this._handleKeyDown, // TODO(macOS ISS#2323203)
onLayout: this._handleLayout,
onMomentumScrollBegin: this._scrollResponder
.scrollResponderHandleMomentumScrollBegin,
Expand Down
6 changes: 3 additions & 3 deletions Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type {
PressEvent,
Layout,
LayoutEvent,
KeyboardEvent,
ScrollEvent, // TODO(macOS ISS#2323203)
} from '../../Types/CoreEventTypes';
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
import type {Node} from 'react';
Expand Down Expand Up @@ -58,10 +58,10 @@ type DirectEventProps = $ReadOnly<{|
onDoubleClick?: ?(event: SyntheticEvent<{}>) => mixed, // TODO(macOS ISS#2323203)

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

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

Expand Down
9 changes: 5 additions & 4 deletions Libraries/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import type {
ViewToken,
ViewabilityConfigCallbackPair,
} from './ViewabilityHelper';
import type {ScrollEvent} from '../Types/CoreEventTypes'; // TODO(macOS ISS#2323203)

type Item = any;

Expand Down Expand Up @@ -1098,7 +1099,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
}

_defaultRenderScrollComponent = props => {
let keyEventHandler = this.props.onKeyDown; // [TODO(macOS ISS#2323203)
let keyEventHandler = this.props.onScrollKeyDown; // [TODO(macOS ISS#2323203)
if (!keyEventHandler) {
keyEventHandler = this.props.enableSelectionOnKeyPress
? this._handleKeyDown
Expand All @@ -1119,7 +1120,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
// $FlowFixMe Invalid prop usage
<ScrollView
{...props}
onKeyDown={keyEventHandler} // TODO(macOS ISS#2323203)
onScrollKeyDown={keyEventHandler} // TODO(macOS ISS#2323203)
refreshControl={
props.refreshControl == null ? (
<RefreshControl
Expand All @@ -1135,7 +1136,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
);
} else {
// $FlowFixMe Invalid prop usage
return <ScrollView {...props} onKeyDown={keyEventHandler} />; // TODO(macOS ISS#2323203)
return <ScrollView {...props} onScrollKeyDown={keyEventHandler} />; // TODO(macOS ISS#2323203)
}
};

Expand Down Expand Up @@ -1280,7 +1281,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
}
};

_handleKeyDown = e => {
_handleKeyDown = (e: ScrollEvent) => {
if (this.props.onKeyDown) {
this.props.onKeyDown(e);
} else {
Expand Down
7 changes: 4 additions & 3 deletions Libraries/Lists/VirtualizedSectionList.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type {
Props as VirtualizedListProps,
SelectedRowIndexPathType, // TODO(macOS ISS#2323203)
} from './VirtualizedList';
import type {ScrollEvent} from '../Types/CoreEventTypes'; // TODO(macOS ISS#2323203)

type Item = any;

Expand Down Expand Up @@ -296,7 +297,7 @@ class VirtualizedSectionList<
this._listRef.ensureItemAtIndexIsVisible(index);
};

_handleKeyDown = e => {
_handleKeyDown = (e: ScrollEvent) => {
if (Platform.OS === 'macos') {
const event = e.nativeEvent;
const key = event.key;
Expand Down Expand Up @@ -339,7 +340,7 @@ class VirtualizedSectionList<
}; // ]TODO(macOS ISS#2323203)

render() {
let keyEventHandler = this.props.onKeyDown; // [TODO(macOS ISS#2323203)
let keyEventHandler = this.props.onScrollKeyDown; // [TODO(macOS ISS#2323203)
if (!keyEventHandler) {
keyEventHandler = this.props.enableSelectionOnKeyPress
? this._handleKeyDown
Expand All @@ -349,7 +350,7 @@ class VirtualizedSectionList<
<VirtualizedList
{...this.state.childProps}
ref={this._captureRef}
onKeyDown={keyEventHandler}
onScrollKeyDown={keyEventHandler}
{...this.state.selectedRowIndexPath}
/> // TODO(macOS ISS#2323203)
);
Expand Down
8 changes: 4 additions & 4 deletions Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ exports[`FlatList renders all the bells and whistles 1`] = `
numColumns={2}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onRefresh={[MockFunction]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
refreshControl={
<RefreshControlMock
onRefresh={[MockFunction]}
Expand Down Expand Up @@ -140,12 +140,12 @@ exports[`FlatList renders empty list 1`] = `
numColumns={1}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
Expand All @@ -170,12 +170,12 @@ exports[`FlatList renders null list 1`] = `
numColumns={1}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
Expand Down Expand Up @@ -213,12 +213,12 @@ exports[`FlatList renders simple list 1`] = `
numColumns={1}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
Expand Down
10 changes: 5 additions & 5 deletions Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
maxToRenderPerBatch={10}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
renderItem={[Function]}
renderSectionHeader={[Function]}
rowIndex={-1}
Expand Down Expand Up @@ -109,12 +109,12 @@ exports[`SectionList renders a footer when there is no data 1`] = `
maxToRenderPerBatch={10}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
renderItem={[Function]}
renderSectionFooter={[Function]}
renderSectionHeader={[Function]}
Expand Down Expand Up @@ -178,12 +178,12 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
maxToRenderPerBatch={10}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
renderItem={[Function]}
renderSectionFooter={[Function]}
rowIndex={-1}
Expand Down Expand Up @@ -278,13 +278,13 @@ exports[`SectionList renders all the bells and whistles 1`] = `
maxToRenderPerBatch={10}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onRefresh={[MockFunction]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
refreshControl={
<RefreshControlMock
onRefresh={[MockFunction]}
Expand Down Expand Up @@ -516,12 +516,12 @@ exports[`SectionList renders empty list 1`] = `
maxToRenderPerBatch={10}
onContentSizeChange={[Function]}
onEndReachedThreshold={2}
onKeyDown={null}
onLayout={[Function]}
onMomentumScrollEnd={[Function]}
onScroll={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
onScrollKeyDown={null}
renderItem={[Function]}
rowIndex={-1}
scrollEventThrottle={50}
Expand Down
Loading