Add new macOS View prop allowsVibrancy (#1889) (#1900)

* Add new macOS View prop `allowsVibrancy` * fix lint * small fixes * fix lint * no super
microsoft · Aug 9, 2023 · 8cf231a · 8cf231a
1 parent 2ec117d
commit 8cf231a
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 0 deletions.
diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
@@ -232,6 +232,16 @@ type Props = $ReadOnly<{|
    */
   enableFocusRing?: ?boolean,
 
+  /**
+   * Specifies whether the view ensures it is vibrant on top of other content.
+   * For more information, see the following apple documentation:
+   * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy
+   * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177
+   *
+   * @platform macos
+   */
+  allowsVibrancy?: ?boolean,
+
   /**
    * Specifies the Tooltip for the Pressable.
    * @platform macos

diff --git a/Libraries/Components/View/ViewPropTypes.d.ts b/Libraries/Components/View/ViewPropTypes.d.ts
@@ -173,6 +173,7 @@ export type DraggedTypesType = DraggedType | DraggedType[];
 
 export interface ViewPropsMacOS {
   acceptsFirstMouse?: boolean | undefined;
+  allowsVibrancy?: boolean | undefined;
   mouseDownCanMoveWindow?: boolean | undefined;
   enableFocusRing?: boolean | undefined;
   onMouseEnter?: ((event: MouseEvent) => void) | undefined;

diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -553,6 +553,16 @@ type MacOSViewProps = $ReadOnly<{|
    */
   mouseDownCanMoveWindow?: ?boolean,
 
+  /**
+   * Specifies whether the view ensures it is vibrant on top of other content.
+   * For more information, see the following apple documentation:
+   * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy
+   * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177
+   *
+   * @platform macos
+   */
+  allowsVibrancy?: ?boolean,
+
   /**
    * Specifies whether system focus ring should be drawn when the view has keyboard focus.
    *

diff --git a/Libraries/NativeComponent/BaseViewConfig.macos.js b/Libraries/NativeComponent/BaseViewConfig.macos.js
@@ -48,6 +48,7 @@ const directEventTypes = {
 const validAttributesForNonEventProps = {
   acceptsFirstMouse: true,
   accessibilityTraits: true,
+  allowsVibrancy: true,
   cursor: true,
   draggedTypes: true,
   enableFocusRing: true,

diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h
@@ -152,6 +152,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 
 @property (nonatomic, assign) CATransform3D transform3D;
 
+// `allowsVibrancy` is readonly on NSView, so let's create a new property to make it assignable
+// that we can set through JS and the getter for `allowsVibrancy` can read in RCTView.
+@property (nonatomic, assign) BOOL allowsVibrancyInternal;
+
 @property (nonatomic, copy) RCTDirectEventBlock onMouseEnter;
 @property (nonatomic, copy) RCTDirectEventBlock onMouseLeave;
 @property (nonatomic, copy) RCTDirectEventBlock onDragEnter;

diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m
@@ -1509,6 +1509,9 @@ - (void)setMouseDownCanMoveWindow:(BOOL)mouseDownCanMoveWindow{
 	_mouseDownCanMoveWindow = mouseDownCanMoveWindow;
 }
 
+- (BOOL)allowsVibrancy {
+  return _allowsVibrancyInternal;
+}
 
 - (NSDictionary*)locationInfoFromEvent:(NSEvent*)event
 {

diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m
@@ -420,6 +420,8 @@ - (RCTShadowView *)shadowView
 
 RCT_EXPORT_VIEW_PROPERTY(mouseDownCanMoveWindow, BOOL)
 
+RCT_REMAP_VIEW_PROPERTY(allowsVibrancy, allowsVibrancyInternal, BOOL)
+
 RCT_CUSTOM_VIEW_PROPERTY(focusable, BOOL, RCTView)
 {
   if ([view respondsToSelector:@selector(setFocusable:)]) {