feat: QRCode support scanned status (#46704)

ant-design · Dec 30, 2023 · d7f0fdc · d7f0fdc
1 parent a0982df
commit d7f0fdc
Show file tree

Hide file tree

Showing 14 changed files with 201 additions and 162 deletions.
diff --git a/components/locale/en_US.ts b/components/locale/en_US.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/en_US';
+
 import type { Locale } from '.';
 import Calendar from '../calendar/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
@@ -139,6 +140,7 @@ const localeValues: Locale = {
   QRCode: {
     expired: 'QR code expired',
     refresh: 'Refresh',
+    scanned: 'Scanned',
   },
   ColorPicker: {
     presetEmpty: 'Empty',

diff --git a/components/locale/index.tsx b/components/locale/index.tsx
@@ -50,8 +50,9 @@ export interface Locale {
     preview: string;
   };
   QRCode?: {
-    expired: string;
-    refresh: string;
+    expired?: string;
+    refresh?: string;
+    scanned?: string;
   };
   ColorPicker?: {
     presetEmpty: string;

diff --git a/components/locale/zh_CN.ts b/components/locale/zh_CN.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_CN';
+
 import type { Locale } from '.';
 import Calendar from '../calendar/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
@@ -139,6 +140,7 @@ const localeValues: Locale = {
   QRCode: {
     expired: '二维码过期',
     refresh: '点击刷新',
+    scanned: '已扫描',
   },
   ColorPicker: {
     presetEmpty: '暂无',

diff --git a/components/locale/zh_HK.ts b/components/locale/zh_HK.ts
@@ -1,8 +1,9 @@
 /* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_TW';
+
+import type { Locale } from '.';
 import Calendar from '../calendar/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
-import type { Locale } from '.';
 import TimePicker from '../time-picker/locale/zh_TW';
 
 const typeTemplate = '${label}不是一個有效的${type}';
@@ -132,6 +133,11 @@ const localeValues: Locale = {
   Image: {
     preview: '預覽',
   },
+  QRCode: {
+    expired: '二維碼過期',
+    refresh: '點擊刷新',
+    scanned: '已掃描',
+  },
 };
 
 export default localeValues;
diff --git a/components/locale/zh_TW.ts b/components/locale/zh_TW.ts
@@ -1,8 +1,9 @@
 /* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_TW';
+
+import type { Locale } from '.';
 import Calendar from '../calendar/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
-import type { Locale } from '.';
 import TimePicker from '../time-picker/locale/zh_TW';
 
 const typeTemplate = '${label}不是一個有效的${type}';
@@ -133,6 +134,11 @@ const localeValues: Locale = {
   Image: {
     preview: '預覽',
   },
+  QRCode: {
+    expired: '二維碼過期',
+    refresh: '點擊刷新',
+    scanned: '已掃描',
+  },
 };
 
 export default localeValues;
diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -330,100 +330,109 @@ exports[`renders components/qr-code/demo/icon.tsx extend context correctly 2`] =
 
 exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`] = `
 <div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
-  style="flex-wrap: wrap;"
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
 >
   <div
-    class="ant-space-item"
+    class="ant-qrcode"
+    style="width: 160px; height: 160px; background-color: transparent;"
   >
     <div
-      class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      class="ant-qrcode-mask"
     >
       <div
-        class="ant-qrcode-mask"
+        aria-busy="true"
+        aria-live="polite"
+        class="ant-spin ant-spin-spinning"
       >
-        <div
-          aria-busy="true"
-          aria-live="polite"
-          class="ant-spin ant-spin-spinning"
+        <span
+          class="ant-spin-dot ant-spin-dot-spin"
         >
-          <span
-            class="ant-spin-dot ant-spin-dot-spin"
-          >
-            <i
-              class="ant-spin-dot-item"
-            />
-            <i
-              class="ant-spin-dot-item"
-            />
-            <i
-              class="ant-spin-dot-item"
-            />
-            <i
-              class="ant-spin-dot-item"
-            />
-          </span>
-        </div>
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+          <i
+            class="ant-spin-dot-item"
+          />
+        </span>
       </div>
-      <canvas
-        height="160"
-        width="160"
-      />
     </div>
+    <canvas
+      height="160"
+      width="160"
+    />
   </div>
   <div
-    class="ant-space-item"
+    class="ant-qrcode"
+    style="width: 160px; height: 160px; background-color: transparent;"
   >
     <div
-      class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      class="ant-qrcode-mask"
     >
-      <div
-        class="ant-qrcode-mask"
+      <p
+        class="ant-qrcode-expired"
       >
-        <p
-          class="ant-qrcode-expired"
-        >
-          QR code expired
-        </p>
-        <button
-          class="ant-btn ant-btn-link"
-          type="button"
+        QR code expired
+      </p>
+      <button
+        class="ant-btn ant-btn-link"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
         >
           <span
-            class="ant-btn-icon"
+            aria-label="reload"
+            class="anticon anticon-reload"
+            role="img"
           >
-            <span
-              aria-label="reload"
-              class="anticon anticon-reload"
-              role="img"
+            <svg
+              aria-hidden="true"
+              data-icon="reload"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="reload"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
+              />
+            </svg>
           </span>
-          <span>
-            Refresh
-          </span>
-        </button>
-      </div>
-      <canvas
-        height="160"
-        width="160"
-      />
+        </span>
+        <span>
+          Refresh
+        </span>
+      </button>
     </div>
+    <canvas
+      height="160"
+      width="160"
+    />
+  </div>
+  <div
+    class="ant-qrcode"
+    style="width: 160px; height: 160px; background-color: transparent;"
+  >
+    <div
+      class="ant-qrcode-mask"
+    >
+      <p
+        class="ant-qrcode-scanned"
+      >
+        Scanned
+      </p>
+    </div>
+    <canvas
+      height="160"
+      width="160"
+    />
   </div>
 </div>
 `;