feat: sync ng-zorro-antd 0.7.0-beta.5

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "scaffold"]
 	path = scaffold
 	url = https://github.com/cipchk/ng-alain.git
-	branch = 0.2.0
+	branch = master

build.sh

@@ -5,6 +5,7 @@ set -u -e -o pipefail
 readonly currentDir=$(cd $(dirname $0); pwd)
 cd ${currentDir}
 
+# PACKAGES=(cli)
 PACKAGES=(acl
     theme
     abc
@@ -29,15 +30,15 @@ compileCli() {
     mkdir -p ${2}
     rsync -a ${3} ${2}
     readonly paths=(
-        "node_modules/@schematics/angular/utility/|${2}utility"
-        "node_modules/@schematics/angular/class/|${2}class"
-        "node_modules/@schematics/angular/directive/|${2}directive"
-        "node_modules/@schematics/angular/enum/|${2}enum"
-        "node_modules/@schematics/angular/interface/|${2}interface"
-        "node_modules/@schematics/angular/pipe/|${2}pipe"
-        "node_modules/@schematics/angular/service/|${2}service"
-        "node_modules/@schematics/angular/guard/|${2}guard"
-        "node_modules/@schematics/angular/app-shell/|${2}app-shell"
+        "${1}node_modules/@schematics/angular/utility/|${2}utility"
+        "${1}node_modules/@schematics/angular/class/|${2}class"
+        "${1}node_modules/@schematics/angular/directive/|${2}directive"
+        "${1}node_modules/@schematics/angular/enum/|${2}enum"
+        "${1}node_modules/@schematics/angular/interface/|${2}interface"
+        "${1}node_modules/@schematics/angular/pipe/|${2}pipe"
+        "${1}node_modules/@schematics/angular/service/|${2}service"
+        "${1}node_modules/@schematics/angular/guard/|${2}guard"
+        "${1}node_modules/@schematics/angular/app-shell/|${2}app-shell"
         "${1}docker-compose.debug.yml|${2}application/files/"
         "${1}docker-compose.yml|${2}application/files"
         "${1}Dockerfile|${2}application/files"
@@ -89,7 +90,7 @@ compileCli() {
         if [[ ${to:(-1):1} == '/' ]]; then
             mkdir -p $to
         fi
-        cp -frR $from $to
+        cp -fr $from $to
     done
 }
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "delon",
-	"version": "1.0.0-beta.7",
+	"version": "1.0.0-beta.8",
 	"typings": "index.d.ts",
 	"description": "Delon is a set of essential modules for ng-alain.",
 	"repository": {
@@ -57,7 +57,7 @@
 		"@stackblitz/sdk": "^1.1.1",
 		"file-saver": "^1.3.3",
 		"marked": "^0.3.9",
-		"ng-zorro-antd": "^0.7.0-beta.4",
+		"ng-zorro-antd": "^0.7.0-beta.5",
 		"ngx-color": "^1.2.1",
 		"ngx-countdown": "^2.0.0",
 		"ngx-highlight-js": "^1.0.3",

packages/form/src/widgets/time/index.md

@@ -4,14 +4,12 @@ subtitle: 时间
 type: Widgets
 ---
 
-输入或选择时间的控件；`ng-zorro-antd` 未提供日期时间类组件，暂时以原生替代。
+输入或选择时间的控件。
 
 ## 注意事项
 
 - 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据
 - 所有格式化单位，参考 [date-fns format](https://date-fns.org/v1.29.0/docs/format)（国内镜像：[moment format](http://momentjs.cn/docs/#/displaying/format/)）
-- 部分格式化单位需要依赖国际化，则**务必**使用指定 `window.__locale__` 表示当前 Date fns 使用的国际化数据，更多细节见[国际化](/docs/i18n)
-- 始终给出一个完整的日期时间格式，日期统一使用 `1970-01-01`
 - 指定 `schema.format` 则必须遵守 [RFC3339](https://tools.ietf.org/html/rfc3339#section-5.6) 时间格式，否则都视为格式错误，默认的数据格式化：
     - `time`、`full-time` 默认 `HH:mm:ss`
 - 不指定 `schema.format` 根据 `schema.type` 值按以下规则处理（允许通过 `DelonFormConfig` 替换）数据格式化：
@@ -31,7 +29,19 @@ format | 数据格式类型  | `string` | -
 
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
-size | 大小，等同 `nzSize` | `string` | -
-placeholder | 在文字框中显示提示讯息 | `string` | -
-format | 数据格式化 | `string` | -
-displayFormat | 显示格式化，默认：`YYYY-MM-DD HH:mm:ss` | `string` | -
+| size | 大小，等同 `nzSize` | `string` | - |
+| placeholder | 在文字框中显示提示讯息 | `string` | - |
+| format | 数据格式化 | `string` | `HH:mm:ss` |
+| displayFormat | 显示格式化，等同 `nzFormat` | `string` | `HH:mm:ss` |
+| utcEpoch | 是否UTC新纪元（表示从 `1970` 开始计毫秒数），当 `type='number'` 时有效 | `boolean` | `false` |
+| allowEmpty | 是否展示清除按钮 | `boolean` | `true` |
+| clearText | 清除按钮的提示文案 | `string` | `清除` |
+| defaultOpenValue | 设置面板打开时默认选中的值 | `Date` | `new Date()` |
+| disabledHours | 禁止选择部分小时选项 | `function()` | - |
+| disabledMinutes | 禁止选择部分分钟选项 | `function(selectedHour)` | - |
+| disabledSeconds | 禁止选择部分秒选项 | `function(selectedHour, selectedMinute)` | - |
+| hideDisabledOptions | 隐藏禁止选择的选项 | `boolean` | `false` |
+| hourStep | 小时选项间隔 | `number` | `1` |
+| minuteStep | 分钟选项间隔 | `number` | `1` |
+| secondStep | 秒选项间隔 | `number` | `1` |
+| popupClassName | 弹出层类名 | `string` | - |

packages/form/src/widgets/time/time.widget.ts

@@ -2,50 +2,68 @@ import { Component, OnInit } from '@angular/core';
 import { ControlWidget } from '../../widget';
 import * as format from 'date-fns/format';
 
-const DEFAULTFORMAT = 'HH:mm:ss';
-
 @Component({
     selector: 'sf-time',
     template: `
     <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
 
-        <input nz-input
-            [attr.id]="id"
-            [disabled]="disabled"
+        <nz-time-picker
+            [(ngModel)]="displayValue"
+            (ngModelChange)="_change($event)"
+            [nzDisabled]="disabled"
             [nzSize]="ui.size"
-            [value]="displayValue"
-            (input)="_change($event.target?.value)"
-            type="time"
-            [attr.placeholder]="ui.placeholder"
-            autocomplete="off">
+            [nzFormat]="i.displayFormat"
+            [nzAllowEmpty]="i.allowEmpty"
+            [nzClearText]="i.clearText"
+            [nzDefaultOpenValue]="i.defaultOpenValue"
+            [nzDisabledHours]="ui.disabledHours"
+            [nzDisabledMinutes]="ui.disabledMinutes"
+            [nzDisabledSeconds]="ui.disabledSeconds"
+            [nzHideDisabledOptions]="i.hideDisabledOptions"
+            [nzHourStep]="i.hourStep"
+            [nzMinuteStep]="i.minuteStep"
+            [nzSecondStep]="i.secondStep"
+            [nzPopupClassName]="ui.popupClassName"
+            ></nz-time-picker>
 
     </sf-item-wrap>
     `,
     preserveWhitespaces: false
 })
 export class TimeWidget extends ControlWidget implements OnInit {
 
-    displayValue: string;
+    displayValue: Date = null;
+    format: string;
+    i: any;
 
     ngOnInit(): void {
+        const ui = this.ui;
+        this.format = ui.format ? ui.format : this.schema.type === 'number' ? 'x' : 'HH:mm:ss';
+        this.i = {
+            displayFormat: ui.displayFormat || 'HH:mm:ss',
+            allowEmpty: ui.allowEmpty || true,
+            clearText: ui.clearText || '清除',
+            defaultOpenValue: ui.defaultOpenValue || new Date,
+            hideDisabledOptions: ui.hideDisabledOptions || false,
+            hourStep: ui.hourStep || 1,
+            minuteStep: ui.nzMinuteStep || 1,
+            secondStep: ui.secondStep || 1,            
+        };
     }
 
     reset(value: any) {
-        this.formatDisplay(value);
-    }
-
-    _change(value: string) {
-        value = `1970-01-01T${value}`;
-        this.formatDisplay(value);
-        this.setValue(this.formatData(value, this.ui.format || DEFAULTFORMAT));
-    }
-
-    private formatData(value: string, formatString: string) {
-        return format(value, formatString, { locale: (window as any).__locale__ });
+        this.displayValue = value != null && typeof value === 'string' && value.length ? new Date(value) : null;
     }
 
-    private formatDisplay(value: any) {
-        // TODO：HTML 原生日期组件无法按 `displayFormat` 格式，暂时停用以下代码
-        // this.displayValue = this.formatData(value, this.ui.displayFormat || DEFAULTFORMAT);
+    _change(value: Date) {
+        if (value == null) {
+            this.setValue(null);
+            return;
+        }
+        if (this.ui.utcEpoch === true) {
+            this.setValue(Date.UTC(1970, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds()));
+            return;
+        }
+        this.setValue(format(value, this.format));
     }
 }

packages/theme/styles/index.less

@@ -47,6 +47,7 @@
 @import "~ng-zorro-antd/src/tabs/style/index.less";
 @import "~ng-zorro-antd/src/tag/style/index.less";
 @import "~ng-zorro-antd/src/timeline/style/index.less";
+@import "~ng-zorro-antd/src/time-picker/style/index.less";
 @import "~ng-zorro-antd/src/tooltip/style/index.less";
 @import "~ng-zorro-antd/src/transfer/style/index.less";
 @import "~ng-zorro-antd/src/tree/style/index.less";

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { RouterModule, RouteReuseStrategy } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
@@ -21,13 +21,18 @@ import { DemoModalComponent } from './shared/components/modal/demo.component';
 // mock data
 import * as MOCKDATA from '../../_mock';
 import { environment } from '../environments/environment';
+import { StartupService } from './core/startup.service';
 const MOCKMODULE = [];
 if (!environment.production) {
     MOCKMODULE.push(DelonMockModule.forRoot({
         data: MOCKDATA
     }));
 }
 
+export function StartupServiceFactory(startupService: StartupService): Function {
+  return () => startupService.load();
+}
+
 @NgModule({
   declarations: [
     AppComponent, LayoutComponent, PassportComponent,
@@ -48,7 +53,15 @@ if (!environment.production) {
     ...MOCKMODULE,
     RoutesModule
   ],
-  providers: [ ],
+  providers: [
+    StartupService,
+    {
+        provide: APP_INITIALIZER,
+        useFactory: StartupServiceFactory,
+        deps: [StartupService],
+        multi: true
+    }
+  ],
   bootstrap: [AppComponent],
   entryComponents: [DemoModalComponent]
 })

src/app/core/startup.service.ts

@@ -0,0 +1,21 @@
+import { Injectable, Injector, Inject } from '@angular/core';
+import { NzI18nService, zh_CN } from 'ng-zorro-antd';
+import * as df_zh_cn from 'date-fns/locale/zh_cn';
+import zh from '@angular/common/locales/zh';
+import { registerLocaleData } from '@angular/common';
+
+@Injectable()
+export class StartupService {
+    constructor(private injector: Injector) { }
+
+    load(): Promise<any> {
+        // only works with promises
+        // https://github.com/angular/angular/issues/15088
+        return new Promise((resolve, reject) => {
+            const nzI18n = this.injector.get(NzI18nService);
+            nzI18n.setLocale(zh_CN);
+            registerLocaleData(zh);
+            resolve(null);
+        });
+    }
+}

src/app/routes/demo/demo.component.ts

@@ -29,21 +29,18 @@ export class DemoComponent {
     uiSchema: SFUISchema = {};
     schema: SFSchema = {
         properties: {
-            type: { type: 'string', enum: [ 'mobile', 'name' ], default: 'mobile' },
-            name: { type: 'string' },
-            pwd: { type: 'string' },
-            mobile: { type: 'string' },
-            code: { type: 'string' }
-        },
-        required: [ 'type' ],
-        if: {
-            properties: { type: { enum: [ 'mobile' ] } }
-        },
-        then: {
-            required: [ 'mobile', 'code' ]
-        },
-        else: {
-            required: [ 'name', 'pwd' ]
+            'time': {
+                'type': 'string',
+                'format': 'time'
+            },
+            'time_number': {
+                'type': 'number',
+                ui: { widget: 'time', utcEpoch: true, displayFormat: 'HH:mm' }
+            },
+            'time_string': {
+                'type': 'string',
+                ui: { widget: 'time' }
+            }
         }
     };
 
@@ -59,7 +56,7 @@ export class DemoComponent {
     }
 
     error(value: any) {
-        // console.log('error', value);
+        console.log('error', value);
     }
 
 }