From 299e877e21684906ac602408bc0e998ddeb71b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= <cipchk@qq.com>
Date: Wed, 3 Oct 2018 19:27:34 +0800
Subject: [PATCH] feat(abc:page-header): add loading & wide properies (#194)

---
 packages/abc/page-header/index.md             |  2 +
 .../page-header/page-header.component.html    | 67 ++++++++++---------
 .../abc/page-header/page-header.component.ts  |  8 +++
 packages/abc/page-header/page-header.spec.ts  | 16 ++++-
 packages/abc/page-header/style/index.less     |  5 ++
 5 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/packages/abc/page-header/index.md b/packages/abc/page-header/index.md
index af65f3a007..661ca27be4 100644
--- a/packages/abc/page-header/index.md
+++ b/packages/abc/page-header/index.md
@@ -20,6 +20,8 @@ config: PageHeaderConfig
 `[homeLink]` | 首页链接  | `string` | `/`
 `[homeI18n]` | 首页链接国际化参数 | `string` | -
 `[autoBreadcrumb]` | 自动生成导航，以当前路由从主菜单中定位  | `boolean` | `true`
+`[loading]` | 是否加载中 | `boolean` | `false`
+`[wide]` | 是否定宽 | `boolean` | `false`
 `[fixed]` | 是否固定模式 | `boolean` | `false`
 `[fixedOffsetTop]` | 固定偏移值 | `number` | `64`
 `[breadcrumb]` | 自定义导航区域  | `TemplateRef<any>` | -
diff --git a/packages/abc/page-header/page-header.component.html b/packages/abc/page-header/page-header.component.html
index 08b3b49973..d834d5075b 100644
--- a/packages/abc/page-header/page-header.component.html
+++ b/packages/abc/page-header/page-header.component.html
@@ -3,40 +3,45 @@
 </nz-affix>
 <ng-template #phTpl>
   <div class="page-header">
-    <ng-container *ngIf="!breadcrumb; else breadcrumb">
-      <nz-breadcrumb *ngIf="paths && paths.length > 0">
-        <nz-breadcrumb-item *ngFor="let i of paths">
-          <ng-container *ngIf="i.link">
-            <a [routerLink]="i.link">{{i.title}}</a>
-          </ng-container>
-          <ng-container *ngIf="!i.link">{{i.title}}</ng-container>
-        </nz-breadcrumb-item>
-      </nz-breadcrumb>
-    </ng-container>
-    <div class="page-header__detail">
-      <div *ngIf="logo" class="page-header__logo">
-        <ng-template [ngTemplateOutlet]="logo"></ng-template>
-      </div>
-      <div class="page-header__main">
-        <div class="page-header__row">
-          <h1 *ngIf="_title || _titleTpl" class="page-header__title">
-            <ng-container *ngIf="_title; else _titleTpl">{{_title}}</ng-container>
-          </h1>
-          <div *ngIf="action" class="page-header__action">
-            <ng-template [ngTemplateOutlet]="action"></ng-template>
+    <div [ngClass]="{'page-header__wide': wide}">
+      <nz-skeleton [nzLoading]="loading" [nzTitle]="false" [nzActive]="true"
+        [nzParagraph]="{rows: 3}" [nzAvatar]="{ size: 'large', shape: 'circle' }">
+        <ng-container *ngIf="!breadcrumb; else breadcrumb">
+          <nz-breadcrumb *ngIf="paths && paths.length > 0">
+            <nz-breadcrumb-item *ngFor="let i of paths">
+              <ng-container *ngIf="i.link">
+                <a [routerLink]="i.link">{{i.title}}</a>
+              </ng-container>
+              <ng-container *ngIf="!i.link">{{i.title}}</ng-container>
+            </nz-breadcrumb-item>
+          </nz-breadcrumb>
+        </ng-container>
+        <div class="page-header__detail">
+          <div *ngIf="logo" class="page-header__logo">
+            <ng-template [ngTemplateOutlet]="logo"></ng-template>
           </div>
-        </div>
-        <div class="page-header__row">
-          <div class="page-header__desc" (cdkObserveContent)="checkContent()" #conTpl>
-            <ng-content></ng-content>
-            <ng-template [ngTemplateOutlet]="content"></ng-template>
-          </div>
-          <div *ngIf="extra" class="page-header__extra">
-            <ng-template [ngTemplateOutlet]="extra"></ng-template>
+          <div class="page-header__main">
+            <div class="page-header__row">
+              <h1 *ngIf="_title || _titleTpl" class="page-header__title">
+                <ng-container *ngIf="_title; else _titleTpl">{{_title}}</ng-container>
+              </h1>
+              <div *ngIf="action" class="page-header__action">
+                <ng-template [ngTemplateOutlet]="action"></ng-template>
+              </div>
+            </div>
+            <div class="page-header__row">
+              <div class="page-header__desc" (cdkObserveContent)="checkContent()" #conTpl>
+                <ng-content></ng-content>
+                <ng-template [ngTemplateOutlet]="content"></ng-template>
+              </div>
+              <div *ngIf="extra" class="page-header__extra">
+                <ng-template [ngTemplateOutlet]="extra"></ng-template>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+        <ng-template [ngTemplateOutlet]="tab"></ng-template>
+      </nz-skeleton>
     </div>
-    <ng-template [ngTemplateOutlet]="tab"></ng-template>
   </div>
 </ng-template>
diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts
index dbe8888501..b46c4f02b2 100644
--- a/packages/abc/page-header/page-header.component.ts
+++ b/packages/abc/page-header/page-header.component.ts
@@ -70,6 +70,14 @@ export class PageHeaderComponent
     }
   }
 
+  @Input()
+  @InputBoolean()
+  loading = false;
+
+  @Input()
+  @InputBoolean()
+  wide = false;
+
   @Input()
   home: string;
 
diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts
index 5d08f271da..5d32cf194d 100644
--- a/packages/abc/page-header/page-header.spec.ts
+++ b/packages/abc/page-header/page-header.spec.ts
@@ -106,6 +106,18 @@ describe('abc: page-header', () => {
         expect(affixComp.updatePosition).toHaveBeenCalled();
       });
     });
+
+    it('#wide', () => {
+      context.wide = true;
+      fixture.detectChanges();
+      isExists('.page-header__wide');
+    });
+
+    it('#loading', () => {
+      context.loading = true;
+      fixture.detectChanges();
+      isExists('.ant-skeleton');
+    });
   });
 
   describe('[generation breadcrumb]', () => {
@@ -353,7 +365,7 @@ describe('abc: page-header', () => {
   template: `
     <page-header #comp [title]="title" [autoTitle]="autoTitle" [syncTitle]="syncTitle"
         [autoBreadcrumb]="autoBreadcrumb" [home]="home" [homeI18n]="homeI18n" [homeLink]="homeLink"
-        [fixed]="fixed"
+        [fixed]="fixed" [loading]="loading" [wide]="wide"
         [breadcrumb]="breadcrumb" [logo]="logo" [action]="action" [extra]="extra" [content]="content" [tab]="tab">
         <ng-template #breadcrumb><div class="breadcrumb">面包屑</div></ng-template>
         <ng-template #logo><div class="logo">logo</div></ng-template>
@@ -375,4 +387,6 @@ class TestComponent {
   homeLink: string;
   homeI18n: string;
   fixed: boolean;
+  loading = false;
+  wide = false;
 }
diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less
index 0858527aff..14de372292 100644
--- a/packages/abc/page-header/style/index.less
+++ b/packages/abc/page-header/style/index.less
@@ -2,12 +2,17 @@
 
 @page-header-prefix: ~'.page-header';
 @page-header-bg: #fff;
+@page-header-wide: 1200px;
 
 @{page-header-prefix} {
   display: block;
   background-color: @page-header-bg;
   padding: 16px 32px 0 32px;
   border-bottom: @border-width-base @border-style-base @border-color-split;
+  &__wide {
+    max-width: @page-header-wide;
+    margin: auto;
+  }
   .ant-breadcrumb {
     margin-bottom: 16px;
   }