feat(module:cron-expression): Optimize cron result display & support custom rendering cron time

components/cron-expression/cron-expression-input.component.ts

@@ -11,7 +11,7 @@ import { CronChangeType, TimeType } from './typings';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-input',
-  exportAs: 'nzCronExpression',
+  exportAs: 'nzCronExpressionInput',
   template: `
     <div class="ant-cron-expression-input">
       <input

components/cron-expression/cron-expression-label.component.ts

@@ -13,7 +13,7 @@ import { TimeType, TimeTypeError } from './typings';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-label',
-  exportAs: 'nzCronExpression',
+  exportAs: 'nzCronExpressionLabel',
   template: `
     <div
       class="ant-cron-expression-label"

components/cron-expression/cron-expression-preview.component.ts

@@ -0,0 +1,68 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  TemplateRef
+} from '@angular/core';
+
+import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector: 'nz-cron-expression-preview',
+  exportAs: 'nzCronExpressionPreview',
+  template: `<div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
+    <div class="ant-cron-expression-preview-dateTime" [class.ant-cron-expression-preview-dateTime-center]="!isExpand">
+      <ng-container *ngIf="visible; else cronError">
+        <ng-container *ngIf="!nzSemantic; else semanticTemplate">
+          {{ TimeList[0] | date: 'YYYY-MM-dd HH:mm:ss' }}
+        </ng-container>
+        <ng-template #semanticTemplate [ngTemplateOutlet]="nzSemantic"></ng-template>
+      </ng-container>
+      <ng-template #cronError>{{ locale.cronError }}</ng-template>
+    </div>
+    <div *ngIf="visible" class="ant-cron-expression-preview-content">
+      <div class="ant-cron-expression-preview-content-date">
+        <ng-container *ngIf="!isExpand">
+          <ul class="ant-cron-expression-preview-list">
+            <li *ngFor="let item of TimeList">
+              {{ item | date: 'YYYY-MM-dd HH:mm:ss' }}
+            </li>
+            <li><a (click)="loadMorePreview.emit()">···</a></li>
+          </ul>
+        </ng-container>
+      </div>
+      <ul class="ant-cron-expression-preview-icon">
+        <li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
+        <li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
+      </ul>
+    </div>
+  </div>`
+})
+export class NzCronExpressionPreviewComponent {
+  @Input() TimeList: Date[] = [];
+  @Input() @InputBoolean() visible: boolean = true;
+  @Input() locale!: NzCronExpressionCronErrorI18n;
+  @Input() nzSemantic: TemplateRef<void> | null = null;
+  @Output() readonly loadMorePreview = new EventEmitter<void>();
+
+  isExpand: boolean = true;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  setExpand(): void {
+    this.isExpand = !this.isExpand;
+    this.cdr.markForCheck();
+  }
+}

components/cron-expression/cron-expression.component.ts

@@ -45,9 +45,9 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
     <div class="ant-cron-expression">
       <div class="ant-cron-expression-content">
         <div
-          class="ant-cron-expression-input-group"
-          [class.ant-cron-expression-input-group-lg]="nzSize === 'large'"
-          [class.ant-cron-expression-input-group-sm]="nzSize === 'small'"
+          class="ant-input ant-cron-expression-input-group"
+          [class.ant-input-lg]="nzSize === 'large'"
+          [class.ant-input-sm]="nzSize === 'small'"
           [class.ant-cron-expression-input-group-focus]="focus"
           [class.ant-cron-expression-input-group-error]="!validateForm.valid"
           [class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus"
@@ -62,7 +62,12 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
             ></nz-cron-expression-input>
           </ng-container>
         </div>
-        <div class="ant-cron-expression-label-group">
+        <div
+          class="ant-cron-expression-label-group"
+          [class.ant-input-lg]="nzSize === 'large'"
+          [class.ant-cron-expression-label-group-default]="nzSize === 'default'"
+          [class.ant-input-sm]="nzSize === 'small'"
+        >
           <ng-container *ngFor="let label of labels">
             <nz-cron-expression-label
               [type]="label"
@@ -72,29 +77,18 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
             ></nz-cron-expression-label>
           </ng-container>
         </div>
-        <nz-collapse *ngIf="!nzCollapseDisable" [nzBordered]="false">
-          <nz-collapse-panel [nzHeader]="nextDate">
-            <ng-container *ngIf="validateForm.valid">
-              <ul class="ant-cron-expression-preview-date">
-                <li *ngFor="let dateItem of nextTimeList">
-                  {{ dateItem | date: 'YYYY-MM-dd HH:mm:ss' }}
-                </li>
-                <li><a (click)="loadMorePreview()">···</a></li>
-              </ul>
-            </ng-container>
-            <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
-          </nz-collapse-panel>
-        </nz-collapse>
+        <nz-cron-expression-preview
+          *ngIf="!nzCollapseDisable"
+          [TimeList]="nextTimeList"
+          [visible]="validateForm.valid"
+          [locale]="locale"
+          [nzSemantic]="nzSemantic"
+          (loadMorePreview)="loadMorePreview()"
+        ></nz-cron-expression-preview>
       </div>
       <div class="ant-cron-expression-map" *ngIf="nzExtra">
         <ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
       </div>
-      <ng-template #nextDate>
-        <ng-container *ngIf="validateForm.valid">
-          {{ dateTime | date: 'YYYY-MM-dd HH:mm:ss' }}
-        </ng-container>
-        <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
-      </ng-template>
     </div>
   `,
   providers: [
@@ -115,6 +109,7 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   @Input() nzType: 'linux' | 'spring' = 'linux';
   @Input() @InputBoolean() nzCollapseDisable: boolean = false;
   @Input() nzExtra?: TemplateRef<void> | null = null;
+  @Input() nzSemantic: TemplateRef<void> | null = null;
 
   locale!: NzCronExpressionI18nInterface;
   focus: boolean = false;
@@ -123,7 +118,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   labels: TimeType[] = [];
   interval!: CronExpression<false>;
   nextTimeList: Date[] = [];
-  dateTime: Date = new Date();
   private destroy$ = new Subject<void>();
 
   validateForm!: UntypedFormGroup;
@@ -202,7 +196,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   previewDate(value: CronType): void {
     try {
       this.interval = parseExpression(Object.values(value).join(' '));
-      this.dateTime = this.interval.next().toDate();
       this.nextTimeList = [
         this.interval.next().toDate(),
         this.interval.next().toDate(),

components/cron-expression/cron-expression.module.ts

@@ -7,28 +7,24 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { NzCronExpressionInputComponent } from './cron-expression-input.component';
 import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
+import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
 import { NzCronExpressionComponent } from './cron-expression.component';
 
 @NgModule({
-  declarations: [NzCronExpressionComponent, NzCronExpressionLabelComponent, NzCronExpressionInputComponent],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    NzToolTipModule,
-    NzCollapseModule,
-    NzFormModule,
-    NzInputModule,
-    NzIconModule,
-    FormsModule
+  declarations: [
+    NzCronExpressionComponent,
+    NzCronExpressionLabelComponent,
+    NzCronExpressionInputComponent,
+    NzCronExpressionPreviewComponent
   ],
+  imports: [CommonModule, ReactiveFormsModule, NzToolTipModule, NzFormModule, NzInputModule, NzIconModule, FormsModule],
   exports: [NzCronExpressionComponent]
 })
 export class NzCronExpressionModule {}

components/cron-expression/demo/semantic.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 自定义渲染 cron 时间
+  en-US: Custom rendering cron time
+---
+
+## zh-CN
+
+自定义渲染下次执行时间
+
+## en-US
+
+Custom rendering next execution time.

components/cron-expression/demo/semantic.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+import { parseExpression } from 'cron-parser';
+
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+@Component({
+  selector: 'nz-demo-cron-expression-semantic',
+  template: ` <nz-cron-expression
+      [nzSemantic]="semanticTemplate"
+      [(ngModel)]="value"
+      (ngModelChange)="getValue($event)"
+    ></nz-cron-expression>
+    <ng-template #semanticTemplate>Next Time: {{ semantic | date: 'YYYY-MM-dd HH:mm:ss' }}</ng-template>`
+})
+export class NzDemoCronExpressionSemanticComponent {
+  value: string = '10 * * * *';
+  semantic?: Date;
+
+  getValue(value: string): void {
+    try {
+      const interval = parseExpression(value);
+      this.semantic = interval.next().toDate();
+    } catch (err: NzSafeAny) {
+      return;
+    }
+  }
+}

components/cron-expression/demo/use.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 结合表单使用
   en-US: Basic

components/cron-expression/doc/index.en-US.md

@@ -37,4 +37,5 @@ npm install cron-parser
 | `[nzType]` | Cron rule type                                   | `'linux'｜'spring'`          | `linux`  |
 | `[nzSize]`   | The size of the input box.                       | `'large'｜'small'｜'default'` | `default` |
 | `[nzCollapseDisable]`  | Hide collapse                                    | `boolean`                   | `false`  |
-| `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
+| `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | Custom rendering next execution time | `TemplateRef<void>`         | -        |

components/cron-expression/doc/index.zh-CN.md

@@ -37,4 +37,5 @@ npm install cron-parser
 | `[nzType]` | cron 规则类型      | `'linux'｜'spring'`          | `linux`  |
 | `[nzSize]`     | 设置输入框大小        | `'large'｜'small'｜'default'` | `default` |
 | `[nzCollapseDisable]`  | 隐藏折叠面板         | `boolean`                   | `false`  |
-| `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
+| `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |