feat(module:qrcode): qrcode supports scanned state (#8447)

Author: OriginRing

components/i18n/languages/en_US.ts

@@ -189,6 +189,7 @@ export default {
   },
   QRCode: {
     expired: 'QR code expired',
-    refresh: 'Refresh'
+    refresh: 'Refresh',
+    scanned: 'Scanned'
   }
 };

components/i18n/languages/zh_CN.ts

@@ -185,6 +185,7 @@ export default {
   },
   QRCode: {
     expired: '二维码过期',
-    refresh: '点击刷新'
+    refresh: '点击刷新',
+    scanned: '已扫描'
   }
 };

components/i18n/nz-i18n.interface.ts

@@ -149,6 +149,7 @@ export type NzCronExpressionI18nInterface = NzCronExpressionCronErrorI18n & NzCr
 export interface NzQRCodeI18nInterface {
   expired: string;
   refresh: string;
+  scanned: string;
 }
 
 export interface NzI18nInterface {

components/qr-code/demo/status.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-通过 `nzStatus` 的值控制二维码的状态。
+通过 `nzStatus` 的值控制二维码的状态，提供了 `active`、`expired`、`loading`、`scanned` 四个值。
 
 ## en-US
 
-The status can be controlled by the value `nzStatus`.
+The status can be controlled by the value `nzStatus`, four values of `active`, `expired`, `loading`, `scanned` are provided.

components/qr-code/demo/status.ts

@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <nz-qrcode nzValue="https://ng.ant.design/" nzStatus="loading"></nz-qrcode>
     <nz-qrcode nzValue="https://ng.ant.design/" nzStatus="expired" (nzRefresh)="refresh($event)"></nz-qrcode>
+    <nz-qrcode nzValue="https://ng.ant.design/" nzStatus="scanned"></nz-qrcode>
   `,
   styles: [
     `

components/qr-code/qrcode.component.spec.ts

@@ -20,7 +20,7 @@ export class NzTestQrCodeBasicComponent {
   value: string = 'https://ng.ant.design/';
   size: number = 160;
   bordered: boolean = true;
-  status: 'active' | 'expired' | 'loading' = 'active';
+  status: 'active' | 'expired' | 'loading' | 'scanned' = 'active';
 }
 
 describe('nz-qrcode', () => {
@@ -54,16 +54,16 @@ describe('nz-qrcode', () => {
     });
 
     it('qr code status', () => {
-      const statusList: Array<'active' | 'expired' | 'loading'> = ['expired', 'loading'];
+      const statusList: Array<'active' | 'expired' | 'loading' | 'scanned'> = ['expired', 'loading', 'scanned'];
 
       for (let i = 0; i < statusList.length; i++) {
         testComponent.status = statusList[i];
         fixture.detectChanges();
         const statusView = resultEl.nativeElement.querySelector('.ant-qrcode-mask');
-        if (i === 0) {
-          expect(statusView.firstElementChild.tagName).toBe('DIV');
-        } else {
+        if (i === 1) {
           expect(statusView.firstElementChild.tagName).toBe('NZ-SPIN');
+        } else {
+          expect(statusView.firstElementChild.tagName).toBe('DIV');
         }
       }
     });

components/qr-code/qrcode.component.ts

@@ -51,6 +51,11 @@ import { drawCanvas, ERROR_LEVEL_MAP, plotQRCodeData } from './qrcode';
               </button>
             </div>
           }
+          @case ('scanned') {
+            <div>
+              <p class="ant-qrcode-expired">{{ locale.scanned }}</p>
+            </div>
+          }
         }
       </div>
     }
@@ -76,7 +81,7 @@ export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDe
   @Input() nzIcon: string = '';
   @Input() nzIconSize: number = 40;
   @Input() nzBordered: boolean = true;
-  @Input() nzStatus: 'active' | 'expired' | 'loading' = 'active';
+  @Input() nzStatus: 'active' | 'expired' | 'loading' | 'scanned' = 'active';
   @Input() nzLevel: keyof typeof ERROR_LEVEL_MAP = 'M';
 
   @Output() readonly nzRefresh = new EventEmitter<string>();