feat(module:cron-expression): support nzDisabled && nzBorderless (#7992)

NG-ZORRO · Jun 21, 2023 · 6d31bde · 6d31bde
1 parent 198644a
commit 6d31bde
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 15 deletions.
diff --git a/components/cron-expression/cron-expression-input.component.ts b/components/cron-expression/cron-expression-input.component.ts
@@ -18,6 +18,7 @@ import { CronChangeType, TimeType } from './typings';
         nz-input
         [(ngModel)]="value"
         [name]="label"
+        [disabled]="disabled"
         (focus)="focusInputEffect($event)"
         (blur)="blurInputEffect()"
         (ngModelChange)="setValue()"
@@ -28,6 +29,7 @@ import { CronChangeType, TimeType } from './typings';
 export class NzCronExpressionInputComponent {
   @Input() value: string = '0';
   @Input() label: TimeType = 'second';
+  @Input() disabled: boolean = false;
   @Output() readonly focusEffect = new EventEmitter<TimeType>();
   @Output() readonly blurEffect = new EventEmitter<void>();
   @Output() readonly getValue = new EventEmitter<CronChangeType>();

diff --git a/components/cron-expression/cron-expression.component.ts b/components/cron-expression/cron-expression.component.ts
@@ -30,7 +30,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { CronExpression, parseExpression } from 'cron-parser';
 
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzCronExpressionI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
@@ -48,14 +48,17 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
           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"
+          [class.ant-input-borderless]="nzBorderless"
+          [class.ant-cron-expression-input-group-focus]="focus && !nzBorderless"
+          [class.ant-input-status-error]="!validateForm.valid && !nzBorderless"
+          [class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus && !nzBorderless"
+          [class.ant-input-disabled]="nzDisabled"
         >
           <ng-container *ngFor="let label of labels">
             <nz-cron-expression-input
               [value]="this.validateForm.controls[label].value"
               [label]="label"
+              [disabled]="nzDisabled"
               (focusEffect)="focusEffect($event)"
               (blurEffect)="blurEffect()"
               (getValue)="getValue($event)"
@@ -105,11 +108,16 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
   ]
 })
 export class NzCronExpressionComponent implements OnInit, ControlValueAccessor, AsyncValidator, OnDestroy {
+  static ngAcceptInputType_nzBorderless: BooleanInput;
+  static ngAcceptInputType_nzDisabled: BooleanInput;
+
   @Input() nzSize: NzCronExpressionSize = 'default';
   @Input() nzType: 'linux' | 'spring' = 'linux';
   @Input() @InputBoolean() nzCollapseDisable: boolean = false;
   @Input() nzExtra?: TemplateRef<void> | null = null;
   @Input() nzSemantic: TemplateRef<void> | null = null;
+  @Input() @InputBoolean() nzBorderless = false;
+  @Input() @InputBoolean() nzDisabled = false;
 
   locale!: NzCronExpressionI18nInterface;
   focus: boolean = false;

diff --git a/components/cron-expression/demo/basic.ts b/components/cron-expression/demo/basic.ts
@@ -2,6 +2,11 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-cron-expression-basic',
-  template: ` <nz-cron-expression></nz-cron-expression> `
+  template: `
+    <nz-cron-expression></nz-cron-expression>
+    <br />
+    <br />
+    <nz-cron-expression nzDisabled></nz-cron-expression>
+  `
 })
 export class NzDemoCronExpressionBasicComponent {}
diff --git a/components/cron-expression/demo/borderless.md b/components/cron-expression/demo/borderless.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 无边框
+  en-US: Borderless
+---
+
+## zh-CN
+
+没有边框
+
+## en-US
+
+No bezel.
diff --git a/components/cron-expression/demo/borderless.ts b/components/cron-expression/demo/borderless.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-cron-expression-borderless',
+  template: ` <nz-cron-expression nzBorderless></nz-cron-expression> `
+})
+export class NzDemoCronExpressionBorderlessComponent {}
diff --git a/components/cron-expression/demo/collapse.md b/components/cron-expression/demo/collapse.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 隐藏折叠面板
   en-US: Hide Collapse

diff --git a/components/cron-expression/demo/semantic.md b/components/cron-expression/demo/semantic.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 自定义渲染 cron 时间
   en-US: Custom rendering cron time

diff --git a/components/cron-expression/demo/shortcuts.md b/components/cron-expression/demo/shortcuts.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 额外节点
   en-US: Extra Node

diff --git a/components/cron-expression/demo/type.md b/components/cron-expression/demo/type.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 两种规则类型
   en-US: Two rule types

diff --git a/components/cron-expression/demo/use.md b/components/cron-expression/demo/use.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title:
   zh-CN: 结合表单使用
   en-US: Basic

diff --git a/components/cron-expression/doc/index.en-US.md b/components/cron-expression/doc/index.en-US.md
@@ -35,6 +35,8 @@ npm install cron-parser
 | Parameter  | Description                                      | Type  | Default     |
 |-------------|--------------------------------------------------|-------------|---------|
 | `[nzType]` | Cron rule type                                   | `'linux'｜'spring'`          | `linux`  |
+| `[nzDisabled]`     | Disable | `boolean` | `false`   |
+| `[nzBorderless]`     | Whether to hide the border        | `boolean` | `false`   |
 | `[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>`         | -        |

diff --git a/components/cron-expression/doc/index.zh-CN.md b/components/cron-expression/doc/index.zh-CN.md
@@ -36,6 +36,8 @@ npm install cron-parser
 |----------------|----------------|-----------------------------|----------|
 | `[nzType]` | cron 规则类型      | `'linux'｜'spring'`          | `linux`  |
 | `[nzSize]`     | 设置输入框大小        | `'large'｜'small'｜'default'` | `default` |
+| `[nzDisabled]`     | 禁用 | `boolean` | `false`   |
+| `[nzBorderless]`     | 是否隐藏边框        | `boolean` | `false`   |
 | `[nzCollapseDisable]`  | 隐藏折叠面板         | `boolean`                   | `false`  |
 | `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
 | `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |
diff --git a/components/cron-expression/style/index.less b/components/cron-expression/style/index.less
@@ -10,11 +10,6 @@
   &-content{
     width: 100%;
 
-    .@{cron-expression-prefix-cls}-input-group-error {
-      border-color: @error-color;
-      box-shadow: none;
-    }
-
     .@{cron-expression-prefix-cls}-input-group-error-focus {
       box-shadow: 0 0 0 @outline-width @error-color-outline;
     }