refactor: angular 10 (#165)

Author: cipchk

CHANGELOG.md

@@ -1,3 +1,13 @@
+# [10.0.0-rc.1](https://github.com/cipchk/ngx-weui/compare/9.0.0...10.0.0-rc.1) (2020-07-08)
+
+
+### Features
+
+* **module:picker:** add `className` property of options ([#164](https://github.com/cipchk/ngx-weui/issues/164)) ([e4e6f0e](https://github.com/cipchk/ngx-weui/commit/e4e6f0e5490944b3a22d6fe8db6019ba22b74e0b))
+* angular 10 ([4655b41](https://github.com/cipchk/ngx-weui/commit/4655b4177dc7634fe8cf89e1f1254bef47ff8469))
+
+
+
 # [9.1.0](https://github.com/cipchk/ngx-weui/compare/9.0.0...9.1.0) (2020-07-08)
 
 

README.md

@@ -22,7 +22,7 @@ NGX-WEUI
 
 - WeUI `1.x` using `7.0.x`
 - WeUI `<= 2.2` using `8.x` & Angular 8
-- WeUI `>= 2.3` using `9.x` & Angular 9, Support dark & light theme
+- WeUI `>= 2.3` using `9.x` & Angular 9, 10, Support dark & light theme
 
 ## Table of Contents
 
@@ -36,9 +36,9 @@ NGX-WEUI
 
 ## Usage & Demo
 
-- [Documentation](https://cipchk.github.io/ngx-weui/) [国内镜像](https://cipchk.gitee.io/ngx-weui/)
-- [Live Demo](https://cipchk.github.io/ngx-weui/) [国内镜像](https://cipchk.gitee.io/ngx-weui/)
-- [Stackblitz](https://stackblitz.com/edit/ngx-weui)
+- [Documentation](https://cipchk.github.io/ngx-weui/) - [国内镜像](https://cipchk.gitee.io/ngx-weui/)
+- [Live Demo](https://cipchk.github.io/ngx-weui/) - [国内镜像](https://cipchk.gitee.io/ngx-weui/)
+- [Stackblitz](https://stackblitz.com/edit/ngx-weui), [Codesandbox](https://codesandbox.io/s/ngx-weui-wki41?file=/src/app/app.component.ts)
 
 ## Create project
 

angular.json

@@ -14,7 +14,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.json",
+            "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "aot": false,
             "assets": [
@@ -72,13 +72,6 @@
               "browserTarget": "ngx-weui-doc:build:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.json"],
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     },

components/accordion/accordion-panel.component.ts

@@ -1,6 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Host, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { AnimateType, InputBoolean } from 'ngx-weui/core';
-import { AccordionPanelComponent } from './accordion-panel.component';
 import { AccordionConfig } from './accordion.config';
 
 @Component({
@@ -66,3 +65,60 @@ export class AccordionComponent {
     });
   }
 }
+
+@Component({
+  selector: 'weui-accordion-panel',
+  exportAs: 'weuiAccordionPanel',
+  template: `
+    <div role="tab" (click)="_toggle()"><ng-content select="[heading]"></ng-content></div>
+    <div role="tabpanel" class="weui-accordion-content"><ng-content></ng-content></div>
+  `,
+  host: {
+    '[class.weui-accordion-panel-disabled]': 'disabled',
+    '[class.weui-accordion-active]': 'active',
+  },
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AccordionPanelComponent implements OnInit, OnDestroy {
+  /**
+   * 是否禁止
+   */
+  @Input() @InputBoolean() disabled: boolean = false;
+
+  private _active: boolean = false;
+
+  /**
+   * 是否展开
+   */
+  @Input()
+  @InputBoolean()
+  get active(): boolean {
+    return this._active;
+  }
+
+  set active(value: boolean) {
+    this._active = value;
+    if (value) {
+      this.accordion._closeOthers(this);
+    }
+  }
+
+  constructor(@Host() protected accordion: AccordionComponent) {}
+
+  ngOnInit(): void {
+    this.accordion._add(this);
+  }
+
+  ngOnDestroy(): void {
+    this.accordion._remove(this);
+  }
+
+  _toggle(): void {
+    if (!this.disabled) {
+      this.active = !this.active;
+      this.accordion.select.emit(this.accordion._index(this));
+    }
+  }
+}

components/accordion/accordion.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { AccordionPanelComponent } from './accordion-panel.component';
-import { AccordionComponent } from './accordion.component';
+
+import { AccordionComponent, AccordionPanelComponent } from './accordion.component';
 
 @NgModule({
   imports: [CommonModule],

components/accordion/accordion.module.ts

@@ -48,7 +48,7 @@ function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]): void
 describe('Component: Accordion', () => {
   let fixture: ComponentFixture<TestAccordionComponent>;
   let context: TestAccordionComponent;
-  let element: any;
+  let element: HTMLElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -101,7 +101,7 @@ describe('Component: Accordion', () => {
 
 describe('Component: Accordion: Auto', () => {
   let fixture: ComponentFixture<TestAccordionComponent>;
-  let element: any;
+  let element: HTMLElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -124,7 +124,7 @@ describe('Component: Accordion: Auto', () => {
 @Component({ template: '' })
 class TestAccordionComponent {
   collapsible: boolean = true;
-  panels: any[] = [
+  panels = [
     { title: 'title1', content: 'content1', active: false, disabled: false },
     { title: 'title2', content: 'content2', active: false, disabled: false },
     { title: 'title3', content: 'content3', active: false, disabled: false },

components/accordion/accordion.spec.ts

@@ -1,4 +1,3 @@
-export { AccordionPanelComponent } from './accordion-panel.component';
-export { AccordionComponent } from './accordion.component';
-export { AccordionConfig } from './accordion.config';
-export { AccordionModule } from './accordion.module';
+export * from './accordion.component';
+export * from './accordion.config';
+export * from './accordion.module';

components/accordion/public-api.ts

@@ -34,7 +34,7 @@ import { ActionSheetMenuItem } from './actionsheet.types';
   encapsulation: ViewEncapsulation.None,
 })
 export class ActionSheetComponent implements OnDestroy {
-  private observer: Observer<any>;
+  private observer: Observer<ActionSheetMenuItem>;
   private destroied = false;
   _shown = false;
   /**
@@ -116,7 +116,7 @@ export class ActionSheetComponent implements OnDestroy {
   /**
    * 选择动作
    */
-  _onSelect(menu: { text?: string; [key: string]: any }): void {
+  _onSelect(menu: ActionSheetMenuItem): void {
     this.observer.next(menu);
     this.observer.complete();
     this.hide();

components/actionsheet/actionsheet.component.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common';
-import { ApplicationRef, ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { BaseService } from 'ngx-weui/core';
 import { Observable } from 'rxjs';
 import { ActionSheetComponent } from './actionsheet.component';
@@ -8,10 +7,6 @@ import { ActionSheetMenuItem } from './actionsheet.types';
 
 @Injectable({ providedIn: 'root' })
 export class ActionSheetService extends BaseService {
-  constructor(resolver: ComponentFactoryResolver, applicationRef: ApplicationRef, injector: Injector, @Inject(DOCUMENT) doc: any) {
-    super(resolver, applicationRef, injector, doc);
-  }
-
   /**
    * 创建一个弹出式菜单并显示
    *

components/actionsheet/actionsheet.service.ts

@@ -32,7 +32,7 @@ describe('Component: ActionSheet', () => {
   describe('[default]', () => {
     let fixture: ComponentFixture<TestActionSheetComponent>;
     let context: TestActionSheetComponent;
-    let el: any;
+    let el: HTMLDivElement;
 
     const html = `
             <weui-actionsheet
@@ -76,7 +76,7 @@ describe('Component: ActionSheet', () => {
         }
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should be android when set auto and isAndroid is true', done => {
@@ -89,7 +89,7 @@ describe('Component: ActionSheet', () => {
         document.querySelector('body')?.removeAttribute('data-platform');
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should be opened set actionsheet title', done => {
@@ -99,7 +99,7 @@ describe('Component: ActionSheet', () => {
         expect(getTitle(el).textContent).toBe(str);
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should be opened set actionsheet items', done => {
@@ -111,7 +111,7 @@ describe('Component: ActionSheet', () => {
         expect(items[1].textContent?.trim()).toBe('menu2');
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should be opened set actionsheet action', done => {
@@ -121,7 +121,7 @@ describe('Component: ActionSheet', () => {
         expect(getAction(el).textContent).toBe(str);
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should be opened if android not title & action', done => {
@@ -134,7 +134,7 @@ describe('Component: ActionSheet', () => {
         expect(getAction(el)).toBeNull();
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should choose item and get back a result', done => {
@@ -147,7 +147,7 @@ describe('Component: ActionSheet', () => {
         expect(res.other).toBe(1);
         done();
       });
-      (getItems(el)[0] as any).click();
+      (getItems(el)[0] as HTMLElement).click();
     });
 
     it('should click backdrop has closed', done => {
@@ -157,22 +157,22 @@ describe('Component: ActionSheet', () => {
         expect(true).toBeTruthy();
         done();
       });
-      el.querySelector('.weui-mask').click();
+      (el.querySelector('.weui-mask') as HTMLElement).click();
     });
 
     it('should click backdrop not-allow closing', () => {
       context.config = { ...context.config, backdrop: false };
       context.actioinSheet.show();
       fixture.detectChanges();
-      el.querySelector('.weui-mask').click();
+      (el.querySelector('.weui-mask') as HTMLElement).click();
       expect(context.actioinSheet._shown).toBe(true);
     });
   });
 
   describe('[service]', () => {
     let service: ActionSheetService;
-    let fixture: any;
-    let el: any;
+    let fixture: ComponentFixture<TestActionSheetServiceComponent>;
+    let el: HTMLDivElement;
 
     beforeEach(fakeAsync(() => {
       TestBed.configureTestingModule({
@@ -202,13 +202,13 @@ describe('Component: ActionSheet', () => {
       });
 
       fixture.detectChanges();
-      (getItems(el.nextSibling)[0] as any).click();
+      (getItems(el.nextSibling as HTMLElement)[0] as HTMLElement).click();
     });
 
     it('should be show if specify [config] param', () => {
       service.show([...MENUS], { ...CONFIG });
       fixture.detectChanges();
-      expect(el.nextSibling.nodeName).toBe('WEUI-ACTIONSHEET');
+      expect((el.nextSibling as HTMLElement).nodeName).toBe('WEUI-ACTIONSHEET');
     });
   });
 });
@@ -225,7 +225,7 @@ class TestActionSheetServiceComponent {}
 class TestActionSheetComponent {
   @ViewChild(ActionSheetComponent, { static: true }) actioinSheet: ActionSheetComponent;
 
-  menus: any[] = [...MENUS];
+  menus = [...MENUS];
 
   config: ActionSheetConfig = { ...CONFIG };