Completely fix prompt component

This commit is contained in:
abias 2023-06-12 22:00:36 -04:00
parent 407674a7e0
commit 90bf05b67d
2 changed files with 36 additions and 29 deletions

View file

@ -137,7 +137,6 @@ export class MarkdownTextArea extends Component<
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
<NavigationPrompt
when={!!this.state.content && !this.state.submitted}
suppress={this.props.hideNavigationWarnings}
/>
<div className="form-group row">
<div className={`col-sm-12`}>

View file

@ -1,45 +1,53 @@
import { Component } from "inferno";
import { i18n } from "../../i18next";
import { HistoryService } from "../../services/HistoryService";
import { i18n } from "../../../shared/i18next";
interface NavigationPromptProps {
export interface IPromptProps {
when: boolean;
suppress?: boolean;
}
interface NavigationPromptState {
promptState: "hidden" | "show" | "approved";
}
export default class NavigationPrompt extends Component<IPromptProps, any> {
public unblock;
export default class NavigationPrompt extends Component<
NavigationPromptProps,
NavigationPromptState
> {
state: NavigationPromptState = {
promptState: "hidden",
};
public enable() {
if (this.unblock) {
this.unblock();
}
constructor(props: NavigationPromptProps, context: any) {
super(props, context);
this.unblock = this.context.router.history.block(tx => {
if (window.confirm(i18n.t("block_leaving"))) {
this.unblock();
tx.retry();
}
});
}
componentDidMount(): void {
if (!this.props.suppress) {
const unblock = HistoryService.history.block(tx => {
if (!this.props.when || window.confirm(i18n.t("block_leaving"))) {
unblock();
tx.retry();
}
});
public disable() {
if (this.unblock) {
this.unblock();
this.unblock = null;
}
}
public componentWillMount() {
if (this.props.when) {
this.enable();
}
}
componentWillUnmount(): void {
console.log("unmounted");
public componentWillReceiveProps(nextProps: IPromptProps) {
if (nextProps.when) {
if (!this.props.when) {
this.enable();
}
} else {
this.disable();
}
}
render() {
public componentWillUnmount() {
this.disable();
}
public render() {
return null;
}
}