fix(eo-resizable-box): support sync host size

easyops-cn · Sep 5, 2024 · 1dadb02 · 1dadb02
1 parent ac1c3d0
commit 1dadb02
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/bricks/containers/src/resizable-box/index.spec.tsx b/bricks/containers/src/resizable-box/index.spec.tsx
@@ -20,6 +20,7 @@ window.requestAnimationFrame = jest.fn(
 describe("eo-resizable-box", () => {
   test("basic usage", async () => {
     const element = document.createElement("eo-resizable-box") as ResizableBox;
+    element.syncSizeWithHost = true;
 
     expect(element.shadowRoot).toBeFalsy();
 
@@ -32,6 +33,8 @@ describe("eo-resizable-box", () => {
       (element.shadowRoot?.querySelector(".box") as HTMLElement).style.width
     ).toBe("200px");
 
+    expect(element.style.width).toBe("200px");
+
     act(() => {
       fireEvent.mouseDown(element.shadowRoot!.querySelector(".bar"), {
         clientX: 100,
@@ -71,6 +74,7 @@ describe("eo-resizable-box", () => {
     element.defaultSize = 250;
     element.minSize = 170;
     element.minSpace = 150;
+    element.syncSizeWithHost = true;
 
     act(() => {
       document.body.appendChild(element);
@@ -101,6 +105,8 @@ describe("eo-resizable-box", () => {
       (element.shadowRoot?.querySelector(".box") as HTMLElement).style.height
     ).toBe("275px");
 
+    expect(element.style.height).toBe("275px");
+
     act(() => {
       fireEvent.mouseUp(window);
     });

diff --git a/bricks/containers/src/resizable-box/index.tsx b/bricks/containers/src/resizable-box/index.tsx
@@ -19,6 +19,7 @@ export interface ResizableBoxProps {
   variant?: "dashboard" | "default";
   boxStyle?: React.CSSProperties;
   boxStyleWhenNotResizing?: React.CSSProperties;
+  syncSizeWithHost?: boolean;
 }
 
 export type ResizeDirection = "left" | "right" | "top" | "bottom";
@@ -91,6 +92,9 @@ class ResizableBox extends ReactNextElement implements ResizableBoxProps {
   @property({ attribute: false })
   accessor boxStyleWhenNotResizing: React.CSSProperties | undefined;
 
+  @property({ type: Boolean })
+  accessor syncSizeWithHost: boolean;
+
   render() {
     return (
       <ResizableBoxComponent
@@ -103,6 +107,8 @@ class ResizableBox extends ReactNextElement implements ResizableBoxProps {
         variant={this.variant}
         boxStyle={this.boxStyle}
         boxStyleWhenNotResizing={this.boxStyleWhenNotResizing}
+        syncSizeWithHost={this.syncSizeWithHost}
+        host={this}
       />
     );
   }
@@ -114,6 +120,10 @@ interface ResizerStatus {
   startY: number;
 }
 
+interface ResizableBoxComponentProps extends ResizableBoxProps {
+  host: HTMLElement;
+}
+
 export function ResizableBoxComponent({
   resizeDirection: _resizeDirection,
   storageKey,
@@ -124,7 +134,9 @@ export function ResizableBoxComponent({
   variant,
   boxStyle,
   boxStyleWhenNotResizing,
-}: ResizableBoxProps) {
+  syncSizeWithHost,
+  host,
+}: ResizableBoxComponentProps) {
   const resizeDirection = _resizeDirection ?? "right";
   const defaultSize = _defaultSize ?? 200;
   const minSpace = _minSpace ?? 300;
@@ -221,6 +233,12 @@ export function ResizableBoxComponent({
     }
   }, [resized, resizeStatus, storage, size, storageKey]);
 
+  useEffect(() => {
+    if (syncSizeWithHost) {
+      host.style[isVerticalDirection ? "height" : "width"] = `${size}px`;
+    }
+  }, [host.style, isVerticalDirection, size, syncSizeWithHost]);
+
   return (
     <>
       <div

diff --git a/bricks/containers/src/resizable-box/styles.shadow.css b/bricks/containers/src/resizable-box/styles.shadow.css
@@ -28,6 +28,7 @@
   width: 4px;
   top: 0;
   bottom: 0;
+  z-index: 1000;
 }
 
 .top.bar,