Merge pull request #1562 from easyops-cn/steve/drawer-elevo

Steve/drawer-elevo

Author: weareoutman

bricks/basic/src/batch-agent/index.spec.ts

@@ -0,0 +1,41 @@
+import { describe, test, expect, jest } from "@jest/globals";
+import { act } from "react-dom/test-utils";
+import "./";
+import type { EoBatchAgent } from "./index.js";
+
+jest.mock("@next-core/theme", () => ({}));
+
+describe("eo-batch-agent", () => {
+  test("basic usage", async () => {
+    const element = document.createElement("eo-batch-agent") as EoBatchAgent;
+
+    const onTrigger = jest.fn();
+    element.addEventListener("trigger", (e) => {
+      onTrigger((e as CustomEvent).detail);
+    });
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    element.trigger("foo");
+    element.trigger("bar");
+    element.trigger("foo");
+    expect(onTrigger).not.toHaveBeenCalled();
+
+    await Promise.resolve();
+    expect(onTrigger).toHaveBeenCalledTimes(2);
+    expect(onTrigger).toHaveBeenNthCalledWith(1, { type: "foo" });
+    expect(onTrigger).toHaveBeenNthCalledWith(2, { type: "bar" });
+
+    element.trigger("bar");
+    expect(onTrigger).toHaveBeenCalledTimes(2);
+    await Promise.resolve();
+    expect(onTrigger).toHaveBeenCalledTimes(3);
+    expect(onTrigger).toHaveBeenNthCalledWith(3, { type: "bar" });
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
+});

bricks/basic/src/batch-agent/index.ts

@@ -0,0 +1,46 @@
+import {
+  createDecorators,
+  NextElement,
+  type EventEmitter,
+} from "@next-core/element";
+import styleText from "./styles.shadow.css";
+
+const { defineElement, event, method } = createDecorators();
+
+/**
+ * 批处理事件代理。
+ *
+ * 当多次触发同一类型事件时，只会在当前宏任务结束后触发一次该类型事件。
+ */
+export
+@defineElement("eo-batch-agent", {
+  styleTexts: [styleText],
+})
+class EoBatchAgent extends NextElement {
+  #enqueued = new Set<string>();
+
+  /**
+   * 事件被触发。
+   */
+  @event({ type: "trigger" })
+  accessor #triggerEvent!: EventEmitter<{ type: string }>;
+
+  /**
+   * 触发事件。
+   */
+  @method()
+  trigger(type: string): void {
+    if (this.#enqueued.has(type)) {
+      return;
+    }
+    this.#enqueued.add(type);
+    queueMicrotask(() => {
+      this.#enqueued.delete(type);
+      this.#triggerEvent.emit({ type });
+    });
+  }
+
+  protected _render() {
+    // Do nothing
+  }
+}

bricks/basic/src/batch-agent/styles.shadow.css

@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}

bricks/containers/src/drawer/drawer.shadow.css

@@ -1,3 +1,15 @@
+:host {
+  --eo-drawer-inset-gap: 0px;
+}
+
+:host([theme-variant="elevo"]) {
+  --eo-drawer-inset-gap: 20px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 .drawer {
   position: fixed;
   z-index: 1000;
@@ -38,7 +50,7 @@
 }
 
 .mask,
-.drawer-wrapper {
+.drawer-content {
   pointer-events: auto;
 }
 
@@ -75,10 +87,10 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: var(--antd-component-background);
+  padding: var(--eo-drawer-inset-gap);
 }
 
-.drawer.open .drawer-wrapper {
+.drawer.open .drawer-content {
   box-shadow:
     -6px 0 16px -8px rgb(0 0 0 / 8%),
     -9px 0 28px 0 rgb(0 0 0 / 5%),
@@ -130,22 +142,31 @@
   width: 100%;
   height: 100%;
   outline: 0;
+  background: var(--antd-component-background);
 }
 
 .drawer-header {
   display: flex;
   justify-content: space-between;
+  align-items: start;
   padding: 12px 24px;
   border-bottom: 1px solid var(--palette-gray-4);
 }
 
-.drawer-header-left,
+.title-wrapper,
 .drawer-header-right {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
+.sub-title {
+  color: #8c8c8c;
+  font-size: 13px;
+  line-height: 24px;
+  margin-bottom: 5px;
+}
+
 .close-btn {
   cursor: pointer;
 }
@@ -173,5 +194,33 @@
   padding: 12px 24px;
   border-top: 1px solid var(--palette-gray-4);
   background: var(--color-fill-bg-base-3);
-  box-sizing: border-box;
+}
+
+:host([theme-variant="elevo"]) {
+  color: #262626;
+
+  .drawer.open .drawer-content {
+    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+  }
+
+  .drawer-header {
+    padding: 20px 24px;
+    border-bottom: none;
+  }
+
+  .drawer-title {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  .drawer-body {
+    padding-top: 10px;
+  }
+
+  .drawer-footer {
+    border-top-color: #e8e8e8;
+    background: none;
+    padding: 20px 24px;
+  }
 }

bricks/containers/src/drawer/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useMemo,
-  useRef,
-  CSSProperties,
-  useState,
-} from "react";
+import React, { useEffect, useRef, CSSProperties, useState } from "react";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
 import { createDecorators, type EventEmitter } from "@next-core/element";
 import type {
@@ -36,6 +30,7 @@ export interface DrawerMapEvents {
 export interface DrawerProps {
   curElement?: HTMLElement;
   customTitle?: string;
+  subTitle?: string;
   width?: number | string;
   height?: number;
   closable?: boolean;
@@ -48,6 +43,7 @@ export interface DrawerProps {
   stackable?: boolean;
   maskStyle?: CSSProperties;
   keyboard?: boolean;
+  themeVariant?: "default" | "elevo";
 }
 
 const { defineElement, property, event, method } = createDecorators();
@@ -57,8 +53,8 @@ const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
  * 通用抽屉构件
  * @author sailor
  * @slot - 抽屉内容插槽
- * @slot headerLeft - 头部左上角
- * @slot extra - 头部右上角
+ * @slot headerLeft - 头部左上角（标题右侧）
+ * @slot extra - 头部右上角（关闭按钮左侧）
  * @slot footer - 抽屉底部插槽
  * @category container-display
  */
@@ -72,6 +68,11 @@ class Drawer extends ReactNextElement implements DrawerProps {
    */
   @property() accessor customTitle: string | undefined;
 
+  /**
+   * 副标题
+   */
+  @property() accessor subTitle: string | undefined;
+
   /**
    * 宽度(placement为left，right时生效)
    */
@@ -150,6 +151,10 @@ class Drawer extends ReactNextElement implements DrawerProps {
   @property({ type: Boolean })
   accessor keyboard: boolean | undefined;
 
+  /** 主题变体 */
+  @property({ render: false })
+  accessor themeVariant: "default" | "elevo" | undefined;
+
   /**
    * 是否可堆叠，开启后每次打开抽屉会将新的抽屉置于上层（zIndex ++）
    *
@@ -214,6 +219,7 @@ class Drawer extends ReactNextElement implements DrawerProps {
     return (
       <DrawerComponent
         customTitle={this.customTitle}
+        subTitle={this.subTitle}
         width={this.width}
         height={this.height}
         closable={this.closable}
@@ -227,6 +233,7 @@ class Drawer extends ReactNextElement implements DrawerProps {
         scrollToTopWhenOpen={this.scrollToTopWhenOpen}
         curElement={this}
         keyboard={this.keyboard}
+        themeVariant={this.themeVariant}
         stackable={this.stackable}
         stack={this.#stack}
       />
@@ -241,6 +248,7 @@ interface DrawerComponentProps extends DrawerProps {
 
 export function DrawerComponent({
   customTitle,
+  subTitle,
   width = 500,
   height = 378,
   closable = true,
@@ -259,29 +267,6 @@ export function DrawerComponent({
 }: DrawerComponentProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>();
-  const header = useMemo(
-    () => (
-      <div className="drawer-header">
-        <div className="drawer-header-left">
-          <span className="drawer-title">{customTitle}</span>
-          <slot name="headerLeft"></slot>
-        </div>
-        <div className="drawer-header-right">
-          <slot name="extra"></slot>
-          {closable && (
-            <WrappedIcon
-              className="close-btn"
-              lib="antd"
-              theme="outlined"
-              icon="close"
-              onClick={onDrawerClose}
-            />
-          )}
-        </div>
-      </div>
-    ),
-    [closable, customTitle, onDrawerClose]
-  );
 
   const mergeMaskStyle = {
     backgroundColor: "var(--antd-modal-mask-bg)",
@@ -371,7 +356,27 @@ export function DrawerComponent({
         }}
       >
         <div className="drawer-content" tabIndex={-1} ref={containerRef}>
-          {header}
+          <div className="drawer-header">
+            <div className="drawer-header-left">
+              {subTitle ? <div className="sub-title">{subTitle}</div> : null}
+              <div className="title-wrapper">
+                <span className="drawer-title">{customTitle}</span>
+                <slot name="headerLeft"></slot>
+              </div>
+            </div>
+            <div className="drawer-header-right">
+              <slot name="extra"></slot>
+              {closable && (
+                <WrappedIcon
+                  className="close-btn"
+                  lib="antd"
+                  theme="outlined"
+                  icon="close"
+                  onClick={onDrawerClose}
+                />
+              )}
+            </div>
+          </div>
           <div className="drawer-body" ref={contentRef}>
             <slot></slot>
           </div>