refactor: resizer component (#1568)

* chore: downgrade react-d3-utils * Revert "chore: downgrade react-d3-utils" This reverts commit e64a26d. * refactor: use inline style * refactor: remove memoization
cheminfo · Jun 3, 2022 · d2449e3 · d2449e3
1 parent e01e263
commit d2449e3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
diff --git a/src/component/elements/resizer/SVGResizer.tsx b/src/component/elements/resizer/SVGResizer.tsx
@@ -5,30 +5,32 @@ import { CSSProperties, MouseEventHandler } from 'react';
 import { ResizerProps } from './Resizer';
 import useResizer from './useResizer';
 
-const anchorStyle: CSSProperties = {
-  width: '2px',
-  height: '100%',
-  pointerEvents: 'none',
-  fill: 'transparent',
+const style: Record<'anchor' | 'innerContainer', CSSProperties> = {
+  anchor: {
+    width: '2px',
+    height: '100%',
+    pointerEvents: 'none',
+    fill: 'transparent',
+  },
+  innerContainer: {
+    position: 'absolute',
+    height: '100%',
+    fill: 'transparent',
+    width: '10px',
+    cursor: 'e-resize',
+    userSelect: 'none',
+    zIndex: 99999999,
+  },
 };
+
 const styles = {
-  container: (position: number) => css`
-    transform: translateX(${position}px);
+  container: css`
     &:hover {
       rect:last-child {
         fill: red !important;
       }
     }
   `,
-  innerContainer: css`
-    position: absolute;
-    height: 100%;
-    fill: transparent;
-    width: 10px;
-    cursor: e-resize;
-    user-select: none;
-    z-index: 99999999;
-  `,
 };
 
 export default function SVGResizer(props: ResizerProps) {
@@ -60,11 +62,12 @@ function SVGResizerHandle(props: {
   return (
     <g
       onMouseDown={props.onMouseDown}
-      css={styles.container(props.position)}
+      css={styles.container}
+      style={{ transform: `translateX(${props.position}px)` }}
       data-no-export="true"
     >
-      <rect x="-5px" css={styles.innerContainer} />
-      <rect x="-2.5px" style={anchorStyle} />
+      <rect x="-5px" style={style.innerContainer} />
+      <rect x="-2.5px" style={style.anchor} />
     </g>
   );
 }
diff --git a/src/component/elements/resizer/useResizer.tsx b/src/component/elements/resizer/useResizer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import useDraggable, { Draggable } from '../draggble/useDraggable';
 
@@ -87,14 +87,11 @@ export default function useResizer(props: ResizerProps): UseResizer {
     triggerEvent.current(position, action);
   }, [right.position]);
 
-  return useMemo(
-    () => ({
-      left,
-      right,
-      prevPosition: prevPosition.current,
-      currentPosition: currentPosition.current,
-      isActive: activeRef.current,
-    }),
-    [left, right],
-  );
+  return {
+    left,
+    right,
+    prevPosition: prevPosition.current,
+    currentPosition: currentPosition.current,
+    isActive: activeRef.current,
+  };
 }