feat(Chat): Allow to disable actions menu positioning (#2126)

* allow to disable actions menu positioning * changelog
microsoft · Nov 26, 2019 · 817659a · 817659a
1 parent cfdbdd1
commit 817659a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Trigger `whatInput` cleanup when last `Provider` with custom `target` gets removed @silviuavram ([#2127](https://github.com/microsoft/fluent-ui-react/pull/2127))
 
+### Performance
+- Allow suppression of action menu positioning in `ChatMessage` @jurokapsiar ([#2126](https://github.com/microsoft/fluent-ui-react/pull/2126))
+
 <!--------------------------------[ v0.40.3 ]------------------------------- -->
 ## [v0.40.3](https://github.com/stardust-ui/react/tree/v0.40.3) (2019-11-08)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.40.2...v0.40.3)

diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx
@@ -100,6 +100,9 @@ export interface ChatMessageProps
    */
   onMouseEnter?: ComponentEventHandler<ChatMessageProps>
 
+  /** Allows suppression of action menu positioning for performance reasons */
+  positionActionMenu?: boolean
+
   /** Reaction group applied to the message. */
   reactionGroup?: ShorthandValue<ReactionGroupProps> | ShorthandCollection<ReactionProps>
 
@@ -140,6 +143,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
     onMouseEnter: PropTypes.func,
+    positionActionMenu: PropTypes.bool,
     reactionGroup: PropTypes.oneOfType([
       customPropTypes.collectionShorthand,
       customPropTypes.itemShorthand,
@@ -152,6 +156,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     accessibility: chatMessageBehavior,
     as: 'div',
     badgePosition: 'end',
+    positionActionMenu: true,
     reactionGroupPosition: 'start',
   }
 
@@ -206,7 +211,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     actionMenu: ChatMessageProps['actionMenu'],
     styles: ComponentSlotStylesPrepared,
   ) {
-    const { unstable_overflow: overflow } = this.props
+    const { unstable_overflow: overflow, positionActionMenu } = this.props
     const { messageNode } = this.state
 
     const actionMenuElement = Menu.create(actionMenu, {
@@ -222,32 +227,37 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
       return actionMenuElement
     }
 
-    const menuRect: DOMRect = _.invoke(this.menuRef.current, 'getBoundingClientRect') || {
+    const menuRect: DOMRect = (positionActionMenu &&
+      _.invoke(this.menuRef.current, 'getBoundingClientRect')) || {
       height: 0,
     }
-    const messageRect: DOMRect = _.invoke(messageNode, 'getBoundingClientRect') || { height: 0 }
+    const messageRect: DOMRect = (positionActionMenu &&
+      _.invoke(messageNode, 'getBoundingClientRect')) || { height: 0 }
 
     return (
       <Popper
+        enabled={positionActionMenu}
         align="end"
-        modifiers={{
-          // https://popper.js.org/popper-documentation.html#modifiers..flip.behavior
-          // Forces to flip only in "top-*" positions
-          flip: { behavior: ['top'] },
-          preventOverflow: {
-            escapeWithReference: false,
-            // https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.priority
-            // Forces to stop prevent overflow on bottom and bottom
-            priority: ['left', 'right'],
-
-            // Is required to properly position action items
-            ...(overflow && {
-              boundariesElement: 'scrollParent',
-              escapeWithReference: true,
-              padding: { top: messageRect.height - menuRect.height },
-            }),
-          },
-        }}
+        modifiers={
+          positionActionMenu && {
+            // https://popper.js.org/popper-documentation.html#modifiers..flip.behavior
+            // Forces to flip only in "top-*" positions
+            flip: { behavior: ['top'] },
+            preventOverflow: {
+              escapeWithReference: false,
+              // https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.priority
+              // Forces to stop prevent overflow on bottom and bottom
+              priority: ['left', 'right'],
+
+              // Is required to properly position action items
+              ...(overflow && {
+                boundariesElement: 'scrollParent',
+                escapeWithReference: true,
+                padding: { top: messageRect.height - menuRect.height },
+              }),
+            },
+          }
+        }
         position="above"
         positionFixed={overflow}
         targetRef={messageNode}