Skip to content

Commit 7b25b93

Browse files
layeroklayerok
committed
do not use full tab path as a tab key
1 parent 7438074 commit 7b25b93

File tree

8 files changed

+153
-150
lines changed

8 files changed

+153
-150
lines changed

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

+5-11
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { homeRoute } from "../../constants/routes.constants.ts";
1414
import { css } from "@emotion/react";
1515
import { useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
1616
import { convertRouteTreeToRouterTabsConfig } from "src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx";
17-
import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
1817
import { TabsApi } from "src/lib/tabs-ui/useTabs.tsx";
1918

2019
const persistStoreKey = {
@@ -44,24 +43,19 @@ export function AdminLayout() {
4443
[router],
4544
);
4645

47-
const { tabs, activeTab, setActivePath } = useRouterTabs({
46+
const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
4847
router,
4948
paths,
5049
onPathsChange: setPaths,
51-
undefinedPath: homeRoute,
50+
undefinedKeyPath: homeRoute,
5251
config: config,
52+
getUiModelKey: (model) => model.id,
5353
});
5454

5555
useEffect(() => {
5656
return persistTabs(paths);
5757
}, [paths, persistTabs]);
5858

59-
const setTabs = (tabs: TabModel[]) => {
60-
setPaths(tabs.map((tab) => tab.id));
61-
};
62-
63-
const activeTabId = activeTab?.id;
64-
6559
return (
6660
<div css={layoutStyles}>
6761
<Sidebar />
@@ -73,8 +67,8 @@ export function AdminLayout() {
7367
initialTabs={tabs}
7468
onTabsChange={setTabs}
7569
hasControlledActiveTabId
76-
activeTabId={activeTabId}
77-
onActiveTabIdChange={setActivePath}
70+
activeTabId={activeTabKey}
71+
onActiveTabIdChange={setActiveTabKey}
7872
/>
7973
</div>
8074
</div>

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

+5-12
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { Link, useParams } from "react-router-dom";
22
import { useEffect, useMemo, useState } from "react";
33
import { Tabs } from "src/examples/basic/components/Tabs/Tabs.tsx";
44
import { RouterTabPath, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
5-
6-
import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
75
import { usePersistTabs } from "src/lib/tabs/usePersistTabs.tsx";
86
import { localStorageDriver } from "src/lib/storage/local-storage.ts";
97
import { validateTabPaths } from "src/lib/tabs/validateTabPaths.ts";
@@ -48,25 +46,20 @@ export function CategoriesRoute() {
4846
[router],
4947
);
5048

51-
const { tabs, activeTab, setActivePath } = useRouterTabs({
49+
const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
5250
router,
5351
config,
5452
paths,
5553
onPathsChange: setPaths,
56-
undefinedPath: homeRoute,
54+
undefinedKeyPath: homeRoute,
55+
getUiModelKey: (model) => model.id,
5756
});
5857

59-
const setTabs = (tabs: TabModel[]) => {
60-
setPaths(tabs.map((tab) => tab.id));
61-
};
62-
63-
const activeTabId = activeTab?.id;
64-
6558
return (
6659
<div>
6760
<Tabs
68-
activeTabId={activeTabId}
69-
onActiveTabIdChange={setActivePath}
61+
activeTabId={activeTabKey}
62+
onActiveTabIdChange={setActiveTabKey}
7063
tabs={tabs}
7164
initialTabs={tabs}
7265
onTabsChange={setTabs}

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

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Tabs } from "src/examples/basic/components/Tabs/Tabs.tsx";
22
import { replacePathParams } from "src/utils/replacePathParams.ts";
3-
import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
43

54
import { Link, useParams } from "react-router-dom";
65
import { useEffect, useMemo, useState } from "react";
@@ -45,33 +44,28 @@ export function ProductsRoute() {
4544
[router],
4645
);
4746

48-
const { tabs, activeTab, setActivePath } = useRouterTabs({
47+
const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
4948
router,
5049
config,
5150
paths,
5251
onPathsChange: setPaths,
53-
undefinedPath: homeRoute,
52+
undefinedKeyPath: homeRoute,
53+
getUiModelKey: (model) => model.id,
5454
});
5555

5656
useEffect(() => {
5757
return persistTabs(paths);
5858
}, [paths, persistTabs]);
5959

60-
const setTabs = (tabs: TabModel[]) => {
61-
setPaths(tabs.map((tab) => tab.id));
62-
};
63-
64-
const activeTabId = activeTab?.id;
65-
6660
return (
6761
<div>
6862
<Tabs
6963
tabs={tabs}
7064
initialTabs={tabs}
7165
onTabsChange={setTabs}
7266
hasControlledActiveTabId
73-
activeTabId={activeTabId}
74-
onActiveTabIdChange={setActivePath}
67+
activeTabId={activeTabKey}
68+
onActiveTabIdChange={setActiveTabKey}
7569
/>
7670
</div>
7771
);

‎src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ import { whenRoutePathIs } from "src/lib/tabs/whenRoutePathIs.ts";
99
export const convertRouteTreeToRouterTabsConfig = (
1010
tree: RouteObject[],
1111
key: any,
12-
) => {
12+
): TabDefinition<TabModel>[] => {
1313
const flatRoutes = flattenRoutes(tree);
1414

1515
const matchedRoutes = flatRoutes.filter((route) => {
1616
return (route.handle as Handle)?.tabs.find((tab) => tab.key === key);
1717
});
1818

19-
const config: TabDefinition<TabModel>[] = matchedRoutes.map((route) => {
19+
return matchedRoutes.map((route) => {
2020
const handle = route.handle as Handle;
2121
const tabMeta = handle.tabs.find((tab) => (tab.key = key));
2222

2323
return {
24-
mapToUiState: (match, path) => ({
25-
id: path,
24+
mapToUiModel: (key, match) => ({
25+
id: key,
2626
title: tabMeta!.title(match),
2727
isClosable: true,
2828
content: <Outlet />,
@@ -31,5 +31,4 @@ export const convertRouteTreeToRouterTabsConfig = (
3131
insertAt: tabMeta!.insertAt || theBeginning,
3232
};
3333
});
34-
return config;
3534
};

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

+14-19
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ export function AdminLayout() {
4242

4343
const [config] = useState<TabDefinition<TabModel>[]>(() => [
4444
{
45-
mapToUiState: (_, path) => ({
46-
id: path,
45+
mapToUiModel: (key) => ({
46+
id: key,
4747
title: "Dashboard",
4848
content: <Outlet />,
4949
isClosable: true,
@@ -52,8 +52,8 @@ export function AdminLayout() {
5252
insertAt: theBeginning,
5353
},
5454
{
55-
mapToUiState: (_, path) => ({
56-
id: path,
55+
mapToUiModel: (key) => ({
56+
id: key,
5757
title: "Categories",
5858
content: <Outlet />,
5959
isClosable: true,
@@ -62,8 +62,8 @@ export function AdminLayout() {
6262
insertAt: theBeginning,
6363
},
6464
{
65-
mapToUiState: (_, path) => ({
66-
id: path,
65+
mapToUiModel: (key) => ({
66+
id: key,
6767
title: "Products",
6868
content: <Outlet />,
6969
isClosable: true,
@@ -72,8 +72,8 @@ export function AdminLayout() {
7272
insertAt: theBeginning,
7373
},
7474
{
75-
mapToUiState: (_, path) => ({
76-
id: path,
75+
mapToUiModel: (key) => ({
76+
id: key,
7777
title: "Suppliers",
7878
content: <Outlet />,
7979
isClosable: true,
@@ -83,24 +83,19 @@ export function AdminLayout() {
8383
},
8484
]);
8585

86-
const { tabs, activeTab, setActivePath } = useRouterTabs({
86+
const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
8787
router,
8888
config,
8989
paths,
90-
undefinedPath: homeRoute,
90+
undefinedKeyPath: homeRoute,
9191
onPathsChange: setPaths,
92+
getUiModelKey: (model) => model.id,
9293
});
9394

9495
useEffect(() => {
9596
return persistTabs(paths);
9697
}, [paths, persistTabs]);
9798

98-
const activeTabId = activeTab?.id;
99-
100-
const setTabs = (tabs: TabModel[]) => {
101-
setPaths(tabs.map((tab) => tab.id));
102-
};
103-
10499
return (
105100
<div css={layoutStyles}>
106101
<header css={headerStyles}>John Doe</header>
@@ -111,11 +106,11 @@ export function AdminLayout() {
111106
<Tabs
112107
tabs={tabs}
113108
onTabsChange={setTabs}
114-
initialActiveTabId={activeTabId}
109+
initialActiveTabId={activeTabKey}
115110
initialTabs={tabs}
116111
hasControlledActiveTabId
117-
activeTabId={activeTabId}
118-
onActiveTabIdChange={setActivePath}
112+
activeTabId={activeTabKey}
113+
onActiveTabIdChange={setActiveTabKey}
119114
/>
120115
</div>
121116
</div>

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

+10-13
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export function CategoriesRoute() {
4646
const config = useMemo<TabDefinition<TabModel>[]>(
4747
() => [
4848
{
49-
mapToUiState: (_, path) => ({
50-
id: path,
49+
mapToUiModel: (key) => ({
50+
id: key,
5151
title: "All Categories",
5252
content: <Outlet />,
5353
isClosable: false,
@@ -56,8 +56,8 @@ export function CategoriesRoute() {
5656
insertAt: theBeginning,
5757
},
5858
{
59-
mapToUiState: (match, path) => ({
60-
id: path,
59+
mapToUiModel: (key, match) => ({
60+
id: key,
6161
title: (() => {
6262
const category = categories.find(
6363
(category) => String(category.id) == match.params.id,
@@ -74,28 +74,25 @@ export function CategoriesRoute() {
7474
[],
7575
);
7676

77-
const { tabs, activeTab, setActivePath } = useRouterTabs({
77+
const { tabs, setTabs, activeTabKey, setActiveTabKey } = useRouterTabs({
7878
router,
7979
config,
8080
paths,
8181
onPathsChange: setPaths,
82-
undefinedPath: homeRoute,
82+
undefinedKeyPath: homeRoute,
83+
getUiModelKey: (model) => model.id,
8384
});
8485

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

89-
const setTabs = (tabs: TabModel[]) => {
90-
setPaths(tabs.map((tab) => tab.id));
91-
};
92-
9390
return (
9491
<div css={layoutStyles}>
9592
<Tabs
96-
activeTabId={activeTab?.id}
97-
initialActiveTabId={activeTab?.id}
98-
onActiveTabIdChange={setActivePath}
93+
activeTabId={activeTabKey}
94+
initialActiveTabId={activeTabKey}
95+
onActiveTabIdChange={setActiveTabKey}
9996
tabs={tabs}
10097
initialTabs={tabs}
10198
onTabsChange={setTabs}

0 commit comments

Comments
 (0)