fix(Modal): replace deprecated maskClosable with mask.closable#481
fix(Modal): replace deprecated maskClosable with mask.closable#481hugetiny wants to merge 1 commit intolobehub:masterfrom
Conversation
Replace deprecated maskClosable prop with mask={{ closable: ... }}
to fix antd 6.x deprecation warning.
Files changed:
- src/Modal/Modal.tsx
- src/Modal/RawModalStackItem.tsx
- src/Modal/ModalStackItem.tsx
- src/Modal/imperative.tsx
Fixes lobehub#480
|
Someone is attempting to deploy a commit to the LobeHub OSS Team on Vercel. A member of the Team first needs to authorize it. |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
|
👍 @hugetiny |
There was a problem hiding this comment.
Pull request overview
Updates the Modal implementation to align with Ant Design 6.x by replacing the deprecated maskClosable prop with the new mask={{ closable: ... }} API, removing the related deprecation warning while preserving click-outside-to-dismiss behavior.
Changes:
- Replace
maskClosableusage inModalwithmask={{ closable: true }} - Update the imperative/stack update flows to toggle dismiss-on-mask-click via
mask.closable - Propagate the new
maskupdate shape through modal stack items and imperative APIs
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/Modal/Modal.tsx | Switches internal Ant Modal config from maskClosable to mask.closable. |
| src/Modal/RawModalStackItem.tsx | Updates stack-item onUpdate payload to use mask.closable. |
| src/Modal/ModalStackItem.tsx | Updates stack-item onUpdate payload to use mask.closable. |
| src/Modal/imperative.tsx | Updates imperative APIs to toggle dismiss-on-outside-click via mask.closable. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const close = useEventCallback(() => onClose(id)); | ||
| const setCanDismissByClickOutside = useEventCallback((value: boolean) => | ||
| onUpdate(id, { maskClosable: value }), | ||
| onUpdate(id, { mask: { closable: value } }), |
There was a problem hiding this comment.
onUpdate ultimately shallow-merges modal props in updateModal. Passing mask: { closable: value } here will overwrite any existing mask configuration on the imperative modal (dropping other mask fields). Consider updating the merge logic (or this update payload) so only mask.closable is changed while preserving other mask properties.
|
|
||
| const setCanDismissByClickOutside = useEventCallback((value: boolean) => { | ||
| onUpdate(id, { maskClosable: value }); | ||
| onUpdate(id, { mask: { closable: value } }); |
There was a problem hiding this comment.
onUpdate shallow-merges raw props; sending mask: { closable: value } will replace any existing mask object and can drop other mask-related settings. Consider merging with the existing mask object (when it’s an object) so this toggle only affects mask.closable.
| onUpdate(id, { mask: { closable: value } }); | |
| const currentMask = props['mask']; | |
| const nextMask = | |
| currentMask && typeof currentMask === 'object' | |
| ? { ...(currentMask as Record<string, unknown>), closable: value } | |
| : { closable: value }; | |
| onUpdate(id, { mask: nextMask }); |
| close: () => closeModal(id), | ||
| destroy: () => destroyModal(id), | ||
| setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }), | ||
| setCanDismissByClickOutside: (value) => updateModal(id, { mask: { closable: value } }), |
There was a problem hiding this comment.
updateModal only does a shallow merge (props: { ...item.props, ...nextProps }). Updating mask with { closable: value } will overwrite any existing mask config (e.g., styles, className, motion) that may have been provided when creating/updating the modal. Consider merging with the existing props.mask (when it’s an object) so setCanDismissByClickOutside only changes mask.closable without dropping other fields.
| close: () => closeModal(id), | ||
| destroy: () => destroyModal(id), | ||
| setCanDismissByClickOutside: (value) => updateRawProps(id, { maskClosable: value }), | ||
| setCanDismissByClickOutside: (value) => updateRawProps(id, { mask: { closable: value } }), |
There was a problem hiding this comment.
updateRawProps performs a shallow merge, so setting mask: { closable: value } will replace any existing mask object in the raw modal props. If callers provided additional mask options, setCanDismissByClickOutside will unintentionally drop them. Consider merging mask objects (when applicable) instead of overwriting.
Description
Replace deprecated
maskClosableprop withmask={{ closable: ... }}to fix antd 6.x deprecation warning.Changes
src/Modal/Modal.tsx: ReplacemaskClosableprop withmask={{ closable: true }}src/Modal/RawModalStackItem.tsx: Update onUpdate call to use new formatsrc/Modal/ModalStackItem.tsx: Update onUpdate call to use new formatsrc/Modal/imperative.tsx: Update updateModal and updateRawProps callsRelated Issue
Fixes #480
Testing
Thanks for maintaining this great library! 🙏