Add support for handling child tab routes #1049
Conversation
Deployed to Cloudflare Pages
|
buberdds
changed the title
buberdds
force-pushed
the
mz/hierarchical-tabs
branch
from
328ad8f
to
a34ed8d
Compare
|
|
||
| if (!targetTab) { | ||
| /// the last index is the current route, -2 is the first parent in route hierarchy | ||
| const parentPathname = matches?.at(-2)?.pathname |
There was a problem hiding this comment.
Haven't run this, but hardcoding this to 2 level deep seems like a wrong approach. Can we take the first child of matches as the top parent? To support "true" hierarchy?
There was a problem hiding this comment.
oh yeah I just need to handle direct child routes - I've updated commit messages to be more specific. "The first child of matches" is root path '/' I am not sure how it can help. To handle any number of nested child routes we would need to do sth like: based on a current route, find an index in matches based on the closest to value in tabs array.
| @@ -18,13 +18,21 @@ function getPathname(tab: { to: string }) { | |||
|
|
|||
| export function RouterTabs<Context>({ tabs, context }: RouterTabsProps<Context>) { | |||
| const { pathname } = useLocation() | |||
| const currentTab = tabs.find(tab => getPathname(tab) === pathname) | |||
| let targetTab = tabs.find(tab => getPathname(tab) === pathname) | |||
| const matches = useMatches() | |||
There was a problem hiding this comment.
Ah, nice! If only there was also "useMatchAtCurrentOutletLevel"
| if (!targetTab) { | ||
| /// the last index is the current route, -2 is the first parent in route hierarchy | ||
| const parentPathname = matches?.at(-2)?.pathname | ||
| // route match does not include hash, so we need to remove it from comparison | ||
| targetTab = tabs.find(tab => tab.to.split('#')[0] === parentPathname) | ||
| } |
There was a problem hiding this comment.
(Difference between #910: this makes matchPartialPath? the default instead of optional. Makes sense. I think matching subpaths is expected behavior everywhere)
| @@ -18,13 +18,21 @@ function getPathname(tab: { to: string }) { | |||
|
|
|||
| export function RouterTabs<Context>({ tabs, context }: RouterTabsProps<Context>) { | |||
There was a problem hiding this comment.
Ideally add some tests, e.g. what tab is selected if tabs are
tabs = [
"/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90",
"/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/token-transfers#transfers",
"/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/tokens/erc-20#tokens",
"/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/tokens/erc-721#tokens",
"/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/code#code",
]if location is:
/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/tokens/erc-721
/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/tokens/erc-721/token1#token1
/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90/other
/mainnet/sapphire/address/oasis1qry5d5zxs58w9deu5ara5zaamhkzqtg99s00ls90#transfers
There was a problem hiding this comment.
I will add them once I will wrap up other NFT UI work.
buberdds
force-pushed
the
mz/hierarchical-tabs
branch
2 times, most recently
from
fd8cdd3
to
21e871f
Compare
buberdds
changed the title
buberdds
force-pushed
the
mz/hierarchical-tabs
branch
from
21e871f
to
6f47aa1
Compare
Alternate solution to #910
Keep router tab selected for a direct child route. Needed for NFT project.