fix(form): labelBrick 位置不对

refs DASHBOARD-522
easyops-cn · Mar 19, 2024 · a3fc92f · a3fc92f
1 parent 61790c8
commit a3fc92f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/bricks/form/src/form-item/index.spec.tsx b/bricks/form/src/form-item/index.spec.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { FormItem } from "./";
 import { describe, test, expect } from "@jest/globals";
 import { act } from "react-dom/test-utils";
@@ -6,6 +7,11 @@ import { Form } from "../form/index.js";
 
 jest.mock("./FormItem.shadow.less", () => "");
 jest.mock("@next-core/theme", () => ({}));
+jest.mock("@next-core/react-runtime", () => ({
+  ReactUseMultipleBricks: () => {
+    return <div>mock element</div>;
+  },
+}));
 
 describe("eo-form-item", () => {
   test("basic usage", async () => {
@@ -30,6 +36,22 @@ describe("eo-form-item", () => {
     element.trigger = "change";
     element.label = "测试";
     element.required = true;
+    element.labelBrick = {
+      useBrick: {
+        brick: "span",
+        properties: {
+          textContent: "labelBrick",
+        },
+      },
+    };
+    element.helpBrick = {
+      useBrick: {
+        brick: "span",
+        properties: {
+          textContent: "helpBrick",
+        },
+      },
+    };
 
     expect(element.shadowRoot).toBeFalsy();
     act(() => {
@@ -71,7 +93,6 @@ describe("eo-form-item", () => {
     act(() => {
       document.body.removeChild(element);
     });
-
     expect(mockFormStore.removeField).toBeCalledTimes(1);
     expect(mockFormStore.unsubscribe).toBeCalledTimes(5);
     expect(element.shadowRoot?.childNodes.length).toBe(0);

diff --git a/bricks/form/src/form-item/index.tsx b/bricks/form/src/form-item/index.tsx
@@ -317,10 +317,12 @@ export function FormItemComponent(props: FormItemProps) {
             <label>
               {required && <span className="required">*</span>}
               {label}
+              {labelBrick?.useBrick ? (
+                <ReactUseMultipleBricks
+                  {...labelBrick}
+                ></ReactUseMultipleBricks>
+              ) : null}
             </label>
-            {labelBrick?.useBrick ? (
-              <ReactUseMultipleBricks {...labelBrick}></ReactUseMultipleBricks>
-            ) : null}
           </div>
         </div>
       )}

diff --git a/bricks/form/src/upload/upload-image/index.tsx b/bricks/form/src/upload/upload-image/index.tsx
@@ -144,6 +144,7 @@ class UploadImage extends FormItemElementBase implements UploadImageProps {
         helpBrick={this.helpBrick}
         onChange={this.handleChange}
         trigger="handleChange"
+        labelBrick={this.labelBrick}
       />
     );
   }