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);
+ }}
+ />
))}