-
-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added deselectable
prop for radio-type components
#351
Added deselectable
prop for radio-type components
#351
Conversation
This link is for a PyCafe app based on the build in this PR. It can be used to test features. Simple replace the sample app wit your own example app and repost it here. Generated link: snehilvj/dash-mantine-components-351 |
Live sample apps on PyCafe |
Hey @RenaudLN Thanks for this awesome PR -- Nice solution 🎉 The new import dash_mantine_components as dmc
from dash import Dash, _dash_renderer
_dash_renderer._set_react_version("18.2.0")
app = Dash(external_stylesheets=dmc.styles.ALL)
app.layout = dmc.MantineProvider(
dmc.Chip("Chip A", controlled=True, checked=True)
)
if __name__ == "__main__":
app.run(debug=True) |
Docs for this PR are included here: snehilvj/dmc-docs#88 |
Good pickup! fixed that and added simple tests for single radio/chip |
Works great now! 🙏 Just need a changelog entry for both this one and 352 🙂 |
@@ -59,11 +60,15 @@ const Chip = (props: Props) => { | |||
const onChange = (checked: boolean) => { | |||
setProps({ checked }); | |||
}; | |||
|
|||
const { chipOnClick } = React.useContext(ChipGroupContext) || {}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice @RenaudLN!
I wonder if we can use this to get rid of the controlled
prop entirely (cc @BSd3v)? something like:
const eventProps = {};
if (chipOnClick) { // we have a ChipGroup context
eventProps.onClick = chipOnClick;
} else { // no ChipGroup so this Chip controls itself
eventProps.checked = checked;
eventProps.onChange = onChange;
}
return <MantineChip
data-dash-is-loading={
(loading_state && loading_state.is_loading) || undefined
}
{...eventProps}
{...others}
>
{children}
</MantineChip>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Something for another PR maybe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That works too - it would be good to get this PR across the finish line.
We can apply what you did here to make the Chip component even better as Alex suggested -- thanks for the head start.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes that’s fine, @AnnMarieW let’s just do it before we make a release and it becomes a breaking change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💃
Allow to deselect RadioGroup and ChipGroup
ChipGroup
![dmc-chipgroup-single-deselectable](https://private-user-images.githubusercontent.com/20662281/375920599-159d48ac-07c2-4768-84aa-c28b3591e7ca.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODc3MzIsIm5iZiI6MTczODk4NzQzMiwicGF0aCI6Ii8yMDY2MjI4MS8zNzU5MjA1OTktMTU5ZDQ4YWMtMDdjMi00NzY4LTg0YWEtYzI4YjM1OTFlN2NhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDA0MDM1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTljNGZlMGU4MDk5MDEwNjJhNGZiMTJmYTQwYTAzYWQ3MTJhY2ZkODVhYzA1NTczMjY0YTdjYzMzOWQ2Y2VkZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.UXKLZkGmHR7TXk0RgcAFCMN-1o34gEQXBHZGl4v3miw)
RadioGroup
![dmc-radiogroup-single-deselectable](https://private-user-images.githubusercontent.com/20662281/375900840-8810c559-7987-49a4-96e7-e1232a070905.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODc3MzIsIm5iZiI6MTczODk4NzQzMiwicGF0aCI6Ii8yMDY2MjI4MS8zNzU5MDA4NDAtODgxMGM1NTktNzk4Ny00OWE0LTk2ZTctZTEyMzJhMDcwOTA1LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDA0MDM1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAyYzhmNTZhNjFhYWM3N2EwNDQ0OWFmOGRlMmNjMDgwNWMyNDRjOTgyZGYyYjgwMDkyZjQwZDdlYWFiYzJjMDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.nBVj7lUBj9WGrKOXRlfcZkh67mTgGP53r4zVfSdEDns)