Skip to content

Commit 45310bf

Browse files
layeroklayerok
committed
refactor
1 parent 1e23738 commit 45310bf

File tree

7 files changed

+39
-102
lines changed

7 files changed

+39
-102
lines changed

‎src/examples/basic/components/AdminLayout/AdminLayout.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,11 @@ export function AdminLayout() {
4646

4747
console.log("config", config);
4848

49-
const { tabs, activeTab } = useRouterTabs({
49+
const { tabs, activeTab, setActivePath } = useRouterTabs({
5050
router,
5151
paths,
5252
onPathsChange: setPaths,
53+
undefinedPath: homeRoute,
5354
config: config,
5455
});
5556

@@ -61,16 +62,6 @@ export function AdminLayout() {
6162
setPaths(tabs.map((tab) => tab.id));
6263
};
6364

64-
const setActiveTabId = (id: string | undefined) => {
65-
setTimeout(() => {
66-
const [pathname, search] = (id || homeRoute).split("?");
67-
router.navigate({
68-
pathname,
69-
search,
70-
});
71-
});
72-
};
73-
7465
const activeTabId = activeTab?.id;
7566

7667
return (
@@ -85,7 +76,7 @@ export function AdminLayout() {
8576
onTabsChange={setTabs}
8677
hasControlledActiveTabId
8778
activeTabId={activeTabId}
88-
onActiveTabIdChange={setActiveTabId}
79+
onActiveTabIdChange={setActivePath}
8980
/>
9081
</div>
9182
</div>

‎src/examples/basic/routes/CategoriesRoute.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -48,34 +48,25 @@ export function CategoriesRoute() {
4848
[router],
4949
);
5050

51-
const { tabs, activeTab } = useRouterTabs({
51+
const { tabs, activeTab, setActivePath } = useRouterTabs({
5252
router,
5353
config,
5454
paths,
5555
onPathsChange: setPaths,
56+
undefinedPath: homeRoute,
5657
});
5758

5859
const setTabs = (tabs: TabModel[]) => {
5960
setPaths(tabs.map((tab) => tab.id));
6061
};
6162

62-
const setActiveTabId = (id: string | undefined) => {
63-
setTimeout(() => {
64-
const [pathname, search] = (id || homeRoute).split("?");
65-
router.navigate({
66-
pathname,
67-
search,
68-
});
69-
});
70-
};
71-
7263
const activeTabId = activeTab?.id;
7364

7465
return (
7566
<div>
7667
<Tabs
7768
activeTabId={activeTabId}
78-
onActiveTabIdChange={setActiveTabId}
69+
onActiveTabIdChange={setActivePath}
7970
tabs={tabs}
8071
initialTabs={tabs}
8172
onTabsChange={setTabs}

‎src/examples/basic/routes/ProductsRoute.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,12 @@ export function ProductsRoute() {
4545
[router],
4646
);
4747

48-
const { tabs, activeTab } = useRouterTabs({
48+
const { tabs, activeTab, setActivePath } = useRouterTabs({
4949
router,
5050
config,
5151
paths,
5252
onPathsChange: setPaths,
53+
undefinedPath: homeRoute,
5354
});
5455

5556
useEffect(() => {
@@ -60,16 +61,6 @@ export function ProductsRoute() {
6061
setPaths(tabs.map((tab) => tab.id));
6162
};
6263

63-
const setActiveTabId = (id: string | undefined) => {
64-
setTimeout(() => {
65-
const [pathname, search] = (id || homeRoute).split("?");
66-
router.navigate({
67-
pathname,
68-
search,
69-
});
70-
});
71-
};
72-
7364
const activeTabId = activeTab?.id;
7465

7566
return (
@@ -80,7 +71,7 @@ export function ProductsRoute() {
8071
onTabsChange={setTabs}
8172
hasControlledActiveTabId
8273
activeTabId={activeTabId}
83-
onActiveTabIdChange={setActiveTabId}
74+
onActiveTabIdChange={setActivePath}
8475
/>
8576
</div>
8677
);

‎src/examples/clip-one/components/AdminLayout/AdminLayout.tsx

+5-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Sidebar } from "../Sidebar/Sidebar.tsx";
22
import { Tabs } from "../Tabs/Tabs.tsx";
3-
import { ReactNode, useEffect, useState } from "react";
3+
import { useEffect, useState } from "react";
44

55
import { useDataRouterContext } from "src/hooks/useDataRouterContext.tsx";
66
import {
@@ -29,13 +29,6 @@ const persistStoreKey = {
2929
version: "4.0",
3030
};
3131

32-
type Properties = {
33-
id: string;
34-
title: string;
35-
content: ReactNode;
36-
isClosable: boolean;
37-
};
38-
3932
export function AdminLayout() {
4033
const { router } = useDataRouterContext();
4134
const { getTabsFromStorage, persistTabs } = usePersistTabs({
@@ -47,7 +40,7 @@ export function AdminLayout() {
4740
validateTabPaths(getTabsFromStorage() || [], router),
4841
);
4942

50-
const [config] = useState<TabDefinition<Properties>[]>(() => [
43+
const [config] = useState<TabDefinition<TabModel>[]>(() => [
5144
{
5245
mapToUiState: (_, path) => ({
5346
id: path,
@@ -90,27 +83,18 @@ export function AdminLayout() {
9083
},
9184
]);
9285

93-
const { tabs, activeTab } = useRouterTabs<Properties>({
86+
const { tabs, activeTab, setActivePath } = useRouterTabs({
9487
router,
9588
config,
9689
paths,
90+
undefinedPath: homeRoute,
9791
onPathsChange: setPaths,
9892
});
9993

10094
useEffect(() => {
10195
return persistTabs(paths);
10296
}, [paths, persistTabs]);
10397

104-
const setActiveTabId = (id: string | undefined) => {
105-
setTimeout(() => {
106-
const [pathname, search] = (id || homeRoute).split("?");
107-
router.navigate({
108-
pathname,
109-
search,
110-
});
111-
});
112-
};
113-
11498
const activeTabId = activeTab?.id;
11599

116100
const setTabs = (tabs: TabModel[]) => {
@@ -131,7 +115,7 @@ export function AdminLayout() {
131115
initialTabs={tabs}
132116
hasControlledActiveTabId
133117
activeTabId={activeTabId}
134-
onActiveTabIdChange={setActiveTabId}
118+
onActiveTabIdChange={setActivePath}
135119
/>
136120
</div>
137121
</div>

‎src/examples/clip-one/routes/CategoriesRoute.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -74,27 +74,18 @@ export function CategoriesRoute() {
7474
[],
7575
);
7676

77-
const { tabs, activeTab } = useRouterTabs({
77+
const { tabs, activeTab, setActivePath } = useRouterTabs({
7878
router,
7979
config,
8080
paths,
8181
onPathsChange: setPaths,
82+
undefinedPath: homeRoute,
8283
});
8384

8485
useEffect(() => {
8586
return persistTabs(paths);
8687
}, [paths, persistTabs]);
8788

88-
const setActiveTabId = (id: string | undefined) => {
89-
setTimeout(() => {
90-
const [pathname, search] = (id || homeRoute).split("?");
91-
router.navigate({
92-
pathname,
93-
search,
94-
});
95-
});
96-
};
97-
9889
const setTabs = (tabs: TabModel[]) => {
9990
setPaths(tabs.map((tab) => tab.id));
10091
};
@@ -104,7 +95,7 @@ export function CategoriesRoute() {
10495
<Tabs
10596
activeTabId={activeTab?.id}
10697
initialActiveTabId={activeTab?.id}
107-
onActiveTabIdChange={setActiveTabId}
98+
onActiveTabIdChange={setActivePath}
10899
tabs={tabs}
109100
initialTabs={tabs}
110101
onTabsChange={setTabs}

‎src/examples/clip-one/routes/ProductsRoute.tsx

+6-25
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function ProductsRoute() {
4848
validateTabPaths(getTabsFromStorage() || defaultTabs, router),
4949
);
5050

51-
const { tabs, activeTab } = useRouterTabs({
51+
const { tabs, activeTab, setActivePath } = useRouterTabs({
5252
router,
5353
config: useMemo(
5454
() => [
@@ -92,6 +92,7 @@ export function ProductsRoute() {
9292
),
9393
paths,
9494
onPathsChange: setPaths,
95+
undefinedPath: homeRoute,
9596
});
9697

9798
useEffect(() => {
@@ -102,16 +103,6 @@ export function ProductsRoute() {
102103
setPaths(tabs.map((tab) => tab.id));
103104
};
104105

105-
const setActiveTabId = (id: string | undefined) => {
106-
setTimeout(() => {
107-
const [pathname, search] = (id || homeRoute).split("?");
108-
router.navigate({
109-
pathname,
110-
search,
111-
});
112-
});
113-
};
114-
115106
const activeTabId = activeTab?.id;
116107

117108
return (
@@ -123,7 +114,7 @@ export function ProductsRoute() {
123114
hasControlledActiveTabId
124115
activeTabId={activeTabId}
125116
initialActiveTabId={activeTabId}
126-
onActiveTabIdChange={setActiveTabId}
117+
onActiveTabIdChange={setActivePath}
127118
/>
128119
</div>
129120
);
@@ -211,27 +202,17 @@ export function ProductDetailRoute() {
211202
[],
212203
);
213204

214-
const { tabs, activeTab } = useRouterTabs({
205+
const { tabs, activeTab, setActivePath } = useRouterTabs({
215206
router,
216207
config,
217208
paths,
218209
onPathsChange: setPaths,
210+
undefinedPath: homeRoute,
219211
});
220212

221213
const setTabs = (tabs: TabModel[]) => {
222214
setPaths(tabs.map((tab) => tab.id));
223215
};
224-
225-
const setActiveTabId = (id: string | undefined) => {
226-
setTimeout(() => {
227-
const [pathname, search] = (id || homeRoute).split("?");
228-
router.navigate({
229-
pathname,
230-
search,
231-
});
232-
});
233-
};
234-
235216
const activeTabId = activeTab?.id;
236217

237218
return (
@@ -243,7 +224,7 @@ export function ProductDetailRoute() {
243224
initialActiveTabId={activeTabId}
244225
hasControlledActiveTabId
245226
activeTabId={activeTabId}
246-
onActiveTabIdChange={setActiveTabId}
227+
onActiveTabIdChange={setActivePath}
247228
/>
248229
</div>
249230
);

‎src/lib/tabs/useRouterTabs.tsx

+16-8
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ type MatchRouterTabResult = {
2424
match: DataRouteMatch;
2525
};
2626

27-
export const matchRouterTab = (
27+
export const matchRouterTab = <UiState extends ValidUiState = ValidUiState>(
2828
matches: DataRouteMatch[],
29-
config: TabDefinition[],
29+
config: TabDefinition<UiState>[],
3030
): MatchRouterTabResult | undefined => {
3131
for (let i = matches.length - 1; i > -1; i--) {
3232
const match = matches[i];
@@ -48,8 +48,9 @@ export const useRouterTabs = <
4848
config: TabDefinition<UiState>[];
4949
onPathsChange?: PathsChangeCallback;
5050
paths: RouterTabPath[];
51+
undefinedPath: string;
5152
}) => {
52-
const { onPathsChange, paths, config, router } = options;
53+
const { onPathsChange, paths, config, router, undefinedPath } = options;
5354

5455
const isOpenFor = useCallback(
5556
(match: DataRouteMatch) => (path: string) => {
@@ -85,7 +86,7 @@ export const useRouterTabs = <
8586
const getNextPaths = (prevPaths: RouterTabPath[]) => {
8687
const tab = prevPaths.find(isOpenFor(matchResult.match));
8788

88-
const path = getUrl(location);
89+
const path = getPathFromLocation(location);
8990

9091
if (tab) {
9192
// update the tab path
@@ -126,18 +127,25 @@ export const useRouterTabs = <
126127
.map(toUiState)
127128
.filter((tab): tab is UiState => Boolean(tab));
128129

129-
const activeTab = toUiState(getUrl(router.state.location)) as
130+
const setActivePath = (path: string | undefined) => {
131+
setTimeout(() => {
132+
router.navigate(path || undefinedPath);
133+
});
134+
};
135+
136+
const activeTab = toUiState(getPathFromLocation(router.state.location)) as
130137
| UiState
131138
| undefined;
132139

133140
return {
134141
tabs,
135142
activeTab,
143+
setActivePath,
136144
};
137145
};
138146

139-
const getUrl = (location: Location) => {
140-
const { pathname, search } = location;
147+
const getPathFromLocation = (location: Location) => {
148+
const { pathname, search, hash } = location;
141149

142-
return normalizePathname(pathname) + search;
150+
return normalizePathname(pathname) + search + hash;
143151
};

0 commit comments

Comments
 (0)