feat(module: picker): feat create 'Picker' with dynamic (NG-ZORRO#105)

* feat(module: picker): feat create 'Picker' with dynamic feat (module: picker): feat demo-data structure unification feat (module: picker): feat add indicatorStyle * docs(module: picker): uptdate function description * fix(module: picker): fix init default value * feat(module:core): feat add base popup service * docs(module: picker-view): delete unuse description * fix(module:core): fix set providers of PopupService
fisherspy · Nov 14, 2018 · 90866df · 90866df
1 parent ba9e43b
commit 90866df
Show file tree

Hide file tree

Showing 16 changed files with 312 additions and 127 deletions.
diff --git a/components/core/core.module.ts b/components/core/core.module.ts
@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TouchFeedbackDirective } from './directive/touch-feedback.directive';
 import { TouchFeedBackComponent } from './directive/touch-feedback.component';
+import { PopupService } from './services/popup.service';
+export { PopupService } from './services/popup.service';
 @NgModule({
   imports: [
     CommonModule
   ],
   exports: [TouchFeedbackDirective, TouchFeedBackComponent],
-  declarations: [TouchFeedbackDirective, TouchFeedBackComponent]
+  declarations: [TouchFeedbackDirective, TouchFeedBackComponent],
+  providers: [PopupService]
 })
 export class CoreModule { }
diff --git a/components/core/services/popup.service.ts b/components/core/services/popup.service.ts
@@ -0,0 +1,35 @@
+import { Injectable, Injector, ViewContainerRef } from '@angular/core';
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+
+@Injectable()
+export class PopupService {
+  static viewContainerRef: ViewContainerRef = null;
+  static overlay: Overlay = null;
+  static overlayRef: OverlayRef = null;
+
+  constructor(
+    public _overlay: Overlay,
+    public _viewContainerRef: ViewContainerRef
+  ) {
+    PopupService.viewContainerRef = this._viewContainerRef;
+    PopupService.overlay = this._overlay;
+  }
+
+  static showPopup(component, childInjector?: Injector): void {
+    let overlayConfig = new OverlayConfig();
+    overlayConfig.hasBackdrop = true;
+    PopupService.overlayRef = PopupService.overlay.create(overlayConfig);
+    PopupService.overlayRef.backdropClick().subscribe(() => {
+      PopupService.overlayRef.dispose();
+    });
+
+    PopupService.overlayRef.attach(new ComponentPortal(component, PopupService.viewContainerRef, childInjector));
+  }
+
+  static hidePopup(): void {
+    if (PopupService.overlayRef) {
+      PopupService.overlayRef.dispose();
+    }
+  }
+}
diff --git a/components/modal/modal.component.spec.ts b/components/modal/modal.component.spec.ts
@@ -234,7 +234,6 @@ export class TestModalBasicComponent {
   popup = true;
   state = true;
   transparent = true;
-  vi
   title: any = '456';
   footer = [
     {

diff --git a/components/ng-zorro-antd-mobile.module.ts b/components/ng-zorro-antd-mobile.module.ts
@@ -106,13 +106,16 @@ export * from './locale-provider/languages';
 import { Toast } from './toast/toast.service';
 import { Modal } from './modal/modal.service';
 import { ActionSheet } from './action-sheet/action-sheet.service';
+import { Picker } from './picker/picker.service';
 
 export { Toast } from './toast/toast.service';
 export { ToastComponent } from './toast/toast.component';
 export { Modal } from './modal/modal.service';
 export { ModalComponent } from './modal/modal.component';
 export { ActionSheet } from './action-sheet/action-sheet.service';
 export { ActionSheetComponent } from './action-sheet/action-sheet.component';
+export { Picker } from './picker/picker.service';
+export { PickerComponent } from './picker/picker.component';
 
 @NgModule({
   providers: [],
@@ -172,7 +175,7 @@ export class NgZorroAntdMobileModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: NgZorroAntdMobileModule,
-      providers: [ActionSheet, Toast, Modal]
+      providers: [ActionSheet, Toast, Modal, Picker]
     };
   }
 }
diff --git a/components/picker-view/doc/index.zh-CN.md b/components/picker-view/doc/index.zh-CN.md
@@ -9,12 +9,12 @@ PickerView 的功能类似于 Picker ，但它是直接渲染在区域中，而
 
 ## API
 
-| 属性                         | 说明                                                                   | 类型                                                     | 默认值        |
-| ---------------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------- | ------------- |
-| data                         | 数据源                                                                 | `Array<{value, label}>` / `Array<Array<{value, label}>>` | -             |
-| value                        | 值, 格式是`[value1, value2, value3]`, 对应数据源的相应级层 value       | Array                                                    | -             |
-| cascade                      | 是否级联                                                               | Boolean                                                  | true          |
-| cols                         | 列数                                                                   | Number                                                   | `3`           |
-| onChange                     | 选中后的回调 | (val): void                                              | -             |
-| itemStyle                    | 每列样式                                                               | Object                                                   | -             |
-| indicatorStyle               | indicator 样式                                                         | Object                                                   | -             |
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| data  | 数据源     | `Array<{value, label}>` / `Array<Array<{value, label}>>` | -   |
+| value  | 值, 格式是`[value1, value2, value3]`, 对应数据源的相应级层 value  | Array  | -   |
+| cascade  | 是否级联   | Boolean| true|
+| cols     | 列数    | Number | `3` |
+| onChange | 选中后的回调 | (val): void      | -   |
+| itemStyle| 每列样式   | Object | -   |
+| indicatorStyle  | indicator 样式  | Object | -  |
diff --git a/components/picker/demo-data/address-data.ts b/components/picker/demo-data/address-data.ts
@@ -1,49 +1,59 @@
 export function getData() {
   return [
     {
-      label: '北京市',
+      label: '北京',
       children: [
-        '东城区',
-        '西城区',
-        '崇文区',
-        '宣武区',
-        '朝阳区',
-        '丰台区',
-        '石景山区',
-        '海淀区',
-        '门头沟区',
-        '房山区',
-        '通州区',
-        '顺义区',
-        '昌平区',
-        '大兴区',
-        '平谷区',
-        '怀柔区',
-        '密云县',
-        '延庆县'
+        {
+          label: '北京市',
+          children: [
+            '东城区',
+            '西城区',
+            '崇文区',
+            '宣武区',
+            '朝阳区',
+            '丰台区',
+            '石景山区',
+            '海淀区',
+            '门头沟区',
+            '房山区',
+            '通州区',
+            '顺义区',
+            '昌平区',
+            '大兴区',
+            '平谷区',
+            '怀柔区',
+            '密云县',
+            '延庆县'
+          ]
+        }
       ]
     },
     {
       label: '天津市',
       children: [
-        '和平区',
-        '河东区',
-        '河西区',
-        '南开区',
-        '河北区',
-        '红桥区',
-        '塘沽区',
-        '汉沽区',
-        '大港区',
-        '东丽区',
-        '西青区',
-        '津南区',
-        '北辰区',
-        '武清区',
-        '宝坻区',
-        '宁河县',
-        '静海县',
-        '蓟  县'
+        {
+          label: '天津市',
+          children: [
+            '和平区',
+            '河东区',
+            '河西区',
+            '南开区',
+            '河北区',
+            '红桥区',
+            '塘沽区',
+            '汉沽区',
+            '大港区',
+            '东丽区',
+            '西青区',
+            '津南区',
+            '北辰区',
+            '武清区',
+            '宝坻区',
+            '宁河县',
+            '静海县',
+            '蓟  县'
+          ]
+        }
       ]
     },
     {
@@ -868,7 +878,7 @@ export function getData() {
       ]
     },
     {
-      label: '上海市',
+      label: '上海',
       children: [
         {
           label: '上海市',

diff --git a/components/picker/demo/basic.ts b/components/picker/demo/basic.ts
@@ -1,50 +1,53 @@
 import { Component } from '@angular/core';
-
+import { Picker } from 'ng-zorro-antd-mobile';
 @Component({
   selector: 'demo-picker-basic',
   template: `
-    <List className="my-list">
-      <ListItem Picker
-                [extra]="name1"
-                [arrow]="'horizontal'"
-                [mask]=true
-                [title]="'Areas'"
-                [value]="value1"
-                (onOk)="onOk1($event)"
-      >
-        Multiple & cascader
-      </ListItem>
-      <ListItem Picker
-                [extra]="name2"
-                [arrow]="'horizontal'"
-                [cascade]="false"
-                [data]="seasons"
-                [title]="'选择季节'"
-                [value]="value2"
-                (onOk)="onOk2($event)"
-      >
-        Multiple
-      </ListItem>
-      <ListItem Picker
-                [extra]="name3"
-                [arrow]="'horizontal'"
-                [data]="singleArea"
-                [value]="value3"
-                (onOk)="onOk3($event)"
-      >
-        Single
-      </ListItem>
-      <ListItem Picker
-                [extra]="name4"
-                [arrow]="'horizontal'"
-                [value]="value4"
-                (onPickerChange)="onPickerChange($event)"
-                (onOk)="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'"
+              [value]="value1"
+              (onOk)="onOk1($event)"
+    >
+      Multiple & cascader
+    </ListItem>
+    <ListItem Picker
+              [extra]="name2"
+              [arrow]="'horizontal'"
+              [cascade]="false"
+              [data]="seasons"
+              [title]="'选择季节'"
+              [value]="value2"
+              (onOk)="onOk2($event)"
+    >
+      Multiple
+    </ListItem>
+    <ListItem Picker
+              [extra]="name3"
+              [arrow]="'horizontal'"
+              [data]="singleArea"
+              [value]="value3"
+              (onOk)="onOk3($event)"
+    >
+      Single
+    </ListItem>
+    <ListItem Picker
+              [extra]="name4"
+              [arrow]="'horizontal'"
+              [value]="value4"
+              (onPickerChange)="onPickerChange($event)"
+              (onOk)="onOk4($event)"
+    >
+      Multiple & async
+    </ListItem>
+  </List>
+  `,
+  providers: [Picker]
 })
 export class DemoPickerBasicComponent {
   singleArea = [
@@ -93,6 +96,7 @@ export class DemoPickerBasicComponent {
       ]
     }
   ];
+  name  = '选择';
   name1 = '选择';
   name2 = '选择';
   name3 = '选择';
@@ -103,6 +107,10 @@ export class DemoPickerBasicComponent {
   value3 = [];
   value4 = [];
 
+  constructor (private _picker: Picker ) {
+
+  }
+
   onOk1(result) {
     this.name1 = this.getResult(result);
     this.value1 = this.getValue(result);
@@ -147,4 +155,11 @@ export class DemoPickerBasicComponent {
     });
     return value;
   }
+
+  showPicker() {
+    Picker.showPicker({value: this.value, data: this.singleArea}, (result) => {
+      this.name = this.getResult(result);
+      this.value = this.getValue(result);
+    });
+  }
 }
diff --git a/components/picker/doc/index.en-US.md b/components/picker/doc/index.en-US.md
@@ -26,3 +26,11 @@ Properties | Descrition | Type | Default
 | title  | title | String | - |
 | disabled  | set disabled | Boolean | false |
 | cascade  | whether is cascade mode | Boolean | true |
+| indicatorStyle  | style of indicator | Object | - |
+
+### Picker.showPicker(config, confirm?, cancel?)
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| config    | init config       | {data: [], value: [],...}    | -           |
+| confirm    | handler called when click ok       | (val): void     | -           |
+| cancel    | handler called when click cancel       | (): void     | -           |
diff --git a/components/picker/doc/index.zh-CN.md b/components/picker/doc/index.zh-CN.md
@@ -28,3 +28,9 @@ subtitle: 选择器
 | disabled  | 是否不可用 | Boolean | false |
 | cascade  | 是否联动 | Boolean | true |
 
+### Picker.showPicker(config, confirm?, cancel?)
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| config    | 初始化配置       | {data: [], value: [],...}    | 无           |
+| confirm    | 选中后的回调       | (val): void     | 无           |
+| cancel    | 点击取消时执行的回调       | (): void     | 无           |