[优化] 优化tab在ie下切换卡顿的问题，fixes #843

Change-Id: Ie68e200b36c0f609118c997370a990b67a41aa3c
rdkmaster · Dec 25, 2018 · 28aeeeb · 28aeeeb
1 parent 7457ad4
commit 28aeeeb
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 4 deletions.
diff --git a/src/app/demo/tab/demo-set.module.ts b/src/app/demo/tab/demo-set.module.ts
@@ -23,6 +23,8 @@ import {TabsUpdateTitleDemoComponent} from "./update-title/demo.component";
 import {TabsUpdateTitleDemoModule} from "./update-title/demo.module";
 import {TabsEditableDemoComponent} from "./editable/demo.component";
 import {TabsEditableDemoModule} from "./editable/demo.module";
+import {TabsWithTableInIEComponent} from "./with-table-in-ie/demo.component";
+import {TabsWithTableInIEDemoModule} from "./with-table-in-ie/demo.module";
 
 export const routerConfig = [
     {
@@ -57,14 +59,17 @@ export const routerConfig = [
     {
         path: 'editable', component: TabsEditableDemoComponent
     },
+    {
+        path: 'with-table-in-ie', component: TabsWithTableInIEComponent
+    },
 ];
 
 @NgModule({
     imports: [
         RouterModule.forChild(routerConfig),
         TabsBasicDemoModule, TabsDestroyDemoModule, TabsHideTabDemoModule, TabsShowTabDemoModule,
         DynamicTabDemoModule, TabsWithInputDemoModule, TabsWithNgForDemoModule, TabsUpdateTitleDemoModule,
-        TabsEditableDemoModule
+        TabsEditableDemoModule, TabsWithTableInIEDemoModule
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

diff --git a/src/app/demo/tab/with-table-in-ie/demo.component.html b/src/app/demo/tab/with-table-in-ie/demo.component.html
@@ -0,0 +1,32 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="container">
+    <jigsaw-tabs (selectChange)="testEvent()">
+        <jigsaw-tab-pane *ngFor="let tabData of tabDatas">
+            <div jigsaw-title><span class="fa fa-gift"></span>{{tabData}}</div>
+            <ng-template>
+                <table-content [tabData]="tabData"></table-content>
+                <!--{{tabData}} Content
+                <jigsaw-table style="margin-bottom: 10px;" maxHeight="500px" [data]="pageable"></jigsaw-table>
+                <jigsaw-pagination
+                    [data]="pageable"
+                    [pageSizeOptions]="[5, 10, 20, 50]"
+                    [searchable]="true"
+                    [showQuickJumper]="true"
+                ></jigsaw-pagination>-->
+            </ng-template>
+        </jigsaw-tab-pane>
+    </jigsaw-tabs>
+</div>
+
+<!--<jigsaw-table style="margin-bottom: 10px;" maxHeight="500px" [data]="pageable"></jigsaw-table>
+<jigsaw-pagination
+    [data]="pageable"
+    [pageSizeOptions]="[5, 10, 20]"
+    [searchable]="true"
+    [showQuickJumper]="true"
+></jigsaw-pagination>-->
diff --git a/src/app/demo/tab/with-table-in-ie/demo.component.ts b/src/app/demo/tab/with-table-in-ie/demo.component.ts
@@ -0,0 +1,95 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {LocalPageableTableData, PageableTableData, TableData} from "../../../../jigsaw/core/data/table-data";
+import {HttpClient} from "@angular/common/http";
+
+@Component({
+    templateUrl: "./demo.component.html"
+})
+export class TabsWithTableInIEComponent implements OnInit {
+    tabDatas: Array<string>;
+
+    ngOnInit() {
+        this.tabDatas = ["Tab1", "Tab2", "Tab3", "Tab4"]
+    }
+
+    testEvent() {
+        console.info("tab页点击");
+    }
+
+    pageable: PageableTableData | LocalPageableTableData;
+
+    constructor(http: HttpClient) {
+        this.pageable = new LocalPageableTableData();
+        this.pageable.http = http;
+        this.pageable.dataReviser = data => {
+            const dataTemp = {
+                header: data.header.concat(),
+                field: data.field.concat(),
+                data: data.data.concat().map(row => {return row.concat()}),
+                paging: data.paging
+            };
+            for(let i = 0; i < 3; i++) {
+                dataTemp.header.push(...data.header);
+                dataTemp.field.push(...data.field);
+                dataTemp.data.forEach((row, i) => row.push(...data.data[i]));
+            }
+            console.log(data, dataTemp);
+            return dataTemp;
+        };
+        this.pageable.pagingInfo.pageSize = 20;
+        this.pageable.fromAjax('mock-data/hr-list');
+    }
+
+
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '';
+    description: string = '';
+    tags: string[] = [
+        'JigsawTab',
+    ];
+}
+
+@Component({
+    selector: 'table-content',
+    template: `
+        {{tabData}} Content
+        <jigsaw-table style="margin-bottom: 10px;" maxHeight="500px" [data]="pageable"></jigsaw-table>
+        <jigsaw-pagination
+            [data]="pageable"
+            [pageSizeOptions]="[5, 10, 20, 50]"
+            [searchable]="true"
+            [showQuickJumper]="true"
+        ></jigsaw-pagination>
+    `
+})
+export class TableContent {
+    @Input()
+    tabData: string;
+
+    pageable: PageableTableData | LocalPageableTableData;
+
+    constructor(http: HttpClient) {
+        this.pageable = new LocalPageableTableData();
+        this.pageable.http = http;
+        this.pageable.dataReviser = data => {
+            const dataTemp = {
+                header: data.header.concat(),
+                field: data.field.concat(),
+                data: data.data.concat().map(row => {return row.concat()}),
+                paging: data.paging
+            };
+            for(let i = 0; i < 3; i++) {
+                dataTemp.header.push(...data.header);
+                dataTemp.field.push(...data.field);
+                dataTemp.data.forEach((row, i) => row.push(...data.data[i]));
+            }
+            console.log(data, dataTemp);
+            return dataTemp;
+        };
+        this.pageable.pagingInfo.pageSize = 20;
+        this.pageable.fromAjax('mock-data/hr-list');
+    }
+}
diff --git a/src/app/demo/tab/with-table-in-ie/demo.module.ts b/src/app/demo/tab/with-table-in-ie/demo.module.ts
@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {JigsawTabsModule} from "jigsaw/component/tabs/index";
+import {TabsWithTableInIEComponent, TableContent} from './demo.component';
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawTableModule} from "../../../../jigsaw/component/table/table";
+import {JigsawPaginationModule} from "../../../../jigsaw/component/pagination/pagination";
+
+@NgModule({
+    imports: [CommonModule, JigsawTabsModule, JigsawDemoDescriptionModule, JigsawTableModule, JigsawPaginationModule],
+    declarations: [TabsWithTableInIEComponent, TableContent],
+    exports: [TabsWithTableInIEComponent],
+    entryComponents: [TableContent]
+})
+export class TabsWithTableInIEDemoModule {
+}
diff --git a/src/jigsaw/component/tabs/tab.scss b/src/jigsaw/component/tabs/tab.scss
@@ -179,7 +179,6 @@ $tab-prefix: #{$jigsaw-prefix}-tabs;
 
         .#{$tab-prefix}-tabpane {
             display: block;
-            flex-shrink: 0;
             width: 100%;
             height: 100%;
             transition: transform 0.5s;
@@ -196,4 +195,8 @@ $tab-prefix: #{$jigsaw-prefix}-tabs;
             }
         }
     }
+
+    &-in-ie &-content &-tabpane, &-in-ie &-nav-container &-ink-bar {
+        transition: null;
+    }
 }
diff --git a/src/jigsaw/component/tabs/tab.ts b/src/jigsaw/component/tabs/tab.ts
@@ -23,6 +23,7 @@ import {JigsawTabContent, JigsawTabLabel, TabTitleInfo} from "./tab-item";
 import {AbstractJigsawComponent, IDynamicInstantiatable} from "../common";
 import {PopupService, PopupSize, PopupInfo, PopupPositionValue} from "../../service/popup.service";
 import {Subscription} from "rxjs/Subscription";
+import {CommonUtils} from "../../core/utils/common-utils";
 
 /**
  * 使用`JigsawTab`来将一组视图叠加在同一个区域使用，并以页签的方式来切换这些视图。
@@ -41,6 +42,7 @@ import {Subscription} from "rxjs/Subscription";
     templateUrl: 'tab.html',
     host: {
         '[class.jigsaw-tabs-host]': 'true',
+        '[class.jigsaw-tabs-in-ie]': '_$isIE',
         '[style.width]': 'width',
         '[style.height]': 'height'
     }
@@ -53,8 +55,14 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit,
                 private _elementRef: ElementRef,
                 private _popupService: PopupService) {
         super();
+        this._$isIE = CommonUtils.isIE();
     }
 
+    /**
+     * @internal
+     */
+    public _$isIE: boolean;
+
     /**
      * @internal
      */
@@ -282,12 +290,12 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit,
 
         const tabElem = this._tabsInkBar.nativeElement;
         if (tabElem.offsetWidth != labelPos.width) {
-            this._asyncSetStyle(this.selectedIndex);
+            this._setInkBarStyle(this.selectedIndex);
         } else {
             const match = (tabElem.style.transform + '').match(/\btranslate3d\s*\((\d+)px\s*,/);
             const offset = match ? match[1] : -1;
             if (offset != labelPos.offSet + this._tabLeftMap.get(this.selectedIndex)) {
-                this._asyncSetStyle(this.selectedIndex);
+                this._setInkBarStyle(this.selectedIndex);
             }
         }
     }