feat(cascader): add Option item disableCheckbox #42024

BoyYangzai · 2023-04-26T20:50:35Z

🤔 This is a ...

🔗 Related issue link

fix Please allow us to not show the checkbox for some menu options in Cascader (in multiple mode) #41997

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Cascader `options` support `disableCheckbox` prop.
🇨🇳 Chinese	Cascader `options` 支持 `disableCheckbox` 在多选时禁用勾选框。

☑️ 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

🚀 Summary

`🤖 Generated by Copilot at 987c7f5`

Added a new feature to the Cascader component that allows disabling checkboxes for some items. Updated the documentation and the demo to show how to use the new uncheckableItemValues prop.

🔍 Walkthrough

`🤖 Generated by Copilot at 987c7f5`

Add uncheckableItemValues prop to Cascader component and its subcomponents to enable users to specify items that cannot be selected with checkboxes (link, link, link)
Update multiple.tsx demo to demonstrate the usage of uncheckableItemValues prop by passing ['2-1-2'] as the value, which makes the item with the path 2-1-2 uncheckable (link)
Update multiple.md documentation to explain the new feature of uncheckable items and the uncheckableItemValues prop in both zh-CN and en-US sections (link)

github-actions · 2023-04-26T20:50:57Z

codecov · 2023-04-27T08:08:21Z

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (8426446) 100.00% compared to head (196a8b8) 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##           feature    #42024    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          619       619            
  Lines        10676     10570   -106     
  Branches      2933      2886    -47     
==========================================
- Hits         10676     10570   -106

Impacted Files	Coverage Δ
components/input/style/index.ts	`100.00% <ø> (ø)`
components/table/InternalTable.tsx	`100.00% <ø> (ø)`
components/table/hooks/useSelection.tsx	`100.00% <100.00%> (ø)`

... and 10 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

georgeciobanu · 2023-04-30T19:38:04Z

@BoyYangzai is there a way I can pull your changes locally and start using the feature before it goes to prod? Apologies if this is a silly question but I'd love to use this feature asap. And thank you so so much!

BoyYangzai · 2023-04-30T20:01:08Z

@BoyYangzai is there a way I can pull your changes locally and start using the feature before it goes to prod? Apologies if this is a silly question but I'd love to use this feature asap. And thank you so so much!

@georgeciobanu
I'm sorry to tell you that we are discussing which design pattern to use to play with this feature, and now we have changed the api from uncheckableItemValues to add a corresponding disableCheckbox to each Item to complete this feature.
But now we are in the middle of the May Day holiday in China ( about 5~6 days), so the maintainers of antd are basically out on vacation, so we may not be able to come up with a discussion result and put this feature online for the time being.😭
So it's basically impossible to use it online and almost impossible to use it locally because the underlying implementation is in the rc-cascader library, not just a simple change to antd.
If it's really urgent, as a last resort, I have an idea that is not very mature
It can be cloned
https://github.com/BoyYangzai/ant-design/commit/987c7f53656b3f7627bdb4ad92e2a39d06b9a9aa
https://github.com/react-component/cascader/pull/408/commits/e6c574c2e20fac2b967ffa1a07c1b281660bc43a
These two branches of code add up to the uncheckableItemValues approach to the feature
Then manually compile and distribute the source code of antd as a new npm package to use
The approximate steps are:

clone both projects and install all dependencies
use npm link under the rc-cascader project and npm run compile
use npm link rc-cascader under antd project
Then you can repackage the antd project and release it as a new npm package to use to replace antd😄
When the next version is released, change the dependencies and install the official version of antd again

But I still suggest you to wait for a new release of antd if you are not in a hurry, because I am not sure if there are any problems with your project when you do the above steps locally

georgeciobanu · 2023-04-30T20:05:10Z

You are amazing, thank you @BoyYangzai! I will wait for another week or two for the final version. I owe you a beer!

afc163 · 2023-05-05T02:23:48Z

You should send it to feature branch.

yoyo837 · 2023-05-05T06:34:21Z

+rc-cascader@3.11.0, 依赖升上来, 并添加测试用例.

socket-security · 2023-05-07T16:52:19Z

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

BoyYangzai · 2023-05-07T16:56:06Z

@georgeciobanu
hi I'm glad to tell you that this feature will be available soon😄
This is the demo using this feat
Only the latest rc-cascader has been released. The rc-cascader in antd has not been updated yet.
You just need to wait for this pr to be merged and then you can use this feat like the demo

georgeciobanu · 2023-05-07T18:03:17Z

Y'all are amazing, thank you so much!

zombieJ · 2023-05-11T08:01:42Z

disableCheckbox not work as expect:

BoyYangzai · 2023-05-11T12:51:14Z

disableCheckbox not work as expect:

done - react-component/cascader#410

BoyYangzai · 2023-05-15T08:34:41Z

@georgeciobanu new verison AntDesign is released，now you can use the feature😄

georgeciobanu · 2023-05-15T10:32:32Z

Thank you @BoyYangzai, you are awesome! If you are curious why I needed the feature, you can check it out at https://human-software-dev.herokuapp.com (it might take me a few days to update the UI and push a new version using the new feature).

georgeciobanu · 2023-05-17T03:28:31Z

@BoyYangzai the original design you came up with (#41997 (comment)) was the correct one. I want the checkbox to not show (aka hide), but instead the feature was modified to disable the checkbox (which is not what I wanted). Is there a way to hide the checkbox for select items?

BoyYangzai · 2023-05-17T03:56:54Z

@BoyYangzai the original design you came up with (#41997 (comment)) was the correct one. I want the checkbox to not show (aka hide), but instead the feature was modified to disable the checkbox (which is not what I wanted). Is there a way to hide the checkbox for select items?

Hi bro! the original design is good but we discussed it , more antd members thought if you disabeled the checkbox in cascaderItem，then you should't select the cascaderItem. I'm sorry to tell you that there's no way to hide just the styles😫

((( Whisper good news your name appears on the antd website as a feat contributor 😄

https://ant.design/components/cascader

georgeciobanu · 2023-05-17T04:34:14Z

I barely did anything but that's great to hear 😄

@BoyYangzai I will try to build a custom version of AntD with your changes. Fingers crossed it works 🤞🏻💪🙏

georgeciobanu · 2023-05-17T06:27:16Z

I barely did anything but that's great to hear 😄

@BoyYangzai I will try to build a custom version of AntD with your changes. Fingers crossed it works 🤞🏻💪🙏

@BoyYangzai how can I make the Cascader (with search enabled) display the cursor after the generated displayRender UI?

So I want the cursor and search input to behave in Single mode the same way it behaves in multiple mode (put the cursor after the UI and allow the user to search)

BoyYangzai · 2023-05-17T06:56:57Z

@georgeciobanu oh-- do you mean
showSearch is true
and the cursor on disabled SearchItem should be disabled cursorstyle?

like this? this has not disabled cursor style
https://codesandbox.io/s/duo-xuan-antd-5-5-0-forked-0051i2?file=/demo.tsx

if it is not right
can you give me a codeSandbox or something descript it. thanks！

georgeciobanu · 2023-05-17T15:15:11Z

Thank you so much for trying to help me! I figured out a different way to do what I need. Now I owe you a whole case of beers! 😋👍🙏💪

linpeng6 · 2023-09-20T11:08:39Z

disableCheckbox attribute does not hide checkbox , it just disables checkbox, the checkbox still exists in the view. how can I hide the checkbox

hirusnov · 2024-03-11T05:49:35Z

I used this trick to hide the checkbox:

Using disableCheckbox it's returns a class named: ant-cascader-checkbox-disabled
In Cascader component, add more classes by using prop popupClassname="hidden-checkbox", you can use another name you want
Custom CSS for antd by .hidden-checkbox .ant-cascader-checkbox-disabled { display: none;}

The checkbox will be hidden.
That's a style CSS trick and it's working for me

Recording.2024-03-11.124806.mp4

georgeciobanu · 2024-03-11T05:52:22Z

Awesome and so creative! Thank you so much, I owe you a beer 🍺

…

On Sun, Mar 10, 2024 at 10:49 PM Hirus ***@***.***> wrote: I used this trick to hide the checkbox: Using disableCheckbox it's returns a class named: ant-cascader-checkbox-disabled In Cascader component, add more classes by using prop popupClassname="hidden-checkbox", you can use another name you want custom CSS for antd by .hidden-checkbox .ant-cascader-checkbox-disabled { display: none;} The checkbox will be hidden. That's a style CSS trick and it's working for me https://github.com/ant-design/ant-design/assets/65271147/ac79f4da-8006-49e6-8c47-a9dd9e6fe8cc — Reply to this email directly, view it on GitHub <#42024 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJ3KB7TRZLKK6Z7VX5F73DYXVAYNAVCNFSM6AAAAAAXM6UILGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGY3TONBTGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

hirusnov · 2024-03-11T06:00:48Z

Awesome and so creative! Thank you so much, I owe you a beer 🍺

Cheer 🍻, hope the trick can help you ...

feat(cascader): add uncheckableItemValues props

987c7f5

BoyYangzai mentioned this pull request Apr 26, 2023

Please allow us to not show the checkbox for some menu options in Cascader (in multiple mode) #41997

Closed

feat: add Option disableCheckbox

163322e

chore: modify md

9bf5ca6

BoyYangzai changed the title ~~feat(cascader): add uncheckableItemValues props~~ feat(cascader): add Option item disableCheckbox Apr 27, 2023

BoyYangzai changed the base branch from master to feature May 5, 2023 03:30

chore: add test and lock version

9d1c02b

洋 added 2 commits May 8, 2023 14:25

Merge branch 'feature' of https://github.com/ant-design/ant-design

f66d6b0

Merge branch 'feature' of https://github.com/ant-design/ant-design

d469a3f

Update package.json

196a8b8

zombieJ approved these changes May 12, 2023

View reviewed changes

zombieJ merged commit d32e8e6 into ant-design:feature May 12, 2023
54 checks passed

xrkffgg mentioned this pull request May 14, 2023

docs: add changelog 5.5.0 #42339

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cascader): add Option item disableCheckbox #42024

feat(cascader): add Option item disableCheckbox #42024

BoyYangzai commented Apr 26, 2023 •

edited by zombieJ

github-actions bot commented Apr 26, 2023 •

edited

codecov bot commented Apr 27, 2023 •

edited

georgeciobanu commented Apr 30, 2023

BoyYangzai commented Apr 30, 2023

georgeciobanu commented Apr 30, 2023

afc163 commented May 5, 2023

yoyo837 commented May 5, 2023 •

edited

socket-security bot commented May 7, 2023 •

edited

BoyYangzai commented May 7, 2023 •

edited

georgeciobanu commented May 7, 2023

zombieJ commented May 11, 2023

BoyYangzai commented May 11, 2023

BoyYangzai commented May 15, 2023

georgeciobanu commented May 15, 2023 •

edited

georgeciobanu commented May 17, 2023

BoyYangzai commented May 17, 2023 •

edited

georgeciobanu commented May 17, 2023

georgeciobanu commented May 17, 2023

BoyYangzai commented May 17, 2023

georgeciobanu commented May 17, 2023

linpeng6 commented Sep 20, 2023 •

edited

hirusnov commented Mar 11, 2024 •

edited

georgeciobanu commented Mar 11, 2024 via email •

edited

hirusnov commented Mar 11, 2024 •

edited

feat(cascader): add Option item disableCheckbox #42024

feat(cascader): add Option item disableCheckbox #42024

Conversation

BoyYangzai commented Apr 26, 2023 • edited by zombieJ

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

🚀 Summary

🤖 Generated by Copilot at 987c7f5

🔍 Walkthrough

🤖 Generated by Copilot at 987c7f5

github-actions bot commented Apr 26, 2023 • edited

codecov bot commented Apr 27, 2023 • edited

Codecov Report

georgeciobanu commented Apr 30, 2023

BoyYangzai commented Apr 30, 2023

georgeciobanu commented Apr 30, 2023

afc163 commented May 5, 2023

yoyo837 commented May 5, 2023 • edited

socket-security bot commented May 7, 2023 • edited

BoyYangzai commented May 7, 2023 • edited

georgeciobanu commented May 7, 2023

zombieJ commented May 11, 2023

BoyYangzai commented May 11, 2023

BoyYangzai commented May 15, 2023

georgeciobanu commented May 15, 2023 • edited

georgeciobanu commented May 17, 2023

BoyYangzai commented May 17, 2023 • edited

georgeciobanu commented May 17, 2023

georgeciobanu commented May 17, 2023

BoyYangzai commented May 17, 2023

georgeciobanu commented May 17, 2023

linpeng6 commented Sep 20, 2023 • edited

hirusnov commented Mar 11, 2024 • edited

georgeciobanu commented Mar 11, 2024 via email • edited

hirusnov commented Mar 11, 2024 • edited

BoyYangzai commented Apr 26, 2023 •

edited by zombieJ

`🤖 Generated by Copilot at 987c7f5`

`🤖 Generated by Copilot at 987c7f5`

github-actions bot commented Apr 26, 2023 •

edited

codecov bot commented Apr 27, 2023 •

edited

yoyo837 commented May 5, 2023 •

edited

socket-security bot commented May 7, 2023 •

edited

BoyYangzai commented May 7, 2023 •

edited

georgeciobanu commented May 15, 2023 •

edited

BoyYangzai commented May 17, 2023 •

edited

linpeng6 commented Sep 20, 2023 •

edited

hirusnov commented Mar 11, 2024 •

edited

georgeciobanu commented Mar 11, 2024 via email •

edited

hirusnov commented Mar 11, 2024 •

edited