feat(module: picker): feat set disabled work (#231)

NG-ZORRO · Jan 9, 2019 · 02733b4 · 02733b4
1 parent 39870da
commit 02733b4
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 125 deletions.
diff --git a/components/picker/demo/basic.ts b/components/picker/demo/basic.ts
@@ -3,50 +3,67 @@ import { Picker } from 'ng-zorro-antd-mobile';
 @Component({
   selector: 'demo-picker-basic',
   template: `
-  <div Button (click)="showPicker()">{{name}}</div>
-  <WhiteSpace></WhiteSpace>
-  <List className="my-list">
-    <ListItem Picker
-              [extra]="name1"
-              [arrow]="'horizontal'"
-              [mask]=true
-              [title]="'Areas'"
-              [(ngModel)]="value1"
-              (ngModelChange)="onOk1($event)"
-              (onDismiss)="onDismiss1()"
-    >
-      Multiple & cascader
-    </ListItem>
-    <ListItem Picker
-              [extra]="name2"
-              [arrow]="'horizontal'"
-              [cascade]="false"
-              [data]="seasons"
-              [title]="'选择季节'"
-              [(ngModel)]="value2"
-              (ngModelChange)="onOk2($event)"
-    >
-      Multiple
-    </ListItem>
-    <ListItem Picker
-              [extra]="name3"
-              [arrow]="'horizontal'"
-              [data]="singleArea"
-              [(ngModel)]="value3"
-              (ngModelChange)="onOk3($event)"
-    >
-      Single
-    </ListItem>
-    <ListItem Picker
-              [extra]="name4"
-              [arrow]="'horizontal'"
-              [(ngModel)]="value4"
-              (onPickerChange)="onPickerChange($event)"
-              (ngModelChange)="onOk4($event)"
-    >
-      Multiple & async
-    </ListItem>
-  </List>
+    <div Button (click)="showPicker()">{{ name }}</div>
+    <WhiteSpace></WhiteSpace>
+    <List className="my-list">
+      <ListItem
+        Picker
+        [extra]="name1"
+        [arrow]="'horizontal'"
+        [mask]="true"
+        [title]="'Areas'"
+        [(ngModel)]="value1"
+        (ngModelChange)="onOk1($event)"
+        (onDismiss)="onDismiss1()"
+      >
+        Multiple & cascader
+      </ListItem>
+      <ListItem
+        Picker
+        [extra]="name2"
+        [arrow]="'horizontal'"
+        [cascade]="false"
+        [data]="seasons"
+        [title]="'选择季节'"
+        [(ngModel)]="value2"
+        (ngModelChange)="onOk2($event)"
+      >
+        Multiple
+      </ListItem>
+      <ListItem
+        Picker
+        [extra]="name3"
+        [arrow]="'horizontal'"
+        [data]="singleArea"
+        [(ngModel)]="value3"
+        (ngModelChange)="onOk3($event)"
+      >
+        Single
+      </ListItem>
+      <ListItem
+        Picker
+        [extra]="name4"
+        [arrow]="'horizontal'"
+        [(ngModel)]="value4"
+        (onPickerChange)="onPickerChange($event)"
+        (ngModelChange)="onOk4($event)"
+      >
+        Multiple & async
+      </ListItem>
+      <ListItem
+        Picker
+        [extra]="name1"
+        [disabled]="true"
+        [arrow]="'horizontal'"
+        [mask]="true"
+        [title]="'Areas'"
+        [(ngModel)]="value1"
+        (ngModelChange)="onOk1($event)"
+        (onDismiss)="onDismiss1()"
+      >
+        Disabled
+      </ListItem>
+    </List>
   `,
   providers: [Picker]
 })
@@ -97,7 +114,7 @@ export class DemoPickerBasicComponent {
       ]
     }
   ];
-  name  = '选择';
+  name = '选择';
   name1 = '选择';
   name2 = '选择';
   name3 = '选择';
@@ -108,9 +125,7 @@ export class DemoPickerBasicComponent {
   value3 = [];
   value4 = [];
 
-  constructor (private _picker: Picker ) {
-
-  }
+  constructor(private _picker: Picker) {}
 
   onDismiss1() {
     console.log('cancel');
@@ -158,11 +173,15 @@ export class DemoPickerBasicComponent {
   }
 
   showPicker() {
-    Picker.showPicker({value: this.value, data: this.singleArea}, (result) => {
-      this.name = this.getResult(result);
-      this.value = this.getValue(result);
-    }, (cancel) => {
-      console.log('cancel');
-    });
+    Picker.showPicker(
+      { value: this.value, data: this.singleArea },
+      result => {
+        this.name = this.getResult(result);
+        this.value = this.getValue(result);
+      },
+      cancel => {
+        console.log('cancel');
+      }
+    );
   }
 }
diff --git a/components/picker/picker.component.spec.ts b/components/picker/picker.component.spec.ts
@@ -96,32 +96,60 @@ describe('PickerComponent', () => {
     expect(component.modelChange).toHaveBeenCalledTimes(1);
   });
 
-  it ('should touch event work', () => {
+  it('should touch event work', () => {
     const list = lists[0].nativeElement;
     list.click();
     fixture.detectChanges();
     pickerEle = document.querySelector('picker');
-    const target =  pickerEle.querySelector('.am-picker-col-mask');
+    const target = pickerEle.querySelector('.am-picker-col-mask');
     dispatchTouchEvent(target, 'mousedown', 0, 100);
     fixture.detectChanges();
     dispatchTouchEvent(target, 'mousemove', 0, 0);
     fixture.detectChanges();
     dispatchTouchEvent(target, 'mouseup', 0, 0);
     fixture.detectChanges();
+    pickerEle.querySelector('.am-picker-popup-header-right').click();
+    fixture.detectChanges();
   });
 
-
   it('should showPicker work', () => {
     const button = buttons[0].nativeElement;
     button.click();
     fixture.detectChanges();
-    const picker = document.querySelector('picker');
-    expect(picker.querySelector('.am-picker-popup-header-right')).toBeTruthy('showPicker is work');
-    const buttonOk = picker.querySelector('.am-picker-popup-header-right');
+    pickerEle = document.querySelector('picker');
+    expect(pickerEle.querySelector('.am-picker-popup-header-right')).toBeTruthy('showPicker is work');
+    const buttonOk = pickerEle.querySelector('.am-picker-popup-header-right');
     dispatchTouchEvent(buttonOk, 'touchend');
     fixture.detectChanges();
   });
 
+  it('should OK work', () => {
+    const button = buttons[0].nativeElement;
+    button.click();
+    fixture.detectChanges();
+    pickerEle.querySelector('.am-picker-popup-header-right').click();
+    fixture.detectChanges();
+  });
+
+  it('should Cancel work', () => {
+    const button = buttons[0].nativeElement;
+    button.click();
+    fixture.detectChanges();
+    pickerEle.querySelector('.am-picker-popup-header-left').click();
+    fixture.detectChanges();
+  });
+
+  it('should only one picker work', () => {
+    const list = lists[0].nativeElement;
+    list.click();
+    fixture.detectChanges();
+    pickerEle = document.querySelector('picker');
+    pickerEle.style.display = 'none';
+    fixture.detectChanges();
+    list.click();
+    fixture.detectChanges();
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -130,20 +158,36 @@ describe('PickerComponent', () => {
 @Component({
   selector: 'demo-picker-basic',
   template: `
-  <List className="my-list">
-    <ListItem Picker
-              [mask]="mask"
-              [extra]="name1"
-              [title]="title"
-              [(ngModel)]="value1"
-              [data]="singleArea"
-              [arrow]="'horizontal'"
-              (ngModelChange)="modelChange($event)"
-    >
-      Multiple & cascader
-    </ListItem>
-  </List>
-  <div Button (click)="showPicker()">operation</div>
+    <List className="my-list">
+      <ListItem
+        Picker
+        [mask]="mask"
+        [extra]="name1"
+        [title]="title"
+        [(ngModel)]="value1"
+        [data]="singleArea"
+        [arrow]="'horizontal'"
+        [appendToBody]="true"
+        (ngModelChange)="modelChange($event)"
+      >
+        Multiple & cascader
+      </ListItem>
+      <ListItem
+        Picker
+        [mask]="mask"
+        [extra]="name1"
+        [title]="title"
+        [disabled]="true"
+        [(ngModel)]="value1"
+        [data]="singleArea"
+        [arrow]="'horizontal'"
+        [appendToBody]="true"
+        (ngModelChange)="modelChange($event)"
+      >
+        Multiple & cascader
+      </ListItem>
+    </List>
+    <div Button (click)="showPicker()">operation</div>
   `,
   providers: [Picker]
 })
@@ -175,9 +219,7 @@ export class TestPickerBasicComponent {
   mask = true;
   modelChange = jasmine.createSpy('ngModel change callback');
 
-  constructor (private _picker: Picker) {
-
-  }
+  constructor(private _picker: Picker) {}
 
   getResult(result) {
     this.value = [];
@@ -200,8 +242,6 @@ export class TestPickerBasicComponent {
   }
 
   showPicker() {
-    Picker.showPicker({value: this.value, data: this.singleArea}, (result) => {
-
-    });
+    Picker.showPicker({ value: this.value, data: this.singleArea }, result => {}, cancel => {});
   }
 }
diff --git a/components/picker/picker.component.ts b/components/picker/picker.component.ts
@@ -50,7 +50,7 @@ export class PickerComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostListener('mousedown', ['$event'])
   @HostListener('touchstart', ['$event'])
   panstart(event) {
-    if (!event.target.classList.contains('am-picker-col-mask')) {
+    if (!event.target.classList.contains('am-picker-col-mask') || this.options.disabled) {
       return;
     }
     this.isMouseDown = true;
@@ -75,7 +75,7 @@ export class PickerComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostListener('mousemove', ['$event'])
   @HostListener('touchmove', ['$event'])
   panmove(event) {
-    if (!event.target.classList.contains('am-picker-col-mask') || !this.isMouseDown) {
+    if (!event.target.classList.contains('am-picker-col-mask') || !this.isMouseDown || this.options.disabled) {
       return;
     }
     event.preventDefault();
@@ -90,7 +90,7 @@ export class PickerComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostListener('mouseleave', ['$event'])
   @HostListener('touchend', ['$event'])
   panend(event) {
-    if (!event.target.classList.contains('am-picker-col-mask') || !this.isMouseDown) {
+    if (!event.target.classList.contains('am-picker-col-mask') || !this.isMouseDown || this.options.disabled) {
       return;
     }
     this.isMouseDown = false;

diff --git a/components/picker/picker.directive.ts b/components/picker/picker.directive.ts
@@ -1,21 +1,19 @@
 import {
-  Directive,
   Input,
   Output,
-  EventEmitter,
-  HostListener,
-  ViewContainerRef,
-  ComponentRef,
-  OnDestroy,
-  ElementRef,
-  OnChanges,
   OnInit,
   Injector,
-  ComponentFactoryResolver,
   Renderer2,
+  OnDestroy,
+  Directive,
+  ElementRef,
+  forwardRef,
+  HostListener,
+  EventEmitter,
+  ComponentRef,
+  ViewContainerRef,
   ComponentFactory,
-  SimpleChanges,
-  forwardRef
+  ComponentFactoryResolver
 } from '@angular/core';
 import { PickerComponent } from './picker.component';
 import { PickerOptions } from './picker-options.provider';
@@ -31,7 +29,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     }
   ]
 })
-export class PickerDirective implements OnDestroy, OnChanges, OnInit, ControlValueAccessor {
+export class PickerDirective implements OnDestroy, OnInit, ControlValueAccessor {
   picker: ComponentRef<PickerComponent>;
   value: Array<any>;
   private _eventListeners: Array<() => void> = [];
@@ -89,16 +87,6 @@ export class PickerDirective implements OnDestroy, OnChanges, OnInit, ControlVal
     this.onVisibleChange.emit(false);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.isOpen) {
-      if (changes.isOpen.currentValue === true) {
-        this.showPicker();
-      } else {
-        this.hidePicker();
-      }
-    }
-  }
-
   ngOnDestroy() {
     this.hidePicker();
   }
@@ -114,7 +102,7 @@ export class PickerDirective implements OnDestroy, OnChanges, OnInit, ControlVal
   }
 
   private showPicker(): void {
-    if (!this.picker) {
+    if (!this.picker && !this.disabled) {
       setTimeout(() => {
         this._eventListeners = [
           this._renderer.listen('document', 'click', (event: Event) => this.onDocumentClick(event)),