Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add confirmation modal when closing media edit modal with unsaved changes (#16518)

Browse source 
* Add confirmation modal when closing media edit modal with unsaved changes

* Move focal point media state to redux so it does not get erased by confirmation dialog

* Change upload modal behavior to keep it open while saving changes

Instead of closing it immediately and losing changes if they fail to save…

* Make it work with react-intl 2.9
This commit is contained in:
Claire 2021-07-25 01:14:43 +02:00 • committed by GitHub
parent af08229ff4
commit a8a7066e97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 142 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/javascript/mastodon/features/ui/components/modal_root.js
View file

@ -77,16 +77,33 @@ export default class ModalRoot extends React.PureComponent {
return <BundleModalError {...props} onClose={onClose} />;
}
handleClose = () => {
const { onClose } = this.props;
let message = null;
try {
message = this._modal?.getWrappedInstance?.().getCloseConfirmationMessage?.();
} catch (_) {
// injectIntl defines `getWrappedInstance` but errors out if `withRef`
// isn't set.
// This would be much smoother with react-intl 3+ and `forwardRef`.
}
onClose(message);
}
setModalRef = (c) => {
this._modal = c;
}
render () {
const { type, props, onClose } = this.props;
const { type, props } = this.props;
const { backgroundColor } = this.state;
const visible = !!type;
return (
<Base backgroundColor={backgroundColor} onClose={onClose}>
<Base backgroundColor={backgroundColor} onClose={this.handleClose}>
{visible && (
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={onClose} />}
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
</BundleContainer>
)}
</Base>