New source found from dndbeyond.com
This commit is contained in:
+89
-52
@@ -13,8 +13,11 @@ import type {
|
||||
Navigator,
|
||||
RelativeRoutingType,
|
||||
RouteObject,
|
||||
RouterProps,
|
||||
RouterProviderProps,
|
||||
To,
|
||||
DataStrategyFunction,
|
||||
PatchRoutesOnNavigationFunction,
|
||||
} from "react-router";
|
||||
import {
|
||||
Router,
|
||||
@@ -30,15 +33,13 @@ import {
|
||||
UNSAFE_DataRouterStateContext as DataRouterStateContext,
|
||||
UNSAFE_NavigationContext as NavigationContext,
|
||||
UNSAFE_RouteContext as RouteContext,
|
||||
UNSAFE_logV6DeprecationWarnings as logV6DeprecationWarnings,
|
||||
UNSAFE_mapRouteProperties as mapRouteProperties,
|
||||
UNSAFE_useRouteId as useRouteId,
|
||||
UNSAFE_useRoutesImpl as useRoutesImpl,
|
||||
} from "react-router";
|
||||
import type {
|
||||
BrowserHistory,
|
||||
unstable_DataStrategyFunction,
|
||||
unstable_DataStrategyFunctionArgs,
|
||||
unstable_DataStrategyMatch,
|
||||
Fetcher,
|
||||
FormEncType,
|
||||
FormMethod,
|
||||
@@ -72,6 +73,7 @@ import type {
|
||||
ParamKeyValuePair,
|
||||
URLSearchParamsInit,
|
||||
SubmitTarget,
|
||||
FetcherSubmitOptions,
|
||||
} from "./dom";
|
||||
import {
|
||||
createSearchParams,
|
||||
@@ -86,9 +88,6 @@ import {
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
export type {
|
||||
unstable_DataStrategyFunction,
|
||||
unstable_DataStrategyFunctionArgs,
|
||||
unstable_DataStrategyMatch,
|
||||
FormEncType,
|
||||
FormMethod,
|
||||
GetScrollRestorationKeyFunction,
|
||||
@@ -108,6 +107,10 @@ export type {
|
||||
BlockerFunction,
|
||||
DataRouteMatch,
|
||||
DataRouteObject,
|
||||
DataStrategyFunction,
|
||||
DataStrategyFunctionArgs,
|
||||
DataStrategyMatch,
|
||||
DataStrategyResult,
|
||||
ErrorResponse,
|
||||
Fetcher,
|
||||
FutureConfig,
|
||||
@@ -130,6 +133,8 @@ export type {
|
||||
OutletProps,
|
||||
Params,
|
||||
ParamParseKey,
|
||||
PatchRoutesOnNavigationFunction,
|
||||
PatchRoutesOnNavigationFunctionArgs,
|
||||
Path,
|
||||
PathMatch,
|
||||
Pathname,
|
||||
@@ -149,7 +154,6 @@ export type {
|
||||
ShouldRevalidateFunctionArgs,
|
||||
To,
|
||||
UIMatch,
|
||||
unstable_HandlerResult,
|
||||
} from "react-router";
|
||||
export {
|
||||
AbortedDeferredError,
|
||||
@@ -174,6 +178,7 @@ export {
|
||||
parsePath,
|
||||
redirect,
|
||||
redirectDocument,
|
||||
replace,
|
||||
renderMatches,
|
||||
resolvePath,
|
||||
useActionData,
|
||||
@@ -255,7 +260,8 @@ interface DOMRouterOpts {
|
||||
basename?: string;
|
||||
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
|
||||
hydrationData?: HydrationState;
|
||||
unstable_dataStrategy?: unstable_DataStrategyFunction;
|
||||
dataStrategy?: DataStrategyFunction;
|
||||
patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
|
||||
window?: Window;
|
||||
}
|
||||
|
||||
@@ -273,7 +279,8 @@ export function createBrowserRouter(
|
||||
hydrationData: opts?.hydrationData || parseHydrationData(),
|
||||
routes,
|
||||
mapRouteProperties,
|
||||
unstable_dataStrategy: opts?.unstable_dataStrategy,
|
||||
dataStrategy: opts?.dataStrategy,
|
||||
patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
|
||||
window: opts?.window,
|
||||
}).initialize();
|
||||
}
|
||||
@@ -292,7 +299,8 @@ export function createHashRouter(
|
||||
hydrationData: opts?.hydrationData || parseHydrationData(),
|
||||
routes,
|
||||
mapRouteProperties,
|
||||
unstable_dataStrategy: opts?.unstable_dataStrategy,
|
||||
dataStrategy: opts?.dataStrategy,
|
||||
patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
|
||||
window: opts?.window,
|
||||
}).initialize();
|
||||
}
|
||||
@@ -513,16 +521,16 @@ export function RouterProvider({
|
||||
newState: RouterState,
|
||||
{
|
||||
deletedFetchers,
|
||||
unstable_flushSync: flushSync,
|
||||
unstable_viewTransitionOpts: viewTransitionOpts,
|
||||
flushSync: flushSync,
|
||||
viewTransitionOpts: viewTransitionOpts,
|
||||
}
|
||||
) => {
|
||||
deletedFetchers.forEach((key) => fetcherData.current.delete(key));
|
||||
newState.fetchers.forEach((fetcher, key) => {
|
||||
if (fetcher.data !== undefined) {
|
||||
fetcherData.current.set(key, fetcher.data);
|
||||
}
|
||||
});
|
||||
deletedFetchers.forEach((key) => fetcherData.current.delete(key));
|
||||
|
||||
let isViewTransitionUnavailable =
|
||||
router.window == null ||
|
||||
@@ -702,6 +710,18 @@ export function RouterProvider({
|
||||
[router, navigator, basename]
|
||||
);
|
||||
|
||||
let routerFuture = React.useMemo<RouterProps["future"]>(
|
||||
() => ({
|
||||
v7_relativeSplatPath: router.future.v7_relativeSplatPath,
|
||||
}),
|
||||
[router.future.v7_relativeSplatPath]
|
||||
);
|
||||
|
||||
React.useEffect(
|
||||
() => logV6DeprecationWarnings(future, router.future),
|
||||
[future, router.future]
|
||||
);
|
||||
|
||||
// The fragment and {null} here are important! We need them to keep React 18's
|
||||
// useId happy when we are server-rendering since we may have a <script> here
|
||||
// containing the hydrated server-side staticContext (from StaticRouterProvider).
|
||||
@@ -719,12 +739,10 @@ export function RouterProvider({
|
||||
location={state.location}
|
||||
navigationType={state.historyAction}
|
||||
navigator={navigator}
|
||||
future={{
|
||||
v7_relativeSplatPath: router.future.v7_relativeSplatPath,
|
||||
}}
|
||||
future={routerFuture}
|
||||
>
|
||||
{state.initialized || router.future.v7_partialHydration ? (
|
||||
<DataRoutes
|
||||
<MemoizedDataRoutes
|
||||
routes={router.routes}
|
||||
future={router.future}
|
||||
state={state}
|
||||
@@ -742,6 +760,9 @@ export function RouterProvider({
|
||||
);
|
||||
}
|
||||
|
||||
// Memoize to avoid re-renders when updating `ViewTransitionContext`
|
||||
const MemoizedDataRoutes = React.memo(DataRoutes);
|
||||
|
||||
function DataRoutes({
|
||||
routes,
|
||||
future,
|
||||
@@ -792,6 +813,8 @@ export function BrowserRouter({
|
||||
|
||||
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
|
||||
|
||||
React.useEffect(() => logV6DeprecationWarnings(future), [future]);
|
||||
|
||||
return (
|
||||
<Router
|
||||
basename={basename}
|
||||
@@ -843,6 +866,8 @@ export function HashRouter({
|
||||
|
||||
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
|
||||
|
||||
React.useEffect(() => logV6DeprecationWarnings(future), [future]);
|
||||
|
||||
return (
|
||||
<Router
|
||||
basename={basename}
|
||||
@@ -890,6 +915,8 @@ function HistoryRouter({
|
||||
|
||||
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
|
||||
|
||||
React.useEffect(() => logV6DeprecationWarnings(future), [future]);
|
||||
|
||||
return (
|
||||
<Router
|
||||
basename={basename}
|
||||
@@ -916,7 +943,7 @@ export interface LinkProps
|
||||
preventScrollReset?: boolean;
|
||||
relative?: RelativeRoutingType;
|
||||
to: To;
|
||||
unstable_viewTransition?: boolean;
|
||||
viewTransition?: boolean;
|
||||
}
|
||||
|
||||
const isBrowser =
|
||||
@@ -940,7 +967,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
|
||||
target,
|
||||
to,
|
||||
preventScrollReset,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
@@ -990,7 +1017,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
|
||||
target,
|
||||
preventScrollReset,
|
||||
relative,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
});
|
||||
function handleClick(
|
||||
event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
|
||||
@@ -1018,7 +1045,7 @@ if (__DEV__) {
|
||||
Link.displayName = "Link";
|
||||
}
|
||||
|
||||
type NavLinkRenderProps = {
|
||||
export type NavLinkRenderProps = {
|
||||
isActive: boolean;
|
||||
isPending: boolean;
|
||||
isTransitioning: boolean;
|
||||
@@ -1047,7 +1074,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
|
||||
end = false,
|
||||
style: styleProp,
|
||||
to,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
children,
|
||||
...rest
|
||||
},
|
||||
@@ -1062,7 +1089,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
|
||||
// Conditional usage is OK here because the usage of a data router is static
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useViewTransitionState(path) &&
|
||||
unstable_viewTransition === true;
|
||||
viewTransition === true;
|
||||
|
||||
let toPathname = navigator.encodeLocation
|
||||
? navigator.encodeLocation(path).pathname
|
||||
@@ -1146,7 +1173,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
|
||||
ref={ref}
|
||||
style={style}
|
||||
to={to}
|
||||
unstable_viewTransition={unstable_viewTransition}
|
||||
viewTransition={viewTransition}
|
||||
>
|
||||
{typeof children === "function" ? children(renderProps) : children}
|
||||
</Link>
|
||||
@@ -1158,8 +1185,10 @@ if (__DEV__) {
|
||||
NavLink.displayName = "NavLink";
|
||||
}
|
||||
|
||||
export interface FetcherFormProps
|
||||
extends React.FormHTMLAttributes<HTMLFormElement> {
|
||||
/**
|
||||
* Form props shared by navigations and fetchers
|
||||
*/
|
||||
interface SharedFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
||||
/**
|
||||
* The HTTP verb to use when the form is submit. Supports "get", "post",
|
||||
* "put", "delete", "patch".
|
||||
@@ -1200,7 +1229,15 @@ export interface FetcherFormProps
|
||||
onSubmit?: React.FormEventHandler<HTMLFormElement>;
|
||||
}
|
||||
|
||||
export interface FormProps extends FetcherFormProps {
|
||||
/**
|
||||
* Form props available to fetchers
|
||||
*/
|
||||
export interface FetcherFormProps extends SharedFormProps {}
|
||||
|
||||
/**
|
||||
* Form props available to navigations
|
||||
*/
|
||||
export interface FormProps extends SharedFormProps {
|
||||
/**
|
||||
* Indicate a specific fetcherKey to use when using navigate=false
|
||||
*/
|
||||
@@ -1231,7 +1268,7 @@ export interface FormProps extends FetcherFormProps {
|
||||
/**
|
||||
* Enable view transitions on this Form navigation
|
||||
*/
|
||||
unstable_viewTransition?: boolean;
|
||||
viewTransition?: boolean;
|
||||
}
|
||||
|
||||
type HTMLSubmitEvent = React.BaseSyntheticEvent<
|
||||
@@ -1261,7 +1298,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
|
||||
onSubmit,
|
||||
relative,
|
||||
preventScrollReset,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
...props
|
||||
},
|
||||
forwardedRef
|
||||
@@ -1291,7 +1328,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
|
||||
state,
|
||||
relative,
|
||||
preventScrollReset,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1356,7 +1393,7 @@ enum DataRouterStateHook {
|
||||
function getDataRouterConsoleError(
|
||||
hookName: DataRouterHook | DataRouterStateHook
|
||||
) {
|
||||
return `${hookName} must be used within a data router. See https://reactrouter.com/routers/picking-a-router.`;
|
||||
return `${hookName} must be used within a data router. See https://reactrouter.com/v6/routers/picking-a-router.`;
|
||||
}
|
||||
|
||||
function useDataRouterContext(hookName: DataRouterHook) {
|
||||
@@ -1386,14 +1423,14 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
|
||||
state,
|
||||
preventScrollReset,
|
||||
relative,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
}: {
|
||||
target?: React.HTMLAttributeAnchorTarget;
|
||||
replace?: boolean;
|
||||
state?: any;
|
||||
preventScrollReset?: boolean;
|
||||
relative?: RelativeRoutingType;
|
||||
unstable_viewTransition?: boolean;
|
||||
viewTransition?: boolean;
|
||||
} = {}
|
||||
): (event: React.MouseEvent<E, MouseEvent>) => void {
|
||||
let navigate = useNavigate();
|
||||
@@ -1417,7 +1454,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
|
||||
state,
|
||||
preventScrollReset,
|
||||
relative,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -1431,7 +1468,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
|
||||
to,
|
||||
preventScrollReset,
|
||||
relative,
|
||||
unstable_viewTransition,
|
||||
viewTransition,
|
||||
]
|
||||
);
|
||||
}
|
||||
@@ -1448,11 +1485,7 @@ export function useSearchParams(
|
||||
`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.`
|
||||
`https://github.com/ungap/url-search-params.`
|
||||
);
|
||||
|
||||
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
|
||||
@@ -1523,7 +1556,7 @@ export interface FetcherSubmitFunction {
|
||||
(
|
||||
target: SubmitTarget,
|
||||
// Fetchers cannot replace or set state because they are not navigation events
|
||||
options?: Omit<SubmitOptions, "replace" | "state">
|
||||
options?: FetcherSubmitOptions
|
||||
): void;
|
||||
}
|
||||
|
||||
@@ -1565,7 +1598,7 @@ export function useSubmit(): SubmitFunction {
|
||||
body,
|
||||
formMethod: options.method || (method as HTMLFormMethod),
|
||||
formEncType: options.encType || (encType as FormEncType),
|
||||
unstable_flushSync: options.unstable_flushSync,
|
||||
flushSync: options.flushSync,
|
||||
});
|
||||
} else {
|
||||
router.navigate(options.action || action, {
|
||||
@@ -1577,8 +1610,8 @@ export function useSubmit(): SubmitFunction {
|
||||
replace: options.replace,
|
||||
state: options.state,
|
||||
fromRouteId: currentRouteId,
|
||||
unstable_flushSync: options.unstable_flushSync,
|
||||
unstable_viewTransition: options.unstable_viewTransition,
|
||||
flushSync: options.flushSync,
|
||||
viewTransition: options.viewTransition,
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -1614,9 +1647,13 @@ export function useFormAction(
|
||||
// since it might not apply to our contextual route. We add it back based
|
||||
// on match.route.index below
|
||||
let params = new URLSearchParams(path.search);
|
||||
if (params.has("index") && params.get("index") === "") {
|
||||
let indexValues = params.getAll("index");
|
||||
let hasNakedIndexParam = indexValues.some((v) => v === "");
|
||||
if (hasNakedIndexParam) {
|
||||
params.delete("index");
|
||||
path.search = params.toString() ? `?${params.toString()}` : "";
|
||||
indexValues.filter((v) => v).forEach((v) => params.append("index", v));
|
||||
let qs = params.toString();
|
||||
path.search = qs ? `?${qs}` : "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1643,7 +1680,7 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
|
||||
FetcherFormProps & React.RefAttributes<HTMLFormElement>
|
||||
>;
|
||||
submit: FetcherSubmitFunction;
|
||||
load: (href: string, opts?: { unstable_flushSync?: boolean }) => void;
|
||||
load: (href: string, opts?: { flushSync?: boolean }) => void;
|
||||
};
|
||||
|
||||
// TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
|
||||
@@ -1693,7 +1730,7 @@ export function useFetcher<TData = any>({
|
||||
|
||||
// Fetcher additions
|
||||
let load = React.useCallback(
|
||||
(href: string, opts?: { unstable_flushSync?: boolean }) => {
|
||||
(href: string, opts?: { flushSync?: boolean }) => {
|
||||
invariant(routeId, "No routeId available for fetcher.load()");
|
||||
router.fetch(fetcherKey, routeId, href, opts);
|
||||
},
|
||||
@@ -1986,7 +2023,7 @@ function useViewTransitionState(
|
||||
|
||||
invariant(
|
||||
vtContext != null,
|
||||
"`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. " +
|
||||
"`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. " +
|
||||
"Did you accidentally import `RouterProvider` from `react-router`?"
|
||||
);
|
||||
|
||||
@@ -2009,11 +2046,11 @@ function useViewTransitionState(
|
||||
// destination. This ensures that other PUSH navigations that reverse
|
||||
// an indicated transition apply. I.e., on the list view you have:
|
||||
//
|
||||
// <NavLink to="/details/1" unstable_viewTransition>
|
||||
// <NavLink to="/details/1" viewTransition>
|
||||
//
|
||||
// If you click the breadcrumb back to the list view:
|
||||
//
|
||||
// <NavLink to="/list" unstable_viewTransition>
|
||||
// <NavLink to="/list" viewTransition>
|
||||
//
|
||||
// We should apply the transition because it's indicated as active going
|
||||
// from /list -> /details/1 and therefore should be active on the reverse
|
||||
@@ -2024,6 +2061,6 @@ function useViewTransitionState(
|
||||
);
|
||||
}
|
||||
|
||||
export { useViewTransitionState as unstable_useViewTransitionState };
|
||||
export { useViewTransitionState as useViewTransitionState };
|
||||
|
||||
//#endregion
|
||||
|
||||
Reference in New Issue
Block a user