monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prevent doodle from closing on outside click (#2047) 

Adds a new property to the dispatch, which when set to true, replaces the onClose handler with a no-op, preventing the modal from closing.

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
This commit is contained in:
Plastikmensch 2023-01-04 11:59:43 +01:00 committed by GitHub
parent de67b567ad
commit 910d2d9f6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/features/compose/containers/options_container.js
View File

@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch) => ({
}, },
onDoodleOpen() { onDoodleOpen() {
dispatch(openModal('DOODLE', { noEsc: true })); dispatch(openModal('DOODLE', { noEsc: true, noClose: true }));
}, },
}); });

5
app/javascript/flavours/glitch/features/ui/components/modal_root.js
View File

@ -116,13 +116,16 @@ export default class ModalRoot extends React.PureComponent {
this._modal = c; this._modal = c;
} }
// prevent closing of modal when clicking the overlay
noop = () => {}
render () { render () {
const { type, props, ignoreFocus } = this.props; const { type, props, ignoreFocus } = this.props;
const { backgroundColor } = this.state; const { backgroundColor } = this.state;
const visible = !!type; const visible = !!type;
return ( return (
<Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}> <Base backgroundColor={backgroundColor} onClose={props && props.noClose ? this.noop : this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}>
{visible && ( {visible && (
<> <>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}> <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>