From bb43c00163fe9c608cba1385cf961176484aa104 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Mon, 28 Aug 2023 12:21:51 -0700
Subject: [PATCH] ref(SplitPanel): Refactor SplitDivider to not have dynamic
 css (#55138)

<!-- Describe your PR here. -->
---
 .../replays/detail/layout/splitDivider.tsx    | 60 ++++++++++---------
 .../replays/detail/layout/splitPanel.tsx      | 14 ++---
 .../replays/detail/network/details/index.tsx  | 11 ++--
 3 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/static/app/views/replays/detail/layout/splitDivider.tsx b/static/app/views/replays/detail/layout/splitDivider.tsx
index 90b03d74a3f075..131d84df27301f 100644
--- a/static/app/views/replays/detail/layout/splitDivider.tsx
+++ b/static/app/views/replays/detail/layout/splitDivider.tsx
@@ -1,49 +1,51 @@
-import {DOMAttributes} from 'react';
+import type {DOMAttributes, MouseEventHandler} from 'react';
 import styled from '@emotion/styled';
 
 import {IconGrabbable} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 
 type Props = {
-  isHeld: boolean;
-  slideDirection: 'leftright' | 'updown';
+  'data-is-held': boolean;
+  'data-slide-direction': 'leftright' | 'updown';
+  onDoubleClick: MouseEventHandler<HTMLElement>;
+  onMouseDown: MouseEventHandler<HTMLElement>;
 };
 
-const SplitDivider = styled(
-  ({isHeld: _a, slideDirection: _b, ...props}: Props & DOMAttributes<HTMLDivElement>) => (
-    <div {...props}>
-      <IconGrabbable size="sm" />
-    </div>
-  )
-)<Props>`
+const SplitDivider = styled((props: Props & DOMAttributes<HTMLDivElement>) => (
+  <div {...props}>
+    <IconGrabbable size="sm" />
+  </div>
+))<Props>`
   display: grid;
   place-items: center;
   height: 100%;
   width: 100%;
 
-  user-select: ${p => (p.isHeld ? 'none' : 'inherit')};
-  background: ${p => (p.isHeld ? p.theme.hover : 'inherit')};
+  user-select: inherit;
+  background: inherit;
 
-  :hover {
+  &:hover,
+  &[data-is-held='true'] {
     background: ${p => p.theme.hover};
   }
+  &[data-is-held='true'] {
+    user-select: none;
+  }
 
-  ${p =>
-    p.slideDirection === 'leftright'
-      ? `
-        cursor: ew-resize;
-        height: 100%;
-        width: ${space(2)};
-      `
-      : `
-        cursor: ns-resize;
-        width: 100%;
-        height: ${space(2)};
-
-        & > svg {
-          transform: rotate(90deg);
-        }
-      `}
+  &[data-slide-direction='leftright'] {
+    cursor: ew-resize;
+    height: 100%;
+    width: ${space(2)};
+  }
+  &[data-slide-direction='updown'] {
+    cursor: ns-resize;
+    width: 100%;
+    height: ${space(2)};
+
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
 `;
 
 export default SplitDivider;
diff --git a/static/app/views/replays/detail/layout/splitPanel.tsx b/static/app/views/replays/detail/layout/splitPanel.tsx
index 1c2ded50e067c2..de70d871445d2e 100644
--- a/static/app/views/replays/detail/layout/splitPanel.tsx
+++ b/static/app/views/replays/detail/layout/splitPanel.tsx
@@ -68,7 +68,7 @@ function SplitPanel(props: Props) {
   const sizePct = `${
     (Math.min(containerSize, max) / props.availableSize) * 100
   }%` as `${number}%`;
-  const onMouseDown = useCallback(
+  const handleMouseDown = useCallback(
     event => {
       setStartPosition(sizePct);
       onDragStart(event);
@@ -87,10 +87,10 @@ function SplitPanel(props: Props) {
       >
         <Panel>{a.content}</Panel>
         <SplitDivider
-          isHeld={isHeld}
+          data-is-held={isHeld}
+          data-slide-direction="leftright"
           onDoubleClick={onDoubleClick}
-          onMouseDown={onMouseDown}
-          slideDirection="leftright"
+          onMouseDown={handleMouseDown}
         />
         <Panel>{b}</Panel>
       </SplitPanelContainer>
@@ -106,10 +106,10 @@ function SplitPanel(props: Props) {
     >
       <Panel>{a.content}</Panel>
       <SplitDivider
-        isHeld={isHeld}
+        data-is-held={isHeld}
+        data-slide-direction="updown"
         onDoubleClick={onDoubleClick}
-        onMouseDown={onMouseDown}
-        slideDirection="updown"
+        onMouseDown={handleMouseDown}
       />
       <Panel>{b}</Panel>
     </SplitPanelContainer>
diff --git a/static/app/views/replays/detail/network/details/index.tsx b/static/app/views/replays/detail/network/details/index.tsx
index e64ed48343696d..b0ced01ede5e18 100644
--- a/static/app/views/replays/detail/network/details/index.tsx
+++ b/static/app/views/replays/detail/network/details/index.tsx
@@ -46,10 +46,10 @@ function NetworkDetails({
       <StyledStacked>
         <StyledNetworkDetailsTabs underlined={false} />
         <StyledSplitDivider
-          isHeld={isHeld}
+          data-is-held={isHeld}
+          data-slide-direction="updown"
           onDoubleClick={onDoubleClick}
           onMouseDown={onMouseDown}
-          slideDirection="updown"
         />
         <CloseButtonWrapper>
           <Button
@@ -119,10 +119,11 @@ const CloseButtonWrapper = styled('div')`
   align-items: center;
 `;
 
-const StyledSplitDivider = styled(SplitDivider)<{isHeld: boolean}>`
+const StyledSplitDivider = styled(SplitDivider)`
   height: 100%;
-  ${p => (p.isHeld ? `z-index: ${p.theme.zIndex.initial + 1};` : '')}
-  :hover {
+
+  :hover,
+  &[data-is-held='true'] {
     z-index: ${p => p.theme.zIndex.initial + 1};
   }
 `;