feat: enable/disable resize in the resizer component

cheminfo · Aug 2, 2022 · 6797c43 · 6797c43
1 parent fa9d49c
commit 6797c43
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/src/component/elements/resizer/DivResizer.tsx b/src/component/elements/resizer/DivResizer.tsx
@@ -61,31 +61,35 @@ const styles = {
 };
 
 export default function DivResizer(props: ResizerProps) {
-  const { children } = props;
+  const { children, disabled } = props;
   const { left, right, prevPosition, currentPosition, isActive } =
     useResizer(props);
 
   return (
     <>
-      <div
-        data-no-export="true"
-        onMouseDown={right.onMouseDown}
-        css={styles.container(right.position.value.x)}
-      >
-        <div style={anchorStyle} />
-      </div>
+      {!disabled && (
+        <div
+          data-no-export="true"
+          onMouseDown={right.onMouseDown}
+          css={styles.container(right.position.value.x)}
+        >
+          <div style={anchorStyle} />
+        </div>
+      )}
       <div css={styles.content(left, right, prevPosition)}>
         {typeof children === 'function'
           ? children?.(currentPosition, isActive)
           : children}
       </div>
-      <div
-        data-no-export="true"
-        onMouseDown={left.onMouseDown}
-        css={styles.container(left.position.value.x)}
-      >
-        <div style={anchorStyle} />
-      </div>
+      {!disabled && (
+        <div
+          data-no-export="true"
+          onMouseDown={left.onMouseDown}
+          css={styles.container(left.position.value.x)}
+        >
+          <div style={anchorStyle} />
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/component/elements/resizer/Resizer.tsx b/src/component/elements/resizer/Resizer.tsx
@@ -25,6 +25,7 @@ export interface ResizerProps {
   tag?: 'div' | 'svg';
   parentElement?: HTMLElement | null;
   dragHandleClassName?: string;
+  disabled?: boolean;
 }
 
 type PositionChangeHandler = (data: Position) => void;

diff --git a/src/component/elements/resizer/SVGResizer.tsx b/src/component/elements/resizer/SVGResizer.tsx
@@ -34,7 +34,7 @@ const styles = {
 };
 
 export default function SVGResizer(props: ResizerProps) {
-  const { children } = props;
+  const { children, disabled } = props;
   const { left, right, currentPosition, isActive } = useResizer(props);
 
   return (
@@ -46,11 +46,16 @@ export default function SVGResizer(props: ResizerProps) {
       {typeof children === 'function'
         ? children(currentPosition, isActive)
         : children}
-      <SVGResizerHandle onMouseDown={left.onMouseDown} position={0} />
-      <SVGResizerHandle
-        onMouseDown={right.onMouseDown}
-        position={Math.ceil(currentPosition.x2 - currentPosition.x1)}
-      />
+      {!disabled && (
+        <>
+          {' '}
+          <SVGResizerHandle onMouseDown={left.onMouseDown} position={0} />
+          <SVGResizerHandle
+            onMouseDown={right.onMouseDown}
+            position={Math.ceil(currentPosition.x2 - currentPosition.x1)}
+          />
+        </>
+      )}
     </g>
   );
 }