Merge pull request #1578 from easyops-cn/abert/eo-modal

feat(): eo-modal 支持 sidebar插槽

Author: weareoutman

bricks/containers/src/modal/index.spec.tsx

@@ -213,4 +213,142 @@ describe("eo-modal", () => {
       document.body.removeChild(element);
     });
   });
+
+  test("modal without sidebar content", async () => {
+    const element = document.createElement("eo-modal") as Modal;
+    element.modalTitle = "Modal Title";
+
+    const bodyElement = document.createElement("div");
+    bodyElement.textContent = "This is main content";
+
+    act(() => {
+      element.appendChild(bodyElement);
+      document.body.appendChild(element);
+    });
+
+    await act(async () => {
+      element.open();
+    });
+
+    expect(element.visible).toBeTruthy();
+
+    // 没有 sidebar 内容时，不应该有 has-sidebar 类
+    const modalElement = element.shadowRoot?.querySelector(".modal");
+    expect(modalElement?.classList.contains("has-sidebar")).toBeFalsy();
+
+    // sidebar 应该存在但被隐藏
+    const sidebarElement = element.shadowRoot?.querySelector(".modal-sidebar");
+    expect(sidebarElement).toBeTruthy();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("modal with sidebar content", async () => {
+    const element = document.createElement("eo-modal") as Modal;
+    element.modalTitle = "Modal Title with Sidebar";
+
+    const bodyElement = document.createElement("div");
+    bodyElement.textContent = "This is main content";
+
+    const sidebarElement = document.createElement("div");
+    sidebarElement.slot = "sidebar";
+    sidebarElement.textContent = "This is sidebar content";
+
+    act(() => {
+      element.appendChild(bodyElement);
+      element.appendChild(sidebarElement);
+      document.body.appendChild(element);
+    });
+
+    await act(async () => {
+      element.open();
+    });
+
+    // 等待 slotchange 事件触发和状态更新
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    expect(element.visible).toBeTruthy();
+
+    // 有 sidebar 内容时，应该有 has-sidebar 类
+    const modalElement = element.shadowRoot?.querySelector(".modal");
+    expect(modalElement?.classList.contains("has-sidebar")).toBeTruthy();
+
+    // 检查 sidebar 插槽是否正确渲染内容
+    const sidebarSlot = element.shadowRoot?.querySelector(
+      'slot[name="sidebar"]'
+    ) as HTMLSlotElement;
+    expect(sidebarSlot).toBeTruthy();
+    expect(sidebarSlot?.assignedElements().length).toBeGreaterThan(0);
+
+    // 验证 modal-main-content 存在
+    const mainContent = element.shadowRoot?.querySelector(
+      ".modal-main-content"
+    );
+    expect(mainContent).toBeTruthy();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+
+  test("sidebar content dynamically added", async () => {
+    const element = document.createElement("eo-modal") as Modal;
+    element.modalTitle = "Modal Title";
+
+    const bodyElement = document.createElement("div");
+    bodyElement.textContent = "This is main content";
+
+    act(() => {
+      element.appendChild(bodyElement);
+      document.body.appendChild(element);
+    });
+
+    await act(async () => {
+      element.open();
+    });
+
+    // 初始没有 has-sidebar 类
+    let modalElement = element.shadowRoot?.querySelector(".modal");
+    expect(modalElement?.classList.contains("has-sidebar")).toBeFalsy();
+
+    // 动态添加 sidebar 内容
+    const sidebarElement = document.createElement("div");
+    sidebarElement.slot = "sidebar";
+    sidebarElement.textContent = "Dynamically added sidebar";
+
+    await act(async () => {
+      element.appendChild(sidebarElement);
+    });
+
+    // 等待 slotchange 事件触发
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    // 现在应该有 has-sidebar 类
+    modalElement = element.shadowRoot?.querySelector(".modal");
+    expect(modalElement?.classList.contains("has-sidebar")).toBeTruthy();
+
+    // 移除 sidebar 内容
+    await act(async () => {
+      element.removeChild(sidebarElement);
+    });
+
+    // 等待 slotchange 事件触发
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    // 应该移除 has-sidebar 类
+    modalElement = element.shadowRoot?.querySelector(".modal");
+    expect(modalElement?.classList.contains("has-sidebar")).toBeFalsy();
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
 });

bricks/containers/src/modal/index.tsx

@@ -70,6 +70,7 @@ const { defineElement, property, event, method } = createDecorators();
  * @author sailor
  * @slot - 内容插槽
  * @slot footer - 底部左侧插槽
+ * @slot sidebar - 弹窗左侧插槽
  * @category container-display
  */
 @defineElement("eo-modal", {
@@ -300,6 +301,8 @@ function ModalComponent({
   themeVariant,
 }: ModalComponentProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const sidebarSlotRef = useRef<HTMLSlotElement>(null);
+  const [hasSidebarContent, setHasSidebarContent] = useState(false);
 
   const handleWrapperClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>): void => {
@@ -389,6 +392,40 @@ function ModalComponent({
       handleConfirmClick,
     ]
   );
+  const sidebar = useMemo(
+    () => (
+      <div className="modal-sidebar">
+        <slot name="sidebar" ref={sidebarSlotRef}></slot>
+      </div>
+    ),
+    []
+  );
+
+  // 检测 sidebar 插槽是否有内容
+  useEffect(() => {
+    const checkSidebarContent = () => {
+      if (sidebarSlotRef.current) {
+        const hasContent = sidebarSlotRef.current.assignedElements().length > 0;
+        setHasSidebarContent(hasContent);
+      }
+    };
+
+    const sidebarSlot = sidebarSlotRef.current;
+    if (sidebarSlot) {
+      sidebarSlot.addEventListener("slotchange", checkSidebarContent);
+    }
+
+    // 当弹窗打开时，延迟检查以确保 DOM 已渲染
+    if (open) {
+      setTimeout(checkSidebarContent, 0);
+    }
+
+    return () => {
+      if (sidebarSlot) {
+        sidebarSlot.removeEventListener("slotchange", checkSidebarContent);
+      }
+    };
+  }, [open]);
 
   const previousActiveElement = useRef<Element | null>(null);
 
@@ -466,13 +503,17 @@ function ModalComponent({
         <div
           className={classNames("modal", {
             fullscreen,
+            "has-sidebar": hasSidebarContent,
           })}
           style={{ width: width }}
         >
           <div className="modal-container" tabIndex={-1} ref={containerRef}>
-            {header}
-            {body}
-            {footer}
+            {sidebar}
+            <div className="modal-main-content">
+              {header}
+              {body}
+              {footer}
+            </div>
           </div>
         </div>
       </div>

bricks/containers/src/modal/modal.shadow.css

@@ -54,6 +54,27 @@
   outline: 0;
 }
 
+.modal.has-sidebar .modal-container {
+  display: flex;
+}
+
+.modal-sidebar {
+  display: none;
+}
+
+.modal.has-sidebar .modal-sidebar {
+  display: block;
+  border-right: 1px solid var(--palette-gray-4);
+  min-width: 220px;
+}
+
+.modal-main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .modal-header {
   display: flex;
   justify-content: space-between;
@@ -82,6 +103,11 @@
   overflow: auto;
 }
 
+.modal.has-sidebar .modal-body {
+  flex: 1;
+  overflow: auto;
+}
+
 .modal-footer,
 .modal-footer-buttons {
   display: flex;