ref(SplitPanel): Refactor SplitDivider to not have dynamic css (#55138)

<!-- Describe your PR here. -->

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;

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>

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};
  }
 `;