53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
|
import React from "react";
|
||
|
import PropTypes from "prop-types";
|
||
|
import invariant from "tiny-invariant";
|
||
|
|
||
|
import Lifecycle from "./Lifecycle.js";
|
||
|
import RouterContext from "./RouterContext.js";
|
||
|
|
||
|
/**
|
||
|
* The public API for prompting the user before navigating away from a screen.
|
||
|
*/
|
||
|
function Prompt({ message, when = true }) {
|
||
|
return (
|
||
|
<RouterContext.Consumer>
|
||
|
{context => {
|
||
|
invariant(context, "You should not use <Prompt> outside a <Router>");
|
||
|
|
||
|
if (!when || context.staticContext) return null;
|
||
|
|
||
|
const method = context.history.block;
|
||
|
|
||
|
return (
|
||
|
<Lifecycle
|
||
|
onMount={self => {
|
||
|
self.release = method(message);
|
||
|
}}
|
||
|
onUpdate={(self, prevProps) => {
|
||
|
if (prevProps.message !== message) {
|
||
|
self.release();
|
||
|
self.release = method(message);
|
||
|
}
|
||
|
}}
|
||
|
onUnmount={self => {
|
||
|
self.release();
|
||
|
}}
|
||
|
message={message}
|
||
|
/>
|
||
|
);
|
||
|
}}
|
||
|
</RouterContext.Consumer>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
if (__DEV__) {
|
||
|
const messageType = PropTypes.oneOfType([PropTypes.func, PropTypes.string]);
|
||
|
|
||
|
Prompt.propTypes = {
|
||
|
when: PropTypes.bool,
|
||
|
message: messageType.isRequired
|
||
|
};
|
||
|
}
|
||
|
|
||
|
export default Prompt;
|