profile
viewpoint
Tom Underhill tom-un Microsoft Redmond, WA Principle Software Engineer @ Microsoft

microsoft/react-native-macos 1479

A framework for building native macOS apps with React.

acoates-ms/react-native 0

A framework for building native apps with React.

graytmatterMS/react-native-macos 0

A framework for building native macOS apps with React.

tido64/react-native-webview 0

React Native Cross-Platform WebView

tom-un/async-storage 0

An asynchronous, persistent, key-value storage system for React Native.

tom-un/DefinitelyTyped 0

The repository for high quality TypeScript type definitions.

tom-un/fluentui-react-native 0

A react-native component library that implements the Fluent Design System.

tom-un/react-native 0

Microsoft fork of react-native

Pull request review commentmicrosoft/react-native-macos

macOS Keyboard Support

+/*+ * Copyright (c) Facebook, Inc. and its affiliates.+ *+ * This source code is licensed under the MIT license found in the+ * LICENSE file in the root directory of this source tree.+ */++#import "RCTViewKeyboardEvent.h"+#import <React/RCTAssert.h>++@implementation RCTViewKeyboardEvent+++ (instancetype)keyDownEventWithReactTag:(NSNumber *)reactTag characters:(NSString*)characters modifier:(NSUInteger)modifier {+  RCTViewKeyboardEvent *event = [[self alloc] initWithName:@"keyDown"

Should this be a constant? Isn't it duplicated in RCTViewManager? Or is that semantically different but happens to be the same value?

HeyImChris

comment created time in 2 hours

Pull request review commentmicrosoft/react-native-macos

macOS Keyboard Support

 - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender } #endif // ]TODO(macOS ISS#2323203) +#pragma mark - Keyboard Events++#if TARGET_OS_OSX // TODO: add iOS keyboard event handling+- (void)keyDown:(NSEvent *)event {+  if (!self.onKeyDown) {+    [super keyDown:event];+    return;+  }++  RCTViewKeyboardEvent *keyboardEvent = [RCTViewKeyboardEvent keyDownEventWithReactTag:self.reactTag characters:event.characters modifier:event.modifierFlags];+  [_eventDispatcher sendEvent:keyboardEvent];+}+

A common pattern with keyDown:/keyUp: events is for someone to override keyDown: check the type or keys pressed or other info on the event and optionally handle it, else pass the event up the responder chain by calling super. In this react implementation it looks like the presence of an onKeyDown is what determines whether the event gets handled, so how would someone implement a "conditional" key down handler, for example one that responds to arrow keys to move an object but lets other key events pass through to the responder chain to see if someone else handles it?

It looks like the current implementation would just drop all those events on the floor?

HeyImChris

comment created time in 2 hours

PR opened microsoft/react-native-macos

Reviewers
macOS Keyboard Support

Please select one of the following

  • [ ] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [X] I am making a fix / change for the macOS implementation of react-native
  • [X] I am making a change required for Microsoft usage of react-native

Summary

This adds macOS keyboarding support. This was also done in a way that it can be expanded to iOS hardware keyboards with a few minor additions in some followup work.

Changelog

[macOS][Added]- macOS keyboard support

Test Plan

In the RNTester I can tab focus over to Views and Buttons and print the key being pressed for both up and down presses.

+296 -31

0 comment

19 changed files

pr created time in a day

issue commentmicrosoft/react-native-macos

Building/Managing NSMenu with JS

Awesome! I'll put something up and make sure to give you credit

safaiyeh

comment created time in 2 days

PR opened microsoft/fluentui-react-native

Add readme for using svgs in fluent react native

Platforms Impacted

  • [ ] iOS
  • [ ] macOS
  • [ ] win32 (Office)
  • [ ] windows
  • [ ] android

Description of changes

(a summary of the changes made, often organized by file)

Verification

(how the change was tested, including both manual and automated tests)

Before After
Screenshot or description before this change Screenshot or description with this change

Pull request checklist

This PR has considered (when applicable):

  • [ ] Automated Tests
  • [x] Documentation and examples
  • [ ] Keyboard Accessibility
  • [ ] Voiceover
  • [ ] Internationalization and Right-to-left Layouts
+132 -0

0 comment

1 changed file

pr created time in 3 days

Pull request review commentmicrosoft/fluentui-react-native

Add Icon support for iOS

 const testTtf = require('./assets/Font Awesome 5 Free-Solid-900.otf'); import TestSvg from './assets/test.svg';  const icons: React.FunctionComponent<{}> = () => {-  const rasterProps: RasterImageIconProps = { src: testImage };+  const fontCustomFontProps: FontIconProps = {+    fontFamily: 'Font Awesome 5 Free',+    fontSrcFile: testTtf,+    codepoint: 0xf083,+    fontSize: 32,+  };++  const fontBuiltInProps = {+    fontFamily: 'Arial',+    codepoint: 0x2663,+    fontSize: 32,+  };    const svgProps: SvgIconProps = {     src: TestSvg,     viewBox: '0 0 500 500',   }; +  // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"+  // https://thenounproject.com/search/?q=d20&i=2453700+  const svgD20DataUriProps: SvgIconProps = {+    uri: 'data:image/svg;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5BcnRib2FyZCA2PC90aXRsZT48cGF0aCBkPSJNOTEuOSw2MS4zN2wtMTQtNDJhMiwyLDAsMCwwLTEuMzMtMS4yOWwtMzctMTFhMiwyLDAsMCwwLTIsLjUxbC0zMSwzMWEyLDIsMCwwLDAtLjQ4LDIuMDZsMTUsNDRBMiwyLDAsMCwwLDIyLjczLDg2bDM2LDVMNTksOTFhMiwyLDAsMCwwLDEuMzEtLjQ5bDMxLTI3QTIsMiwwLDAsMCw5MS45LDYxLjM3Wk0yNC40NCw4MiwzMS42LDQ3LjA1bDMzLjA4LDM0Wk03Ny4yNiwzMS42OSwzMi4zMyw0My42MWw3LjA2LTMxLjc1Wm0tNDcsMTIuMTJMMTEuMTYsMzkuNjYsMzYuODgsMTRaTTY2LjM4LDc5LjkyLDMyLjkxLDQ1LjUzLDc4LjM4LDMzLjQ2bC4xMi4zNS0xMiw0NlpNNzcsMjkuMjlsLTMwLjUyLTE2LDI4LDguMzFaTTEwLjY2LDQxLjZsMTkuMTYsNC4xN0wyMy4xNiw3OC4yNlpNNTguMzcsODYuODksMzUuNSw4My43MmwyNy4yMy0uNjJabTEwLjg1LTkuNDRMNzkuNjYsMzcuMjlsOCwyNC4wOFpNNDEuNjQsMzUuNWE3LDcsMCwwLDEsMS44NS0zLjgyLDE2LjkzLDE2LjkzLDAsMCwwLDEuODQtMi41OEEyLjQ0LDIuNDQsMCwwLDAsNDUuNCwyN2EyLjY3LDIuNjcsMCwwLDAtMS4xMy0xLjI4LDIuMzQsMi4zNCwwLDAsMC0xLjc0LS4yMWMtLjkuMi0xLjM4LjY0LTEuNDYsMS4zMWE0LjM1LDQuMzUsMCwwLDAsLjM2LDEuNzRsLTMsLjdhNiw2LDAsMCwxLS40Mi0zYy4yNi0xLjUxLDEuNC0yLjQ3LDMuNC0yLjkxYTYuNjIsNi42MiwwLDAsMSw0LjIxLjMxLDUuMjcsNS4yNywwLDAsMSwyLjczLDIuNzEsMy44MiwzLjgyLDAsMCwxLC4yMSwyLjg2LDcuNDYsNy40NiwwLDAsMS0xLjM1LDIuMjhsLS44NSwxLjA4cS0uODEsMS0xLjA4LDEuNDdBMi44MSwyLjgxLDAsMCwwLDQ1LDM1bDYuNjItMS43NCwxLjExLDIuNDVMNDIuMDksMzguNkE2Ljc1LDYuNzUsMCwwLDEsNDEuNjQsMzUuNVpNNTYuNTcsMjEuODFBMTMsMTMsMCwwLDEsNjAsMjYuMzZhMTAuNDgsMTAuNDgsMCwwLDEsMS40Nyw1LjI4Yy0uMSwxLjQtMS4wNiwyLjM2LTIuODcsMi44NWE1LjExLDUuMTEsMCwwLDEtNC43Ni0uODIsMTMsMTMsMCwwLDEtMy41My00LjkzLDkuNzgsOS43OCwwLDAsMS0xLjItNS4yNWMuMi0xLjMsMS4xOS0yLjE0LDMtMi41M0E1LjE4LDUuMTgsMCwwLDEsNTYuNTcsMjEuODFabS0xLjI2LDkuNjZhMi4xMywyLjEzLDAsMCwwLDIuMjUuODEsMS4yOSwxLjI5LDAsMCwwLDEtMS42NiwxMy43MiwxMy43MiwwLDAsMC0xLjMzLTMuNTcsMTUsMTUsMCwwLDAtMi4wNi0zLjM0QTIuMDksMi4wOSwwLDAsMCw1My4wNywyMywxLjI0LDEuMjQsMCwwLDAsNTIsMjQuNDYsMTIuNjcsMTIuNjcsMCwwLDAsNTMuMjMsMjgsMTUuMzMsMTUuMzMsMCwwLDAsNTUuMzEsMzEuNDdaIj48L3BhdGg+PC9zdmc+',+    viewBox: '25 10 50 50'+  };++  // This one doesn't get tinted because it doesn't use currentColor   const svgUriProps: SvgIconProps = {     uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',-    viewBox: '0 0 100 100',+    viewBox: '0 0 1000 1000'   }; -  const fontProps: FontIconProps = {-    fontFamily: `Font Awesome 5 Free`,-    fontSrcFile: testTtf,-    codepoint: 0xf083,-    fontSize: 32,-  };+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };++  // Chess icon by Justicon, licensed under CC BY+  // https://thenounproject.com/search/?q=chess&i=2960386+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };++  const showFontIcons = true;

Maybe just add a comment explaining that it's togglable for debugging? Might be a little confusing to others without more context

amgleitman

comment created time in 3 days

Pull request review commentmicrosoft/fluentui-react-native

Add Icon support for iOS

 function renderRasterImage(iconProps: IconProps) { }  function fontFamilyFromFontSrcFile(fontSrcFile: string, fontFamily: string): string {-  const asset = assetRegistry.getAssetByID(fontSrcFile);-  return `${fontFamily}#${asset.httpServerLocation}/${asset.name}.${asset.type}`;+  if (Platform.OS == 'windows') {

Can you comment that in code? Sometimes that's not always obvious to someone else looking at this once it gets checked in

amgleitman

comment created time in 3 days

issue commentmicrosoft/react-native-macos

Support react-native-document-picker

Support for new platforms is a responsibility of the module, not the platform. I would suggest creating an issue on that repo or implementing it yourself.

shahthepro

comment created time in 4 days

issue commentmicrosoft/react-native-macos

Building/Managing NSMenu with JS

I don't have the bandwidth for that anytime soon, but feel free to go for it based off the code above if it helps. One thing to be careful about is that with the new RN Fabric architecture findNodeHandle is going away, so it might make more sense to build this as an actual ViewManager/Component like the Windows PR here: https://github.com/microsoft/react-native-windows/pull/2738

safaiyeh

comment created time in 7 days

Pull request review commentmicrosoft/fluentui-react-native

Add Icon support for iOS

 function renderRasterImage(iconProps: IconProps) { }  function fontFamilyFromFontSrcFile(fontSrcFile: string, fontFamily: string): string {-  const asset = assetRegistry.getAssetByID(fontSrcFile);-  return `${fontFamily}#${asset.httpServerLocation}/${asset.name}.${asset.type}`;+  if (Platform.OS == 'windows') {

Font icon support should be available; I've just been having trouble getting the font bundled in. That's why I added an Arial-based font icon to the test page.

amgleitman

comment created time in 7 days

Pull request review commentmicrosoft/fluentui-react-native

Add Icon support for iOS

 const testTtf = require('./assets/Font Awesome 5 Free-Solid-900.otf'); import TestSvg from './assets/test.svg';  const icons: React.FunctionComponent<{}> = () => {-  const rasterProps: RasterImageIconProps = { src: testImage };+  const fontCustomFontProps: FontIconProps = {+    fontFamily: 'Font Awesome 5 Free',+    fontSrcFile: testTtf,+    codepoint: 0xf083,+    fontSize: 32,+  };++  const fontBuiltInProps = {+    fontFamily: 'Arial',+    codepoint: 0x2663,+    fontSize: 32,+  };    const svgProps: SvgIconProps = {     src: TestSvg,     viewBox: '0 0 500 500',   }; +  // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"+  // https://thenounproject.com/search/?q=d20&i=2453700+  const svgD20DataUriProps: SvgIconProps = {+    uri: 'data:image/svg;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5BcnRib2FyZCA2PC90aXRsZT48cGF0aCBkPSJNOTEuOSw2MS4zN2wtMTQtNDJhMiwyLDAsMCwwLTEuMzMtMS4yOWwtMzctMTFhMiwyLDAsMCwwLTIsLjUxbC0zMSwzMWEyLDIsMCwwLDAtLjQ4LDIuMDZsMTUsNDRBMiwyLDAsMCwwLDIyLjczLDg2bDM2LDVMNTksOTFhMiwyLDAsMCwwLDEuMzEtLjQ5bDMxLTI3QTIsMiwwLDAsMCw5MS45LDYxLjM3Wk0yNC40NCw4MiwzMS42LDQ3LjA1bDMzLjA4LDM0Wk03Ny4yNiwzMS42OSwzMi4zMyw0My42MWw3LjA2LTMxLjc1Wm0tNDcsMTIuMTJMMTEuMTYsMzkuNjYsMzYuODgsMTRaTTY2LjM4LDc5LjkyLDMyLjkxLDQ1LjUzLDc4LjM4LDMzLjQ2bC4xMi4zNS0xMiw0NlpNNzcsMjkuMjlsLTMwLjUyLTE2LDI4LDguMzFaTTEwLjY2LDQxLjZsMTkuMTYsNC4xN0wyMy4xNiw3OC4yNlpNNTguMzcsODYuODksMzUuNSw4My43MmwyNy4yMy0uNjJabTEwLjg1LTkuNDRMNzkuNjYsMzcuMjlsOCwyNC4wOFpNNDEuNjQsMzUuNWE3LDcsMCwwLDEsMS44NS0zLjgyLDE2LjkzLDE2LjkzLDAsMCwwLDEuODQtMi41OEEyLjQ0LDIuNDQsMCwwLDAsNDUuNCwyN2EyLjY3LDIuNjcsMCwwLDAtMS4xMy0xLjI4LDIuMzQsMi4zNCwwLDAsMC0xLjc0LS4yMWMtLjkuMi0xLjM4LjY0LTEuNDYsMS4zMWE0LjM1LDQuMzUsMCwwLDAsLjM2LDEuNzRsLTMsLjdhNiw2LDAsMCwxLS40Mi0zYy4yNi0xLjUxLDEuNC0yLjQ3LDMuNC0yLjkxYTYuNjIsNi42MiwwLDAsMSw0LjIxLjMxLDUuMjcsNS4yNywwLDAsMSwyLjczLDIuNzEsMy44MiwzLjgyLDAsMCwxLC4yMSwyLjg2LDcuNDYsNy40NiwwLDAsMS0xLjM1LDIuMjhsLS44NSwxLjA4cS0uODEsMS0xLjA4LDEuNDdBMi44MSwyLjgxLDAsMCwwLDQ1LDM1bDYuNjItMS43NCwxLjExLDIuNDVMNDIuMDksMzguNkE2Ljc1LDYuNzUsMCwwLDEsNDEuNjQsMzUuNVpNNTYuNTcsMjEuODFBMTMsMTMsMCwwLDEsNjAsMjYuMzZhMTAuNDgsMTAuNDgsMCwwLDEsMS40Nyw1LjI4Yy0uMSwxLjQtMS4wNiwyLjM2LTIuODcsMi44NWE1LjExLDUuMTEsMCwwLDEtNC43Ni0uODIsMTMsMTMsMCwwLDEtMy41My00LjkzLDkuNzgsOS43OCwwLDAsMS0xLjItNS4yNWMuMi0xLjMsMS4xOS0yLjE0LDMtMi41M0E1LjE4LDUuMTgsMCwwLDEsNTYuNTcsMjEuODFabS0xLjI2LDkuNjZhMi4xMywyLjEzLDAsMCwwLDIuMjUuODEsMS4yOSwxLjI5LDAsMCwwLDEtMS42NiwxMy43MiwxMy43MiwwLDAsMC0xLjMzLTMuNTcsMTUsMTUsMCwwLDAtMi4wNi0zLjM0QTIuMDksMi4wOSwwLDAsMCw1My4wNywyMywxLjI0LDEuMjQsMCwwLDAsNTIsMjQuNDYsMTIuNjcsMTIuNjcsMCwwLDAsNTMuMjMsMjgsMTUuMzMsMTUuMzMsMCwwLDAsNTUuMzEsMzEuNDdaIj48L3BhdGg+PC9zdmc+',+    viewBox: '25 10 50 50'+  };++  // This one doesn't get tinted because it doesn't use currentColor   const svgUriProps: SvgIconProps = {     uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',-    viewBox: '0 0 100 100',+    viewBox: '0 0 1000 1000'   }; -  const fontProps: FontIconProps = {-    fontFamily: `Font Awesome 5 Free`,-    fontSrcFile: testTtf,-    codepoint: 0xf083,-    fontSize: 32,-  };+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };++  // Chess icon by Justicon, licensed under CC BY+  // https://thenounproject.com/search/?q=chess&i=2960386+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };++  const showFontIcons = true;

They can't be toggled within the app, only in source code. But they can be useful for developers working on this part of the code. That being said, I wouldn't have a problem with reverting these.

amgleitman

comment created time in 7 days

Pull request review commentmicrosoft/fluentui-react-native

Add Icon support for iOS

 const testTtf = require('./assets/Font Awesome 5 Free-Solid-900.otf'); import TestSvg from './assets/test.svg';  const icons: React.FunctionComponent<{}> = () => {-  const rasterProps: RasterImageIconProps = { src: testImage };+  const fontCustomFontProps: FontIconProps = {+    fontFamily: 'Font Awesome 5 Free',

It's described here: https://www.w3schools.com/icons/fontawesome5_intro.asp

amgleitman

comment created time in 7 days

issue commentmicrosoft/react-native-macos

Building/Managing NSMenu with JS

Hey @lyahdav this is amazing. I also saw ur windows one. Would you want to collaborate on making this an OSS package?

safaiyeh

comment created time in 8 days

issue commentmicrosoft/react-native-macos

Building/Managing NSMenu with JS

In case it's helpful here's my implementation of a native module for this:

  • ContextMenuNativeModule-macOS.h: https://gist.github.com/lyahdav/1afb5e98562954f971793c12b9ba5e1f
  • ContextMenuNativeModule-macOS.mm: https://gist.github.com/lyahdav/0ee567426d9001cd812b6b1dda05a700
  • ContextMenuNativeModule.tsx: https://gist.github.com/lyahdav/8c9064aadc2a5d868097ca27a1c6207b

For API look at the TS types in showNativeContextMenu in ContextMenuNativeModule.tsx.

safaiyeh

comment created time in 8 days

delete branch microsoft/react-native-macos

delete branch : publish-temp-1605816142679

delete time in 8 days

push eventmicrosoft/react-native-macos

React-Native Bot

commit sha 2794a7eccae68bbc2ae7c39557d9e22b6f557359

Applying package update to 0.63.1 ***NO_CI***

view details

push time in 8 days

create barnchmicrosoft/react-native-macos

branch : publish-temp-1605816142679

created branch time in 8 days

created tagmicrosoft/react-native-macos

tagv0.63.1

A framework for building native macOS apps with React.

created time in 8 days

create barnchmicrosoft/react-native-macos

branch : 0.63-stable

created branch time in 8 days

push eventmicrosoft/react-native-macos

Scott Kyle

commit sha 6963c6edefc7a3456b2ed9a0d83b891a0cf5eaf2

Support acceptsFirstMouse prop (#531) (#653) Presently in RN macOS, clickable views (buttons, etc.) require two clicks when that window is not in the foreground. This counter to the typical behavior on macOS where controls will default to accepting the mouse event even when in the background (and simultaneously bring to the foreground unless the command key is held).

view details

push time in 8 days

PR merged microsoft/react-native-macos

Support acceptsFirstMouse prop (#531)

Please select one of the following

  • [ ] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [x] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

Presently in RN macOS, clickable views (buttons, etc.) require two clicks when that window is not in the foreground. This counter to the typical behavior on macOS where controls will default to accepting the mouse event even when in the background (and simultaneously bring to the foreground unless the command key is held).

Fixes #531

Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog -->

[macOS] [Added] - acceptsFirstMouse prop on View, Pressable, and Touchable* components

Test Plan

Confirmed in RNTester that we can successfully recognize clicks on buttons while the window is in the background, and this simultaneously brings the window to the foreground.

Microsoft Reviewers: Open in CodeFlow
+88 -3

4 comments

15 changed files

appden

pr closed time in 8 days

issue closedmicrosoft/react-native-macos

Proposal: Add acceptsFirstMouse prop to View and Touchables

Proposal: Add acceptsFirstMouse prop to View and Touchables (future: Pressable)

Presently in RN macOS, clickable views (buttons, etc.) require two clicks when that window is not in the foreground. This counter to the typical behavior on macOS where controls will default to accepting the mouse event even when in the background (and simultaneously bring to the foreground unless the command key is held).

Summary

This prop would default to false for View, but default to true on Touchable* and the future Pressable components. The NSView class has an acceptsFirstMouse: to control this behavior.

Note: In Electron, the BrowserWindow API include an acceptFirstMouse option to control this behavior for the entire window, which is better than nothing but not granular enough for a native-feeling experience on the Mac.

Motivation

This is long-standing Mac behavior, formerly described in the Apple Human Interface Guidelines (HIG) as "click-through". It should be controllable via this acceptsFirstMouse prop because there are legitimate reasons to disable it. From the old HIG:

Avoid providing click-through for an item or action whose result might be dangerous or undesirable. Specifically, avoid enabling click-through for an item that:

  • Performs a potentially harmful action that users can’t cancel (for example, the Delete button in Mail)
  • Performs an action that is difficult or impossible to cancel (such as the Send button in Mail)
  • Dismisses a dialog without telling the user what action was taken (for example, the Save button in a Save dialog that overwrites an existing file and automatically dismisses the dialog)
  • Removes the user from the current context (for example, selecting a new item in a Finder column that changes the target of the Finder window)

Open Questions

I'm not married the acceptsFirstMouse name. Electron dropped the "s", which is fine, and really anything else descriptive is fine. I don't think it should use the "click-through" terminology however, because that would be fairly confusing.

In React Native Windows, this "click-through" behavior is already present by default, thus matching the behavior of most controls on Windows. The only exception I've found on Windows are menus/toolbars, such as those in File Explorer, Office, and MS Paint. Those don't accept clicks while the window is in the background, and therefore it would reasonable to explore adding this API to React Native Windows for parity and to give developers a similar level of control.

closed time in 8 days

appden

pull request commentmicrosoft/react-native-macos

Support acceptsFirstMouse prop (#531)

:shipit:

appden

comment created time in 8 days

Pull request review commentmicrosoft/react-native-macos

Support acceptsFirstMouse prop (#531)

 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect'; import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';-import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';+import type {LayoutEvent, MouseEvent, PressEvent} from '../../Types/CoreEventTypes'; // TODO(macOS ISS#2323203)

Rebased and fixed my silly lint error.

appden

comment created time in 8 days

push eventmicrosoft/react-native-macos

Scott Kyle

commit sha 881c7d27e353c7e46c6d9ca5ae49914fe20ddc36

Use border radius when drawing focus rings (#652)

view details

push time in 8 days

PR merged microsoft/react-native-macos

Use border radius when drawing focus rings

Please select one of the following

  • [ ] I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • [ ] I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • [x] I am making a fix / change for the macOS implementation of react-native
  • [ ] I am making a change required for Microsoft usage of react-native

Summary

For rounded (or partially rounded) buttons, the focus ring would still draw being square. This change allows for focus rings to respect the corner radii.

Changelog

[macOS] [Fixed] - Use border radius when drawing focus rings

Test Plan

Focus rings draw circular now with border radius. Also confirmed square focus rings for views without border radius set.

Screen Shot 2020-11-15 at 6 02 54 PM

Microsoft Reviewers: Open in CodeFlow
+7 -1

4 comments

1 changed file

appden

pr closed time in 8 days

pull request commentmicrosoft/react-native-macos

Support acceptsFirstMouse prop (#531)

<!--[AutoMerge]--> Hello @alloy!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.
appden

comment created time in 8 days

pull request commentmicrosoft/react-native-macos

Support acceptsFirstMouse prop (#531)

I just merged master again and resolved new conflicts, letting CI run now.

appden

comment created time in 8 days

Pull request review commentmicrosoft/react-native-macos

Support acceptsFirstMouse prop (#531)

 - (instancetype)initWithCoder:(NSCoder *)coder   return RCTUIViewCommonInit([super initWithCoder:coder]); } +- (BOOL)acceptsFirstMouse:(NSEvent *)event+{+  if (self.acceptsFirstMouse || [super acceptsFirstMouse:event]) {+    return YES;+  }++  // If any RCTUIView view above has acceptsFirstMouse set, then return YES here.+  NSView *view = self;+  while ((view = view.superview)) {

Ok, so I take it this is resolved then?

appden

comment created time in 8 days

more