fix(form): fix render UI can't be inherit (#1661)

ng-alain · Oct 19, 2023 · ee96aaa · ee96aaa
1 parent c8779f4
commit ee96aaa
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 38 deletions.
diff --git a/packages/form/spec/schema.spec.ts b/packages/form/spec/schema.spec.ts
@@ -54,44 +54,6 @@ describe('form: schema', () => {
         })
         .checkUI('/name', 'widget', 'textarea');
     });
-    it('should be inherit all properties with * for ui schema', () => {
-      const schema: SFSchema = {
-        properties: {
-          name1: { type: 'string' },
-          name2: {
-            type: 'array',
-            items: {
-              type: 'object',
-              properties: {
-                a: {
-                  type: 'string',
-                  ui: {
-                    grid: { span: 12 }
-                  }
-                },
-                b: { type: 'string' }
-              },
-              ui: { spanLabelFixed: 10 }
-            }
-          }
-        }
-      };
-      const label = 10;
-      const ui: SFUISchema = {
-        '*': { spanLabel: label },
-        $name2: {
-          $items: {
-            $a: { spanLabel: 9 }
-          }
-        }
-      };
-      page
-        .newSchema(schema, ui)
-        .checkUI('/name1', 'spanLabel', label)
-        .add()
-        .checkUI('/name2/0/a', 'spanLabel', null) // 当指定标签为固定宽度时无须指定 `spanLabel`，`spanControl` 会强制清理
-        .checkUI('/name2/0/b', 'spanLabelFixed', 10);
-    });
     it('should be fixed label width', () => {
       const schema: SFSchema = {
         properties: {
@@ -227,6 +189,62 @@ describe('form: schema', () => {
         discardPeriodicTasks();
       }));
     });
+    describe('#inherit', () => {
+      it('should be inherit all properties with * for ui schema', () => {
+        const schema: SFSchema = {
+          properties: {
+            name1: { type: 'string' },
+            name2: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  a: {
+                    type: 'string',
+                    ui: {
+                      grid: { span: 12 }
+                    }
+                  },
+                  b: { type: 'string' }
+                },
+                ui: { spanLabelFixed: 10 }
+              }
+            }
+          }
+        };
+        const label = 10;
+        const ui: SFUISchema = {
+          '*': { spanLabel: label },
+          $name2: {
+            $items: {
+              $a: { spanLabel: 9 }
+            }
+          }
+        };
+        page
+          .newSchema(schema, ui)
+          .checkUI('/name1', 'spanLabel', label)
+          .add()
+          .checkUI('/name2/0/a', 'spanLabel', null) // 当指定标签为固定宽度时无须指定 `spanLabel`，`spanControl` 会强制清理
+          .checkUI('/name2/0/b', 'spanLabelFixed', 10);
+      });
+      it('should be ignore inherit render ui', () => {
+        const schema: SFSchema = {
+          properties: {
+            a: { type: 'string' },
+            adr: {
+              type: 'object',
+              title: 'adr',
+              properties: {
+                a: { type: 'string', ui: { optional: 'Help a' } }
+              },
+              ui: { optional: 'Help Adr' }
+            }
+          }
+        };
+        page.newSchema(schema).checkUI('/adr', 'optional', 'Help Adr').checkUI('/adr/a', 'optional', 'Help a');
+      });
+    });
   });
 
   describe('[definitions]', () => {

diff --git a/packages/form/src/sf.component.ts b/packages/form/src/sf.component.ts
@@ -337,6 +337,8 @@ export class SFComponent implements OnInit, OnChanges, OnDestroy {
           // 忽略部分会引起呈现的属性
           visibleIf: undefined,
           hidden: undefined,
+          optional: undefined,
+          optionalHelp: undefined,
           widget: property.type,
           ...(property.format && (this.options.formatMap as NzSafeAny)[property.format]),
           ...(typeof property.ui === 'string' ? { widget: property.ui } : null),

diff --git a/packages/form/src/widgets/object/object.widget.html b/packages/form/src/widgets/object/object.widget.html
@@ -45,6 +45,23 @@
     <div [class.point]="showExpand" (click)="changeExpand()">
       <i *ngIf="showExpand" nz-icon [nzType]="expand ? 'down' : 'up'" class="mr-xs text-xs"></i>
       {{ title }}
+      <span *ngIf="ui.optional || oh" class="sf__optional">
+        {{ ui.optional }}
+        <i
+          *ngIf="oh"
+          nz-tooltip
+          [nzTooltipTitle]="oh.text"
+          [nzTooltipPlacement]="oh.placement"
+          [nzTooltipTrigger]="oh.trigger"
+          [nzTooltipColor]="oh.bgColor"
+          [nzTooltipOverlayClassName]="oh.overlayClassName"
+          [nzTooltipOverlayStyle]="oh.overlayStyle"
+          [nzTooltipMouseEnterDelay]="oh.mouseEnterDelay"
+          [nzTooltipMouseLeaveDelay]="oh.mouseLeaveDelay"
+          nz-icon
+          [nzType]="oh.icon!"
+        ></i>
+      </span>
     </div>
   </ng-template>
   <ng-template [ngTemplateOutlet]="default" [ngTemplateOutletContext]="{ $implicit: true }" />