Merge pull request #101 from easyops-cn/williamcai/bricks/advanced/workbench-layout-v2/change_the_method_of_adding_components_from_checking_to_dragging_and_clicking

feat(workbench-layout-v2): Change the method of adding components fro…

Author: jeft224

bricks/advanced/src/interfaces/index.ts

@@ -0,0 +1 @@
+export * from "./workbench";

bricks/advanced/src/interfaces/workbench.ts

@@ -0,0 +1,10 @@
+import { UseSingleBrickConf } from "@next-core/types";
+import { Layout } from "react-grid-layout";
+
+export type WorkbenchComponent = {
+  position: Layout;
+  key: string;
+  title: string;
+  style?: React.CSSProperties;
+  useBrick: UseSingleBrickConf;
+};

bricks/advanced/src/table/BrickTable.tsx

@@ -11,8 +11,8 @@ import { ReactUseMultipleBricks } from "@next-core/react-runtime";
 import type { UseSingleBrickConf } from "@next-core/types";
 import { wrapBrick } from "@next-core/react-element";
 import { StyleProvider, createCache } from "@ant-design/cssinjs";
-import { K, NS, locales } from "./i18n.js";
-import { useTranslation, initializeReactI18n } from "@next-core/i18n/react";
+import { NS, locales } from "./i18n.js";
+import { initializeReactI18n } from "@next-core/i18n/react";
 
 import { i18n } from "@next-core/i18n";
 
@@ -167,8 +167,6 @@ const getCustomComp = (
 };
 
 export function BrickTable(props: BrickTableProps): React.ReactElement {
-  const { t } = useTranslation(NS);
-
   const locale = (i18n.language.split("-")[0] === "zh"
     ? zhCN
     : enUS) as unknown as Locale;
@@ -187,7 +185,6 @@ export function BrickTable(props: BrickTableProps): React.ReactElement {
     expandIconColumnIndex,
     childrenColumnName,
     scroll,
-    optimizedColumns,
     onDelete, // 用于 brick form 中，will be deprecated
     ellipsisInfo,
     showHeader,
@@ -508,7 +505,11 @@ export function BrickTable(props: BrickTableProps): React.ReactElement {
   );
 
   if (props.tableDraggable) {
-    table = <DndProvider backend={HTML5Backend}>{table}</DndProvider>;
+    table = (
+      <DndProvider backend={HTML5Backend} context={window}>
+        {table}
+      </DndProvider>
+    );
   }
 
   const cahce = useMemo(() => {

bricks/advanced/src/workbench-layout-v2/DraggableComponentMenuItem.spec.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { DraggableComponentMenuItem } from "./DraggableComponentMenuItem";
+
+jest.mock("react-dnd", () => ({
+  useDrag: jest.fn(() => [{}]),
+}));
+
+describe("DraggableComponentMenuItem", () => {
+  it("should work", () => {
+    const component = {
+      title: "card-1",
+      useBrick: {
+        brick: "div",
+        properties: {
+          textContent: "card-1",
+        },
+      },
+      position: {
+        i: "card-1",
+        x: 0,
+        y: 0,
+        w: 2,
+        h: 1,
+      },
+      key: "card-1",
+    };
+    const handleClick = jest.fn();
+
+    render(
+      <DraggableComponentMenuItem component={component} onClick={handleClick} />
+    );
+    expect(
+      screen.getByTestId("draggable-component-menu-item")
+    ).toHaveTextContent(component.title);
+
+    // click
+    expect(handleClick).not.toHaveBeenCalled();
+    act(() => {
+      fireEvent.click(screen.getByTestId("draggable-component-menu-item"));
+    });
+    expect(handleClick).toHaveBeenCalled();
+  });
+});

bricks/advanced/src/workbench-layout-v2/DraggableComponentMenuItem.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { wrapBrick } from "@next-core/react-element";
+import type {
+  EoSidebarMenuItem,
+  EoSidebarMenuItemProps,
+} from "@next-bricks/nav/sidebar/sidebar-menu-item";
+import { useDrag } from "react-dnd";
+
+import { WorkbenchComponent } from "../interfaces";
+
+const WrappedSidebarMenuItem = wrapBrick<
+  EoSidebarMenuItem,
+  EoSidebarMenuItemProps
+>("eo-sidebar-menu-item");
+
+export interface DraggableComponentMenuItemProps {
+  component: WorkbenchComponent;
+  onClick?(): void;
+}
+
+export function DraggableComponentMenuItem(
+  props: DraggableComponentMenuItemProps
+): React.ReactElement {
+  const { component, onClick } = props;
+  const { title } = component;
+  /* istanbul ignore next */
+  const [{ isDragging }, drag] = useDrag({
+    type: "component",
+    item: component,
+    collect: (monitor) => ({ isDragging: monitor.isDragging() }),
+  });
+
+  return (
+    <WrappedSidebarMenuItem
+      icon={{
+        lib: "antd",
+        icon: "menu",
+      }}
+      title={title}
+      style={{ opacity: isDragging ? 0.4 : 1 }}
+      onClick={onClick}
+      data-testid="draggable-component-menu-item"
+      ref={drag}
+    >
+      {title}
+    </WrappedSidebarMenuItem>
+  );
+}

bricks/advanced/src/workbench-layout-v2/DroppableComponentLayoutItem.module.css

@@ -0,0 +1,35 @@
+.component {
+  height: 100%;
+}
+
+.editMask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 45px;
+  bottom: 0;
+  z-index: 10;
+}
+
+.deleteIcon {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  cursor: pointer;
+  font-size: 16px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-fill-bg-container-1);
+  color: var(--color-normal-text);
+}
+
+.deleteIcon:hover {
+  color: var(--color-error);
+}
+
+.deleteIcon:active {
+  color: var(--color-error-active);
+}

bricks/advanced/src/workbench-layout-v2/DroppableComponentLayoutItem.spec.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { DropTargetHookSpec, DropTargetMonitor, useDrop } from "react-dnd";
+
+import { DroppableComponentLayoutItem } from "./DroppableComponentLayoutItem";
+import { WorkbenchComponent } from "../interfaces";
+
+jest.mock("react-dnd", () => ({
+  useDrag: jest.fn(() => [{}]),
+  useDrop: jest.fn(() => []),
+}));
+jest.mock("@next-core/react-runtime", () => ({
+  ReactUseBrick: jest.fn(({ useBrick }) => (
+    <div
+      data-testid="react-use-brick"
+      data-use-brick={JSON.stringify(useBrick)}
+    >
+      Mocked ReactUseBrick
+    </div>
+  )),
+}));
+
+const mockedUseDrop = useDrop as jest.Mock;
+
+describe("DroppableComponentLayoutItem", () => {
+  it("should work", () => {
+    const component = {
+      title: "card-1",
+      useBrick: {
+        brick: "div",
+        properties: {
+          textContent: "card-1",
+        },
+      },
+      position: {
+        i: "card-1",
+        x: 0,
+        y: 0,
+        w: 2,
+        h: 1,
+      },
+      key: "card-1",
+    };
+    const handleDrop = jest.fn();
+    const handleDelete = jest.fn();
+
+    render(
+      <DroppableComponentLayoutItem
+        component={component}
+        isEdit
+        onDrop={handleDrop}
+        onDelete={handleDelete}
+      />
+    );
+    expect(screen.getByTestId("react-use-brick").dataset["useBrick"]).toBe(
+      JSON.stringify(component.useBrick)
+    );
+
+    // drop
+    act(() => {
+      (
+        mockedUseDrop.mock.lastCall?.[0] as DropTargetHookSpec<
+          WorkbenchComponent,
+          void,
+          {
+            isOver: boolean;
+          }
+        >
+      ).drop?.(component, {} as DropTargetMonitor<WorkbenchComponent, void>);
+    });
+    expect(handleDrop).toHaveBeenCalledWith(component);
+
+    // edit mask click
+    act(() => {
+      fireEvent.mouseDown(
+        screen.getByTestId("droppable-component-layout-item-edit-mask")
+      );
+    });
+
+    // delete click
+    expect(handleDelete).not.toHaveBeenCalled();
+    act(() => {
+      fireEvent.click(
+        screen.getByTestId("droppable-component-layout-item-delete")
+      );
+    });
+    expect(handleDelete).toHaveBeenCalled();
+  });
+});

bricks/advanced/src/workbench-layout-v2/DroppableComponentLayoutItem.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ReactUseBrick } from "@next-core/react-runtime";
+import { wrapBrick } from "@next-core/react-element";
+import type {
+  GeneralIcon,
+  GeneralIconProps,
+} from "@next-bricks/icons/general-icon";
+import { useDrop } from "react-dnd";
+
+import { WorkbenchComponent } from "../interfaces";
+
+import styles from "./DroppableComponentLayoutItem.module.css";
+
+const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
+
+export interface DroppableComponentLayoutItemProps {
+  component: WorkbenchComponent;
+  isEdit?: boolean;
+  onDrop?(component: WorkbenchComponent): void;
+  onDelete?(): void;
+}
+
+export function DroppableComponentLayoutItem(
+  props: DroppableComponentLayoutItemProps
+): React.ReactElement {
+  const { component, isEdit, onDrop, onDelete } = props;
+
+  const [, drop] = useDrop({
+    accept: "component",
+    drop: (component: WorkbenchComponent) => onDrop?.(component),
+  });
+
+  const handleEditMaskClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onDelete?.();
+  };
+
+  return (
+    <div className={styles.component} style={component.style} ref={drop}>
+      {isEdit && (
+        <div
+          className={styles.editMask}
+          onMouseDown={handleEditMaskClick}
+          data-testid="droppable-component-layout-item-edit-mask"
+        />
+      )}
+      <ReactUseBrick useBrick={component.useBrick} />
+      {isEdit && (
+        <WrappedIcon
+          icon="delete"
+          lib="antd"
+          className={styles.deleteIcon}
+          onClick={handleDeleteClick}
+          data-testid="droppable-component-layout-item-delete"
+        />
+      )}
+    </div>
+  );
+}