290 lines
9.0 KiB
JavaScript
290 lines
9.0 KiB
JavaScript
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
|
|
||
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||
|
|
|
||
|
|
import warning from 'warning';
|
||
|
|
import invariant from 'invariant';
|
||
|
|
import { createLocation } from './LocationUtils';
|
||
|
|
import { addLeadingSlash, stripTrailingSlash, hasBasename, stripBasename, createPath } from './PathUtils';
|
||
|
|
import createTransitionManager from './createTransitionManager';
|
||
|
|
import { canUseDOM, addEventListener, removeEventListener, getConfirmation, supportsHistory, supportsPopStateOnHashChange, isExtraneousPopstateEvent } from './DOMUtils';
|
||
|
|
|
||
|
|
var PopStateEvent = 'popstate';
|
||
|
|
var HashChangeEvent = 'hashchange';
|
||
|
|
|
||
|
|
var getHistoryState = function getHistoryState() {
|
||
|
|
try {
|
||
|
|
return window.history.state || {};
|
||
|
|
} catch (e) {
|
||
|
|
// IE 11 sometimes throws when accessing window.history.state
|
||
|
|
// See https://github.com/ReactTraining/history/pull/289
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates a history object that uses the HTML5 history API including
|
||
|
|
* pushState, replaceState, and the popstate event.
|
||
|
|
*/
|
||
|
|
var createBrowserHistory = function createBrowserHistory() {
|
||
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||
|
|
|
||
|
|
invariant(canUseDOM, 'Browser history needs a DOM');
|
||
|
|
|
||
|
|
var globalHistory = window.history;
|
||
|
|
var canUseHistory = supportsHistory();
|
||
|
|
var needsHashChangeListener = !supportsPopStateOnHashChange();
|
||
|
|
|
||
|
|
var _props$forceRefresh = props.forceRefresh,
|
||
|
|
forceRefresh = _props$forceRefresh === undefined ? false : _props$forceRefresh,
|
||
|
|
_props$getUserConfirm = props.getUserConfirmation,
|
||
|
|
getUserConfirmation = _props$getUserConfirm === undefined ? getConfirmation : _props$getUserConfirm,
|
||
|
|
_props$keyLength = props.keyLength,
|
||
|
|
keyLength = _props$keyLength === undefined ? 6 : _props$keyLength;
|
||
|
|
|
||
|
|
var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
|
||
|
|
|
||
|
|
var getDOMLocation = function getDOMLocation(historyState) {
|
||
|
|
var _ref = historyState || {},
|
||
|
|
key = _ref.key,
|
||
|
|
state = _ref.state;
|
||
|
|
|
||
|
|
var _window$location = window.location,
|
||
|
|
pathname = _window$location.pathname,
|
||
|
|
search = _window$location.search,
|
||
|
|
hash = _window$location.hash;
|
||
|
|
|
||
|
|
|
||
|
|
var path = pathname + search + hash;
|
||
|
|
|
||
|
|
warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path "' + path + '" to begin with "' + basename + '".');
|
||
|
|
|
||
|
|
if (basename) path = stripBasename(path, basename);
|
||
|
|
|
||
|
|
return createLocation(path, state, key);
|
||
|
|
};
|
||
|
|
|
||
|
|
var createKey = function createKey() {
|
||
|
|
return Math.random().toString(36).substr(2, keyLength);
|
||
|
|
};
|
||
|
|
|
||
|
|
var transitionManager = createTransitionManager();
|
||
|
|
|
||
|
|
var setState = function setState(nextState) {
|
||
|
|
_extends(history, nextState);
|
||
|
|
|
||
|
|
history.length = globalHistory.length;
|
||
|
|
|
||
|
|
transitionManager.notifyListeners(history.location, history.action);
|
||
|
|
};
|
||
|
|
|
||
|
|
var handlePopState = function handlePopState(event) {
|
||
|
|
// Ignore extraneous popstate events in WebKit.
|
||
|
|
if (isExtraneousPopstateEvent(event)) return;
|
||
|
|
|
||
|
|
handlePop(getDOMLocation(event.state));
|
||
|
|
};
|
||
|
|
|
||
|
|
var handleHashChange = function handleHashChange() {
|
||
|
|
handlePop(getDOMLocation(getHistoryState()));
|
||
|
|
};
|
||
|
|
|
||
|
|
var forceNextPop = false;
|
||
|
|
|
||
|
|
var handlePop = function handlePop(location) {
|
||
|
|
if (forceNextPop) {
|
||
|
|
forceNextPop = false;
|
||
|
|
setState();
|
||
|
|
} else {
|
||
|
|
var action = 'POP';
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (ok) {
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
} else {
|
||
|
|
revertPop(location);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var revertPop = function revertPop(fromLocation) {
|
||
|
|
var toLocation = history.location;
|
||
|
|
|
||
|
|
// TODO: We could probably make this more reliable by
|
||
|
|
// keeping a list of keys we've seen in sessionStorage.
|
||
|
|
// Instead, we just default to 0 for keys we don't know.
|
||
|
|
|
||
|
|
var toIndex = allKeys.indexOf(toLocation.key);
|
||
|
|
|
||
|
|
if (toIndex === -1) toIndex = 0;
|
||
|
|
|
||
|
|
var fromIndex = allKeys.indexOf(fromLocation.key);
|
||
|
|
|
||
|
|
if (fromIndex === -1) fromIndex = 0;
|
||
|
|
|
||
|
|
var delta = toIndex - fromIndex;
|
||
|
|
|
||
|
|
if (delta) {
|
||
|
|
forceNextPop = true;
|
||
|
|
go(delta);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var initialLocation = getDOMLocation(getHistoryState());
|
||
|
|
var allKeys = [initialLocation.key];
|
||
|
|
|
||
|
|
// Public interface
|
||
|
|
|
||
|
|
var createHref = function createHref(location) {
|
||
|
|
return basename + createPath(location);
|
||
|
|
};
|
||
|
|
|
||
|
|
var push = function push(path, state) {
|
||
|
|
warning(!((typeof path === 'undefined' ? 'undefined' : _typeof(path)) === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored');
|
||
|
|
|
||
|
|
var action = 'PUSH';
|
||
|
|
var location = createLocation(path, state, createKey(), history.location);
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (!ok) return;
|
||
|
|
|
||
|
|
var href = createHref(location);
|
||
|
|
var key = location.key,
|
||
|
|
state = location.state;
|
||
|
|
|
||
|
|
|
||
|
|
if (canUseHistory) {
|
||
|
|
globalHistory.pushState({ key: key, state: state }, null, href);
|
||
|
|
|
||
|
|
if (forceRefresh) {
|
||
|
|
window.location.href = href;
|
||
|
|
} else {
|
||
|
|
var prevIndex = allKeys.indexOf(history.location.key);
|
||
|
|
var nextKeys = allKeys.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
|
||
|
|
|
||
|
|
nextKeys.push(location.key);
|
||
|
|
allKeys = nextKeys;
|
||
|
|
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
warning(state === undefined, 'Browser history cannot push state in browsers that do not support HTML5 history');
|
||
|
|
|
||
|
|
window.location.href = href;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var replace = function replace(path, state) {
|
||
|
|
warning(!((typeof path === 'undefined' ? 'undefined' : _typeof(path)) === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' + 'argument is a location-like object that already has state; it is ignored');
|
||
|
|
|
||
|
|
var action = 'REPLACE';
|
||
|
|
var location = createLocation(path, state, createKey(), history.location);
|
||
|
|
|
||
|
|
transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {
|
||
|
|
if (!ok) return;
|
||
|
|
|
||
|
|
var href = createHref(location);
|
||
|
|
var key = location.key,
|
||
|
|
state = location.state;
|
||
|
|
|
||
|
|
|
||
|
|
if (canUseHistory) {
|
||
|
|
globalHistory.replaceState({ key: key, state: state }, null, href);
|
||
|
|
|
||
|
|
if (forceRefresh) {
|
||
|
|
window.location.replace(href);
|
||
|
|
} else {
|
||
|
|
var prevIndex = allKeys.indexOf(history.location.key);
|
||
|
|
|
||
|
|
if (prevIndex !== -1) allKeys[prevIndex] = location.key;
|
||
|
|
|
||
|
|
setState({ action: action, location: location });
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
warning(state === undefined, 'Browser history cannot replace state in browsers that do not support HTML5 history');
|
||
|
|
|
||
|
|
window.location.replace(href);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
var go = function go(n) {
|
||
|
|
globalHistory.go(n);
|
||
|
|
};
|
||
|
|
|
||
|
|
var goBack = function goBack() {
|
||
|
|
return go(-1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var goForward = function goForward() {
|
||
|
|
return go(1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var listenerCount = 0;
|
||
|
|
|
||
|
|
var checkDOMListeners = function checkDOMListeners(delta) {
|
||
|
|
listenerCount += delta;
|
||
|
|
|
||
|
|
if (listenerCount === 1) {
|
||
|
|
addEventListener(window, PopStateEvent, handlePopState);
|
||
|
|
|
||
|
|
if (needsHashChangeListener) addEventListener(window, HashChangeEvent, handleHashChange);
|
||
|
|
} else if (listenerCount === 0) {
|
||
|
|
removeEventListener(window, PopStateEvent, handlePopState);
|
||
|
|
|
||
|
|
if (needsHashChangeListener) removeEventListener(window, HashChangeEvent, handleHashChange);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var isBlocked = false;
|
||
|
|
|
||
|
|
var block = function block() {
|
||
|
|
var prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||
|
|
|
||
|
|
var unblock = transitionManager.setPrompt(prompt);
|
||
|
|
|
||
|
|
if (!isBlocked) {
|
||
|
|
checkDOMListeners(1);
|
||
|
|
isBlocked = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return function () {
|
||
|
|
if (isBlocked) {
|
||
|
|
isBlocked = false;
|
||
|
|
checkDOMListeners(-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
return unblock();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
var listen = function listen(listener) {
|
||
|
|
var unlisten = transitionManager.appendListener(listener);
|
||
|
|
checkDOMListeners(1);
|
||
|
|
|
||
|
|
return function () {
|
||
|
|
checkDOMListeners(-1);
|
||
|
|
unlisten();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
var history = {
|
||
|
|
length: globalHistory.length,
|
||
|
|
action: 'POP',
|
||
|
|
location: initialLocation,
|
||
|
|
createHref: createHref,
|
||
|
|
push: push,
|
||
|
|
replace: replace,
|
||
|
|
go: go,
|
||
|
|
goBack: goBack,
|
||
|
|
goForward: goForward,
|
||
|
|
block: block,
|
||
|
|
listen: listen
|
||
|
|
};
|
||
|
|
|
||
|
|
return history;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default createBrowserHistory;
|