react-router-dom 6.4.0-pre.3 → 6.4.0-pre.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/LICENSE.md +22 -0
- package/dist/dom.d.ts +68 -0
- package/dist/index.d.ts +202 -0
- package/dist/index.js +811 -0
- package/dist/index.js.map +1 -0
- package/dist/main.js +19 -0
- package/dist/react-router-dom.development.js +759 -0
- package/dist/react-router-dom.development.js.map +1 -0
- package/dist/react-router-dom.production.min.js +12 -0
- package/dist/react-router-dom.production.min.js.map +1 -0
- package/dist/server.d.ts +23 -0
- package/dist/server.js +125 -0
- package/dist/server.mjs +101 -0
- package/dist/umd/react-router-dom.development.js +1027 -0
- package/dist/umd/react-router-dom.development.js.map +1 -0
- package/dist/umd/react-router-dom.production.min.js +12 -0
- package/dist/umd/react-router-dom.production.min.js.map +1 -0
- package/package.json +25 -16
- package/server.d.ts +23 -0
- package/server.js +125 -0
- package/server.mjs +101 -0
- package/.eslintrc +0 -12
- package/__tests__/DataBrowserRouter-test.tsx +0 -2199
- package/__tests__/custom-environment.js +0 -19
- package/__tests__/data-static-router-test.tsx +0 -194
- package/__tests__/exports-test.tsx +0 -10
- package/__tests__/link-click-test.tsx +0 -255
- package/__tests__/link-href-test.tsx +0 -547
- package/__tests__/link-push-test.tsx +0 -225
- package/__tests__/nav-link-active-test.tsx +0 -626
- package/__tests__/navigate-encode-params-test.tsx +0 -96
- package/__tests__/search-params-test.tsx +0 -69
- package/__tests__/setup.ts +0 -15
- package/__tests__/static-link-test.tsx +0 -36
- package/__tests__/static-location-test.tsx +0 -60
- package/__tests__/static-navigate-test.tsx +0 -32
- package/__tests__/useLinkClickHandler-test.tsx +0 -202
- package/dom.ts +0 -240
- package/index.tsx +0 -1009
- package/jest-transformer.js +0 -10
- package/jest.config.js +0 -10
- package/node-main.js +0 -7
- package/server.tsx +0 -148
- package/tsconfig.json +0 -20
package/dist/index.js
ADDED
|
@@ -0,0 +1,811 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* React Router DOM v6.4.0-pre.4
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) Remix Software Inc.
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the MIT license found in the
|
|
7
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
+
*
|
|
9
|
+
* @license MIT
|
|
10
|
+
*/
|
|
11
|
+
import * as React from 'react';
|
|
12
|
+
import { useRenderDataRouter, Router, useHref, createPath, useResolvedPath, useMatch, UNSAFE_DataRouterStateContext, useNavigate, useLocation, UNSAFE_DataRouterContext, UNSAFE_RouteContext } from 'react-router';
|
|
13
|
+
export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
|
|
14
|
+
import { createBrowserRouter, createHashRouter, createBrowserHistory, createHashHistory, matchPath, invariant } from '@remix-run/router';
|
|
15
|
+
|
|
16
|
+
function _extends() {
|
|
17
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
18
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
19
|
+
var source = arguments[i];
|
|
20
|
+
|
|
21
|
+
for (var key in source) {
|
|
22
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
23
|
+
target[key] = source[key];
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return target;
|
|
29
|
+
};
|
|
30
|
+
return _extends.apply(this, arguments);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
34
|
+
if (source == null) return {};
|
|
35
|
+
var target = {};
|
|
36
|
+
var sourceKeys = Object.keys(source);
|
|
37
|
+
var key, i;
|
|
38
|
+
|
|
39
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
40
|
+
key = sourceKeys[i];
|
|
41
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
42
|
+
target[key] = source[key];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return target;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const defaultMethod = "get";
|
|
49
|
+
const defaultEncType = "application/x-www-form-urlencoded";
|
|
50
|
+
function isHtmlElement(object) {
|
|
51
|
+
return object != null && typeof object.tagName === "string";
|
|
52
|
+
}
|
|
53
|
+
function isButtonElement(object) {
|
|
54
|
+
return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
|
|
55
|
+
}
|
|
56
|
+
function isFormElement(object) {
|
|
57
|
+
return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
|
|
58
|
+
}
|
|
59
|
+
function isInputElement(object) {
|
|
60
|
+
return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function isModifiedEvent(event) {
|
|
64
|
+
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function shouldProcessLinkClick(event, target) {
|
|
68
|
+
return event.button === 0 && ( // Ignore everything but left clicks
|
|
69
|
+
!target || target === "_self") && // Let browser handle "target=_blank" etc.
|
|
70
|
+
!isModifiedEvent(event) // Ignore clicks with modifier keys
|
|
71
|
+
;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Creates a URLSearchParams object using the given initializer.
|
|
75
|
+
*
|
|
76
|
+
* This is identical to `new URLSearchParams(init)` except it also
|
|
77
|
+
* supports arrays as values in the object form of the initializer
|
|
78
|
+
* instead of just strings. This is convenient when you need multiple
|
|
79
|
+
* values for a given key, but don't want to use an array initializer.
|
|
80
|
+
*
|
|
81
|
+
* For example, instead of:
|
|
82
|
+
*
|
|
83
|
+
* let searchParams = new URLSearchParams([
|
|
84
|
+
* ['sort', 'name'],
|
|
85
|
+
* ['sort', 'price']
|
|
86
|
+
* ]);
|
|
87
|
+
*
|
|
88
|
+
* you can do:
|
|
89
|
+
*
|
|
90
|
+
* let searchParams = createSearchParams({
|
|
91
|
+
* sort: ['name', 'price']
|
|
92
|
+
* });
|
|
93
|
+
*/
|
|
94
|
+
|
|
95
|
+
function createSearchParams(init) {
|
|
96
|
+
if (init === void 0) {
|
|
97
|
+
init = "";
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
|
|
101
|
+
let value = init[key];
|
|
102
|
+
return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
|
|
103
|
+
}, []));
|
|
104
|
+
}
|
|
105
|
+
function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
|
|
106
|
+
let searchParams = createSearchParams(locationSearch);
|
|
107
|
+
|
|
108
|
+
for (let key of defaultSearchParams.keys()) {
|
|
109
|
+
if (!searchParams.has(key)) {
|
|
110
|
+
defaultSearchParams.getAll(key).forEach(value => {
|
|
111
|
+
searchParams.append(key, value);
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return searchParams;
|
|
117
|
+
}
|
|
118
|
+
function getFormSubmissionInfo(target, defaultAction, options) {
|
|
119
|
+
let method;
|
|
120
|
+
let action;
|
|
121
|
+
let encType;
|
|
122
|
+
let formData;
|
|
123
|
+
|
|
124
|
+
if (isFormElement(target)) {
|
|
125
|
+
let submissionTrigger = options.submissionTrigger;
|
|
126
|
+
method = options.method || target.getAttribute("method") || defaultMethod;
|
|
127
|
+
action = options.action || target.getAttribute("action") || defaultAction;
|
|
128
|
+
encType = options.encType || target.getAttribute("enctype") || defaultEncType;
|
|
129
|
+
formData = new FormData(target);
|
|
130
|
+
|
|
131
|
+
if (submissionTrigger && submissionTrigger.name) {
|
|
132
|
+
formData.append(submissionTrigger.name, submissionTrigger.value);
|
|
133
|
+
}
|
|
134
|
+
} else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
|
|
135
|
+
let form = target.form;
|
|
136
|
+
|
|
137
|
+
if (form == null) {
|
|
138
|
+
throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
|
|
139
|
+
} // <button>/<input type="submit"> may override attributes of <form>
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
|
|
143
|
+
action = options.action || target.getAttribute("formaction") || form.getAttribute("action") || defaultAction;
|
|
144
|
+
encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
|
|
145
|
+
formData = new FormData(form); // Include name + value from a <button>
|
|
146
|
+
|
|
147
|
+
if (target.name) {
|
|
148
|
+
formData.set(target.name, target.value);
|
|
149
|
+
}
|
|
150
|
+
} else if (isHtmlElement(target)) {
|
|
151
|
+
throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
|
|
152
|
+
} else {
|
|
153
|
+
method = options.method || defaultMethod;
|
|
154
|
+
action = options.action || defaultAction;
|
|
155
|
+
encType = options.encType || defaultEncType;
|
|
156
|
+
|
|
157
|
+
if (target instanceof FormData) {
|
|
158
|
+
formData = target;
|
|
159
|
+
} else {
|
|
160
|
+
formData = new FormData();
|
|
161
|
+
|
|
162
|
+
if (target instanceof URLSearchParams) {
|
|
163
|
+
for (let [name, value] of target) {
|
|
164
|
+
formData.append(name, value);
|
|
165
|
+
}
|
|
166
|
+
} else if (target != null) {
|
|
167
|
+
for (let name of Object.keys(target)) {
|
|
168
|
+
formData.append(name, target[name]);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
let {
|
|
175
|
+
protocol,
|
|
176
|
+
host
|
|
177
|
+
} = window.location;
|
|
178
|
+
let url = new URL(action, protocol + "//" + host);
|
|
179
|
+
return {
|
|
180
|
+
url,
|
|
181
|
+
method,
|
|
182
|
+
encType,
|
|
183
|
+
formData
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
|
|
188
|
+
_excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
|
|
189
|
+
_excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey"];
|
|
190
|
+
function DataBrowserRouter(_ref) {
|
|
191
|
+
let {
|
|
192
|
+
children,
|
|
193
|
+
fallbackElement,
|
|
194
|
+
hydrationData,
|
|
195
|
+
routes,
|
|
196
|
+
window
|
|
197
|
+
} = _ref;
|
|
198
|
+
return useRenderDataRouter({
|
|
199
|
+
children,
|
|
200
|
+
fallbackElement,
|
|
201
|
+
routes,
|
|
202
|
+
createRouter: routes => createBrowserRouter({
|
|
203
|
+
routes,
|
|
204
|
+
hydrationData,
|
|
205
|
+
window
|
|
206
|
+
})
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
function DataHashRouter(_ref2) {
|
|
210
|
+
let {
|
|
211
|
+
children,
|
|
212
|
+
hydrationData,
|
|
213
|
+
fallbackElement,
|
|
214
|
+
routes,
|
|
215
|
+
window
|
|
216
|
+
} = _ref2;
|
|
217
|
+
return useRenderDataRouter({
|
|
218
|
+
children,
|
|
219
|
+
fallbackElement,
|
|
220
|
+
routes,
|
|
221
|
+
createRouter: routes => createHashRouter({
|
|
222
|
+
routes,
|
|
223
|
+
hydrationData,
|
|
224
|
+
window
|
|
225
|
+
})
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* A `<Router>` for use in web browsers. Provides the cleanest URLs.
|
|
230
|
+
*/
|
|
231
|
+
|
|
232
|
+
function BrowserRouter(_ref3) {
|
|
233
|
+
let {
|
|
234
|
+
basename,
|
|
235
|
+
children,
|
|
236
|
+
window
|
|
237
|
+
} = _ref3;
|
|
238
|
+
let historyRef = React.useRef();
|
|
239
|
+
|
|
240
|
+
if (historyRef.current == null) {
|
|
241
|
+
historyRef.current = createBrowserHistory({
|
|
242
|
+
window,
|
|
243
|
+
v5Compat: true
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
let history = historyRef.current;
|
|
248
|
+
let [state, setState] = React.useState({
|
|
249
|
+
action: history.action,
|
|
250
|
+
location: history.location
|
|
251
|
+
});
|
|
252
|
+
React.useLayoutEffect(() => history.listen(setState), [history]);
|
|
253
|
+
return /*#__PURE__*/React.createElement(Router, {
|
|
254
|
+
basename: basename,
|
|
255
|
+
children: children,
|
|
256
|
+
location: state.location,
|
|
257
|
+
navigationType: state.action,
|
|
258
|
+
navigator: history
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* A `<Router>` for use in web browsers. Stores the location in the hash
|
|
263
|
+
* portion of the URL so it is not sent to the server.
|
|
264
|
+
*/
|
|
265
|
+
|
|
266
|
+
function HashRouter(_ref4) {
|
|
267
|
+
let {
|
|
268
|
+
basename,
|
|
269
|
+
children,
|
|
270
|
+
window
|
|
271
|
+
} = _ref4;
|
|
272
|
+
let historyRef = React.useRef();
|
|
273
|
+
|
|
274
|
+
if (historyRef.current == null) {
|
|
275
|
+
historyRef.current = createHashHistory({
|
|
276
|
+
window,
|
|
277
|
+
v5Compat: true
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
let history = historyRef.current;
|
|
282
|
+
let [state, setState] = React.useState({
|
|
283
|
+
action: history.action,
|
|
284
|
+
location: history.location
|
|
285
|
+
});
|
|
286
|
+
React.useLayoutEffect(() => history.listen(setState), [history]);
|
|
287
|
+
return /*#__PURE__*/React.createElement(Router, {
|
|
288
|
+
basename: basename,
|
|
289
|
+
children: children,
|
|
290
|
+
location: state.location,
|
|
291
|
+
navigationType: state.action,
|
|
292
|
+
navigator: history
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* A `<Router>` that accepts a pre-instantiated history object. It's important
|
|
297
|
+
* to note that using your own history object is highly discouraged and may add
|
|
298
|
+
* two versions of the history library to your bundles unless you use the same
|
|
299
|
+
* version of the history library that React Router uses internally.
|
|
300
|
+
*/
|
|
301
|
+
|
|
302
|
+
function HistoryRouter(_ref5) {
|
|
303
|
+
let {
|
|
304
|
+
basename,
|
|
305
|
+
children,
|
|
306
|
+
history
|
|
307
|
+
} = _ref5;
|
|
308
|
+
const [state, setState] = React.useState({
|
|
309
|
+
action: history.action,
|
|
310
|
+
location: history.location
|
|
311
|
+
});
|
|
312
|
+
React.useLayoutEffect(() => history.listen(setState), [history]);
|
|
313
|
+
return /*#__PURE__*/React.createElement(Router, {
|
|
314
|
+
basename: basename,
|
|
315
|
+
children: children,
|
|
316
|
+
location: state.location,
|
|
317
|
+
navigationType: state.action,
|
|
318
|
+
navigator: history
|
|
319
|
+
});
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
if (process.env.NODE_ENV !== "production") {
|
|
323
|
+
HistoryRouter.displayName = "unstable_HistoryRouter";
|
|
324
|
+
}
|
|
325
|
+
/**
|
|
326
|
+
* The public API for rendering a history-aware <a>.
|
|
327
|
+
*/
|
|
328
|
+
|
|
329
|
+
const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
|
|
330
|
+
let {
|
|
331
|
+
onClick,
|
|
332
|
+
reloadDocument,
|
|
333
|
+
replace,
|
|
334
|
+
state,
|
|
335
|
+
target,
|
|
336
|
+
to,
|
|
337
|
+
resetScroll
|
|
338
|
+
} = _ref6,
|
|
339
|
+
rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
|
|
340
|
+
|
|
341
|
+
let href = useHref(to);
|
|
342
|
+
let internalOnClick = useLinkClickHandler(to, {
|
|
343
|
+
replace,
|
|
344
|
+
state,
|
|
345
|
+
target,
|
|
346
|
+
resetScroll
|
|
347
|
+
});
|
|
348
|
+
|
|
349
|
+
function handleClick(event) {
|
|
350
|
+
if (onClick) onClick(event);
|
|
351
|
+
|
|
352
|
+
if (!event.defaultPrevented && !reloadDocument) {
|
|
353
|
+
internalOnClick(event);
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
return (
|
|
358
|
+
/*#__PURE__*/
|
|
359
|
+
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
360
|
+
React.createElement("a", _extends({}, rest, {
|
|
361
|
+
href: href,
|
|
362
|
+
onClick: handleClick,
|
|
363
|
+
ref: ref,
|
|
364
|
+
target: target
|
|
365
|
+
}))
|
|
366
|
+
);
|
|
367
|
+
});
|
|
368
|
+
|
|
369
|
+
if (process.env.NODE_ENV !== "production") {
|
|
370
|
+
Link.displayName = "Link";
|
|
371
|
+
}
|
|
372
|
+
/**
|
|
373
|
+
* A <Link> wrapper that knows if it's "active" or not.
|
|
374
|
+
*/
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref) {
|
|
378
|
+
let {
|
|
379
|
+
"aria-current": ariaCurrentProp = "page",
|
|
380
|
+
caseSensitive = false,
|
|
381
|
+
className: classNameProp = "",
|
|
382
|
+
end = false,
|
|
383
|
+
style: styleProp,
|
|
384
|
+
to,
|
|
385
|
+
children
|
|
386
|
+
} = _ref7,
|
|
387
|
+
rest = _objectWithoutPropertiesLoose(_ref7, _excluded2);
|
|
388
|
+
|
|
389
|
+
let path = useResolvedPath(to);
|
|
390
|
+
let match = useMatch({
|
|
391
|
+
path: path.pathname,
|
|
392
|
+
end,
|
|
393
|
+
caseSensitive
|
|
394
|
+
});
|
|
395
|
+
let routerState = React.useContext(UNSAFE_DataRouterStateContext);
|
|
396
|
+
let nextLocation = routerState == null ? void 0 : routerState.navigation.location;
|
|
397
|
+
let nextPath = useResolvedPath(nextLocation || "");
|
|
398
|
+
let nextMatch = React.useMemo(() => nextLocation ? matchPath({
|
|
399
|
+
path: path.pathname,
|
|
400
|
+
end,
|
|
401
|
+
caseSensitive
|
|
402
|
+
}, nextPath.pathname) : null, [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname]);
|
|
403
|
+
let isPending = nextMatch != null;
|
|
404
|
+
let isActive = match != null;
|
|
405
|
+
let ariaCurrent = isActive ? ariaCurrentProp : undefined;
|
|
406
|
+
let className;
|
|
407
|
+
|
|
408
|
+
if (typeof classNameProp === "function") {
|
|
409
|
+
className = classNameProp({
|
|
410
|
+
isActive,
|
|
411
|
+
isPending
|
|
412
|
+
});
|
|
413
|
+
} else {
|
|
414
|
+
// If the className prop is not a function, we use a default `active`
|
|
415
|
+
// class for <NavLink />s that are active. In v5 `active` was the default
|
|
416
|
+
// value for `activeClassName`, but we are removing that API and can still
|
|
417
|
+
// use the old default behavior for a cleaner upgrade path and keep the
|
|
418
|
+
// simple styling rules working as they currently do.
|
|
419
|
+
className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
let style = typeof styleProp === "function" ? styleProp({
|
|
423
|
+
isActive,
|
|
424
|
+
isPending
|
|
425
|
+
}) : styleProp;
|
|
426
|
+
return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
|
|
427
|
+
"aria-current": ariaCurrent,
|
|
428
|
+
className: className,
|
|
429
|
+
ref: ref,
|
|
430
|
+
style: style,
|
|
431
|
+
to: to
|
|
432
|
+
}), typeof children === "function" ? children({
|
|
433
|
+
isActive,
|
|
434
|
+
isPending
|
|
435
|
+
}) : children);
|
|
436
|
+
});
|
|
437
|
+
|
|
438
|
+
if (process.env.NODE_ENV !== "production") {
|
|
439
|
+
NavLink.displayName = "NavLink";
|
|
440
|
+
}
|
|
441
|
+
/**
|
|
442
|
+
* A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
|
|
443
|
+
* that the interaction with the server is with `fetch` instead of new document
|
|
444
|
+
* requests, allowing components to add nicer UX to the page as the form is
|
|
445
|
+
* submitted and returns with data.
|
|
446
|
+
*/
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
450
|
+
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
|
|
451
|
+
ref: ref
|
|
452
|
+
}));
|
|
453
|
+
});
|
|
454
|
+
|
|
455
|
+
if (process.env.NODE_ENV !== "production") {
|
|
456
|
+
Form.displayName = "Form";
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
|
|
460
|
+
let {
|
|
461
|
+
replace,
|
|
462
|
+
method = defaultMethod,
|
|
463
|
+
action = ".",
|
|
464
|
+
onSubmit,
|
|
465
|
+
fetcherKey
|
|
466
|
+
} = _ref8,
|
|
467
|
+
props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
|
|
468
|
+
|
|
469
|
+
let submit = useSubmitImpl(fetcherKey);
|
|
470
|
+
let formMethod = method.toLowerCase() === "get" ? "get" : "post";
|
|
471
|
+
let formAction = useFormAction(action);
|
|
472
|
+
|
|
473
|
+
let submitHandler = event => {
|
|
474
|
+
onSubmit && onSubmit(event);
|
|
475
|
+
if (event.defaultPrevented) return;
|
|
476
|
+
event.preventDefault();
|
|
477
|
+
let submitter = event.nativeEvent.submitter;
|
|
478
|
+
submit(submitter || event.currentTarget, {
|
|
479
|
+
method,
|
|
480
|
+
replace
|
|
481
|
+
});
|
|
482
|
+
};
|
|
483
|
+
|
|
484
|
+
return /*#__PURE__*/React.createElement("form", _extends({
|
|
485
|
+
ref: forwardedRef,
|
|
486
|
+
method: formMethod,
|
|
487
|
+
action: formAction,
|
|
488
|
+
onSubmit: submitHandler
|
|
489
|
+
}, props));
|
|
490
|
+
});
|
|
491
|
+
|
|
492
|
+
if (process.env.NODE_ENV !== "production") {
|
|
493
|
+
Form.displayName = "Form";
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* This component will emulate the browser's scroll restoration on location
|
|
497
|
+
* changes.
|
|
498
|
+
*/
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
function ScrollRestoration(_ref9) {
|
|
502
|
+
let {
|
|
503
|
+
getKey,
|
|
504
|
+
storageKey
|
|
505
|
+
} = _ref9;
|
|
506
|
+
useScrollRestoration({
|
|
507
|
+
getKey,
|
|
508
|
+
storageKey
|
|
509
|
+
});
|
|
510
|
+
return null;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
if (process.env.NODE_ENV !== "production") {
|
|
514
|
+
ScrollRestoration.displayName = "ScrollRestoration";
|
|
515
|
+
} //#endregion
|
|
516
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
517
|
+
//#region Hooks
|
|
518
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
519
|
+
|
|
520
|
+
/**
|
|
521
|
+
* Handles the click behavior for router `<Link>` components. This is useful if
|
|
522
|
+
* you need to create custom `<Link>` components with the same click behavior we
|
|
523
|
+
* use in our exported `<Link>`.
|
|
524
|
+
*/
|
|
525
|
+
|
|
526
|
+
|
|
527
|
+
function useLinkClickHandler(to, _temp) {
|
|
528
|
+
let {
|
|
529
|
+
target,
|
|
530
|
+
replace: replaceProp,
|
|
531
|
+
state,
|
|
532
|
+
resetScroll
|
|
533
|
+
} = _temp === void 0 ? {} : _temp;
|
|
534
|
+
let navigate = useNavigate();
|
|
535
|
+
let location = useLocation();
|
|
536
|
+
let path = useResolvedPath(to);
|
|
537
|
+
return React.useCallback(event => {
|
|
538
|
+
if (shouldProcessLinkClick(event, target)) {
|
|
539
|
+
event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
|
|
540
|
+
// a push, so do the same here unless the replace prop is explcitly set
|
|
541
|
+
|
|
542
|
+
let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);
|
|
543
|
+
navigate(to, {
|
|
544
|
+
replace,
|
|
545
|
+
state,
|
|
546
|
+
resetScroll
|
|
547
|
+
});
|
|
548
|
+
}
|
|
549
|
+
}, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
|
|
550
|
+
}
|
|
551
|
+
/**
|
|
552
|
+
* A convenient wrapper for reading and writing search parameters via the
|
|
553
|
+
* URLSearchParams interface.
|
|
554
|
+
*/
|
|
555
|
+
|
|
556
|
+
function useSearchParams(defaultInit) {
|
|
557
|
+
process.env.NODE_ENV !== "production" ? warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") : void 0;
|
|
558
|
+
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
|
|
559
|
+
let location = useLocation();
|
|
560
|
+
let searchParams = React.useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
|
|
561
|
+
let navigate = useNavigate();
|
|
562
|
+
let setSearchParams = React.useCallback((nextInit, navigateOptions) => {
|
|
563
|
+
navigate("?" + createSearchParams(nextInit), navigateOptions);
|
|
564
|
+
}, [navigate]);
|
|
565
|
+
return [searchParams, setSearchParams];
|
|
566
|
+
}
|
|
567
|
+
/**
|
|
568
|
+
* Returns a function that may be used to programmatically submit a form (or
|
|
569
|
+
* some arbitrary data) to the server.
|
|
570
|
+
*/
|
|
571
|
+
|
|
572
|
+
function useSubmit() {
|
|
573
|
+
return useSubmitImpl();
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
function useSubmitImpl(fetcherKey) {
|
|
577
|
+
let router = React.useContext(UNSAFE_DataRouterContext);
|
|
578
|
+
let defaultAction = useFormAction();
|
|
579
|
+
return React.useCallback(function (target, options) {
|
|
580
|
+
if (options === void 0) {
|
|
581
|
+
options = {};
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
!(router != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "useSubmit() must be used within a <DataRouter>") : invariant(false) : void 0;
|
|
585
|
+
|
|
586
|
+
if (typeof document === "undefined") {
|
|
587
|
+
throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
let {
|
|
591
|
+
method,
|
|
592
|
+
encType,
|
|
593
|
+
formData,
|
|
594
|
+
url
|
|
595
|
+
} = getFormSubmissionInfo(target, defaultAction, options);
|
|
596
|
+
let href = url.pathname + url.search;
|
|
597
|
+
let opts = {
|
|
598
|
+
// If replace is not specified, we'll default to false for GET and
|
|
599
|
+
// true otherwise
|
|
600
|
+
replace: options.replace != null ? options.replace === true : method !== "get",
|
|
601
|
+
formData,
|
|
602
|
+
formMethod: method,
|
|
603
|
+
formEncType: encType
|
|
604
|
+
};
|
|
605
|
+
|
|
606
|
+
if (fetcherKey) {
|
|
607
|
+
router.fetch(fetcherKey, href, opts);
|
|
608
|
+
} else {
|
|
609
|
+
router.navigate(href, opts);
|
|
610
|
+
}
|
|
611
|
+
}, [defaultAction, router, fetcherKey]);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
function useFormAction(action) {
|
|
615
|
+
if (action === void 0) {
|
|
616
|
+
action = ".";
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
let routeContext = React.useContext(UNSAFE_RouteContext);
|
|
620
|
+
!routeContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useFormAction must be used inside a RouteContext") : invariant(false) : void 0;
|
|
621
|
+
let [match] = routeContext.matches.slice(-1);
|
|
622
|
+
let {
|
|
623
|
+
pathname,
|
|
624
|
+
search
|
|
625
|
+
} = useResolvedPath(action);
|
|
626
|
+
|
|
627
|
+
if (action === "." && match.route.index) {
|
|
628
|
+
search = search ? search.replace(/^\?/, "?index&") : "?index";
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
return pathname + search;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
function createFetcherForm(fetcherKey) {
|
|
635
|
+
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
636
|
+
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
|
|
637
|
+
ref: ref,
|
|
638
|
+
fetcherKey: fetcherKey
|
|
639
|
+
}));
|
|
640
|
+
});
|
|
641
|
+
|
|
642
|
+
if (process.env.NODE_ENV !== "production") {
|
|
643
|
+
FetcherForm.displayName = "fetcher.Form";
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
return FetcherForm;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
let fetcherId = 0;
|
|
650
|
+
/**
|
|
651
|
+
* Interacts with route loaders and actions without causing a navigation. Great
|
|
652
|
+
* for any interaction that stays on the same page.
|
|
653
|
+
*/
|
|
654
|
+
|
|
655
|
+
function useFetcher() {
|
|
656
|
+
let router = React.useContext(UNSAFE_DataRouterContext);
|
|
657
|
+
!router ? process.env.NODE_ENV !== "production" ? invariant(false, "useFetcher must be used within a DataRouter") : invariant(false) : void 0;
|
|
658
|
+
let [fetcherKey] = React.useState(() => String(++fetcherId));
|
|
659
|
+
let [Form] = React.useState(() => createFetcherForm(fetcherKey));
|
|
660
|
+
let [load] = React.useState(() => href => {
|
|
661
|
+
!router ? process.env.NODE_ENV !== "production" ? invariant(false, "No router available for fetcher.load()") : invariant(false) : void 0;
|
|
662
|
+
router.fetch(fetcherKey, href);
|
|
663
|
+
});
|
|
664
|
+
let submit = useSubmitImpl(fetcherKey);
|
|
665
|
+
let fetcher = router.getFetcher(fetcherKey);
|
|
666
|
+
let fetcherWithComponents = React.useMemo(() => _extends({
|
|
667
|
+
Form,
|
|
668
|
+
submit,
|
|
669
|
+
load
|
|
670
|
+
}, fetcher), [fetcher, Form, submit, load]);
|
|
671
|
+
React.useEffect(() => {
|
|
672
|
+
// Is this busted when the React team gets real weird and calls effects
|
|
673
|
+
// twice on mount? We really just need to garbage collect here when this
|
|
674
|
+
// fetcher is no longer around.
|
|
675
|
+
return () => {
|
|
676
|
+
if (!router) {
|
|
677
|
+
console.warn("No fetcher available to clean up from useFetcher()");
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
router.deleteFetcher(fetcherKey);
|
|
682
|
+
};
|
|
683
|
+
}, [router, fetcherKey]);
|
|
684
|
+
return fetcherWithComponents;
|
|
685
|
+
}
|
|
686
|
+
/**
|
|
687
|
+
* Provides all fetchers currently on the page. Useful for layouts and parent
|
|
688
|
+
* routes that need to provide pending/optimistic UI regarding the fetch.
|
|
689
|
+
*/
|
|
690
|
+
|
|
691
|
+
function useFetchers() {
|
|
692
|
+
let state = React.useContext(UNSAFE_DataRouterStateContext);
|
|
693
|
+
!state ? process.env.NODE_ENV !== "production" ? invariant(false, "useFetchers must be used within a DataRouter") : invariant(false) : void 0;
|
|
694
|
+
return [...state.fetchers.values()];
|
|
695
|
+
}
|
|
696
|
+
const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";
|
|
697
|
+
let savedScrollPositions = {};
|
|
698
|
+
/**
|
|
699
|
+
* When rendered inside a DataRouter, will restore scroll positions on navigations
|
|
700
|
+
*/
|
|
701
|
+
|
|
702
|
+
function useScrollRestoration(_temp2) {
|
|
703
|
+
let {
|
|
704
|
+
getKey,
|
|
705
|
+
storageKey
|
|
706
|
+
} = _temp2 === void 0 ? {} : _temp2;
|
|
707
|
+
let location = useLocation();
|
|
708
|
+
let router = React.useContext(UNSAFE_DataRouterContext);
|
|
709
|
+
let state = React.useContext(UNSAFE_DataRouterStateContext);
|
|
710
|
+
!(router != null && state != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "useScrollRestoration must be used within a DataRouter") : invariant(false) : void 0;
|
|
711
|
+
let {
|
|
712
|
+
restoreScrollPosition,
|
|
713
|
+
resetScrollPosition
|
|
714
|
+
} = state; // Trigger manual scroll restoration while we're active
|
|
715
|
+
|
|
716
|
+
React.useEffect(() => {
|
|
717
|
+
window.history.scrollRestoration = "manual";
|
|
718
|
+
return () => {
|
|
719
|
+
window.history.scrollRestoration = "auto";
|
|
720
|
+
};
|
|
721
|
+
}, []); // Save positions on unload
|
|
722
|
+
|
|
723
|
+
useBeforeUnload(React.useCallback(() => {
|
|
724
|
+
if ((state == null ? void 0 : state.navigation.state) === "idle") {
|
|
725
|
+
let key = (getKey ? getKey(state.location, state.matches) : null) || state.location.key;
|
|
726
|
+
savedScrollPositions[key] = window.scrollY;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
|
|
730
|
+
window.history.scrollRestoration = "auto";
|
|
731
|
+
}, [storageKey, getKey, state.navigation.state, state.location, state.matches])); // Read in any saved scroll locations
|
|
732
|
+
|
|
733
|
+
React.useLayoutEffect(() => {
|
|
734
|
+
try {
|
|
735
|
+
let sessionPositions = sessionStorage.getItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY);
|
|
736
|
+
|
|
737
|
+
if (sessionPositions) {
|
|
738
|
+
savedScrollPositions = JSON.parse(sessionPositions);
|
|
739
|
+
}
|
|
740
|
+
} catch (e) {// no-op, use default empty object
|
|
741
|
+
}
|
|
742
|
+
}, [storageKey]); // Enable scroll restoration in the router
|
|
743
|
+
|
|
744
|
+
React.useLayoutEffect(() => {
|
|
745
|
+
let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
|
|
746
|
+
return () => disableScrollRestoration && disableScrollRestoration();
|
|
747
|
+
}, [router, getKey]); // Restore scrolling when state.restoreScrollPosition changes
|
|
748
|
+
|
|
749
|
+
React.useLayoutEffect(() => {
|
|
750
|
+
// Explicit false means don't do anything (used for submissions)
|
|
751
|
+
if (restoreScrollPosition === false) {
|
|
752
|
+
return;
|
|
753
|
+
} // been here before, scroll to it
|
|
754
|
+
|
|
755
|
+
|
|
756
|
+
if (typeof restoreScrollPosition === "number") {
|
|
757
|
+
window.scrollTo(0, restoreScrollPosition);
|
|
758
|
+
return;
|
|
759
|
+
} // try to scroll to the hash
|
|
760
|
+
|
|
761
|
+
|
|
762
|
+
if (location.hash) {
|
|
763
|
+
let el = document.getElementById(location.hash.slice(1));
|
|
764
|
+
|
|
765
|
+
if (el) {
|
|
766
|
+
el.scrollIntoView();
|
|
767
|
+
return;
|
|
768
|
+
}
|
|
769
|
+
} // Opt out of scroll reset if this link requested it
|
|
770
|
+
|
|
771
|
+
|
|
772
|
+
if (resetScrollPosition === false) {
|
|
773
|
+
return;
|
|
774
|
+
} // otherwise go to the top on new locations
|
|
775
|
+
|
|
776
|
+
|
|
777
|
+
window.scrollTo(0, 0);
|
|
778
|
+
}, [location, restoreScrollPosition, resetScrollPosition]);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
function useBeforeUnload(callback) {
|
|
782
|
+
React.useEffect(() => {
|
|
783
|
+
window.addEventListener("beforeunload", callback);
|
|
784
|
+
return () => {
|
|
785
|
+
window.removeEventListener("beforeunload", callback);
|
|
786
|
+
};
|
|
787
|
+
}, [callback]);
|
|
788
|
+
} //#endregion
|
|
789
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
790
|
+
//#region Utils
|
|
791
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
792
|
+
|
|
793
|
+
|
|
794
|
+
function warning(cond, message) {
|
|
795
|
+
if (!cond) {
|
|
796
|
+
// eslint-disable-next-line no-console
|
|
797
|
+
if (typeof console !== "undefined") console.warn(message);
|
|
798
|
+
|
|
799
|
+
try {
|
|
800
|
+
// Welcome to debugging React Router!
|
|
801
|
+
//
|
|
802
|
+
// This error is thrown as a convenience so you can more easily
|
|
803
|
+
// find the source for a warning that appears in the console by
|
|
804
|
+
// enabling "pause on exceptions" in your JavaScript debugger.
|
|
805
|
+
throw new Error(message); // eslint-disable-next-line no-empty
|
|
806
|
+
} catch (e) {}
|
|
807
|
+
}
|
|
808
|
+
} //#endregion
|
|
809
|
+
|
|
810
|
+
export { BrowserRouter, DataBrowserRouter, DataHashRouter, Form, HashRouter, Link, NavLink, ScrollRestoration, createSearchParams, HistoryRouter as unstable_HistoryRouter, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
|
|
811
|
+
//# sourceMappingURL=index.js.map
|