react-router-navigation-confirm/es/components/NavigationConfirm.js

A collection of components to display a custom confirmation dialog on navigation. More flexible solution to prevent than default react-router 'Prompt'

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { withHistoryService } from '../hocs';
import { isFunction, noop } from '../utils';
var BEFORE_UNLOAD_EVENT = 'beforeunload';
var NavigationConfirm = /** @class */ (function (_super) {
    __extends(NavigationConfirm, _super);
    function NavigationConfirm() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            isActive: true,
            isOpen: false,
            action: 'PUSH',
            nextLocation: { pathname: '/', search: '', state: '', hash: '' },
            hasError: false,
        };
        _this.unblock = noop;
        _this.unlisten = noop;
        _this.block = function (nextLocation, action) {
            if (_this.shouldBlock(nextLocation)) {
                _this.setState({ action: action, nextLocation: nextLocation }, _this.open);
                return false;
            }
            return;
        };
        _this.reblock = function () {
            _this.unblock();
            _this.setState({ isActive: true }, function () {
                _this.unblock = _this.props.history.block(_this.block);
            });
        };
        _this.onBeforeUnload = function (event) {
            var unloadMsg = _this.props.unloadMsg;
            event.preventDefault();
            event.returnValue = unloadMsg;
            return unloadMsg;
        };
        _this.listenUnload = function () { return window.addEventListener(BEFORE_UNLOAD_EVENT, _this.onBeforeUnload); };
        _this.removeUnload = function () { return window.removeEventListener(BEFORE_UNLOAD_EVENT, _this.onBeforeUnload); };
        _this.onConfirm = function () { return _this.navigate(); };
        _this.onCancel = function () { return _this.setState({ isOpen: false }); };
        _this.open = function () { return _this.setState({ isOpen: true }); };
        _this.isTheSameLocation = function (nextLocation) { return nextLocation.pathname === _this.props.location.pathname; };
        _this.shouldBlock = function (nextLocation) { return _this.state.isActive && _this.shouldShow() && !_this.isTheSameLocation(nextLocation); };
        _this.shouldShow = function () {
            var _a = _this.props, when = _a.when, location = _a.location, history = _a.history, match = _a.match;
            if (isFunction(when)) {
                return when(location, { location: location, history: history, match: match });
            }
            return !!when;
        };
        return _this;
    }
    NavigationConfirm.prototype.componentDidMount = function () {
        var _a = this.props.history, block = _a.block, listen = _a.listen;
        this.unblock = block(this.block);
        this.unlisten = listen(this.reblock);
        if (this.shouldShow()) {
            this.listenUnload();
        }
    };
    NavigationConfirm.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.when !== this.props.when) {
            if (this.shouldShow()) {
                this.listenUnload();
            }
            else {
                this.removeUnload();
            }
        }
    };
    NavigationConfirm.prototype.componentWillUnmount = function () {
        this.unblock();
        this.unlisten();
        this.removeUnload();
    };
    NavigationConfirm.prototype.navigate = function () {
        var _a = this.props, history = _a.history, historyService = _a.historyService;
        var _b = this.state, action = _b.action, nextLocation = _b.nextLocation;
        var historyFunction = historyService.getHistoryFunction(nextLocation, action);
        this.setState({ isActive: false, isOpen: false }, function () {
            history[historyFunction](nextLocation);
        });
    };
    NavigationConfirm.prototype.render = function () {
        var children = this.props.children;
        var _a = this.state, isActive = _a.isActive, isOpen = _a.isOpen, hasError = _a.hasError;
        if (!isActive || !isOpen || hasError) {
            return null;
        }
        return children({
            onCancel: this.onCancel,
            onConfirm: this.onConfirm,
        });
    };
    NavigationConfirm.defaultProps = {
        unloadMsg: 'msg',
        when: true,
    };
    return NavigationConfirm;
}(React.Component));
var NavigationConfirmWithRouter = withRouter(withHistoryService(NavigationConfirm));
export { NavigationConfirm, NavigationConfirmWithRouter, };
//# sourceMappingURL=NavigationConfirm.js.map