UNPKG

@tanstack/react-router

Version:

Modern and scalable routing for React applications

1 lines 10.7 kB
{"version":3,"file":"useBlocker.cjs","names":[],"sources":["../../src/useBlocker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type {\n BlockerFnArgs,\n HistoryAction,\n HistoryLocation,\n} from '@tanstack/history'\nimport type {\n AnyRoute,\n AnyRouter,\n ParseRoute,\n RegisteredRouter,\n} from '@tanstack/router-core'\n\ntype ShouldBlockFnLocation<\n out TRouteId,\n out TFullPath,\n out TAllParams,\n out TFullSearchSchema,\n> = {\n routeId: TRouteId\n fullPath: TFullPath\n pathname: string\n params: TAllParams\n search: TFullSearchSchema\n}\n\ntype AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>\ntype MakeShouldBlockFnLocationUnion<\n TRouter extends AnyRouter = RegisteredRouter,\n TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n ? ShouldBlockFnLocation<\n TRoute['id'],\n TRoute['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema']\n >\n : never\n\ntype BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =\n | {\n status: 'blocked'\n current: MakeShouldBlockFnLocationUnion<TRouter>\n next: MakeShouldBlockFnLocationUnion<TRouter>\n action: HistoryAction\n proceed: () => void\n reset: () => void\n }\n | {\n status: 'idle'\n current: undefined\n next: undefined\n action: undefined\n proceed: undefined\n reset: undefined\n }\n\ntype ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {\n current: MakeShouldBlockFnLocationUnion<TRouter>\n next: MakeShouldBlockFnLocationUnion<TRouter>\n action: HistoryAction\n}\n\nexport type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (\n args: ShouldBlockFnArgs<TRouter>,\n) => boolean | Promise<boolean>\nexport type UseBlockerOpts<\n TRouter extends AnyRouter = RegisteredRouter,\n TWithResolver extends boolean = boolean,\n> = {\n shouldBlockFn: ShouldBlockFn<TRouter>\n enableBeforeUnload?: boolean | (() => boolean)\n disabled?: boolean\n withResolver?: TWithResolver\n}\n\ntype LegacyBlockerFn = () => Promise<any> | any\ntype LegacyBlockerOpts = {\n blockerFn?: LegacyBlockerFn\n condition?: boolean | any\n}\n\nfunction _resolveBlockerOpts(\n opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,\n condition?: boolean | any,\n): UseBlockerOpts {\n if (opts === undefined) {\n return {\n shouldBlockFn: () => true,\n withResolver: false,\n }\n }\n\n if ('shouldBlockFn' in opts) {\n return opts\n }\n\n if (typeof opts === 'function') {\n const shouldBlock = Boolean(condition ?? true)\n\n const _customBlockerFn = async () => {\n if (shouldBlock) return await opts()\n return false\n }\n\n return {\n shouldBlockFn: _customBlockerFn,\n enableBeforeUnload: shouldBlock,\n withResolver: false,\n }\n }\n\n const shouldBlock = Boolean(opts.condition ?? true)\n const fn = opts.blockerFn\n\n const _customBlockerFn = async () => {\n if (shouldBlock && fn !== undefined) {\n return await fn()\n }\n return shouldBlock\n }\n\n return {\n shouldBlockFn: _customBlockerFn,\n enableBeforeUnload: shouldBlock,\n withResolver: fn === undefined,\n }\n}\n\nexport function useBlocker<\n TRouter extends AnyRouter = RegisteredRouter,\n TWithResolver extends boolean = false,\n>(\n opts: UseBlockerOpts<TRouter, TWithResolver>,\n): TWithResolver extends true ? BlockerResolver<TRouter> : void\n\n/**\n * @deprecated Use the shouldBlockFn property instead\n */\nexport function useBlocker(blockerFnOrOpts?: LegacyBlockerOpts): BlockerResolver\n\n/**\n * @deprecated Use the UseBlockerOpts object syntax instead\n */\nexport function useBlocker(\n blockerFn?: LegacyBlockerFn,\n condition?: boolean | any,\n): BlockerResolver\n\nexport function useBlocker(\n opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,\n condition?: boolean | any,\n): BlockerResolver | void {\n const {\n shouldBlockFn,\n enableBeforeUnload = true,\n disabled = false,\n withResolver = false,\n } = _resolveBlockerOpts(opts, condition)\n\n const router = useRouter()\n const { history } = router\n\n const [resolver, setResolver] = React.useState<BlockerResolver>({\n status: 'idle',\n current: undefined,\n next: undefined,\n action: undefined,\n proceed: undefined,\n reset: undefined,\n })\n\n React.useEffect(() => {\n const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {\n function getLocation(\n location: HistoryLocation,\n ): AnyShouldBlockFnLocation {\n const parsedLocation = router.parseLocation(location)\n const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)\n if (matchedRoutes.foundRoute === undefined) {\n return {\n routeId: '__notFound__',\n fullPath: parsedLocation.pathname,\n pathname: parsedLocation.pathname,\n params: matchedRoutes.routeParams,\n search: router.options.parseSearch(location.search),\n }\n }\n\n return {\n routeId: matchedRoutes.foundRoute.id,\n fullPath: matchedRoutes.foundRoute.fullPath,\n pathname: parsedLocation.pathname,\n params: matchedRoutes.routeParams,\n search: router.options.parseSearch(location.search),\n }\n }\n\n const current = getLocation(blockerFnArgs.currentLocation)\n const next = getLocation(blockerFnArgs.nextLocation)\n\n if (\n current.routeId === '__notFound__' &&\n next.routeId !== '__notFound__'\n ) {\n return false\n }\n\n const shouldBlock = await shouldBlockFn({\n action: blockerFnArgs.action,\n current,\n next,\n })\n if (!withResolver) {\n return shouldBlock\n }\n\n if (!shouldBlock) {\n return false\n }\n\n const promise = new Promise<boolean>((resolve) => {\n setResolver({\n status: 'blocked',\n current,\n next,\n action: blockerFnArgs.action,\n proceed: () => resolve(false),\n reset: () => resolve(true),\n })\n })\n\n const canNavigateAsync = await promise\n setResolver({\n status: 'idle',\n current: undefined,\n next: undefined,\n action: undefined,\n proceed: undefined,\n reset: undefined,\n })\n\n return canNavigateAsync\n }\n\n return disabled\n ? undefined\n : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })\n }, [\n shouldBlockFn,\n enableBeforeUnload,\n disabled,\n withResolver,\n history,\n router,\n ])\n\n return resolver\n}\n\nconst _resolvePromptBlockerArgs = (\n props: PromptProps | LegacyPromptProps,\n): UseBlockerOpts => {\n if ('shouldBlockFn' in props) {\n return { ...props }\n }\n\n const shouldBlock = Boolean(props.condition ?? true)\n const fn = props.blockerFn\n\n const _customBlockerFn = async () => {\n if (shouldBlock && fn !== undefined) {\n return await fn()\n }\n return shouldBlock\n }\n\n return {\n shouldBlockFn: _customBlockerFn,\n enableBeforeUnload: shouldBlock,\n withResolver: fn === undefined,\n }\n}\n\nexport function Block<\n TRouter extends AnyRouter = RegisteredRouter,\n TWithResolver extends boolean = boolean,\n>(opts: PromptProps<TRouter, TWithResolver>): React.ReactNode\n\n/**\n * @deprecated Use the UseBlockerOpts property instead\n */\nexport function Block(opts: LegacyPromptProps): React.ReactNode\n\nexport function Block(opts: PromptProps | LegacyPromptProps): React.ReactNode {\n const { children, ...rest } = opts\n const args = _resolvePromptBlockerArgs(rest)\n\n const resolver = useBlocker(args)\n return children\n ? typeof children === 'function'\n ? children(resolver as any)\n : children\n : null\n}\n\ntype LegacyPromptProps = {\n blockerFn?: LegacyBlockerFn\n condition?: boolean | any\n children?: React.ReactNode | ((params: BlockerResolver) => React.ReactNode)\n}\n\ntype PromptProps<\n TRouter extends AnyRouter = RegisteredRouter,\n TWithResolver extends boolean = boolean,\n TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,\n> = UseBlockerOpts<TRouter, TWithResolver> & {\n children?: React.ReactNode | ((params: TParams) => React.ReactNode)\n}\n"],"mappings":"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"}