diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-18 12:35:36 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-18 12:35:36 -0300 |
commit | 62713c7e71e96e1f6875adb691927c68dc37dea7 (patch) | |
tree | 2e6cc58b7e9d94767eb2777ee9fa5228b55040cf /packages/taler-wallet-webextension/src/stories.tsx | |
parent | f5441a682d7e70c4b53820aa5b7cd62fd4e0ef54 (diff) | |
download | wallet-core-62713c7e71e96e1f6875adb691927c68dc37dea7.tar.xz |
prevent link nav
Diffstat (limited to 'packages/taler-wallet-webextension/src/stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 43 |
1 files changed, 37 insertions, 6 deletions
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 9fe0ca4e4..a032222a0 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -22,6 +22,7 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { ComponentChild, + ComponentChildren, Fragment, FunctionComponent, h, @@ -242,33 +243,63 @@ function ExampleList({ ); } +/** + * Prevents the UI from redirecting and inform the dev + * where the <a /> should have redirected + * @returns + */ +function PreventLinkNavigation({ + children, +}: { + children: ComponentChildren; +}): VNode { + return ( + <div + onClick={(e) => { + let t: any = e.target; + do { + if (t.localName === "a" && t.getAttribute("href")) { + alert(`should navigate to: ${t.attributes.href.value}`); + e.stopImmediatePropagation(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + } while ((t = t.parentNode)); + }} + > + {children} + </div> + ); +} + function getWrapperForGroup(group: string): FunctionComponent { switch (group) { case "popup": return function PopupWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <PopupNavBar /> <PopupBox>{children}</PopupBox> - </Fragment> + </PreventLinkNavigation> ); }; case "wallet": return function WalletWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <LogoHeader /> <WalletNavBar /> <WalletBox>{children}</WalletBox> - </Fragment> + </PreventLinkNavigation> ); }; case "cta": return function WalletWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <WalletBox>{children}</WalletBox> - </Fragment> + </PreventLinkNavigation> ); }; default: |