feat: New Component Qr-Code (#38891)

* feat: QrCode * fix * fix * fix: fix bug * fix: fix bug * fix * fix * fix * delete * delete * test case * fix lint * bundlesize * demo * fix: fix test
ant-design · Nov 25, 2022 · a974d94 · a974d94
1 parent c3b8b44
commit a974d94
Show file tree

Hide file tree

Showing 34 changed files with 595 additions and 514 deletions.
diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap
@@ -40,6 +40,7 @@ exports[`antd exports modules correctly 1`] = `
   "Popconfirm",
   "Popover",
   "Progress",
+  "QrCode",
   "Radio",
   "Rate",
   "Result",

diff --git a/components/index.tsx b/components/index.tsx
@@ -149,4 +149,6 @@ export { default as Typography } from './typography';
 export type { TypographyProps } from './typography';
 export { default as Upload } from './upload';
 export type { UploadFile, UploadProps } from './upload';
+export { default as QrCode } from './qr-code';
+export type { QrCodeProps, QRPropsCanvas } from './qr-code/interface';
 export { default as version } from './version';
diff --git a/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/qr-code/demo/base.tsx extend context correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:128px;height:128px"
+>
+  <canvas
+    height="128"
+    style="height:128px;width:128px"
+    width="128"
+  />
+</div>
+`;
+
+exports[`renders ./components/qr-code/demo/download.tsx extend context correctly 1`] = `
+<div
+  id="myqrcode"
+>
+  <div
+    class="ant-qrcode"
+    style="width:128px;height:128px"
+  >
+    <canvas
+      height="128"
+      style="height:128px;width:128px"
+      width="128"
+    />
+  </div>
+  <button
+    class="ant-btn ant-btn-default"
+    style="margin-block-start:16px"
+    type="button"
+  >
+    <span>
+      下载二维码
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/qr-code/demo/errorlevel.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="L"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        L
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="M"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        M
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Q"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Q
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="H"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        H
+      </span>
+    </label>
+  </div>,
+  <div
+    class="ant-qrcode"
+    style="margin-top:16px;width:128px;height:128px"
+  >
+    <canvas
+      height="128"
+      style="height:128px;width:128px"
+      width="128"
+    />
+  </div>,
+]
+`;
+
+exports[`renders ./components/qr-code/demo/logo.tsx extend context correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:128px;height:128px"
+>
+  <canvas
+    height="128"
+    style="height:128px;width:128px"
+    width="128"
+  />
+  <img
+    src="https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg"
+    style="display:none"
+  />
+</div>
+`;
diff --git a/components/qr-code/__test__/__snapshots__/demo.test.ts.snap b/components/qr-code/__test__/__snapshots__/demo.test.ts.snap
@@ -1,44 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<QrCode /> renders download.tsx correctly 1`] = `
-<DocumentFragment>
+exports[`renders ./components/qr-code/demo/base.tsx correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:128px;height:128px"
+>
+  <canvas
+    height="128"
+    style="height:128px;width:128px"
+    width="128"
+  />
+</div>
+`;
+
+exports[`renders ./components/qr-code/demo/download.tsx correctly 1`] = `
+<div
+  id="myqrcode"
+>
+  <div
+    class="ant-qrcode"
+    style="width:128px;height:128px"
+  >
+    <canvas
+      height="128"
+      style="height:128px;width:128px"
+      width="128"
+    />
+  </div>
+  <button
+    class="ant-btn ant-btn-default"
+    style="margin-block-start:16px"
+    type="button"
+  >
+    <span>
+      下载二维码
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/qr-code/demo/errorlevel.tsx correctly 1`] = `
+Array [
   <div
-    id="myqrcode"
+    class="ant-radio-group ant-radio-group-outline"
   >
-    <div
-      class="tech-qrcode"
-      style="width: 128px; height: 128px;"
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
     >
-      <canvas
-        height="128"
-        ke="http://www.baidu.com"
-        style="height: 128px; width: 128px;"
-        width="128"
-      />
-    </div>
-    <button
-      class="ant-btn ant-btn-default"
-      style="margin-block-start: 16px;"
-      type="button"
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="L"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        L
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
     >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="M"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
       <span>
-        下载二维码
+        M
       </span>
-    </button>
-  </div>
-</DocumentFragment>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Q"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Q
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="H"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        H
+      </span>
+    </label>
+  </div>,
+  <div
+    class="ant-qrcode"
+    style="margin-top:16px;width:128px;height:128px"
+  >
+    <canvas
+      height="128"
+      style="height:128px;width:128px"
+      width="128"
+    />
+  </div>,
+]
 `;
 
-exports[`<QrCode /> renders errorlevel.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders logo.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders outdated.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders popover.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders refresh.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders rendermode.tsx correctly 1`] = `<DocumentFragment />`;
-
-exports[`<QrCode /> renders withoutlogo.tsx correctly 1`] = `<DocumentFragment />`;
+exports[`renders ./components/qr-code/demo/logo.tsx correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:128px;height:128px"
+>
+  <canvas
+    height="128"
+    style="height:128px;width:128px"
+    width="128"
+  />
+  <img
+    src="https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg"
+    style="display:none"
+  />
+</div>
+`;
diff --git a/components/qr-code/__test__/__snapshots__/index.test.tsx.snap b/components/qr-code/__test__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QrCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`;
+
+exports[`QrCode test should correct render  1`] = `
+<div
+  class="ant-qrcode"
+  style="width: 128px; height: 128px;"
+>
+  <canvas
+    height="128"
+    style="height: 128px; width: 128px;"
+    width="128"
+  />
+</div>
+`;
diff --git a/components/qr-code/__test__/demo-extend.test.ts b/components/qr-code/__test__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('qr-code');
diff --git a/components/qr-code/__test__/demo.test.ts b/components/qr-code/__test__/demo.test.ts
@@ -1,3 +1,3 @@
-import demoTest from '../../../tests/demo';
+import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('QrCode');
+demoTest('qr-code');
diff --git a/components/qr-code/__test__/image.test.ts b/components/qr-code/__test__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('QrCode image', () => {
+  imageDemoTest('qr-code');
+});