@inertiajs/react 2.0.17 → 2.1.1
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/dist/index.esm.js +487 -335
- package/dist/index.esm.js.map +4 -4
- package/dist/index.js +500 -360
- package/dist/index.js.map +4 -4
- package/package.json +2 -2
- package/types/Deferred.d.ts +4 -4
- package/types/Form.d.ts +16 -0
- package/types/Link.d.ts +4 -28
- package/types/WhenVisible.d.ts +4 -4
- package/types/index.d.ts +1 -0
- package/types/useForm.d.ts +13 -14
package/dist/index.esm.js
CHANGED
|
@@ -199,333 +199,72 @@ var Deferred = ({ children, data, fallback }) => {
|
|
|
199
199
|
useEffect2(() => {
|
|
200
200
|
setLoaded(keys.every((key) => pageProps[key] !== void 0));
|
|
201
201
|
}, [pageProps, keys]);
|
|
202
|
-
|
|
202
|
+
if (loaded) {
|
|
203
|
+
return typeof children === "function" ? children() : children;
|
|
204
|
+
}
|
|
205
|
+
return typeof fallback === "function" ? fallback() : fallback;
|
|
203
206
|
};
|
|
204
207
|
Deferred.displayName = "InertiaDeferred";
|
|
205
208
|
var Deferred_default = Deferred;
|
|
206
209
|
|
|
207
|
-
// src/
|
|
208
|
-
import { escape } from "es-toolkit";
|
|
209
|
-
import React, { useContext as useContext2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
|
|
210
|
-
var Head = function({ children, title }) {
|
|
211
|
-
const headManager = useContext2(HeadContext_default);
|
|
212
|
-
const provider = useMemo3(() => headManager.createProvider(), [headManager]);
|
|
213
|
-
const isServer = typeof window === "undefined";
|
|
214
|
-
useEffect3(() => {
|
|
215
|
-
provider.reconnect();
|
|
216
|
-
provider.update(renderNodes(children));
|
|
217
|
-
return () => {
|
|
218
|
-
provider.disconnect();
|
|
219
|
-
};
|
|
220
|
-
}, [provider, children, title]);
|
|
221
|
-
function isUnaryTag(node) {
|
|
222
|
-
return [
|
|
223
|
-
"area",
|
|
224
|
-
"base",
|
|
225
|
-
"br",
|
|
226
|
-
"col",
|
|
227
|
-
"embed",
|
|
228
|
-
"hr",
|
|
229
|
-
"img",
|
|
230
|
-
"input",
|
|
231
|
-
"keygen",
|
|
232
|
-
"link",
|
|
233
|
-
"meta",
|
|
234
|
-
"param",
|
|
235
|
-
"source",
|
|
236
|
-
"track",
|
|
237
|
-
"wbr"
|
|
238
|
-
].indexOf(node.type) > -1;
|
|
239
|
-
}
|
|
240
|
-
function renderTagStart(node) {
|
|
241
|
-
const attrs = Object.keys(node.props).reduce((carry, name) => {
|
|
242
|
-
if (["head-key", "children", "dangerouslySetInnerHTML"].includes(name)) {
|
|
243
|
-
return carry;
|
|
244
|
-
}
|
|
245
|
-
const value = String(node.props[name]);
|
|
246
|
-
if (value === "") {
|
|
247
|
-
return carry + ` ${name}`;
|
|
248
|
-
} else {
|
|
249
|
-
return carry + ` ${name}="${escape(value)}"`;
|
|
250
|
-
}
|
|
251
|
-
}, "");
|
|
252
|
-
return `<${node.type}${attrs}>`;
|
|
253
|
-
}
|
|
254
|
-
function renderTagChildren(node) {
|
|
255
|
-
return typeof node.props.children === "string" ? node.props.children : node.props.children.reduce((html, child) => html + renderTag(child), "");
|
|
256
|
-
}
|
|
257
|
-
function renderTag(node) {
|
|
258
|
-
let html = renderTagStart(node);
|
|
259
|
-
if (node.props.children) {
|
|
260
|
-
html += renderTagChildren(node);
|
|
261
|
-
}
|
|
262
|
-
if (node.props.dangerouslySetInnerHTML) {
|
|
263
|
-
html += node.props.dangerouslySetInnerHTML.__html;
|
|
264
|
-
}
|
|
265
|
-
if (!isUnaryTag(node)) {
|
|
266
|
-
html += `</${node.type}>`;
|
|
267
|
-
}
|
|
268
|
-
return html;
|
|
269
|
-
}
|
|
270
|
-
function ensureNodeHasInertiaProp(node) {
|
|
271
|
-
return React.cloneElement(node, {
|
|
272
|
-
inertia: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
|
|
273
|
-
});
|
|
274
|
-
}
|
|
275
|
-
function renderNode(node) {
|
|
276
|
-
return renderTag(ensureNodeHasInertiaProp(node));
|
|
277
|
-
}
|
|
278
|
-
function renderNodes(nodes) {
|
|
279
|
-
const computed = React.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
|
|
280
|
-
if (title && !computed.find((tag) => tag.startsWith("<title"))) {
|
|
281
|
-
computed.push(`<title inertia>${title}</title>`);
|
|
282
|
-
}
|
|
283
|
-
return computed;
|
|
284
|
-
}
|
|
285
|
-
if (isServer) {
|
|
286
|
-
provider.update(renderNodes(children));
|
|
287
|
-
}
|
|
288
|
-
return null;
|
|
289
|
-
};
|
|
290
|
-
var Head_default = Head;
|
|
291
|
-
|
|
292
|
-
// src/Link.ts
|
|
210
|
+
// src/Form.ts
|
|
293
211
|
import {
|
|
212
|
+
formDataToObject,
|
|
294
213
|
mergeDataIntoQueryString,
|
|
295
|
-
|
|
296
|
-
shouldIntercept
|
|
214
|
+
resetFormFields
|
|
297
215
|
} from "@inertiajs/core";
|
|
298
|
-
import {
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
preserveState = null,
|
|
309
|
-
replace = false,
|
|
310
|
-
only = [],
|
|
311
|
-
except = [],
|
|
312
|
-
headers = {},
|
|
313
|
-
queryStringArrayFormat = "brackets",
|
|
314
|
-
async = false,
|
|
315
|
-
onClick = noop,
|
|
316
|
-
onCancelToken = noop,
|
|
317
|
-
onBefore = noop,
|
|
318
|
-
onStart = noop,
|
|
319
|
-
onProgress = noop,
|
|
320
|
-
onFinish = noop,
|
|
321
|
-
onCancel = noop,
|
|
322
|
-
onSuccess = noop,
|
|
323
|
-
onError = noop,
|
|
324
|
-
prefetch = false,
|
|
325
|
-
cacheFor = 0,
|
|
326
|
-
...props
|
|
327
|
-
}, ref) => {
|
|
328
|
-
const [inFlightCount, setInFlightCount] = useState3(0);
|
|
329
|
-
const hoverTimeout = useRef(null);
|
|
330
|
-
const _method = useMemo4(() => {
|
|
331
|
-
return typeof href === "object" ? href.method : method.toLowerCase();
|
|
332
|
-
}, [href, method]);
|
|
333
|
-
const _as = useMemo4(() => {
|
|
334
|
-
as = as.toLowerCase();
|
|
335
|
-
return _method !== "get" ? "button" : as;
|
|
336
|
-
}, [as, _method]);
|
|
337
|
-
const mergeDataArray = useMemo4(
|
|
338
|
-
() => mergeDataIntoQueryString(
|
|
339
|
-
_method,
|
|
340
|
-
typeof href === "object" ? href.url : href || "",
|
|
341
|
-
data,
|
|
342
|
-
queryStringArrayFormat
|
|
343
|
-
),
|
|
344
|
-
[href, _method, data, queryStringArrayFormat]
|
|
345
|
-
);
|
|
346
|
-
const url = useMemo4(() => mergeDataArray[0], [mergeDataArray]);
|
|
347
|
-
const _data = useMemo4(() => mergeDataArray[1], [mergeDataArray]);
|
|
348
|
-
const baseParams = useMemo4(
|
|
349
|
-
() => ({
|
|
350
|
-
data: _data,
|
|
351
|
-
method: _method,
|
|
352
|
-
preserveScroll,
|
|
353
|
-
preserveState: preserveState ?? _method !== "get",
|
|
354
|
-
replace,
|
|
355
|
-
only,
|
|
356
|
-
except,
|
|
357
|
-
headers,
|
|
358
|
-
async
|
|
359
|
-
}),
|
|
360
|
-
[_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
|
|
361
|
-
);
|
|
362
|
-
const visitParams = useMemo4(
|
|
363
|
-
() => ({
|
|
364
|
-
...baseParams,
|
|
365
|
-
onCancelToken,
|
|
366
|
-
onBefore,
|
|
367
|
-
onStart(event) {
|
|
368
|
-
setInFlightCount((count) => count + 1);
|
|
369
|
-
onStart(event);
|
|
370
|
-
},
|
|
371
|
-
onProgress,
|
|
372
|
-
onFinish(event) {
|
|
373
|
-
setInFlightCount((count) => count - 1);
|
|
374
|
-
onFinish(event);
|
|
375
|
-
},
|
|
376
|
-
onCancel,
|
|
377
|
-
onSuccess,
|
|
378
|
-
onError
|
|
379
|
-
}),
|
|
380
|
-
[baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
|
|
381
|
-
);
|
|
382
|
-
const doPrefetch = () => {
|
|
383
|
-
router4.prefetch(url, baseParams, { cacheFor: cacheForValue });
|
|
384
|
-
};
|
|
385
|
-
const prefetchModes = useMemo4(
|
|
386
|
-
() => {
|
|
387
|
-
if (prefetch === true) {
|
|
388
|
-
return ["hover"];
|
|
389
|
-
}
|
|
390
|
-
if (prefetch === false) {
|
|
391
|
-
return [];
|
|
392
|
-
}
|
|
393
|
-
if (Array.isArray(prefetch)) {
|
|
394
|
-
return prefetch;
|
|
395
|
-
}
|
|
396
|
-
return [prefetch];
|
|
397
|
-
},
|
|
398
|
-
Array.isArray(prefetch) ? prefetch : [prefetch]
|
|
399
|
-
);
|
|
400
|
-
const cacheForValue = useMemo4(() => {
|
|
401
|
-
if (cacheFor !== 0) {
|
|
402
|
-
return cacheFor;
|
|
403
|
-
}
|
|
404
|
-
if (prefetchModes.length === 1 && prefetchModes[0] === "click") {
|
|
405
|
-
return 0;
|
|
406
|
-
}
|
|
407
|
-
return 3e4;
|
|
408
|
-
}, [cacheFor, prefetchModes]);
|
|
409
|
-
useEffect4(() => {
|
|
410
|
-
return () => {
|
|
411
|
-
clearTimeout(hoverTimeout.current);
|
|
412
|
-
};
|
|
413
|
-
}, []);
|
|
414
|
-
useEffect4(() => {
|
|
415
|
-
if (prefetchModes.includes("mount")) {
|
|
416
|
-
setTimeout(() => doPrefetch());
|
|
417
|
-
}
|
|
418
|
-
}, prefetchModes);
|
|
419
|
-
const regularEvents = {
|
|
420
|
-
onClick: (event) => {
|
|
421
|
-
onClick(event);
|
|
422
|
-
if (shouldIntercept(event)) {
|
|
423
|
-
event.preventDefault();
|
|
424
|
-
router4.visit(url, visitParams);
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
};
|
|
428
|
-
const prefetchHoverEvents = {
|
|
429
|
-
onMouseEnter: () => {
|
|
430
|
-
hoverTimeout.current = window.setTimeout(() => {
|
|
431
|
-
doPrefetch();
|
|
432
|
-
}, 75);
|
|
433
|
-
},
|
|
434
|
-
onMouseLeave: () => {
|
|
435
|
-
clearTimeout(hoverTimeout.current);
|
|
436
|
-
},
|
|
437
|
-
onClick: regularEvents.onClick
|
|
438
|
-
};
|
|
439
|
-
const prefetchClickEvents = {
|
|
440
|
-
onMouseDown: (event) => {
|
|
441
|
-
if (shouldIntercept(event)) {
|
|
442
|
-
event.preventDefault();
|
|
443
|
-
doPrefetch();
|
|
444
|
-
}
|
|
445
|
-
},
|
|
446
|
-
onMouseUp: (event) => {
|
|
447
|
-
event.preventDefault();
|
|
448
|
-
router4.visit(url, visitParams);
|
|
449
|
-
},
|
|
450
|
-
onClick: (event) => {
|
|
451
|
-
onClick(event);
|
|
452
|
-
if (shouldIntercept(event)) {
|
|
453
|
-
event.preventDefault();
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
};
|
|
457
|
-
const elProps = useMemo4(
|
|
458
|
-
() => ({
|
|
459
|
-
a: { href: url },
|
|
460
|
-
button: { type: "button" }
|
|
461
|
-
}),
|
|
462
|
-
[url]
|
|
463
|
-
);
|
|
464
|
-
return createElement3(
|
|
465
|
-
_as,
|
|
466
|
-
{
|
|
467
|
-
...props,
|
|
468
|
-
...elProps[_as] || {},
|
|
469
|
-
ref,
|
|
470
|
-
...(() => {
|
|
471
|
-
if (prefetchModes.includes("hover")) {
|
|
472
|
-
return prefetchHoverEvents;
|
|
473
|
-
}
|
|
474
|
-
if (prefetchModes.includes("click")) {
|
|
475
|
-
return prefetchClickEvents;
|
|
476
|
-
}
|
|
477
|
-
return regularEvents;
|
|
478
|
-
})(),
|
|
479
|
-
"data-loading": inFlightCount > 0 ? "" : void 0
|
|
480
|
-
},
|
|
481
|
-
children
|
|
482
|
-
);
|
|
483
|
-
}
|
|
484
|
-
);
|
|
485
|
-
Link.displayName = "InertiaLink";
|
|
486
|
-
var Link_default = Link;
|
|
216
|
+
import { isEqual as isEqual2 } from "es-toolkit";
|
|
217
|
+
import {
|
|
218
|
+
createElement as createElement3,
|
|
219
|
+
forwardRef,
|
|
220
|
+
useEffect as useEffect5,
|
|
221
|
+
useImperativeHandle,
|
|
222
|
+
useMemo as useMemo4,
|
|
223
|
+
useRef as useRef2,
|
|
224
|
+
useState as useState5
|
|
225
|
+
} from "react";
|
|
487
226
|
|
|
488
227
|
// src/useForm.ts
|
|
489
228
|
import {
|
|
490
|
-
router as
|
|
229
|
+
router as router5
|
|
491
230
|
} from "@inertiajs/core";
|
|
492
231
|
import { cloneDeep, isEqual } from "es-toolkit";
|
|
493
232
|
import { get, has, set } from "es-toolkit/compat";
|
|
494
|
-
import { useCallback, useEffect as
|
|
233
|
+
import { useCallback, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo3, useRef, useState as useState4 } from "react";
|
|
495
234
|
|
|
496
235
|
// src/useRemember.ts
|
|
497
|
-
import { router as
|
|
498
|
-
import { useEffect as
|
|
236
|
+
import { router as router4 } from "@inertiajs/core";
|
|
237
|
+
import { useEffect as useEffect3, useState as useState3 } from "react";
|
|
499
238
|
function useRemember(initialState, key) {
|
|
500
|
-
const [state, setState] =
|
|
501
|
-
const restored =
|
|
239
|
+
const [state, setState] = useState3(() => {
|
|
240
|
+
const restored = router4.restore(key);
|
|
502
241
|
return restored !== void 0 ? restored : initialState;
|
|
503
242
|
});
|
|
504
|
-
|
|
505
|
-
|
|
243
|
+
useEffect3(() => {
|
|
244
|
+
router4.remember(state, key);
|
|
506
245
|
}, [state, key]);
|
|
507
246
|
return [state, setState];
|
|
508
247
|
}
|
|
509
248
|
|
|
510
249
|
// src/useForm.ts
|
|
511
250
|
function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
|
|
512
|
-
const isMounted =
|
|
251
|
+
const isMounted = useRef(null);
|
|
513
252
|
const rememberKey = typeof rememberKeyOrInitialValues === "string" ? rememberKeyOrInitialValues : null;
|
|
514
|
-
const [defaults, setDefaults] =
|
|
253
|
+
const [defaults, setDefaults] = useState4(
|
|
515
254
|
(typeof rememberKeyOrInitialValues === "string" ? maybeInitialValues : rememberKeyOrInitialValues) || {}
|
|
516
255
|
);
|
|
517
|
-
const cancelToken =
|
|
518
|
-
const recentlySuccessfulTimeoutId =
|
|
519
|
-
const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) :
|
|
520
|
-
const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) :
|
|
521
|
-
const [hasErrors, setHasErrors] =
|
|
522
|
-
const [processing, setProcessing] =
|
|
523
|
-
const [progress, setProgress] =
|
|
524
|
-
const [wasSuccessful, setWasSuccessful] =
|
|
525
|
-
const [recentlySuccessful, setRecentlySuccessful] =
|
|
526
|
-
const transform =
|
|
527
|
-
const isDirty =
|
|
528
|
-
|
|
256
|
+
const cancelToken = useRef(null);
|
|
257
|
+
const recentlySuccessfulTimeoutId = useRef(null);
|
|
258
|
+
const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : useState4(defaults);
|
|
259
|
+
const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) : useState4({});
|
|
260
|
+
const [hasErrors, setHasErrors] = useState4(false);
|
|
261
|
+
const [processing, setProcessing] = useState4(false);
|
|
262
|
+
const [progress, setProgress] = useState4(null);
|
|
263
|
+
const [wasSuccessful, setWasSuccessful] = useState4(false);
|
|
264
|
+
const [recentlySuccessful, setRecentlySuccessful] = useState4(false);
|
|
265
|
+
const transform = useRef((data2) => data2);
|
|
266
|
+
const isDirty = useMemo3(() => !isEqual(data, defaults), [data, defaults]);
|
|
267
|
+
useEffect4(() => {
|
|
529
268
|
isMounted.current = true;
|
|
530
269
|
return () => {
|
|
531
270
|
isMounted.current = false;
|
|
@@ -616,9 +355,9 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
|
|
|
616
355
|
}
|
|
617
356
|
};
|
|
618
357
|
if (method === "delete") {
|
|
619
|
-
|
|
358
|
+
router5.delete(url, { ..._options, data: transform.current(data) });
|
|
620
359
|
} else {
|
|
621
|
-
|
|
360
|
+
router5[method](url, transform.current(data), _options);
|
|
622
361
|
}
|
|
623
362
|
},
|
|
624
363
|
[data, setErrors, transform]
|
|
@@ -635,7 +374,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
|
|
|
635
374
|
},
|
|
636
375
|
[setData]
|
|
637
376
|
);
|
|
638
|
-
const [dataAsDefaults, setDataAsDefaults] =
|
|
377
|
+
const [dataAsDefaults, setDataAsDefaults] = useState4(false);
|
|
639
378
|
const setDefaultsFunction = useCallback(
|
|
640
379
|
(fieldOrFields, maybeValue) => {
|
|
641
380
|
if (typeof fieldOrFields === "undefined") {
|
|
@@ -753,24 +492,434 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
|
|
|
753
492
|
};
|
|
754
493
|
}
|
|
755
494
|
|
|
756
|
-
// src/
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
495
|
+
// src/Form.ts
|
|
496
|
+
var noop = () => void 0;
|
|
497
|
+
var Form = forwardRef(
|
|
498
|
+
({
|
|
499
|
+
action = "",
|
|
500
|
+
method = "get",
|
|
501
|
+
headers = {},
|
|
502
|
+
queryStringArrayFormat = "brackets",
|
|
503
|
+
errorBag = null,
|
|
504
|
+
showProgress = true,
|
|
505
|
+
transform = (data) => data,
|
|
506
|
+
options = {},
|
|
507
|
+
onStart = noop,
|
|
508
|
+
onProgress = noop,
|
|
509
|
+
onFinish = noop,
|
|
510
|
+
onBefore = noop,
|
|
511
|
+
onCancel = noop,
|
|
512
|
+
onSuccess = noop,
|
|
513
|
+
onError = noop,
|
|
514
|
+
onCancelToken = noop,
|
|
515
|
+
onSubmitComplete = noop,
|
|
516
|
+
disableWhileProcessing = false,
|
|
517
|
+
children,
|
|
518
|
+
...props
|
|
519
|
+
}, ref) => {
|
|
520
|
+
const form = useForm({});
|
|
521
|
+
const formElement = useRef2(null);
|
|
522
|
+
const resolvedMethod = useMemo4(() => {
|
|
523
|
+
return typeof action === "object" ? action.method : method.toLowerCase();
|
|
524
|
+
}, [action, method]);
|
|
525
|
+
const [isDirty, setIsDirty] = useState5(false);
|
|
526
|
+
const defaultData = useRef2(new FormData());
|
|
527
|
+
const getFormData = () => new FormData(formElement.current);
|
|
528
|
+
const getData = () => formDataToObject(getFormData());
|
|
529
|
+
const updateDirtyState = (event) => setIsDirty(event.type === "reset" ? false : !isEqual2(getData(), formDataToObject(defaultData.current)));
|
|
530
|
+
useEffect5(() => {
|
|
531
|
+
defaultData.current = getFormData();
|
|
532
|
+
const formEvents = ["input", "change", "reset"];
|
|
533
|
+
formEvents.forEach((e) => formElement.current.addEventListener(e, updateDirtyState));
|
|
534
|
+
return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState));
|
|
535
|
+
}, []);
|
|
536
|
+
const reset = (...fields) => {
|
|
537
|
+
resetFormFields(formElement.current, defaultData.current, fields);
|
|
538
|
+
};
|
|
539
|
+
const resetAndClearErrors = (...fields) => {
|
|
540
|
+
form.clearErrors(...fields);
|
|
541
|
+
reset(...fields);
|
|
542
|
+
};
|
|
543
|
+
const submit = () => {
|
|
544
|
+
const [url, _data] = mergeDataIntoQueryString(
|
|
545
|
+
resolvedMethod,
|
|
546
|
+
typeof action === "object" ? action.url : action,
|
|
547
|
+
getData(),
|
|
548
|
+
queryStringArrayFormat
|
|
549
|
+
);
|
|
550
|
+
const submitOptions = {
|
|
551
|
+
headers,
|
|
552
|
+
errorBag,
|
|
553
|
+
showProgress,
|
|
554
|
+
onCancelToken,
|
|
555
|
+
onBefore,
|
|
556
|
+
onStart,
|
|
557
|
+
onProgress,
|
|
558
|
+
onFinish,
|
|
559
|
+
onCancel,
|
|
560
|
+
onSuccess: (...args) => {
|
|
561
|
+
onSuccess(...args);
|
|
562
|
+
onSubmitComplete({
|
|
563
|
+
reset,
|
|
564
|
+
defaults
|
|
565
|
+
});
|
|
566
|
+
},
|
|
567
|
+
onError,
|
|
568
|
+
...options
|
|
569
|
+
};
|
|
570
|
+
form.transform(() => transform(_data));
|
|
571
|
+
form.submit(resolvedMethod, url, submitOptions);
|
|
572
|
+
};
|
|
573
|
+
const defaults = () => {
|
|
574
|
+
defaultData.current = getFormData();
|
|
575
|
+
setIsDirty(false);
|
|
576
|
+
};
|
|
577
|
+
const exposed = () => ({
|
|
578
|
+
errors: form.errors,
|
|
579
|
+
hasErrors: form.hasErrors,
|
|
580
|
+
processing: form.processing,
|
|
581
|
+
progress: form.progress,
|
|
582
|
+
wasSuccessful: form.wasSuccessful,
|
|
583
|
+
recentlySuccessful: form.recentlySuccessful,
|
|
584
|
+
isDirty,
|
|
585
|
+
clearErrors: form.clearErrors,
|
|
586
|
+
resetAndClearErrors,
|
|
587
|
+
setError: form.setError,
|
|
588
|
+
reset,
|
|
589
|
+
submit,
|
|
590
|
+
defaults
|
|
591
|
+
});
|
|
592
|
+
useImperativeHandle(ref, exposed, [form, isDirty, submit]);
|
|
593
|
+
return createElement3(
|
|
594
|
+
"form",
|
|
595
|
+
{
|
|
596
|
+
...props,
|
|
597
|
+
ref: formElement,
|
|
598
|
+
action: typeof action === "object" ? action.url : action,
|
|
599
|
+
method: resolvedMethod,
|
|
600
|
+
onSubmit: (event) => {
|
|
601
|
+
event.preventDefault();
|
|
602
|
+
submit();
|
|
603
|
+
},
|
|
604
|
+
inert: disableWhileProcessing && form.processing
|
|
605
|
+
},
|
|
606
|
+
typeof children === "function" ? children(exposed()) : children
|
|
607
|
+
);
|
|
608
|
+
}
|
|
609
|
+
);
|
|
610
|
+
Form.displayName = "InertiaForm";
|
|
611
|
+
var Form_default = Form;
|
|
612
|
+
|
|
613
|
+
// src/Head.ts
|
|
614
|
+
import { escape } from "es-toolkit";
|
|
615
|
+
import React, { useContext as useContext2, useEffect as useEffect6, useMemo as useMemo5 } from "react";
|
|
616
|
+
var Head = function({ children, title }) {
|
|
617
|
+
const headManager = useContext2(HeadContext_default);
|
|
618
|
+
const provider = useMemo5(() => headManager.createProvider(), [headManager]);
|
|
619
|
+
const isServer = typeof window === "undefined";
|
|
620
|
+
useEffect6(() => {
|
|
621
|
+
provider.reconnect();
|
|
622
|
+
provider.update(renderNodes(children));
|
|
623
|
+
return () => {
|
|
624
|
+
provider.disconnect();
|
|
625
|
+
};
|
|
626
|
+
}, [provider, children, title]);
|
|
627
|
+
function isUnaryTag(node) {
|
|
628
|
+
return [
|
|
629
|
+
"area",
|
|
630
|
+
"base",
|
|
631
|
+
"br",
|
|
632
|
+
"col",
|
|
633
|
+
"embed",
|
|
634
|
+
"hr",
|
|
635
|
+
"img",
|
|
636
|
+
"input",
|
|
637
|
+
"keygen",
|
|
638
|
+
"link",
|
|
639
|
+
"meta",
|
|
640
|
+
"param",
|
|
641
|
+
"source",
|
|
642
|
+
"track",
|
|
643
|
+
"wbr"
|
|
644
|
+
].indexOf(node.type) > -1;
|
|
645
|
+
}
|
|
646
|
+
function renderTagStart(node) {
|
|
647
|
+
const attrs = Object.keys(node.props).reduce((carry, name) => {
|
|
648
|
+
if (["head-key", "children", "dangerouslySetInnerHTML"].includes(name)) {
|
|
649
|
+
return carry;
|
|
650
|
+
}
|
|
651
|
+
const value = String(node.props[name]);
|
|
652
|
+
if (value === "") {
|
|
653
|
+
return carry + ` ${name}`;
|
|
654
|
+
} else {
|
|
655
|
+
return carry + ` ${name}="${escape(value)}"`;
|
|
656
|
+
}
|
|
657
|
+
}, "");
|
|
658
|
+
return `<${node.type}${attrs}>`;
|
|
659
|
+
}
|
|
660
|
+
function renderTagChildren(node) {
|
|
661
|
+
return typeof node.props.children === "string" ? node.props.children : node.props.children.reduce((html, child) => html + renderTag(child), "");
|
|
662
|
+
}
|
|
663
|
+
function renderTag(node) {
|
|
664
|
+
let html = renderTagStart(node);
|
|
665
|
+
if (node.props.children) {
|
|
666
|
+
html += renderTagChildren(node);
|
|
667
|
+
}
|
|
668
|
+
if (node.props.dangerouslySetInnerHTML) {
|
|
669
|
+
html += node.props.dangerouslySetInnerHTML.__html;
|
|
670
|
+
}
|
|
671
|
+
if (!isUnaryTag(node)) {
|
|
672
|
+
html += `</${node.type}>`;
|
|
673
|
+
}
|
|
674
|
+
return html;
|
|
675
|
+
}
|
|
676
|
+
function ensureNodeHasInertiaProp(node) {
|
|
677
|
+
return React.cloneElement(node, {
|
|
678
|
+
inertia: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
|
|
679
|
+
});
|
|
680
|
+
}
|
|
681
|
+
function renderNode(node) {
|
|
682
|
+
return renderTag(ensureNodeHasInertiaProp(node));
|
|
683
|
+
}
|
|
684
|
+
function renderNodes(nodes) {
|
|
685
|
+
const computed = React.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
|
|
686
|
+
if (title && !computed.find((tag) => tag.startsWith("<title"))) {
|
|
687
|
+
computed.push(`<title inertia>${title}</title>`);
|
|
688
|
+
}
|
|
689
|
+
return computed;
|
|
690
|
+
}
|
|
691
|
+
if (isServer) {
|
|
692
|
+
provider.update(renderNodes(children));
|
|
693
|
+
}
|
|
694
|
+
return null;
|
|
695
|
+
};
|
|
696
|
+
var Head_default = Head;
|
|
697
|
+
|
|
698
|
+
// src/Link.ts
|
|
699
|
+
import {
|
|
700
|
+
mergeDataIntoQueryString as mergeDataIntoQueryString2,
|
|
701
|
+
router as router6,
|
|
702
|
+
shouldIntercept
|
|
703
|
+
} from "@inertiajs/core";
|
|
704
|
+
import { createElement as createElement4, forwardRef as forwardRef2, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3, useState as useState6 } from "react";
|
|
705
|
+
var noop2 = () => void 0;
|
|
706
|
+
var Link = forwardRef2(
|
|
707
|
+
({
|
|
708
|
+
children,
|
|
709
|
+
as = "a",
|
|
710
|
+
data = {},
|
|
711
|
+
href = "",
|
|
712
|
+
method = "get",
|
|
713
|
+
preserveScroll = false,
|
|
714
|
+
preserveState = null,
|
|
715
|
+
replace = false,
|
|
716
|
+
only = [],
|
|
717
|
+
except = [],
|
|
718
|
+
headers = {},
|
|
719
|
+
queryStringArrayFormat = "brackets",
|
|
720
|
+
async = false,
|
|
721
|
+
onClick = noop2,
|
|
722
|
+
onCancelToken = noop2,
|
|
723
|
+
onBefore = noop2,
|
|
724
|
+
onStart = noop2,
|
|
725
|
+
onProgress = noop2,
|
|
726
|
+
onFinish = noop2,
|
|
727
|
+
onCancel = noop2,
|
|
728
|
+
onSuccess = noop2,
|
|
729
|
+
onError = noop2,
|
|
730
|
+
onPrefetching = noop2,
|
|
731
|
+
onPrefetched = noop2,
|
|
732
|
+
prefetch = false,
|
|
733
|
+
cacheFor = 0,
|
|
734
|
+
...props
|
|
735
|
+
}, ref) => {
|
|
736
|
+
const [inFlightCount, setInFlightCount] = useState6(0);
|
|
737
|
+
const hoverTimeout = useRef3(null);
|
|
738
|
+
const _method = useMemo6(() => {
|
|
739
|
+
return typeof href === "object" ? href.method : method.toLowerCase();
|
|
740
|
+
}, [href, method]);
|
|
741
|
+
const _as = useMemo6(() => {
|
|
742
|
+
if (typeof as !== "string") {
|
|
743
|
+
return as;
|
|
744
|
+
}
|
|
745
|
+
return _method !== "get" ? "button" : as.toLowerCase();
|
|
746
|
+
}, [as, _method]);
|
|
747
|
+
const mergeDataArray = useMemo6(
|
|
748
|
+
() => mergeDataIntoQueryString2(_method, typeof href === "object" ? href.url : href, data, queryStringArrayFormat),
|
|
749
|
+
[href, _method, data, queryStringArrayFormat]
|
|
750
|
+
);
|
|
751
|
+
const url = useMemo6(() => mergeDataArray[0], [mergeDataArray]);
|
|
752
|
+
const _data = useMemo6(() => mergeDataArray[1], [mergeDataArray]);
|
|
753
|
+
const baseParams = useMemo6(
|
|
754
|
+
() => ({
|
|
755
|
+
data: _data,
|
|
756
|
+
method: _method,
|
|
757
|
+
preserveScroll,
|
|
758
|
+
preserveState: preserveState ?? _method !== "get",
|
|
759
|
+
replace,
|
|
760
|
+
only,
|
|
761
|
+
except,
|
|
762
|
+
headers,
|
|
763
|
+
async
|
|
764
|
+
}),
|
|
765
|
+
[_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
|
|
766
|
+
);
|
|
767
|
+
const visitParams = useMemo6(
|
|
768
|
+
() => ({
|
|
769
|
+
...baseParams,
|
|
770
|
+
onCancelToken,
|
|
771
|
+
onBefore,
|
|
772
|
+
onStart(visit) {
|
|
773
|
+
setInFlightCount((count) => count + 1);
|
|
774
|
+
onStart(visit);
|
|
775
|
+
},
|
|
776
|
+
onProgress,
|
|
777
|
+
onFinish(visit) {
|
|
778
|
+
setInFlightCount((count) => count - 1);
|
|
779
|
+
onFinish(visit);
|
|
780
|
+
},
|
|
781
|
+
onCancel,
|
|
782
|
+
onSuccess,
|
|
783
|
+
onError
|
|
784
|
+
}),
|
|
785
|
+
[baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
|
|
786
|
+
);
|
|
787
|
+
const prefetchModes = useMemo6(
|
|
788
|
+
() => {
|
|
789
|
+
if (prefetch === true) {
|
|
790
|
+
return ["hover"];
|
|
791
|
+
}
|
|
792
|
+
if (prefetch === false) {
|
|
793
|
+
return [];
|
|
794
|
+
}
|
|
795
|
+
if (Array.isArray(prefetch)) {
|
|
796
|
+
return prefetch;
|
|
797
|
+
}
|
|
798
|
+
return [prefetch];
|
|
799
|
+
},
|
|
800
|
+
Array.isArray(prefetch) ? prefetch : [prefetch]
|
|
801
|
+
);
|
|
802
|
+
const cacheForValue = useMemo6(() => {
|
|
803
|
+
if (cacheFor !== 0) {
|
|
804
|
+
return cacheFor;
|
|
805
|
+
}
|
|
806
|
+
if (prefetchModes.length === 1 && prefetchModes[0] === "click") {
|
|
807
|
+
return 0;
|
|
808
|
+
}
|
|
809
|
+
return 3e4;
|
|
810
|
+
}, [cacheFor, prefetchModes]);
|
|
811
|
+
const doPrefetch = useMemo6(() => {
|
|
812
|
+
return () => {
|
|
813
|
+
router6.prefetch(
|
|
814
|
+
url,
|
|
815
|
+
{
|
|
816
|
+
...baseParams,
|
|
817
|
+
onPrefetching,
|
|
818
|
+
onPrefetched
|
|
819
|
+
},
|
|
820
|
+
{ cacheFor: cacheForValue }
|
|
821
|
+
);
|
|
822
|
+
};
|
|
823
|
+
}, [url, baseParams, onPrefetching, onPrefetched, cacheForValue]);
|
|
824
|
+
useEffect7(() => {
|
|
825
|
+
return () => {
|
|
826
|
+
clearTimeout(hoverTimeout.current);
|
|
827
|
+
};
|
|
828
|
+
}, []);
|
|
829
|
+
useEffect7(() => {
|
|
830
|
+
if (prefetchModes.includes("mount")) {
|
|
831
|
+
setTimeout(() => doPrefetch());
|
|
832
|
+
}
|
|
833
|
+
}, prefetchModes);
|
|
834
|
+
const regularEvents = {
|
|
835
|
+
onClick: (event) => {
|
|
836
|
+
onClick(event);
|
|
837
|
+
if (shouldIntercept(event)) {
|
|
838
|
+
event.preventDefault();
|
|
839
|
+
router6.visit(url, visitParams);
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
};
|
|
843
|
+
const prefetchHoverEvents = {
|
|
844
|
+
onMouseEnter: () => {
|
|
845
|
+
hoverTimeout.current = window.setTimeout(() => {
|
|
846
|
+
doPrefetch();
|
|
847
|
+
}, 75);
|
|
848
|
+
},
|
|
849
|
+
onMouseLeave: () => {
|
|
850
|
+
clearTimeout(hoverTimeout.current);
|
|
851
|
+
},
|
|
852
|
+
onClick: regularEvents.onClick
|
|
853
|
+
};
|
|
854
|
+
const prefetchClickEvents = {
|
|
855
|
+
onMouseDown: (event) => {
|
|
856
|
+
if (shouldIntercept(event)) {
|
|
857
|
+
event.preventDefault();
|
|
858
|
+
doPrefetch();
|
|
859
|
+
}
|
|
860
|
+
},
|
|
861
|
+
onMouseUp: (event) => {
|
|
862
|
+
event.preventDefault();
|
|
863
|
+
router6.visit(url, visitParams);
|
|
864
|
+
},
|
|
865
|
+
onClick: (event) => {
|
|
866
|
+
onClick(event);
|
|
867
|
+
if (shouldIntercept(event)) {
|
|
868
|
+
event.preventDefault();
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
};
|
|
872
|
+
const elProps = useMemo6(() => {
|
|
873
|
+
if (_as === "button") {
|
|
874
|
+
return { type: "button" };
|
|
875
|
+
}
|
|
876
|
+
if (_as === "a" || typeof _as !== "string") {
|
|
877
|
+
return { href: url };
|
|
878
|
+
}
|
|
879
|
+
return {};
|
|
880
|
+
}, [_as, url]);
|
|
881
|
+
return createElement4(
|
|
882
|
+
_as,
|
|
883
|
+
{
|
|
884
|
+
...props,
|
|
885
|
+
...elProps,
|
|
886
|
+
ref,
|
|
887
|
+
...(() => {
|
|
888
|
+
if (prefetchModes.includes("hover")) {
|
|
889
|
+
return prefetchHoverEvents;
|
|
890
|
+
}
|
|
891
|
+
if (prefetchModes.includes("click")) {
|
|
892
|
+
return prefetchClickEvents;
|
|
893
|
+
}
|
|
894
|
+
return regularEvents;
|
|
895
|
+
})(),
|
|
896
|
+
"data-loading": inFlightCount > 0 ? "" : void 0
|
|
897
|
+
},
|
|
898
|
+
children
|
|
899
|
+
);
|
|
900
|
+
}
|
|
901
|
+
);
|
|
902
|
+
Link.displayName = "InertiaLink";
|
|
903
|
+
var Link_default = Link;
|
|
904
|
+
|
|
905
|
+
// src/usePoll.ts
|
|
906
|
+
import { router as router7 } from "@inertiajs/core";
|
|
907
|
+
import { useEffect as useEffect8, useRef as useRef4 } from "react";
|
|
908
|
+
function usePoll(interval, requestOptions = {}, options = {
|
|
909
|
+
keepAlive: false,
|
|
910
|
+
autoStart: true
|
|
911
|
+
}) {
|
|
912
|
+
const pollRef = useRef4(
|
|
913
|
+
router7.poll(interval, requestOptions, {
|
|
914
|
+
...options,
|
|
915
|
+
autoStart: false
|
|
916
|
+
})
|
|
917
|
+
);
|
|
918
|
+
useEffect8(() => {
|
|
919
|
+
if (options.autoStart ?? true) {
|
|
920
|
+
pollRef.current.start();
|
|
921
|
+
}
|
|
922
|
+
return () => pollRef.current.stop();
|
|
774
923
|
}, []);
|
|
775
924
|
return {
|
|
776
925
|
stop: pollRef.current.stop,
|
|
@@ -780,14 +929,14 @@ function usePoll(interval, requestOptions = {}, options = {
|
|
|
780
929
|
|
|
781
930
|
// src/usePrefetch.ts
|
|
782
931
|
import { router as router8 } from "@inertiajs/core";
|
|
783
|
-
import { useEffect as
|
|
932
|
+
import { useEffect as useEffect9, useState as useState7 } from "react";
|
|
784
933
|
function usePrefetch(options = {}) {
|
|
785
934
|
const cached = typeof window === "undefined" ? null : router8.getCached(window.location.pathname, options);
|
|
786
935
|
const inFlight = typeof window === "undefined" ? null : router8.getPrefetching(window.location.pathname, options);
|
|
787
|
-
const [lastUpdatedAt, setLastUpdatedAt] =
|
|
788
|
-
const [isPrefetching, setIsPrefetching] =
|
|
789
|
-
const [isPrefetched, setIsPrefetched] =
|
|
790
|
-
|
|
936
|
+
const [lastUpdatedAt, setLastUpdatedAt] = useState7(cached?.staleTimestamp || null);
|
|
937
|
+
const [isPrefetching, setIsPrefetching] = useState7(inFlight !== null);
|
|
938
|
+
const [isPrefetched, setIsPrefetched] = useState7(cached !== null);
|
|
939
|
+
useEffect9(() => {
|
|
791
940
|
const onPrefetchingListener = router8.on("prefetching", (e) => {
|
|
792
941
|
if (e.detail.visit.url.pathname === window.location.pathname) {
|
|
793
942
|
setIsPrefetching(true);
|
|
@@ -815,15 +964,15 @@ function usePrefetch(options = {}) {
|
|
|
815
964
|
|
|
816
965
|
// src/WhenVisible.ts
|
|
817
966
|
import { router as router9 } from "@inertiajs/core";
|
|
818
|
-
import { createElement as
|
|
967
|
+
import { createElement as createElement5, useCallback as useCallback2, useEffect as useEffect10, useRef as useRef5, useState as useState8 } from "react";
|
|
819
968
|
var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
|
|
820
969
|
always = always ?? false;
|
|
821
970
|
as = as ?? "div";
|
|
822
971
|
fallback = fallback ?? null;
|
|
823
|
-
const [loaded, setLoaded] =
|
|
824
|
-
const hasFetched =
|
|
825
|
-
const fetching =
|
|
826
|
-
const ref =
|
|
972
|
+
const [loaded, setLoaded] = useState8(false);
|
|
973
|
+
const hasFetched = useRef5(false);
|
|
974
|
+
const fetching = useRef5(false);
|
|
975
|
+
const ref = useRef5(null);
|
|
827
976
|
const getReloadParams = useCallback2(() => {
|
|
828
977
|
if (data) {
|
|
829
978
|
return {
|
|
@@ -835,7 +984,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
|
|
|
835
984
|
}
|
|
836
985
|
return params;
|
|
837
986
|
}, [params, data]);
|
|
838
|
-
|
|
987
|
+
useEffect10(() => {
|
|
839
988
|
if (!ref.current) {
|
|
840
989
|
return;
|
|
841
990
|
}
|
|
@@ -878,17 +1027,19 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
|
|
|
878
1027
|
observer.disconnect();
|
|
879
1028
|
};
|
|
880
1029
|
}, [ref, getReloadParams, buffer]);
|
|
1030
|
+
const resolveChildren = () => typeof children === "function" ? children() : children;
|
|
1031
|
+
const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
|
|
881
1032
|
if (always || !loaded) {
|
|
882
|
-
return
|
|
1033
|
+
return createElement5(
|
|
883
1034
|
as,
|
|
884
1035
|
{
|
|
885
1036
|
props: null,
|
|
886
1037
|
ref
|
|
887
1038
|
},
|
|
888
|
-
loaded ?
|
|
1039
|
+
loaded ? resolveChildren() : resolveFallback()
|
|
889
1040
|
);
|
|
890
1041
|
}
|
|
891
|
-
return loaded ?
|
|
1042
|
+
return loaded ? resolveChildren() : null;
|
|
892
1043
|
};
|
|
893
1044
|
WhenVisible.displayName = "InertiaWhenVisible";
|
|
894
1045
|
var WhenVisible_default = WhenVisible;
|
|
@@ -897,6 +1048,7 @@ var WhenVisible_default = WhenVisible;
|
|
|
897
1048
|
var router3 = Router;
|
|
898
1049
|
export {
|
|
899
1050
|
Deferred_default as Deferred,
|
|
1051
|
+
Form_default as Form,
|
|
900
1052
|
Head_default as Head,
|
|
901
1053
|
Link_default as Link,
|
|
902
1054
|
WhenVisible_default as WhenVisible,
|