fix(module:form): fix misplaced layout of checkbox widget (#226)

ng-alain · Oct 18, 2018 · d75600e · d75600e
1 parent a9f2db6
commit d75600e
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 79 deletions.
diff --git a/packages/form/src/sf-item-wrap.component.ts b/packages/form/src/sf-item-wrap.component.ts
@@ -7,7 +7,7 @@ import { SFUISchemaItem } from './schema/ui';
   template: `
   <nz-form-item [style.width.px]="ui.width">
     <nz-col *ngIf="showTitle" [nzSpan]="ui.spanLabel" class="ant-form-item-label">
-      <label [attr.for]="id" [class.ant-form-item-required]="ui._required">
+      <label *ngIf="schema.title" [attr.for]="id" [class.ant-form-item-required]="ui._required">
         {{ schema.title }}
         <span class="optional">
           {{ ui.optional }}

diff --git a/packages/form/src/sf.component.ts b/packages/form/src/sf.component.ts
@@ -55,7 +55,7 @@ export function useFactory(
 })
 export class SFComponent implements OnInit, OnChanges, OnDestroy {
   private i18n$: Subscription;
-  private locale: any = {};
+  public locale: any = {};
   private _renders = new Map<string, TemplateRef<any>>();
   private _item: any;
   private _valid = true;

diff --git a/packages/form/src/widgets/array/array.widget.ts b/packages/form/src/widgets/array/array.widget.ts
@@ -56,14 +56,18 @@ export class ArrayWidget extends ArrayLayoutWidget implements OnInit {
     );
   }
 
+  get l() {
+    return this.formProperty.root.widget.sfComp.locale;
+  }
+
   ngOnInit(): void {
     if (this.ui.grid && this.ui.grid.arraySpan)
       this.arraySpan = this.ui.grid.arraySpan;
 
-    this.addTitle = this.ui.addTitle || '添加';
+    this.addTitle = this.ui.addTitle || this.l['addText'];
     this.addType = this.ui.addType || 'dashed';
     this.removeTitle =
-      this.ui.removable === false ? null : this.ui.removeTitle || '移除';
+      this.ui.removable === false ? null : this.ui.removeTitle || this.l['removeText'];
   }
 
   addItem() {

diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.html b/packages/form/src/widgets/checkbox/checkbox.widget.html
@@ -0,0 +1,36 @@
+<ng-template #all>
+  <label *ngIf="ui.checkAll" nz-checkbox class="mr-sm" [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate"
+    (click)="onAllChecked($event)">{{ ui.checkAllText || l.checkAllText }}</label>
+</ng-template>
+<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError"
+  [error]="error" [showTitle]="true">
+  <ng-container *ngIf="data.length === 0">
+    <label nz-checkbox [nzDisabled]="disabled" [ngModel]="value" (ngModelChange)="_setValue($event)">
+      <span [innerHTML]="title"></span>
+      <span class="optional">
+        {{ ui.optional }}
+        <nz-tooltip *ngIf="ui.optionalHelp" [nzTitle]="ui.optionalHelp">
+          <i nz-tooltip class="anticon anticon-question-circle-o"></i>
+        </nz-tooltip>
+      </span>
+    </label>
+  </ng-container>
+  <ng-container *ngIf="data.length > 0">
+    <ng-container *ngIf="grid_span === 0">
+      <ng-template [ngTemplateOutlet]="all"></ng-template>
+      <nz-checkbox-group [ngModel]="data" (ngModelChange)="notifySet()"></nz-checkbox-group>
+    </ng-container>
+    <ng-container *ngIf="grid_span !== 0">
+      <nz-checkbox-wrapper class="sf__checkbox-list" (nzOnChange)="groupInGridChange($event)">
+        <nz-row>
+          <nz-col [nzSpan]="grid_span" *ngIf="ui.checkAll">
+            <ng-template [ngTemplateOutlet]="all"></ng-template>
+          </nz-col>
+          <nz-col [nzSpan]="grid_span" *ngFor="let i of data">
+            <label nz-checkbox [nzValue]="i.value" [ngModel]="i.checked" [nzDisabled]="i.disabled">{{i.label}}</label>
+          </nz-col>
+        </nz-row>
+      </nz-checkbox-wrapper>
+    </ng-container>
+  </ng-container>
+</sf-item-wrap>
diff --git a/packages/form/src/widgets/checkbox/checkbox.widget.ts b/packages/form/src/widgets/checkbox/checkbox.widget.ts
@@ -5,92 +5,34 @@ import { SFSchemaEnum } from '../../schema';
 
 @Component({
   selector: 'sf-checkbox',
-  template: `
-  <ng-template #all>
-    <label *ngIf="ui.checkAll" nz-checkbox class="mr-sm"
-      [(ngModel)]="allChecked"
-      [nzIndeterminate]="indeterminate"
-      (click)="onAllChecked($event)">
-      {{ ui.checkAllText || '全选' }}
-    </label>
-  </ng-template>
-  <nz-form-item [style.width.px]="ui.width">
-    <nz-col *ngIf="data.length > 0" [nzSpan]="label" class="ant-form-item-label">
-      <label [attr.for]="id" [class.ant-form-item-required]="ui._required">
-        {{ schema.title }}
-        <span class="optional">
-          {{ ui.optional }}
-          <nz-tooltip *ngIf="ui.optionalHelp" [nzTitle]="ui.optionalHelp">
-            <i nz-tooltip class="anticon anticon-question-circle-o"></i>
-          </nz-tooltip>
-        </span>
-      </label>
-    </nz-col>
-    <nz-col class="ant-form-item-control-wrapper" [nzSpan]="control" [nzOffset]="offset">
-      <div class="ant-form-item-control" [class.has-error]="showError">
-
-          <ng-container *ngIf="data.length === 0">
-            <label nz-checkbox
-              [nzDisabled]="disabled"
-              [ngModel]="value"
-              (ngModelChange)="_setValue($event)">
-              <span [innerHTML]="schema.title"></span>
-              <span class="optional">
-                {{ ui.optional }}
-                <nz-tooltip *ngIf="ui.optionalHelp" [nzTitle]="ui.optionalHelp">
-                  <i nz-tooltip class="anticon anticon-question-circle-o"></i>
-                </nz-tooltip>
-              </span>
-            </label>
-          </ng-container>
-          <ng-container *ngIf="data.length > 0">
-            <ng-container *ngIf="grid_span === 0">
-              <ng-template [ngTemplateOutlet]="all"></ng-template>
-              <nz-checkbox-group [ngModel]="data" (ngModelChange)="notifySet()"></nz-checkbox-group>
-            </ng-container>
-            <ng-container *ngIf="grid_span !== 0">
-              <nz-checkbox-wrapper class="checkbox-grid-list" (nzOnChange)="groupInGridChange($event)">
-                <nz-row>
-                  <nz-col [nzSpan]="grid_span" *ngIf="ui.checkAll">
-                    <ng-template [ngTemplateOutlet]="all"></ng-template>
-                  </nz-col>
-                  <nz-col [nzSpan]="grid_span" *ngFor="let i of data">
-                    <label nz-checkbox [nzValue]="i.value" [ngModel]="i.checked" [nzDisabled]="i.disabled">{{i.label}}</label>
-                  </nz-col>
-                </nz-row>
-              </nz-checkbox-wrapper>
-            </ng-container>
-          </ng-container>
-
-          <nz-form-extra *ngIf="schema.description" [innerHTML]="schema.description"></nz-form-extra>
-          <nz-form-explain *ngIf="!ui.onlyVisual && showError">{{error}}</nz-form-explain>
-      </div>
-    </nz-col>
-  </nz-form-item>
-  `,
+  templateUrl: './checkbox.widget.html',
   preserveWhitespaces: false,
 })
 export class CheckboxWidget extends ControlWidget {
   data: SFSchemaEnum[] = [];
   allChecked = false;
   indeterminate = false;
   grid_span: number;
-  label: number;
-  control: number;
-  offset: number;
+  title = ``;
+
+  get l() {
+    return this.formProperty.root.widget.sfComp.locale;
+  }
 
   reset(value: any) {
+
     getData(this.schema, this.ui, this.formProperty.formData).subscribe(
       list => {
         this.data = list;
+        this.allChecked = false;
+        this.indeterminate = false;
+        this.title = this.schema.title;
 
-        this.label = this.ui.spanLabel;
-        this.control = this.ui.spanControl;
         if (list.length === 0) {
-          this.label = null;
-          this.offset = this.ui.spanLabel;
+          this.schema.title = '';
         }
         this.grid_span = this.ui.span && this.ui.span > 0 ? this.ui.span : 0;
+
         this.updateAllChecked();
       },
     );

diff --git a/packages/form/src/widgets/checkbox/demo/simple.md b/packages/form/src/widgets/checkbox/demo/simple.md
@@ -45,6 +45,7 @@ export class DemoComponent {
         ui: {
           widget: 'checkbox',
           span: 8, // 指定每一项 8 个单元的布局
+          checkAll: true
         },
         default: ['Apple'],
       },

diff --git a/packages/theme/src/locale/languages/en-US.ts b/packages/theme/src/locale/languages/en-US.ts
@@ -33,5 +33,8 @@ export default <LocaleData>{
     reset: 'Reset',
     search: 'Search',
     edit: 'Save',
+    addText: 'Add',
+    removeText: 'Remove',
+    checkAllText: 'Check all',
   },
 };
diff --git a/packages/theme/src/locale/languages/zh-CN.ts b/packages/theme/src/locale/languages/zh-CN.ts
@@ -33,5 +33,8 @@ export default <LocaleData>{
     reset: '重置',
     search: '搜索',
     edit: '保存',
+    addText: '添加',
+    removeText: '移除',
+    checkAllText: '全选',
   },
 };
diff --git a/packages/theme/src/locale/languages/zh-TW.ts b/packages/theme/src/locale/languages/zh-TW.ts
@@ -33,5 +33,8 @@ export default <LocaleData>{
     reset: '重置',
     search: '搜索',
     edit: '保存',
+    addText: '添加',
+    removeText: '移除',
+    checkAllText: '全選',
   },
 };
diff --git a/packages/theme/src/locale/locale.types.ts b/packages/theme/src/locale/locale.types.ts
@@ -35,6 +35,9 @@ export interface SFLocaleData {
   reset: string;
   search: string;
   edit: string;
+  addText: string;
+  removeText: string;
+  checkAllText: string;
 }
 
 export interface LocaleData {

diff --git a/packages/theme/styles/app/delon/form.less b/packages/theme/styles/app/delon/form.less
@@ -47,18 +47,14 @@
       margin-right: 16px;
     }
   }
-  .checkbox-grid-list {
+  &__checkbox-list {
     width: 100%;
     display: block;
     @media (min-width: @mobile-min) {
       nz-col {
         margin-top: 8px;
       }
     }
-    // https://github.com/NG-ZORRO/ng-zorro-antd/issues/1358
-    .ant-checkbox-group {
-      display: block;
-    }
   }
   // upload
   .ant-upload-select-picture-card i {