more memoization

orchestrated-io · Sep 4, 2024 · 73212ce · 73212ce
1 parent 141c257
commit 73212ce
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
@@ -358,6 +358,15 @@ export const ActionsMenuBody = ({
     [actionMenu.floatingStyles, actionMenu.refs.reference]
   );
 
+  const menuDataTestId = useMemo(() => `${dataTestId}__menu`, [dataTestId]);
+
+  const { getFloatingProps } = actionMenu;
+
+  const floatingProps = useMemo(
+    () => getFloatingProps(props),
+    [getFloatingProps, props]
+  );
+
   const component = (
     <ActionMenuContext.Provider value={value}>
       <Wrapper {...props}>
@@ -370,8 +379,8 @@ export const ActionsMenuBody = ({
             <FloatingFocusManager context={actionMenu.context} modal={true}>
               <StyledActionsMenuContainer
                 aria-labelledby={actionMenu.labelId}
-                data-testid={`${dataTestId}__menu`}
-                {...actionMenu.getFloatingProps(props)}
+                data-testid={menuDataTestId}
+                {...floatingProps}
                 style={style}
                 className="actionMenu-content visible"
                 aria-hidden="false"
@@ -392,7 +401,7 @@ export const ActionsMenuBody = ({
           before assertion. **/
           <StyledActionsMenuContainer
             aria-labelledby={actionMenu.labelId}
-            data-testid={`${dataTestId}__menu`}
+            data-testid={menuDataTestId}
             className="actionMenu-content hack-for-legacy-tests"
           >
             <Menu menuWidth={menuWidth} isOpen={toggleState}>

diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
@@ -273,28 +273,6 @@ const StyledPopover = styled.div`
   }
 `;
 
-// const PopoverContent = () => {
-//   return (
-//     <StyledPopover
-//       textAlign={textAlign}
-//       width={width}
-//       enableSelectAll={enableSelectAll}
-//       className={`Tooltip popover ${
-//         visible ? "visible" : ""
-//       } ${directionClass}`}
-//       ref={refs.setFloating}
-//       style={{
-//         ...floatingStyles,
-//         zIndex: getFloatingUiZIndex(context.refs.reference)
-//       }}
-//       {...getFloatingProps()}
-//       ariaLabel={ariaLabel}
-//     >
-//       {text}
-//     </StyledPopover>
-//   );
-// };
-
 export default function Popover({
   children,
   direction = "right",
@@ -366,6 +344,16 @@ export default function Popover({
 
   const containsLinks = refs.floating?.current?.querySelectorAll("a").length;
 
+  const visiblePopoverClassName = useMemo(
+    () => `Tooltip popover visible ${directionClass}`,
+    [directionClass]
+  );
+
+  const floatingProps = useMemo(
+    () => getFloatingProps(props),
+    [getFloatingProps, props]
+  );
+
   return (
     <Container
       inlineBlock={inlineBlock}
@@ -398,28 +386,28 @@ export default function Popover({
                 }
               >
                 <StyledPopover
-                  className={`Tooltip popover visible ${directionClass}`}
+                  className={visiblePopoverClassName}
                   ref={refs.setFloating}
                   textAlign={textAlign}
                   width={width}
                   enableSelectAll={enableSelectAll}
                   ariaLabel={ariaLabel}
                   style={style}
-                  {...getFloatingProps()}
+                  {...floatingProps}
                 >
                   {text}
                 </StyledPopover>
               </FloatingFocusManager>
             ) : (
               <StyledPopover
-                className={`Tooltip popover visible ${directionClass}`}
+                className={visiblePopoverClassName}
                 ref={refs.setFloating}
                 textAlign={textAlign}
                 width={width}
                 enableSelectAll={enableSelectAll}
                 ariaLabel={ariaLabel}
                 style={style}
-                {...getFloatingProps()}
+                {...floatingProps}
               >
                 {text}
               </StyledPopover>
@@ -435,7 +423,7 @@ export default function Popover({
            **/
           <StyledPopover
             ariaLabel={ariaLabel}
-            className={`Tooltip popover ${directionClass} hack-for-legacy-tests`}
+            className="Tooltip popover hack-for-legacy-tests"
           >
             {text}
           </StyledPopover>