fix: rename useHref to createHref

gravity-ui · Nov 20, 2024 · 359eb97 · 359eb97
1 parent bca4a14
commit 359eb97
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/src/components/lab/router/README.md b/src/components/lab/router/README.md
@@ -14,7 +14,7 @@ import {unstable_RouterProvider as RouterProvider} from '@gravity-ui/uikit/unsta
 The following example shows the general pattern.
 
 ```jsx
-import {useNavigation, useHref} from 'your-router';
+import {useNavigation, createHref} from 'your-router';
 import {Link} from '@gravity-ui/uikit';
 import {unstable_RouterProvider as RouterProvider} from '@gravity-ui/uikit/unstable';
 
@@ -31,7 +31,7 @@ function App() {
   const navigate = useNavigation();
 
   return (
-    <RouterProvider navigate={navigate} useHref={useHref}>
+    <RouterProvider navigate={navigate} createHref={createHref}>
       <Link
         href={{to:"/posts/$postId", params: {postId: '1'}}}
         routerOptions={{replace: true}}
@@ -68,23 +68,54 @@ function App() {
 ### React Router v6
 
 ```jsx
-import {useNavigate, useHref} from 'react-router-dom';
-import {unstable_RouterProvider as RouterProvider} from '@gravity-ui/uikit/unstable';
+import {useNavigate, useHref, createBrowserRouter, RouterProvider} from 'react-router-dom';
+import {unstable_RouterProvider as UIKitRouterProvider} from '@gravity-ui/uikit/unstable';
 
-import type {NavigateOptions} from 'react-router-dom';
+import type {NavigateOptions, To} from 'react-router-dom';
 
 declare module '@gravity-ui/uikit' {
   interface RouterConfig {
+    href: To
     routerOptions: NavigateOptions
   }
 }
 
-function App() {
-  const navigate = useNavigate();
+function withRouterProvider(Component: React.ComponentType) {
+  return function RouterProviderComponent() {
+    const navigate = useNavigate();
+    return (
+      <UIKitRouterProvider navigate={navigate} createHref={useHref}>
+        <Component />
+      </UIKitRouterProvider>
+    );
+  }
+}
 
-  return (
-    <RouterProvider navigate={navigate} useHref={useHref}>{/*...*/}</RouterProvider>
-  );
+const router = createBrowserRouter([
+  {
+    path: '/',
+    Component: withRouterProvider(Layout),
+    children: [
+      {
+        path: '/',
+        Component: withRouterProvider(Home),
+      }
+      {
+        path: 'posts',
+        Component: withRouterProvider(Posts),
+        children: [
+          {
+            path: ':postId',
+            Component: withRouterProvider(Post),
+          }
+        ]
+      },
+    ],
+  },
+]);
+
+function App() {
+  return <RouterProvider router={router} />;
 }
 ```
 
@@ -162,7 +193,7 @@ function App() {
   return (
     <RouterProvider
       router={(to, opts) => router.navigate({...to, ...opts})}
-      useHref={(to) => router.buildLocation(to).href}
+      createHref={(to) => router.buildLocation(to).href}
     >
       {/*...*/}
     </RouterProvider>

diff --git a/src/components/lab/router/__stories__/RouterProvider.stories.tsx b/src/components/lab/router/__stories__/RouterProvider.stories.tsx
@@ -30,7 +30,7 @@ export const Default = {
         return (
             <RouterProvider
                 navigate={(href, opts) => console.log('Navigate to: ', {href, opts})}
-                useHref={(href: HrefType) =>
+                createHref={(href: HrefType) =>
                     typeof href === 'string' ? href : href.to.replace('$pastId', href.params.pastId)
                 }
             >

diff --git a/src/components/lab/router/router.tsx b/src/components/lab/router/router.tsx
@@ -9,21 +9,21 @@ interface RouterProps {
         href: Href,
         routerOptions: RouterOptions | undefined,
     ) => boolean;
-    useHref: (href: Href) => string;
+    useCreateHref: (href: Href, routerOptions?: RouterOptions) => string;
 }
 
 const routerContext = React.createContext<RouterProps>({
     openLink: () => false,
-    useHref: (href) => href,
+    useCreateHref: (href) => href,
 });
 
 export interface RouterProviderProps {
     navigate: (href: Href, routerOptions: RouterOptions | undefined) => void;
-    useHref?: (href: Href) => string;
+    createHref?: (href: Href, routerOptions?: RouterOptions) => string;
     children: React.ReactNode;
 }
 
-export function RouterProvider({navigate, useHref, children}: RouterProviderProps) {
+export function RouterProvider({navigate, createHref, children}: RouterProviderProps) {
     const value: RouterProps = React.useMemo(
         () => ({
             openLink: (link, modifiers, href, routerOptions) => {
@@ -33,9 +33,9 @@ export function RouterProvider({navigate, useHref, children}: RouterProviderProp
                 }
                 return false;
             },
-            useHref: useHref || ((href: Href) => href),
+            useCreateHref: createHref || ((href: Href) => href),
         }),
-        [navigate, useHref],
+        [navigate, createHref],
     );
 
     return <routerContext.Provider value={value}>{children}</routerContext.Provider>;
@@ -89,8 +89,8 @@ interface LinkProps {
 }
 
 export function useLinkProps(props: LinkProps) {
-    const {useHref, openLink} = useRouter();
-    const href = useHref(props.href ?? '');
+    const {useCreateHref, openLink} = useRouter();
+    const href = useCreateHref(props.href ?? '', props.routerOptions);
     return {
         href: props.href ? href : undefined,
         hrefLang: props.hrefLang,