mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
feat: qrcode canvas supports style configuration (#48194)
* feat: qrcode canvas supports style configuration * Update components/qr-code/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: thinkasany <480968828@qq.com> * docs: update version * fix: typos * fix: ant-qrcode * fix: update padding for canvas / svg * fix: update * fix: typos * fix: when borderless padding shouble be 0 * fix: when borderless borderRadius should be 0 * fix: rm Variant --------- Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
parent
6f6868f7d5
commit
3fa9d45dd5
@ -31,7 +31,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode ant-qrcode-borderless"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -56,7 +56,7 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -89,7 +89,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -102,7 +102,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
|
||||
style="background-color: rgb(245, 245, 245); width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -189,7 +189,7 @@ Array [
|
||||
</div>,
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -211,7 +211,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: rgb(255, 255, 255); margin-bottom: 16px;"
|
||||
style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -235,7 +235,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
|
||||
Array [
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent; margin-bottom: 16px;"
|
||||
style="background-color: transparent; margin-bottom: 16px; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -315,7 +315,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
|
||||
exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -336,7 +336,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -371,7 +371,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -420,7 +420,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
|
||||
</div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -450,7 +450,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -463,7 +463,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<svg
|
||||
height="160"
|
||||
|
@ -20,7 +20,7 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -51,7 +51,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -64,7 +64,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:#f5f5f5"
|
||||
style="background-color:#f5f5f5;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -149,7 +149,7 @@ Array [
|
||||
</div>,
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -169,7 +169,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:#fff;margin-bottom:16px"
|
||||
style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -191,7 +191,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent;margin-bottom:16px"
|
||||
style="background-color:transparent;margin-bottom:16px;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -269,7 +269,7 @@ Array [
|
||||
exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -288,7 +288,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -323,7 +323,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -372,7 +372,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode-mask"
|
||||
@ -400,7 +400,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
@ -413,7 +413,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width:160px;height:160px;background-color:transparent"
|
||||
style="background-color:transparent;width:160px;height:160px"
|
||||
>
|
||||
<svg
|
||||
height="160"
|
||||
|
@ -6,7 +6,7 @@ exports[`QRCode test should correct render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="width: 160px; height: 160px; background-color: transparent;"
|
||||
style="background-color: transparent; width: 160px; height: 160px;"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
|
@ -40,7 +40,9 @@ describe('QRCode test', () => {
|
||||
|
||||
it('support custom size', () => {
|
||||
const { container } = render(<QRCode value="test" size={100} />);
|
||||
expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
|
||||
const canvas = container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')!;
|
||||
expect(canvas.width).toBe(100);
|
||||
expect(canvas.height).toBe(100);
|
||||
});
|
||||
|
||||
it('support refresh', () => {
|
||||
@ -88,10 +90,10 @@ describe('QRCode test', () => {
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('correct style order', () => {
|
||||
const { container } = render(<QRCode value="test" size={80} style={{ width: 100 }} />);
|
||||
expect(container.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveStyle(
|
||||
'width: 100px; height: 80px',
|
||||
it('correct style order for canvas', () => {
|
||||
const { container } = render(<QRCode value="test" size={80} style={{ width: '100%' }} />);
|
||||
expect(container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')).toHaveStyle(
|
||||
'width: 100%',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -52,7 +52,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
|
||||
level: errorLevel,
|
||||
bgColor,
|
||||
fgColor: color,
|
||||
style: { width: undefined, height: undefined },
|
||||
style: { width: style?.width, height: style?.height },
|
||||
imageSettings: icon ? imageSettings : undefined,
|
||||
};
|
||||
|
||||
@ -79,10 +79,10 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
|
||||
});
|
||||
|
||||
const mergedStyle: React.CSSProperties = {
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: bgColor,
|
||||
...style,
|
||||
width: style?.width ?? size,
|
||||
height: style?.height ?? size,
|
||||
};
|
||||
|
||||
return wrapCSSVar(
|
||||
|
@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
|
||||
},
|
||||
[`${componentCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
padding: 0,
|
||||
borderRadius: 0,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user