Add cursor prop to View and Touchables

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -116,6 +116,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
+  cursor: true,
   opacity: true,
 
   /**

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -273,6 +273,7 @@ const ReactNativeViewConfig: ViewConfig = {
       borderWidth: true,
       bottom: true,
       color: {process: require('../../StyleSheet/processColor')},
+      cursor: true,
       decomposedMatrix: true,
       direction: true,
       display: true,

Libraries/Components/View/ReactNativeViewViewConfigMacOS.js

@@ -37,8 +37,10 @@ const ReactNativeViewViewConfigMacOS = {
   validAttributes: {
     acceptsFirstMouse: true,
     accessibilityTraits: true,
+    cursor: true,
     draggedTypes: true,
     enableFocusRing: true,
+    nextKeyViewTag: true,
     onBlur: true,
     onClick: true,
     onDoubleClick: true,
@@ -48,12 +50,11 @@ const ReactNativeViewViewConfigMacOS = {
     onFocus: true,
     onKeyDown: true,
     onKeyUp: true,
-    validKeysDown: true,
-    validKeysUp: true,
-    nextKeyViewTag: true,
     onMouseEnter: true,
     onMouseLeave: true,
     tooltip: true,
+    validKeysDown: true,
+    validKeysUp: true,
   },
 };
 

Libraries/Components/View/ViewPropTypes.js

@@ -23,6 +23,7 @@ import type {
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {Node} from 'react';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {CursorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {
   AccessibilityRole,
   AccessibilityState,
@@ -633,4 +634,9 @@ export type ViewProps = $ReadOnly<{|
    * @platform macos
    */
   draggedTypes?: ?DraggedTypesType, // TODO(macOS GH#774)
+
+  /*
+   * Sets the type of mouse cursor, to show when the mouse pointer is over the view.
+   */
+  cursor?: ?CursorValue, // TODO(macOS GH#774)
 |}>;

Libraries/StyleSheet/StyleSheetTypes.js

@@ -16,6 +16,29 @@ import type {NativeColorValue} from './PlatformColorValueTypes';
 
 export type ____ColorValue_Internal = null | string | NativeColorValue;
 
+export type CursorValue = ?(
+  | 'alias'
+  | 'auto'
+  | 'col-resize'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'disappearing-item'
+  | 'e-resize'
+  | 'grab'
+  | 'grabbing'
+  | 'n-resize'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'pointer'
+  | 'row-resize'
+  | 's-resize'
+  | 'text'
+  | 'vertical-text'
+  | 'w-resize'
+);
+
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
 export type PointValue = {|
   x: number,
@@ -584,6 +607,7 @@ export type ____ViewStyle_Internal = $ReadOnly<{|
   borderTopWidth?: number | AnimatedNode,
   opacity?: number | AnimatedNode,
   elevation?: number,
+  cursor?: CursorValue,
 |}>;
 
 export type ____FontWeight_Internal =
@@ -638,6 +662,7 @@ export type ____TextStyle_Internal = $ReadOnly<{|
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
+  cursor?: CursorValue,
 |}>;
 
 export type ____ImageStyle_Internal = $ReadOnly<{|

Libraries/Text/RCTTextAttributes.m

@@ -109,27 +109,27 @@ - (NSParagraphStyle *)effectiveParagraphStyle
         alignment = NSTextAlignmentRight;
       }
     }
-    
+
     paragraphStyle.alignment = alignment;
     isParagraphStyleUsed = YES;
   }
-  
+
   if (_baseWritingDirection != NSWritingDirectionNatural) {
     paragraphStyle.baseWritingDirection = _baseWritingDirection;
     isParagraphStyleUsed = YES;
   }
-  
+
   if (!isnan(_lineHeight)) {
     CGFloat lineHeight = _lineHeight * self.effectiveFontSizeMultiplier;
     paragraphStyle.minimumLineHeight = lineHeight;
     paragraphStyle.maximumLineHeight = lineHeight;
     isParagraphStyleUsed = YES;
   }
-  
+
   if (isParagraphStyleUsed) {
     return [paragraphStyle copy];
   }
-  
+
   return nil;
 }
 

React/Base/macOS/RCTUIKit.m

@@ -423,6 +423,13 @@ - (void)setBackgroundColor:(NSColor *)backgroundColor
   }
 }
 
+// We purposely don't use RCTCursor for the parameter type here because it would introduce an import cycle:
+// RCTUIKit > RCTCursor > RCTConvert > RCTUIKit
+- (void)setCursor:(NSInteger)cursor
+{
+  // This method is required to be defined due to [RCTVirtualTextViewManager view] returning a RCTUIView.
+}
+
 @end
 
 // RCTUIScrollView

React/Views/RCTCursor.h

@@ -0,0 +1,37 @@
+/*
+ * 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 <React/RCTConvert.h>
+
+typedef NS_ENUM(NSInteger, RCTCursor) {
+  RCTCursorAuto,
+  RCTCursorArrow,
+  RCTCursorIBeam,
+  RCTCursorCrosshair,
+  RCTCursorClosedHand,
+  RCTCursorOpenHand,
+  RCTCursorPointingHand,
+  RCTCursorResizeLeft,
+  RCTCursorResizeRight,
+  RCTCursorResizeLeftRight,
+  RCTCursorResizeUp,
+  RCTCursorResizeDown,
+  RCTCursorResizeUpDown,
+  RCTCursorDisappearingItem,
+  RCTCursorIBeamCursorForVerticalLayout,
+  RCTCursorOperationNotAllowed,
+  RCTCursorDragLink,
+  RCTCursorDragCopy,
+  RCTCursorContextualMenu,
+};
+
+@interface RCTConvert (RCTCursor)
+
++ (RCTCursor)RCTCursor:(id)json;
++ (NSCursor *)NSCursor:(RCTCursor)rctCursor;
+
+@end

React/Views/RCTCursor.m

@@ -0,0 +1,103 @@
+/*
+ * 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 <React/RCTCursor.h>
+
+@implementation RCTConvert (RCTCursor)
+
+RCT_ENUM_CONVERTER(
+    RCTCursor,
+    (@{
+      @"alias" : @(RCTCursorDragLink),
+      @"auto" : @(RCTCursorAuto),
+      @"col-resize" : @(RCTCursorResizeLeftRight),
+      @"context-menu" : @(RCTCursorContextualMenu),
+      @"copy" : @(RCTCursorDragCopy),
+      @"crosshair" : @(RCTCursorCrosshair),
+      @"default" : @(RCTCursorArrow),
+      @"disappearing-item" : @(RCTCursorDisappearingItem),
+      @"e-resize" : @(RCTCursorResizeRight),
+      @"grab" : @(RCTCursorOpenHand),
+      @"grabbing" : @(RCTCursorClosedHand),
+      @"n-resize" : @(RCTCursorResizeUp),
+      @"no-drop" : @(RCTCursorOperationNotAllowed),
+      @"not-allowed" : @(RCTCursorOperationNotAllowed),
+      @"pointer" : @(RCTCursorPointingHand),
+      @"row-resize" : @(RCTCursorResizeUpDown),
+      @"s-resize" : @(RCTCursorResizeDown),
+      @"text" : @(RCTCursorIBeam),
+      @"vertical-text" : @(RCTCursorIBeamCursorForVerticalLayout),
+      @"w-resize" : @(RCTCursorResizeLeft),
+    }),
+    RCTCursorAuto,
+    integerValue)
+
++ (NSCursor *)NSCursor:(RCTCursor)rctCursor
+{
+  NSCursor *cursor;
+
+  switch (rctCursor) {
+    case RCTCursorArrow:
+      cursor = [NSCursor arrowCursor];
+      break;
+    case RCTCursorClosedHand:
+      cursor = [NSCursor closedHandCursor];
+      break;
+    case RCTCursorContextualMenu:
+      cursor = [NSCursor contextualMenuCursor];
+      break;
+    case RCTCursorCrosshair:
+      cursor = [NSCursor crosshairCursor];
+      break;
+    case RCTCursorDisappearingItem:
+      cursor = [NSCursor disappearingItemCursor];
+      break;
+    case RCTCursorDragCopy:
+      cursor = [NSCursor dragCopyCursor];
+      break;
+    case RCTCursorDragLink:
+      cursor = [NSCursor dragLinkCursor];
+      break;
+    case RCTCursorIBeam:
+      cursor = [NSCursor IBeamCursor];
+      break;
+    case RCTCursorIBeamCursorForVerticalLayout:
+      cursor = [NSCursor IBeamCursorForVerticalLayout];
+      break;
+    case RCTCursorOpenHand:
+      cursor = [NSCursor openHandCursor];
+      break;
+    case RCTCursorOperationNotAllowed:
+      cursor = [NSCursor operationNotAllowedCursor];
+      break;
+    case RCTCursorPointingHand:
+      cursor = [NSCursor pointingHandCursor];
+      break;
+    case RCTCursorResizeDown:
+      cursor = [NSCursor resizeDownCursor];
+      break;
+    case RCTCursorResizeLeft:
+      cursor = [NSCursor resizeLeftCursor];
+      break;
+    case RCTCursorResizeLeftRight:
+      cursor = [NSCursor resizeLeftRightCursor];
+      break;
+    case RCTCursorResizeRight:
+      cursor = [NSCursor resizeRightCursor];
+      break;
+    case RCTCursorResizeUp:
+      cursor = [NSCursor resizeUpCursor];
+      break;
+    case RCTCursorResizeUpDown:
+      cursor = [NSCursor resizeUpDownCursor];
+      break;
+  }
+
+  return cursor;
+}
+
+@end

React/Views/RCTView.h

@@ -12,6 +12,10 @@
 #import <React/RCTEventDispatcherProtocol.h> // TODO(OSS Candidate ISS#2710739)
 #import <React/RCTPointerEvents.h>
 
+#if TARGET_OS_OSX // TODO(macOS GH#774)
+#import <React/RCTCursor.h>
+#endif // TODO(macOS GH#774)
+
 #if !TARGET_OS_OSX // TODO(macOS GH#774)
 extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 #endif // TODO(macOS GH#774)
@@ -119,6 +123,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  * macOS Properties
  */
+@property (nonatomic, assign) RCTCursor cursor;
 
 @property (nonatomic, assign) CATransform3D transform3D;