Port windows fork of Pressable to win32 #9132

Saadnajmi · 2021-11-14T17:28:50Z

Description

Type of Change

New feature (non-breaking change which adds functionality)

Why

Copy the windows port of Pressable to win32. This port adds extra desktop functionality like keyboard focus state and mouse hover state support. This is primarily so that FluentUI React Native can use Pressable downstream, and remove it's own copy of Pressability (microsoft/fluentui-react-native#743).

What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.

I simply wholesale copied Pressable.windows.js to Pressable.win32.js, along with the PressableExample page in rn-tester. I also added two lines to the test to test that onHoverIn/onHoverOut are indeed registered.

Screenshots

Testing

Added test pages for Pressable, which is also a copy of the windows one.

Microsoft Reviewers: Open in CodeFlow

NickGerleman

Consistency between platforms is 👍

NickGerleman · 2021-11-15T09:11:07Z

Running "yarn lint:fix" should resolve CI errors. If you plan to do long term RNW dev, the eslint extension for VSCode is a must.

PPatBoyd · 2021-11-16T01:10:27Z

how will we stay consistent with changes? Can we instead make a common file that's exported from the platform-specific files?

Saadnajmi · 2021-12-11T19:14:54Z

how will we stay consistent with changes? Can we instead make a common file that's exported from the platform-specific files?

For staying in sync with upstream, it looks like react-native-platform-override should take care of it. Notice the overrides.json changes, and the hashes.

For instead making a common file that's exported, I haven't seen that done by other win32 components here. My guess is it's easier to keep track of overrides that way, and theoretically anytime windows needs to make a change bc of an upstream change, the same tooling should tell us that win32 needs a change.

Saadnajmi · 2021-12-11T19:16:54Z

Running "yarn lint:fix" should resolve CI errors. If you plan to do long term RNW dev, the eslint extension for VSCode is a must.

(Somehow missed this message till now)

Thanks! I'll update with both of those things.
I also had issues actually running the test app, so I'll probably reach out for more specific questions on what should be overridden / how to run the test app properly when I come back to this change.

… pressable-win32

Saadnajmi · 2021-12-12T17:58:47Z

EDIT: Looks like I have most of my issues with this PR fixed, but I still am not getting hover events :( . I'm not sure how to attach a debugger in this repo properly or if I need a devmain enlisted machine for things to behave properly. I understand the windows team is out for the holidays, so I'll pick this up and figure out who to bug to answer my questions when people are more available :D

Saadnajmi · 2021-12-17T19:33:42Z

Huzzah! Hover events :D

Saadnajmi · 2022-01-07T18:14:01Z

New year, new ping! Would someone help me understand why the lint check is failing? The types it's complaining about definitely exist..

acoates-ms · 2022-01-07T18:17:15Z

/azp run

azure-pipelines · 2022-01-07T18:17:36Z

Azure Pipelines successfully started running 1 pipeline(s).

acoates-ms · 2022-01-07T18:38:32Z

Looks like its complaining about some of the Key events not being on view? That type exists on the windows fork of CoreEventTypes, but not any win32 fork of that file.

Saadnajmi · 2022-01-07T18:42:21Z

Looks like its complaining about some of the Key events not being on view? That type exists on the windows fork of CoreEventTypes, but not any win32 fork of that file.

Right, I did fork the CoreEvent types to win32 as well with my last commit (which includes KeyEvent but no dice.

Am I correct to assume that react-native-win32 doesn't also inherit overrides from react-native-windows, so any overrides from Core you want to do would need to be done twice?

acoates-ms · 2022-01-07T18:47:17Z

Yes, any overrides need to be done for win32 and windows separately. Did you add the Key types to view.win32.js too? Just adding the types to CoreEventTypes wouldn't do anything unless they were added to view.

Saadnajmi · 2022-01-07T18:56:02Z

Yes, any overrides need to be done for win32 and windows separately. Did you add the Key types to view.win32.js too? Just adding the types to CoreEventTypes wouldn't do anything unless they were added to view.

Ah, that's probably it. Looking at it, I probably want to use ViewWin32.tsx not view.win32.js . The former already includes types for key events, and I'm not sure what the purpose of the latter is. Thanks, I'll try that!

EDIT: Actually, I'll copy the overrides from view.windows.js, since this is all Flow. I'm still not quite sure what the difference between View vs ViewWindows/ViewWin32 is, but I'll assume it's just for typing. https://github.com/microsoft/react-native-windows/blob/main/vnext/src/Libraries/Components/View/View.windows.js

… pressable-win32

Saadnajmi · 2022-01-07T22:47:40Z

Yes, any overrides need to be done for win32 and windows separately. Did you add the Key types to view.win32.js too? Just adding the types to CoreEventTypes wouldn't do anything unless they were added to view.

Ah, that's probably it. Looking at it, I probably want to use ViewWin32.tsx not view.win32.js . The former already includes types for key events, and I'm not sure what the purpose of the latter is. Thanks, I'll try that!

EDIT: Actually, I'll copy the overrides from view.windows.js, since this is all Flow. I'm still not quite sure what the difference between View vs ViewWindows/ViewWin32 is, but I'll assume it's just for typing. https://github.com/microsoft/react-native-windows/blob/main/vnext/src/Libraries/Components/View/View.windows.js

I added key types to View.win32.js, and also forked ViewPropTypes.win32.js, but I'm still seeing the same errors. I'm not sure why flow doesn't think the types exists. I think I've overridden everything properly..

NickGerleman · 2022-01-07T23:20:18Z

@Saadnajmi looking at the error, I think the Flow type checker might be using the non .win32 variants of the files. In the .flowconfig file, there is a section where we tell the type-checker to ignore certain shared files, to force it to resolve the forked version. I think you may need to add the shared files you forked to that list.

Saadnajmi · 2022-01-07T23:55:36Z

@Saadnajmi looking at the error, I think the Flow type checker might be using the non .win32 variants of the files. In the .flowconfig file, there is a section where we tell the type-checker to ignore certain shared files, to force it to resolve the forked version. I think you may need to add the shared files you forked to that list.

Looks like that was it! Thank you =)

* Port windows Pressable override to win32 * Change files * Add override * lint fix * More overrides, more windows comments * Change files * fix overrides * Add win32 to HoverState * Overrride types maybe? * Add keyboarding types to View.win32.js * override ViewPropTypes.win32.js * fix flowconfig

* Port windows fork of Pressable to win32 (#9132) * Port windows Pressable override to win32 * Change files * Add override * lint fix * More overrides, more windows comments * Change files * fix overrides * Add win32 to HoverState * Overrride types maybe? * Add keyboarding types to View.win32.js * override ViewPropTypes.win32.js * fix flowconfig * Update overrides * yarn lint:fix

* Port windows fork of Pressable to win32 (#9132) * Port windows Pressable override to win32 * Change files * Add override * lint fix * More overrides, more windows comments * Change files * fix overrides * Add win32 to HoverState * Overrride types maybe? * Add keyboarding types to View.win32.js * override ViewPropTypes.win32.js * fix flowconfig * update overrides * fix changefiles * yarn lift:fix * update overrides * fix lint error

* Port windows fork of Pressable to win32 (#9132) * Port windows Pressable override to win32 * Change files * Add override * lint fix * More overrides, more windows comments * Change files * fix overrides * Add win32 to HoverState * Overrride types maybe? * Add keyboarding types to View.win32.js * override ViewPropTypes.win32.js * fix flowconfig * redo overrides from windows fork * yarn lint:fix * update overrides * fix lint issue

* Port windows fork of Pressable to win32 (#9132) * Port windows Pressable override to win32 * Change files * Add override * lint fix * More overrides, more windows comments * Change files * fix overrides * Add win32 to HoverState * Overrride types maybe? * Add keyboarding types to View.win32.js * override ViewPropTypes.win32.js * fix flowconfig * redo overrides from windows fork * yarn lint:fix + some lines I forgot to copy * move to other path * validate-overrides * yarn lint:fix again * forgot some props * move one more file * lint:fix once more

Saadnajmi added 2 commits November 14, 2021 11:16

Port windows Pressable override to win32

e533fef

Change files

ba36d97

Saadnajmi requested review from a team as code owners November 14, 2021 17:28

Add override

273a533

Saadnajmi marked this pull request as draft November 14, 2021 18:42

NickGerleman approved these changes Nov 15, 2021

View reviewed changes

Saadnajmi added 2 commits December 11, 2021 14:38

Merge branch 'main' of github.com:microsoft/react-native-windows into…

8ee8544

… pressable-win32

lint fix

b7770a6

Saadnajmi added 4 commits December 12, 2021 19:21

More overrides, more windows comments

f826334

Change files

83fb9cf

fix overrides

eccec19

Add win32 to HoverState

2f2a8ec

Overrride types maybe?

3e71aee

Saadnajmi marked this pull request as ready for review December 22, 2021 04:25

Saadnajmi added 2 commits January 7, 2022 13:35

Add keyboarding types to View.win32.js

1ca839b

override ViewPropTypes.win32.js

7b69f73

Merge branch 'main' of github.com:microsoft/react-native-windows into…

f7ee708

… pressable-win32

fix flowconfig

9d8ff82

Saadnajmi merged commit 840a5ac into microsoft:main Jan 8, 2022

Saadnajmi deleted the pressable-win32 branch January 8, 2022 01:41

Saadnajmi added Request Backport to 0.64 labels Jan 8, 2022

This was referenced Jan 8, 2022

[0.67] Port windows fork of Pressable to win32 #9347

Merged

[0.66] Port windows fork of Pressable to win32 #9348

Merged

[0.65] Port windows fork of Pressable to win32 #9349

Merged

[0.64] Port windows fork of Pressable to win32 #9350

Merged

Saadnajmi restored the pressable-win32 branch January 8, 2022 04:02

Saadnajmi deleted the pressable-win32 branch January 8, 2022 04:03

Port windows fork of Pressable to win32 #9132

Port windows fork of Pressable to win32 #9132

Uh oh!

Conversation

Saadnajmi commented Nov 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

Microsoft Reviewers: Open in CodeFlow

Uh oh!

NickGerleman left a comment

Choose a reason for hiding this comment

Uh oh!

NickGerleman commented Nov 15, 2021

Uh oh!

PPatBoyd commented Nov 16, 2021

Uh oh!

Saadnajmi commented Dec 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Saadnajmi commented Dec 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Saadnajmi commented Dec 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Saadnajmi commented Dec 17, 2021

Uh oh!

Saadnajmi commented Jan 7, 2022

Uh oh!

acoates-ms commented Jan 7, 2022

Uh oh!

azure-pipelines bot commented Jan 7, 2022

Uh oh!

acoates-ms commented Jan 7, 2022

Uh oh!

Saadnajmi commented Jan 7, 2022

Uh oh!

acoates-ms commented Jan 7, 2022

Uh oh!

Saadnajmi commented Jan 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Saadnajmi commented Jan 7, 2022

Uh oh!

NickGerleman commented Jan 7, 2022

Uh oh!

Saadnajmi commented Jan 7, 2022

Uh oh!

Uh oh!

Saadnajmi commented Nov 14, 2021 •

edited

Loading

Saadnajmi commented Dec 11, 2021 •

edited

Loading

Saadnajmi commented Dec 11, 2021 •

edited

Loading

Saadnajmi commented Dec 12, 2021 •

edited

Loading

Saadnajmi commented Jan 7, 2022 •

edited

Loading