diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index e86240688..3f74cf11b 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -86,6 +86,12 @@ const SideBar = styled.div` dd:nth-child(odd) { background-color: lightblue; } + a { + color: black; + } + dd[data-selected] { + background-color: green; + } } } `; @@ -175,12 +181,16 @@ function getContentForExample(item: ExampleItem | undefined): () => VNode { function ExampleList({ name, list, + selected, + onSelectStory, }: { name: string; list: { name: string; examples: ExampleItem[]; }[]; + selected: ExampleItem | undefined; + onSelectStory: (i: ExampleItem, id: string) => void; }): VNode { const [open, setOpen] = useState(true); return ( @@ -194,9 +204,22 @@ function ExampleList({ {k.examples.map((r) => { const e = encodeURIComponent; const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`; + const isSelected = + selected && + selected.component === r.component && + selected.group === r.group && + selected.name === r.name; return ( -
- {r.name} +
+ { + e.preventDefault(); + onSelectStory(r, eId); + }} + > + {r.name} +
); })} @@ -278,9 +301,9 @@ function ErrorReport({ return {children}; } -function getSelectionFromLocationHash(): ExampleItem | undefined { - if (!location.hash) return undefined; - const parts = location.hash.substring(1).split("-"); +function getSelectionFromLocationHash(hash: string): ExampleItem | undefined { + if (!hash) return undefined; + const parts = hash.substring(1).split("-"); if (parts.length < 3) return undefined; return findByGroupComponentName( decodeURIComponent(parts[0]), @@ -290,27 +313,20 @@ function getSelectionFromLocationHash(): ExampleItem | undefined { } function Application(): VNode { - const initialSelection = getSelectionFromLocationHash(); + const initialSelection = getSelectionFromLocationHash(location.hash); const [selected, updateSelected] = useState( initialSelection, ); - - function updateSelectedFromHashChange(): void { - const selected = getSelectionFromLocationHash(); - updateSelected(selected); - } useEffect(() => { - window.addEventListener("hashchange", updateSelectedFromHashChange); if (location.hash) { const hash = location.hash.substring(1); const found = document.getElementById(hash); if (found) { - found.scrollIntoView(); + found.scrollIntoView({ + block: "center", + }); } } - return () => { - window.removeEventListener("hashchange", updateSelectedFromHashChange); - }; }, []); const ExampleContent = getContentForExample(selected); @@ -321,7 +337,18 @@ function Application(): VNode { {allExamples.map((e) => ( - + { + document.getElementById(htmlId)?.scrollIntoView({ + block: "center", + }); + updateSelected(item); + }} + /> ))}