feat: qrcode canvas supports style configuration #48194

thinkasany · 2024-03-31T11:44:24Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

qrcode修改需要支持style的配置才能实现‘100%’，之前的pr只修复了外层的div的宽度，实际上我们需要让canvas也生效，用style的宽度来支持修改是react.qrcode 作者推荐的写法，他不建议使用size来做‘100%’，所以需要佬们看一下，怎么支持一下。

目前我的修改代码实际上只有在配置了witdh才会覆盖，如果没配置witdth应该值还是原来的，不会影响到原来的代码逻辑。

📝 Changelog

Language	Changelog
🇺🇸 English	feat: qrcode canvas supports style configuration
🇨🇳 Chinese	feat: qrcode 的画布支持style配置

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

stackblitz · 2024-03-31T11:44:27Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-03-31T11:44:35Z

👁 Visual Regression Report for PR #48194 Passed ✅

🎯 Target branch: feature (6f6868f)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

github-actions · 2024-03-31T11:44:36Z

codesandbox-ci · 2024-03-31T11:49:57Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

codecov · 2024-03-31T12:04:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (6f6868f) to head (e2f8df5).

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #48194   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          745       745           
  Lines        12987     12989    +2     
  Branches      3406      3408    +2     
=========================================
+ Hits         12987     12989    +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

components/qr-code/__tests__/index.test.tsx

li-jia-nan · 2024-03-31T12:16:35Z

fix: QRCode style.padding should work #45815

afc163 · 2024-03-31T14:40:44Z

原始问题是啥？

thinkasany · 2024-03-31T14:47:32Z

原始问题是啥？

原始问题是：我们有时候需要配置 width：'100%', 但是现在只能用size来配置固定px。
react.qrcode是可以通过style来配置的，但是antd的封装不行，就只能用size来了
ant-design/ant-design-web3#679

afc163 · 2024-03-31T15:03:09Z

给个重现？

thinkasany · 2024-03-31T15:29:11Z

给个重现？

https://codepen.io/thinkasany/pen/JjVOYyq?editors=0010

外部div witdth 200px了，但是内部svg还是会保留默认的size

我们是为了解决溢出的问题

现在的代码用了‘100%’ 会出现下面这种情况，classname为antd-qrcode的div撑开来了，但是内部svg还是size的尺寸，size这边要求字段为number 这个也是受react.qrcode 那边影响，去提过pr了，他们不建议让这个字段兼容string

afc163 · 2024-04-01T03:41:19Z

这样不行的，QRCode 的默认大小就是 160，如果没有覆盖 size，大小不应该变化。

另外 style.width + style.height 设置的实际上是 QRCode 外框的大小，而非二维码本身的大小，这两个存在分开配置的可能性。

如果需要二维码大小跟踪外框走，建议 size="100%" 来满足。

thinkasany · 2024-04-01T03:46:13Z

这样不行的，QRCode 的默认大小就是 160，如果没有覆盖 size，大小不应该变化。

另外 style.width + style.height 设置的实际上是 QRCode 外框的大小，而非二维码本身的大小，这两个存在分开配置的可能性。

如果需要二维码大小跟踪外框走，建议 size="100%" 来满足。

@afc163 size="100% 的写法不是很受推荐, 当时有去这边讨论过这种写法
zpao/qrcode.react#338

thinkasany · 2024-04-01T03:51:59Z

这样不行的，QRCode 的默认大小就是 160，如果没有覆盖 size，大小不应该变化。

另外 style.width + style.height 设置的实际上是 QRCode 外框的大小，而非二维码本身的大小，这两个存在分开配置的可能性。

如果需要二维码大小跟踪外框走，建议 size="100%" 来满足。

还有就是 size 目前有约束只能是number类型，当时试过pr number ｜ stirng, 但是遇到了底层库的报错，所以才去作者那边问的

afc163 · 2024-04-01T03:52:17Z

我感觉可以加一个 max-width: 100%;。

thinkasany · 2024-04-01T03:59:05Z

我感觉可以加一个 max-width: 100%;。

现在就是只有修改size 才能影响到内部的svg的尺寸，现在给的所有style都是给了svg外部的div，所以内部的svg有溢出风险，感觉如果用 size: '100%' as unknown as string 去做不是很友好

afc163 · 2024-04-01T05:24:18Z

还有就是 size 目前有约束只能是number类型

可以在 antd 这层放开类型限制。

thinkasany · 2024-04-01T05:50:47Z

还有就是 size 目前有约束只能是number类型

可以在 antd 这层放开类型限制。

我曾经尝试过 #48019 ，ci 过不去

https://github.com/ant-design/ant-design/actions/runs/8386601484/job/22967339294

li-jia-nan · 2024-04-01T05:51:45Z

as 一下？

li-jia-nan · 2024-04-01T05:52:12Z

顺便加个 max-width: 100% 的属性

li-jia-nan · 2024-04-01T06:00:01Z

 '> canvas': {
  alignSelf: 'stretch',
  flex: 'auto',
  minWidth: 0,
  minHeight: 0,
  maxWidth: '100%',
  maxHeight: '100%',
},

thinkasany · 2024-04-01T11:03:00Z

zpao/qrcode.react#338

@afc163 老板辛苦你再看一眼 🙏，希望没有耽误你太多时间精力，如果还是不能解决的话，我再想想其他方式去解决这个问题好了，我又重新整理了一下组织语言，最终汇集成以下两点：

qrcode.react 并没有做size的string的兼容，'100%' 虽然生效, 但是作者不建议这么使用, 所以出现了上面的ci报错，在原仓库中string是无法通过ci测试的，作者是建议使用style去做宽度。

我现在遇到的场景是: 我想给定一个div宽高，然后想让svg(qrcode)跟着这个div自适应宽度，但是针对你上面说的那种用户可能想要分开配置两个宽高，我觉得我会设置 border: false, , 然后自己去实现这个border，不然的话，感觉做size的宽度同步挺麻烦的，因为按照作者库要求只能是number类型。（max-width: 100%; 虽然可以宽度不溢出，但是最后宽高不是同等长度的话其实也不是很好看）。然后我想表达的其实就是，qrcode外框的大小想调整还是很容易的，但是想要让内部的svg size={'100%'} , 不太方便，毕竟不受库本身的支持。

yoyo837 · 2024-04-01T12:28:23Z

bugfix or feature?

thinkasany · 2024-04-01T12:30:45Z

bugfix or feature?

感觉也可以算是feature，因为原来的预期是只用配置border宽度就够了(二维码用size控制)，现在多了一个style支持调整qrcode内部二维码的宽高

afc163 · 2024-04-01T12:36:03Z

max-width: 100% 不能解决原始问题么？

components/qr-code/index.zh-CN.md

thinkasany · 2024-04-15T03:18:12Z

@afc163 ，辛苦老板再帮忙看看，上面提到的都调整好了。

components/qr-code/index.tsx

Co-authored-by: lijianan <[email protected]> Signed-off-by: thinkasany <[email protected]>

components/qr-code/index.zh-CN.md

afc163 · 2024-04-30T08:43:16Z

需要加个 bordered 属性。

thinkasany · 2024-04-30T08:44:35Z

需要加个 bordered 属性。

这个属性之前就有啦

li-jia-nan · 2024-05-01T08:09:17Z

components/qr-code/__tests__/index.test.tsx

- 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%' }} />);


加了新特性的话，需要新增 test case，不要动原来用例

test: add test case #48724

li-jia-nan reviewed Mar 31, 2024

View reviewed changes

components/qr-code/__tests__/index.test.tsx Outdated Show resolved Hide resolved

li-jia-nan reviewed Mar 31, 2024

View reviewed changes

components/qr-code/__tests__/index.test.tsx Outdated Show resolved Hide resolved

thinkasany requested a review from li-jia-nan March 31, 2024 12:47

li-jia-nan requested a review from afc163 March 31, 2024 13:20

afc163 closed this Apr 1, 2024

afc163 reopened this Apr 1, 2024

thinkasany force-pushed the master branch from e9cb45d to 36050f0 Compare April 11, 2024 05:18

li-jia-nan reviewed Apr 11, 2024

View reviewed changes

components/qr-code/index.zh-CN.md Outdated Show resolved Hide resolved

thinkasany mentioned this pull request Apr 12, 2024

[Bug] ConnectModal QRCode overflow ant-design/ant-design-web3#679

Closed

afc163 reviewed Apr 15, 2024

View reviewed changes

components/qr-code/index.tsx Show resolved Hide resolved

kiner-tang reviewed Apr 15, 2024

View reviewed changes

components/qr-code/index.tsx Outdated Show resolved Hide resolved

thinkasany force-pushed the master branch from d2ad168 to dab5eb2 Compare April 15, 2024 07:31

thinkasany and others added 5 commits April 15, 2024 16:26

feat: qrcode canvas supports style configuration

fcdd865

Update components/qr-code/index.zh-CN.md

ed9fd1c

Co-authored-by: lijianan <[email protected]> Signed-off-by: thinkasany <[email protected]>

docs: update version

5746dc3

fix: typos

36a8e78

fix: ant-qrcode

6d648b8

thinkasany force-pushed the master branch from 4a0fbd5 to 6d648b8 Compare April 15, 2024 08:26

thinkasany and others added 6 commits April 15, 2024 19:40

fix: update padding for canvas / svg

176a254

fix: update

57c0281

fix: typos

9588ee8

fix: when borderless padding shouble be 0

7cc967a

fix: when borderless borderRadius should be 0

53c67e9

Merge branch 'feature' into master

b57eee5

afc163 closed this Apr 17, 2024

afc163 reopened this Apr 17, 2024

zombieJ reviewed Apr 18, 2024

View reviewed changes

components/qr-code/index.zh-CN.md Outdated Show resolved Hide resolved

thinkasany added 2 commits April 30, 2024 15:01

fix: rm Variant

bff6e02

Merge remote-tracking branch 'upstream/feature' into HEAD

e2f8df5

afc163 approved these changes Apr 30, 2024

View reviewed changes

afc163 merged commit 3fa9d45 into ant-design:feature Apr 30, 2024
60 checks passed

li-jia-nan reviewed May 1, 2024

View reviewed changes

afc163 mentioned this pull request May 2, 2024

docs(:✨): release 5.17.0 #48743

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: qrcode canvas supports style configuration #48194

feat: qrcode canvas supports style configuration #48194

thinkasany commented Mar 31, 2024

stackblitz bot commented Mar 31, 2024

github-actions bot commented Mar 31, 2024 •

edited

github-actions bot commented Mar 31, 2024 •

edited

codesandbox-ci bot commented Mar 31, 2024 •

edited

codecov bot commented Mar 31, 2024 •

edited

li-jia-nan commented Mar 31, 2024

afc163 commented Mar 31, 2024

thinkasany commented Mar 31, 2024 •

edited

afc163 commented Mar 31, 2024

thinkasany commented Mar 31, 2024 •

edited

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024 •

edited

thinkasany commented Apr 1, 2024

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

thinkasany commented Apr 1, 2024

yoyo837 commented Apr 1, 2024

thinkasany commented Apr 1, 2024 •

edited

afc163 commented Apr 1, 2024

thinkasany commented Apr 15, 2024

afc163 commented Apr 30, 2024

thinkasany commented Apr 30, 2024

li-jia-nan May 1, 2024

li-jia-nan May 1, 2024

feat: qrcode canvas supports style configuration #48194

feat: qrcode canvas supports style configuration #48194

Conversation

thinkasany commented Mar 31, 2024

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

stackblitz bot commented Mar 31, 2024

github-actions bot commented Mar 31, 2024 • edited

👁 Visual Regression Report for PR #48194 Passed ✅

github-actions bot commented Mar 31, 2024 • edited

codesandbox-ci bot commented Mar 31, 2024 • edited

codecov bot commented Mar 31, 2024 • edited

Codecov Report

li-jia-nan commented Mar 31, 2024

afc163 commented Mar 31, 2024

thinkasany commented Mar 31, 2024 • edited

afc163 commented Mar 31, 2024

thinkasany commented Mar 31, 2024 • edited

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024 • edited

thinkasany commented Apr 1, 2024

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024

afc163 commented Apr 1, 2024

thinkasany commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

li-jia-nan commented Apr 1, 2024

thinkasany commented Apr 1, 2024

yoyo837 commented Apr 1, 2024

thinkasany commented Apr 1, 2024 • edited

afc163 commented Apr 1, 2024

thinkasany commented Apr 15, 2024

afc163 commented Apr 30, 2024

thinkasany commented Apr 30, 2024

li-jia-nan May 1, 2024

Choose a reason for hiding this comment

li-jia-nan May 1, 2024

Choose a reason for hiding this comment

github-actions bot commented Mar 31, 2024 •

edited

github-actions bot commented Mar 31, 2024 •

edited

codesandbox-ci bot commented Mar 31, 2024 •

edited

codecov bot commented Mar 31, 2024 •

edited

thinkasany commented Mar 31, 2024 •

edited

thinkasany commented Mar 31, 2024 •

edited

thinkasany commented Apr 1, 2024 •

edited

thinkasany commented Apr 1, 2024 •

edited