Anchor tag respects modifiers

stereosteve · stereosteve · commit 45ae2cd56dbc · 2021-04-16T07:14:42.000-04:00
Holding ctrl / alt when clicking link defers to default browser behavior. Also adds a test case to examples dir. Taken from next.js: https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L89
diff --git a/examples/anchor-links/app.tsx b/examples/anchor-links/app.tsx
@@ -0,0 +1,35 @@
+import React, { ComponentType } from 'react'
+
+const links = {
+  'Home': '/',
+  'About': '/about',
+  'Query 0': '/query',
+  'Query 1': '/query?q=hello&limit=10&offset=20',
+  'Pink': '/colors/pink',
+  'Orange': '/colors/orange',
+  'Teal': '/colors/teal',
+  'Dark Blue': '/colors/darkblue?text=yellow',
+  'Dark Green': '/colors/darkgreen?text=orange',
+}
+
+export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+  return (
+    <main>
+      <head>
+        <meta name="viewport" content="width=device-width" />
+        <style>{`
+          body {
+            font-family: sans-serif;
+          }
+          nav a {
+            margin: 10px;
+          }
+        `}</style>
+      </head>
+      <nav>
+        {Object.entries(links).map(([name, link]) => <a key={name} href={link}>{name}</a>)}
+      </nav>
+      <Page {...pageProps} />
+    </main>
+  )
+}
diff --git a/examples/anchor-links/pages/about.tsx b/examples/anchor-links/pages/about.tsx
@@ -0,0 +1,22 @@
+import { useDeno } from "framework/react"
+import React from "react"
+
+export default function About() {
+  const version = useDeno(() => Deno.version.deno)
+  return (
+    <div>
+      <head>
+        <title>About</title>
+        <style>{`
+          body {
+            background: pink;
+          }
+        `}</style>
+      </head>
+      <div>
+        <h1>About page</h1>
+        <p>Deno version: {version}</p>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/anchor-links/pages/colors/[name].tsx b/examples/anchor-links/pages/colors/[name].tsx
@@ -0,0 +1,27 @@
+import { useRouter } from "framework/react"
+import React from "react"
+
+export default function Query() {
+  const router = useRouter()
+  const color = router.params.name || 'white'
+  const textColor = router.query.get('text') || 'black'
+  return (
+    <div>
+      <head>
+        <title>Color: {color}</title>
+        <style>{`
+          body {
+            background: ${color};
+            color: ${textColor};
+          }
+          nav a {
+            color: ${textColor};
+          }
+        `}</style>
+      </head>
+      <div>
+        <h1>{color}</h1>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/anchor-links/pages/index.tsx b/examples/anchor-links/pages/index.tsx
@@ -0,0 +1,15 @@
+import { useDeno } from 'framework/react'
+import React from 'react'
+
+export default function Home() {
+  return (
+    <div>
+      <head>
+        <title>Home</title>
+      </head>
+      <div>
+        <h1>Home page</h1>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/anchor-links/pages/query.tsx b/examples/anchor-links/pages/query.tsx
@@ -0,0 +1,30 @@
+import { useDeno, useRouter } from "framework/react"
+import React from "react"
+
+export default function Query() {
+  const router = useRouter()
+  const debug = useDeno(() => {
+    const q = Object.fromEntries(router.query.entries())
+    return JSON.stringify(q, undefined, 2)
+  })
+  return (
+    <div>
+      <head>
+        <title>Query</title>
+        <style>{`
+          body {
+            background: #333;
+            color: lightgreen;
+          }
+          nav a {
+            color: teal;
+          }
+        `}</style>
+      </head>
+      <div>
+        <h1>Query:</h1>
+        <pre>{debug}</pre>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/hello-world-src-dir/src/pages/about.tsx b/examples/hello-world-src-dir/src/pages/about.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+
+export default function Home() {
+
+  return (
+    <div className="page">
+      <head>
+        <title>About Page - Aleph.js</title>
+        <link rel="stylesheet" href="../style/about.css" />
+      </head>
+      <h1>About Page</h1>
+      <a href="/">Back home</a>
+    </div>
+  )
+}
diff --git a/examples/hello-world-src-dir/src/style/about.css b/examples/hello-world-src-dir/src/style/about.css
@@ -0,0 +1,3 @@
+body {
+  background: pink;
+}
diff --git a/framework/react/components/Anchor.ts b/framework/react/components/Anchor.ts
@@ -113,7 +113,7 @@ export default function Anchor(props: AnchorProps) {
     if (util.isFunction(props.onMouseEnter)) {
       props.onMouseEnter(e)
     }
-    if (e.defaultPrevented) {
+    if (e.defaultPrevented || isModifiedEvent(e)) {
       return
     }
     e.preventDefault()
@@ -142,3 +142,16 @@ export default function Anchor(props: AnchorProps) {
     children
   )
 }
+
+function isModifiedEvent(event: React.MouseEvent): boolean {
+  const { target } = event.currentTarget as any
+  const nativeEvent = event.nativeEvent as any
+  return (
+    (target && target !== '_self') ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey || // triggers resource download
+    (nativeEvent && nativeEvent.which === 2)
+  )
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background: pink;`
	`3`	`+}`