aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-04-13 13:46:51 -0300
committerSebastian <sebasjm@gmail.com>2022-04-13 13:46:51 -0300
commit5044db65955dc7aff74abc78fb7ec93e25e67b7e (patch)
tree1b8be43616a682ed831130139b356745a8e51c3a /packages
parent38e9e8fea246e8de9ee2afabe32d111aa2099bcb (diff)
green on focus, scroll fix
Diffstat (limited to 'packages')
-rw-r--r--packages/taler-wallet-webextension/src/stories.tsx61
1 files changed, 44 insertions, 17 deletions
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 (
- <dd id={eId} key={r.name}>
- <a href={`#${eId}`}>{r.name}</a>
+ <dd id={eId} key={r.name} data-selected={isSelected}>
+ <a
+ href={`#${eId}`}
+ onClick={(e) => {
+ e.preventDefault();
+ onSelectStory(r, eId);
+ }}
+ >
+ {r.name}
+ </a>
</dd>
);
})}
@@ -278,9 +301,9 @@ function ErrorReport({
return <Fragment>{children}</Fragment>;
}
-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<ExampleItem | undefined>(
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 {
<Page>
<SideBar>
{allExamples.map((e) => (
- <ExampleList key={e.title} name={e.title} list={e.list} />
+ <ExampleList
+ key={e.title}
+ name={e.title}
+ list={e.list}
+ selected={selected}
+ onSelectStory={(item, htmlId) => {
+ document.getElementById(htmlId)?.scrollIntoView({
+ block: "center",
+ });
+ updateSelected(item);
+ }}
+ />
))}
<hr />
</SideBar>