Skip to content

Commit f4586a8

Browse files
layeroklayerok
committed
huge refactor
1 parent 07f4148 commit f4586a8

17 files changed

+345
-355
lines changed

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

+26-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { Sidebar } from "../../components/Sidebar/Sidebar.tsx";
22
import { Tabs } from "../../components/Tabs/Tabs.tsx";
33

44
import { TabStoreKey } from "../../constants/tabs.constants.ts";
5-
import { validateTabs, usePersistTabs } from "src/lib/tabs";
5+
import { validateTabPaths } from "src/lib/tabs/validateTabPaths.ts";
6+
import { usePersistTabs } from "src/lib/tabs/persist.tsx";
67

78
import { useEffect, useMemo, useRef, useState } from "react";
89

@@ -30,8 +31,8 @@ export function AdminLayout() {
3031
storageKey: persistStoreKey,
3132
});
3233

33-
const [tabs, setTabs] = useState(() =>
34-
validateTabs(getTabsFromStorage() || [], router),
34+
const [paths, setPaths] = useState(() =>
35+
validateTabPaths(getTabsFromStorage() || [], router),
3536
);
3637

3738
const config = useMemo(
@@ -43,31 +44,43 @@ export function AdminLayout() {
4344
[router],
4445
);
4546

46-
const { activeTabId, setActiveTabId, uiTabs } = useRouterTabs({
47+
const { tabs, activeTab } = useRouterTabs({
4748
router,
48-
tabs,
49-
onTabsChange: setTabs,
49+
paths,
50+
onPathsChange: setPaths,
5051
config: config,
51-
fallbackPath: homeRoute,
5252
});
5353

5454
useEffect(() => {
55-
return persistTabs(tabs);
56-
}, [tabs, persistTabs]);
55+
return persistTabs(paths);
56+
}, [paths, persistTabs]);
5757

58-
const setUiTabs = (uiTabs: TabModel[]) => {
59-
setTabs(uiTabs.map((uiTab) => uiTab.id));
58+
const setTabs = (tabs: TabModel[]) => {
59+
setPaths(tabs.map((tab) => tab.id));
6060
};
6161

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+
72+
const activeTabId = activeTab?.id;
73+
6274
return (
6375
<div css={layoutStyles}>
6476
<Sidebar />
6577
<div css={contentStyles}>
6678
<header css={headerStyles}>John Doe</header>
6779
<Tabs
6880
apiRef={apiRef}
69-
tabs={uiTabs.map((tab) => tab.properties)}
70-
onTabsChange={setUiTabs}
81+
tabs={tabs}
82+
initialTabs={tabs}
83+
onTabsChange={setTabs}
7184
hasControlledActiveTabId
7285
activeTabId={activeTabId}
7386
onActiveTabIdChange={setActiveTabId}

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

+30-28
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { Link, Outlet, useParams } from "react-router-dom";
1+
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";
4-
import { RouterTabModel, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
4+
import { RouterTabPath, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
55

66
import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
77
import { usePersistTabs } from "src/lib/tabs/persist.tsx";
88
import { localStorageDriver } from "src/lib/storage/local-storage.ts";
9-
import { validateTabs } from "src/lib/tabs";
9+
import { validateTabPaths } from "src/lib/tabs/validateTabPaths.ts";
1010
import { useDataRouterContext } from "src/hooks/useDataRouterContext.tsx";
1111
import {
1212
homeRoute,
@@ -29,15 +29,15 @@ export function CategoriesRoute() {
2929
storage: localStorageDriver,
3030
});
3131

32-
const defaultTabs: RouterTabModel[] = [categoriesListRoute];
32+
const defaultTabs: RouterTabPath[] = [categoriesListRoute];
3333

34-
const [tabs, setTabs] = useState<RouterTabModel[]>(() =>
35-
validateTabs(getTabsFromStorage() || defaultTabs, router),
34+
const [paths, setPaths] = useState<RouterTabPath[]>(() =>
35+
validateTabPaths(getTabsFromStorage() || defaultTabs, router),
3636
);
3737

3838
useEffect(() => {
39-
return persistTabs(tabs);
40-
}, [tabs, persistTabs]);
39+
return persistTabs(paths);
40+
}, [paths, persistTabs]);
4141

4242
const config = useMemo(
4343
() =>
@@ -48,35 +48,37 @@ export function CategoriesRoute() {
4848
[router],
4949
);
5050

51-
const { activeTabId, setActiveTabId, getTabPropertiesByTabPath } =
52-
useRouterTabs({
53-
router,
54-
config: config,
55-
fallbackPath: homeRoute,
56-
tabs,
57-
onTabsChange: setTabs,
58-
});
59-
60-
const uiTabs: TabModel[] = tabs.map((tab) => {
61-
return {
62-
id: tab,
63-
content: <Outlet />,
64-
title: getTabPropertiesByTabPath(tab)!.title,
65-
isClosable: false,
66-
};
51+
const { tabs, activeTab } = useRouterTabs({
52+
router,
53+
config,
54+
paths,
55+
onPathsChange: setPaths,
6756
});
6857

69-
const setUiTabs = (uiTabs: TabModel[]) => {
70-
setTabs(uiTabs.map((uiTab) => uiTab.id));
58+
const setTabs = (tabs: TabModel[]) => {
59+
setPaths(tabs.map((tab) => tab.id));
60+
};
61+
62+
const setActiveTabId = (id: string | undefined) => {
63+
setTimeout(() => {
64+
const [pathname, search] = (id || homeRoute).split("?");
65+
router.navigate({
66+
pathname,
67+
search,
68+
});
69+
});
7170
};
7271

72+
const activeTabId = activeTab?.id;
73+
7374
return (
7475
<div>
7576
<Tabs
7677
activeTabId={activeTabId}
7778
onActiveTabIdChange={setActiveTabId}
78-
tabs={uiTabs}
79-
onTabsChange={setUiTabs}
79+
tabs={tabs}
80+
initialTabs={tabs}
81+
onTabsChange={setTabs}
8082
hasControlledActiveTabId
8183
/>
8284
</div>

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

+28-17
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import { useEffect, useMemo, useState } from "react";
77

88
import { usePersistTabs } from "src/lib/tabs/persist.tsx";
99
import { localStorageDriver } from "src/lib/storage/local-storage.ts";
10-
import { validateTabs } from "src/lib/tabs";
10+
import { validateTabPaths } from "src/lib/tabs/validateTabPaths.ts";
1111
import { useDataRouterContext } from "src/hooks/useDataRouterContext.tsx";
1212
import {
1313
homeRoute,
1414
productDetailRoute,
1515
productsListRoute,
1616
} from "src/examples/basic/constants/routes.constants.ts";
1717
import { TabStoreKey } from "src/examples/basic/constants/tabs.constants.ts";
18-
import { RouterTabModel, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
18+
import { RouterTabPath, useRouterTabs } from "src/lib/tabs/useRouterTabs.tsx";
1919
import { convertRouteTreeToRouterTabsConfig } from "src/examples/basic/utils/convertRouteTreeToRouterTabsConfig.tsx";
2020

2121
const persistStoreKey = {
@@ -30,10 +30,10 @@ export function ProductsRoute() {
3030
storage: localStorageDriver,
3131
});
3232

33-
const defaultTabs: RouterTabModel[] = [productsListRoute];
33+
const defaultPaths: RouterTabPath[] = [productsListRoute];
3434

35-
const [tabs, setTabs] = useState(() =>
36-
validateTabs(getTabsFromStorage() || defaultTabs, router),
35+
const [paths, setPaths] = useState(() =>
36+
validateTabPaths(getTabsFromStorage() || defaultPaths, router),
3737
);
3838

3939
const config = useMemo(
@@ -45,28 +45,39 @@ export function ProductsRoute() {
4545
[router],
4646
);
4747

48-
const { activeTabId, setActiveTabId, uiTabs } = useRouterTabs({
48+
const { tabs, activeTab } = useRouterTabs({
4949
router,
50-
config: config,
51-
fallbackPath: homeRoute,
52-
tabs,
53-
onTabsChange: setTabs,
50+
config,
51+
paths,
52+
onPathsChange: setPaths,
5453
});
5554

5655
useEffect(() => {
57-
return persistTabs(tabs);
58-
}, [tabs, persistTabs]);
56+
return persistTabs(paths);
57+
}, [paths, persistTabs]);
5958

60-
const setUiTabs = (uiTabs: TabModel[]) => {
61-
setTabs(uiTabs.map((uiTab) => uiTab.id));
59+
const setTabs = (tabs: TabModel[]) => {
60+
setPaths(tabs.map((tab) => tab.id));
6261
};
6362

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+
73+
const activeTabId = activeTab?.id;
74+
6475
return (
6576
<div>
6677
<Tabs
67-
tabs={uiTabs.map((tab) => tab.properties)}
68-
initialTabs={uiTabs.map((tab) => tab.properties)}
69-
onTabsChange={setUiTabs}
78+
tabs={tabs}
79+
initialTabs={tabs}
80+
onTabsChange={setTabs}
7081
hasControlledActiveTabId
7182
activeTabId={activeTabId}
7283
onActiveTabIdChange={setActiveTabId}

‎src/examples/basic/types.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { DataRouteMatch } from "react-router-dom";
2-
import { RouterTabModel } from "src/lib/tabs/useRouterTabs.tsx";
2+
import { RouterTabPath } from "src/lib/tabs/useRouterTabs.tsx";
33

44
export type TabHandle = {
55
key: any;
66
title: (match: DataRouteMatch) => string;
7-
insertAt?: (models: RouterTabModel[]) => number;
7+
insertAt?: (paths: RouterTabPath[]) => number;
88
};
99

1010
export type Handle = {

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { flattenRoutes } from "src/lib/tabs/flattenRoutes.ts";
33
import { Handle } from "src/examples/basic/types.ts";
44
import { TabConfig } from "src/lib/tabs/useRouterTabs.tsx";
55
import { theBeginning } from "src/lib/tabs/theBeginning.ts";
6-
import { ReactNode } from "react";
6+
import { TabModel } from "src/lib/tabs-ui/tabs-ui.types.ts";
7+
import { whenRoutePathIs } from "src/lib/tabs/whenRoutePathIs.ts";
78

89
export const convertRouteTreeToRouterTabsConfig = (
910
tree: RouteObject[],
@@ -15,23 +16,18 @@ export const convertRouteTreeToRouterTabsConfig = (
1516
return (route.handle as Handle)?.tabs.find((tab) => tab.key === key);
1617
});
1718

18-
const config: TabConfig<{
19-
id: string;
20-
content: ReactNode;
21-
title: string;
22-
isClosable: boolean;
23-
}>[] = matchedRoutes.map((route) => {
19+
const config: TabConfig<TabModel>[] = matchedRoutes.map((route) => {
2420
const handle = route.handle as Handle;
2521
const tabMeta = handle.tabs.find((tab) => (tab.key = key));
2622

2723
return {
28-
properties: (match, path) => ({
24+
mapToUiState: (match, path) => ({
2925
id: path,
3026
isClosable: true,
3127
content: <Outlet />,
3228
title: tabMeta!.title(match),
3329
}),
34-
shouldOpen: (match) => match.route.id === route.id!,
30+
shouldOpen: whenRoutePathIs(route.id!),
3531
insertAt: tabMeta!.insertAt || theBeginning,
3632
};
3733
});

0 commit comments

Comments
 (0)