@office-iss/react-native-win32 0.64.6 → 0.64.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.flowconfig +5 -0
- package/CHANGELOG.json +61 -1
- package/CHANGELOG.md +36 -4
- package/Libraries/Components/Pressable/Pressable.win32.js +333 -0
- package/Libraries/Components/View/ReactNativeViewViewConfig.win32.js +2 -0
- package/Libraries/Components/View/Tests/ViewWin32Test.js +49 -4
- package/Libraries/Components/View/View.win32.js +4 -4
- package/Libraries/Components/View/ViewPropTypes.win32.js +544 -0
- package/Libraries/Components/View/ViewWin32.Props.d.ts +6 -0
- package/Libraries/Components/View/ViewWin32.Props.js +1 -1
- package/Libraries/Pressability/HoverState.win32.js +60 -0
- package/Libraries/Pressability/Pressability.win32.js +944 -0
- package/Libraries/Types/CoreEventTypes.win32.js +193 -0
- package/overrides.json +42 -7
- package/package.json +1 -1
- package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx +65 -1
- package/src/Libraries/Components/View/ViewWin32.Props.ts +8 -1
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* @flow strict-local
|
|
8
|
+
* @format
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
|
|
15
|
+
|
|
16
|
+
export type SyntheticEvent<T> = $ReadOnly<{|
|
|
17
|
+
bubbles: ?boolean,
|
|
18
|
+
cancelable: ?boolean,
|
|
19
|
+
currentTarget: number | React.ElementRef<HostComponent<mixed>>,
|
|
20
|
+
defaultPrevented: ?boolean,
|
|
21
|
+
dispatchConfig: $ReadOnly<{|
|
|
22
|
+
registrationName: string,
|
|
23
|
+
|}>,
|
|
24
|
+
eventPhase: ?number,
|
|
25
|
+
preventDefault: () => void,
|
|
26
|
+
isDefaultPrevented: () => boolean,
|
|
27
|
+
stopPropagation: () => void,
|
|
28
|
+
isPropagationStopped: () => boolean,
|
|
29
|
+
isTrusted: ?boolean,
|
|
30
|
+
nativeEvent: T,
|
|
31
|
+
persist: () => void,
|
|
32
|
+
target: ?number | React.ElementRef<HostComponent<mixed>>,
|
|
33
|
+
timeStamp: number,
|
|
34
|
+
type: ?string,
|
|
35
|
+
|}>;
|
|
36
|
+
|
|
37
|
+
export type ResponderSyntheticEvent<T> = $ReadOnly<{|
|
|
38
|
+
...SyntheticEvent<T>,
|
|
39
|
+
touchHistory: $ReadOnly<{|
|
|
40
|
+
indexOfSingleActiveTouch: number,
|
|
41
|
+
mostRecentTimeStamp: number,
|
|
42
|
+
numberActiveTouches: number,
|
|
43
|
+
touchBank: $ReadOnlyArray<
|
|
44
|
+
$ReadOnly<{|
|
|
45
|
+
touchActive: boolean,
|
|
46
|
+
startPageX: number,
|
|
47
|
+
startPageY: number,
|
|
48
|
+
startTimeStamp: number,
|
|
49
|
+
currentPageX: number,
|
|
50
|
+
currentPageY: number,
|
|
51
|
+
currentTimeStamp: number,
|
|
52
|
+
previousPageX: number,
|
|
53
|
+
previousPageY: number,
|
|
54
|
+
previousTimeStamp: number,
|
|
55
|
+
|}>,
|
|
56
|
+
>,
|
|
57
|
+
|}>,
|
|
58
|
+
|}>;
|
|
59
|
+
|
|
60
|
+
export type Layout = $ReadOnly<{|
|
|
61
|
+
x: number,
|
|
62
|
+
y: number,
|
|
63
|
+
width: number,
|
|
64
|
+
height: number,
|
|
65
|
+
|}>;
|
|
66
|
+
|
|
67
|
+
export type TextLayout = $ReadOnly<{|
|
|
68
|
+
...Layout,
|
|
69
|
+
ascender: number,
|
|
70
|
+
capHeight: number,
|
|
71
|
+
descender: number,
|
|
72
|
+
text: string,
|
|
73
|
+
xHeight: number,
|
|
74
|
+
|}>;
|
|
75
|
+
|
|
76
|
+
export type LayoutEvent = SyntheticEvent<
|
|
77
|
+
$ReadOnly<{|
|
|
78
|
+
layout: Layout,
|
|
79
|
+
|}>,
|
|
80
|
+
>;
|
|
81
|
+
|
|
82
|
+
export type TextLayoutEvent = SyntheticEvent<
|
|
83
|
+
$ReadOnly<{|
|
|
84
|
+
lines: Array<TextLayout>,
|
|
85
|
+
|}>,
|
|
86
|
+
>;
|
|
87
|
+
|
|
88
|
+
export type PressEvent = ResponderSyntheticEvent<
|
|
89
|
+
$ReadOnly<{|
|
|
90
|
+
altKey: ?boolean, // TODO(macOS)
|
|
91
|
+
button: ?number, // TODO(macOS)
|
|
92
|
+
changedTouches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
|
|
93
|
+
ctrlKey: ?boolean, // TODO(macOS)
|
|
94
|
+
force?: number,
|
|
95
|
+
identifier: number,
|
|
96
|
+
locationX: number,
|
|
97
|
+
locationY: number,
|
|
98
|
+
metaKey: ?boolean, // TODO(macOS)
|
|
99
|
+
pageX: number,
|
|
100
|
+
pageY: number,
|
|
101
|
+
shiftKey: ?boolean, // TODO(macOS)
|
|
102
|
+
target: ?number,
|
|
103
|
+
timestamp: number,
|
|
104
|
+
touches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
|
|
105
|
+
|}>,
|
|
106
|
+
>;
|
|
107
|
+
|
|
108
|
+
export type ScrollEvent = SyntheticEvent<
|
|
109
|
+
$ReadOnly<{|
|
|
110
|
+
contentInset: $ReadOnly<{|
|
|
111
|
+
bottom: number,
|
|
112
|
+
left: number,
|
|
113
|
+
right: number,
|
|
114
|
+
top: number,
|
|
115
|
+
|}>,
|
|
116
|
+
contentOffset: $ReadOnly<{|
|
|
117
|
+
y: number,
|
|
118
|
+
x: number,
|
|
119
|
+
|}>,
|
|
120
|
+
contentSize: $ReadOnly<{|
|
|
121
|
+
height: number,
|
|
122
|
+
width: number,
|
|
123
|
+
|}>,
|
|
124
|
+
layoutMeasurement: $ReadOnly<{|
|
|
125
|
+
height: number,
|
|
126
|
+
width: number,
|
|
127
|
+
|}>,
|
|
128
|
+
targetContentOffset?: $ReadOnly<{|
|
|
129
|
+
y: number,
|
|
130
|
+
x: number,
|
|
131
|
+
|}>,
|
|
132
|
+
velocity?: $ReadOnly<{|
|
|
133
|
+
y: number,
|
|
134
|
+
x: number,
|
|
135
|
+
|}>,
|
|
136
|
+
zoomScale?: number,
|
|
137
|
+
responderIgnoreScroll?: boolean,
|
|
138
|
+
key?: string, // TODO(macOS)
|
|
139
|
+
|}>,
|
|
140
|
+
>;
|
|
141
|
+
|
|
142
|
+
export type BlurEvent = SyntheticEvent<
|
|
143
|
+
$ReadOnly<{|
|
|
144
|
+
target: number,
|
|
145
|
+
|}>,
|
|
146
|
+
>;
|
|
147
|
+
|
|
148
|
+
export type FocusEvent = SyntheticEvent<
|
|
149
|
+
$ReadOnly<{|
|
|
150
|
+
target: number,
|
|
151
|
+
|}>,
|
|
152
|
+
>;
|
|
153
|
+
|
|
154
|
+
// [Windows Mouse events on Windows don't match up with the version in core
|
|
155
|
+
// introduced for react-native-web. Replace typings with our values to catch
|
|
156
|
+
// anything dependent on react-native-web specific values
|
|
157
|
+
export type MouseEvent = SyntheticEvent<
|
|
158
|
+
$ReadOnly<{|
|
|
159
|
+
target: number,
|
|
160
|
+
identifier: number,
|
|
161
|
+
pageX: number,
|
|
162
|
+
pageY: number,
|
|
163
|
+
locationX: number,
|
|
164
|
+
locationY: number,
|
|
165
|
+
timestamp: number,
|
|
166
|
+
pointerType: string,
|
|
167
|
+
force: number,
|
|
168
|
+
isLeftButton: boolean,
|
|
169
|
+
isRightButton: boolean,
|
|
170
|
+
isMiddleButton: boolean,
|
|
171
|
+
isBarrelButtonPressed: boolean,
|
|
172
|
+
isHorizontalScrollWheel: boolean,
|
|
173
|
+
isEraser: boolean,
|
|
174
|
+
shiftKey: boolean,
|
|
175
|
+
ctrlKey: boolean,
|
|
176
|
+
altKey: boolean,
|
|
177
|
+
|}>,
|
|
178
|
+
>;
|
|
179
|
+
// Windows]
|
|
180
|
+
|
|
181
|
+
// [Windows
|
|
182
|
+
export type KeyEvent = SyntheticEvent<
|
|
183
|
+
$ReadOnly<{|
|
|
184
|
+
altKey: boolean,
|
|
185
|
+
ctrlKey: boolean,
|
|
186
|
+
metaKey: boolean,
|
|
187
|
+
shiftKey: boolean,
|
|
188
|
+
key: string,
|
|
189
|
+
code: string,
|
|
190
|
+
eventPhase: number,
|
|
191
|
+
|}>,
|
|
192
|
+
>;
|
|
193
|
+
// Windows]
|
package/overrides.json
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
".flowconfig",
|
|
4
4
|
"src/**"
|
|
5
5
|
],
|
|
6
|
-
"baseVersion": "0.64.0",
|
|
7
6
|
"excludePatterns": [
|
|
8
7
|
"src/Libraries/Lists/__tests__/**"
|
|
9
8
|
],
|
|
9
|
+
"baseVersion": "0.64.0",
|
|
10
10
|
"overrides": [
|
|
11
11
|
{
|
|
12
12
|
"type": "derived",
|
|
@@ -33,12 +33,6 @@
|
|
|
33
33
|
"baseHash": "85eea8e9510b516c12e19fcfedc4553b990feb11",
|
|
34
34
|
"issue": 5807
|
|
35
35
|
},
|
|
36
|
-
{
|
|
37
|
-
"type": "patch",
|
|
38
|
-
"file": "src/Libraries/ReactNative/PaperUIManager.win32.js",
|
|
39
|
-
"baseFile": "Libraries/ReactNative/PaperUIManager.js",
|
|
40
|
-
"baseHash": "a72811cd104bb575d0ab2659343dc2ea11c6b674"
|
|
41
|
-
},
|
|
42
36
|
{
|
|
43
37
|
"type": "derived",
|
|
44
38
|
"file": "src/Libraries/Components/AccessibilityInfo/AccessibilityInfo.win32.js",
|
|
@@ -109,6 +103,13 @@
|
|
|
109
103
|
"baseHash": "0c6bf0751e053672123cbad30d67851ba0007af6",
|
|
110
104
|
"issue": 4378
|
|
111
105
|
},
|
|
106
|
+
{
|
|
107
|
+
"type": "patch",
|
|
108
|
+
"file": "src/Libraries/Components/Pressable/Pressable.win32.js",
|
|
109
|
+
"baseFile": "Libraries/Components/Pressable/Pressable.js",
|
|
110
|
+
"baseHash": "53bc7996e0fa83128b846a04d0bcec972a406133",
|
|
111
|
+
"issue": 6240
|
|
112
|
+
},
|
|
112
113
|
{
|
|
113
114
|
"type": "copy",
|
|
114
115
|
"file": "src/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
|
|
@@ -221,6 +222,13 @@
|
|
|
221
222
|
"baseHash": "147459dc889f04f2405db051445833f791726895",
|
|
222
223
|
"issue": 5843
|
|
223
224
|
},
|
|
225
|
+
{
|
|
226
|
+
"type": "patch",
|
|
227
|
+
"file": "src/Libraries/Components/View/ViewPropTypes.win32.js",
|
|
228
|
+
"baseFile": "Libraries/Components/View/ViewPropTypes.js",
|
|
229
|
+
"baseHash": "2b12228aa1ab0e12844996a99ff5d38fbff689a1",
|
|
230
|
+
"issue": 6240
|
|
231
|
+
},
|
|
224
232
|
{
|
|
225
233
|
"type": "platform",
|
|
226
234
|
"file": "src/Libraries/Components/View/ViewWin32.Props.ts"
|
|
@@ -342,6 +350,20 @@
|
|
|
342
350
|
"type": "platform",
|
|
343
351
|
"file": "src/Libraries/PersonaCoin/PersonaCoinTypes.ts"
|
|
344
352
|
},
|
|
353
|
+
{
|
|
354
|
+
"type": "patch",
|
|
355
|
+
"file": "src/Libraries/Pressability/HoverState.win32.js",
|
|
356
|
+
"baseFile": "Libraries/Pressability/HoverState.js",
|
|
357
|
+
"baseHash": "c78372cfc9f0b66109848beb20895e199c5431b8",
|
|
358
|
+
"issue": 6240
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"type": "patch",
|
|
362
|
+
"file": "src/Libraries/Pressability/Pressability.win32.js",
|
|
363
|
+
"baseFile": "Libraries/Pressability/Pressability.js",
|
|
364
|
+
"baseHash": "e1418d31343ca11ce165a87f82224ccc8d801052",
|
|
365
|
+
"issue": 6240
|
|
366
|
+
},
|
|
345
367
|
{
|
|
346
368
|
"type": "platform",
|
|
347
369
|
"file": "src/Libraries/QuirkSettings/CachingNativeQuirkSettings.js"
|
|
@@ -358,6 +380,12 @@
|
|
|
358
380
|
"type": "platform",
|
|
359
381
|
"file": "src/Libraries/QuirkSettings/QuirkSettings.js"
|
|
360
382
|
},
|
|
383
|
+
{
|
|
384
|
+
"type": "patch",
|
|
385
|
+
"file": "src/Libraries/ReactNative/PaperUIManager.win32.js",
|
|
386
|
+
"baseFile": "Libraries/ReactNative/PaperUIManager.js",
|
|
387
|
+
"baseHash": "a72811cd104bb575d0ab2659343dc2ea11c6b674"
|
|
388
|
+
},
|
|
361
389
|
{
|
|
362
390
|
"type": "derived",
|
|
363
391
|
"file": "src/Libraries/Settings/Settings.win32.js",
|
|
@@ -389,6 +417,13 @@
|
|
|
389
417
|
"baseHash": "d316f87ebc8899c3b99802f684b6a333970d737c",
|
|
390
418
|
"issue": 7080
|
|
391
419
|
},
|
|
420
|
+
{
|
|
421
|
+
"type": "patch",
|
|
422
|
+
"file": "src/Libraries/Types/CoreEventTypes.win32.js",
|
|
423
|
+
"baseFile": "Libraries/Types/CoreEventTypes.js",
|
|
424
|
+
"baseHash": "e8f8ce02645228b423fdda317e5d1d9e69b54e6d",
|
|
425
|
+
"issue": 6240
|
|
426
|
+
},
|
|
392
427
|
{
|
|
393
428
|
"type": "copy",
|
|
394
429
|
"file": "src/Libraries/Utilities/BackHandler.win32.js",
|
package/package.json
CHANGED
|
@@ -43,7 +43,7 @@ class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentSta
|
|
|
43
43
|
public render() {
|
|
44
44
|
return (
|
|
45
45
|
<ViewWin32>
|
|
46
|
-
<ViewWin32 ref={this._labeledBy} accessibilityLabel="separate label for test" />
|
|
46
|
+
<ViewWin32 ref={this._labeledBy} accessibilityLabel="separate label for test" accessibilityItemType="Comment" />
|
|
47
47
|
<ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
|
|
48
48
|
<TouchableHighlight onPress={this._onPress}>
|
|
49
49
|
<ViewWin32 accessibilityLabeledBy={this._labeledBy} style={styles.blackbox} />
|
|
@@ -54,6 +54,7 @@ class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentSta
|
|
|
54
54
|
style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
|
|
55
55
|
onFocus={this._onFocus}
|
|
56
56
|
onBlur={this._onBlur}
|
|
57
|
+
enableFocusRing={false}
|
|
57
58
|
>
|
|
58
59
|
<Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
|
|
59
60
|
</ViewWin32>
|
|
@@ -118,6 +119,7 @@ class KeyboardTestComponent extends React.Component<{}, IFocusableComponentState
|
|
|
118
119
|
onKeyDown={this._onKeyDown}
|
|
119
120
|
onFocus={this._onFocus}
|
|
120
121
|
onBlur={this._onBlur}
|
|
122
|
+
enableFocusRing={false}
|
|
121
123
|
>
|
|
122
124
|
<ViewWin32 style={styles.keyEnterVisualizer}>
|
|
123
125
|
<Text>OnKeyDown</Text>
|
|
@@ -244,6 +246,61 @@ const CursorExample: React.FunctionComponent = () => {
|
|
|
244
246
|
</ViewWin32>
|
|
245
247
|
);
|
|
246
248
|
}
|
|
249
|
+
class EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {
|
|
250
|
+
public constructor(props) {
|
|
251
|
+
super(props);
|
|
252
|
+
this.state = {
|
|
253
|
+
hasFocus: false,
|
|
254
|
+
};
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
public render() {
|
|
258
|
+
return (
|
|
259
|
+
<ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
|
|
260
|
+
<ViewWin32
|
|
261
|
+
style={{
|
|
262
|
+
backgroundColor: 'pink',
|
|
263
|
+
height: 100,
|
|
264
|
+
width: 100,
|
|
265
|
+
}}
|
|
266
|
+
enableFocusRing={true}
|
|
267
|
+
focusable
|
|
268
|
+
>
|
|
269
|
+
<Text>enableFocusRing set to true</Text>
|
|
270
|
+
</ViewWin32>
|
|
271
|
+
<ViewWin32
|
|
272
|
+
style={{
|
|
273
|
+
backgroundColor: 'pink',
|
|
274
|
+
height: 100,
|
|
275
|
+
width: 100,
|
|
276
|
+
}}
|
|
277
|
+
enableFocusRing={false}
|
|
278
|
+
focusable
|
|
279
|
+
onFocus={this._onFocus}
|
|
280
|
+
onBlur={this._onBlur}
|
|
281
|
+
>
|
|
282
|
+
<>
|
|
283
|
+
<Text>enableFocusRing set to false</Text>
|
|
284
|
+
<Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
|
|
285
|
+
</>
|
|
286
|
+
</ViewWin32>
|
|
287
|
+
</ViewWin32>
|
|
288
|
+
);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
private readonly _onFocus = () => {
|
|
292
|
+
this.setState({
|
|
293
|
+
hasFocus: true,
|
|
294
|
+
});
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
private readonly _onBlur = () => {
|
|
298
|
+
this.setState({
|
|
299
|
+
hasFocus: false,
|
|
300
|
+
});
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
|
|
247
304
|
|
|
248
305
|
export const title = 'ViewWin32';
|
|
249
306
|
export const displayName = 'ViewWin32 Example';
|
|
@@ -290,4 +347,11 @@ export const examples = [
|
|
|
290
347
|
return <CursorExample />;
|
|
291
348
|
},
|
|
292
349
|
},
|
|
350
|
+
{
|
|
351
|
+
title: 'EnableFocusRing example',
|
|
352
|
+
description: 'Displays focus visuals that are driven by native',
|
|
353
|
+
render(): JSX.Element {
|
|
354
|
+
return <EnableFocusRingExample />;
|
|
355
|
+
},
|
|
356
|
+
},
|
|
293
357
|
];
|
|
@@ -175,7 +175,13 @@ export type BasePropsWin32 = {
|
|
|
175
175
|
* This is mainly used for a Textbox with a Dropdown PeoplePicker-type list. This allows an
|
|
176
176
|
* accessibility tool to query those other providers for properties and listen to their events.
|
|
177
177
|
*/
|
|
178
|
-
accessibilityControls?: React.RefObject<any>;
|
|
178
|
+
accessibilityControls?: React.RefObject<any>;
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Identifies the ItemType property, which is a text string describing the type of the automation element.
|
|
182
|
+
* ItemType is used to obtain information about items in a list, tree view, or data grid. For example, an item in a file directory view might be a "Document File" or a "Folder".
|
|
183
|
+
*/
|
|
184
|
+
accessibilityItemType?: string;
|
|
179
185
|
};
|
|
180
186
|
|
|
181
187
|
export type ViewWin32OmitTypes = RN.ViewPropsAndroid &
|
|
@@ -211,6 +217,7 @@ export interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>,
|
|
|
211
217
|
accessibilitySetSize?: number;
|
|
212
218
|
animationClass?: string;
|
|
213
219
|
focusable?: boolean;
|
|
220
|
+
enableFocusRing?: boolean;
|
|
214
221
|
|
|
215
222
|
/**
|
|
216
223
|
* The onBlur event occurs when an element loses focus. The opposite of onBlur is onFocus. Note that in React
|