feat(Link): simplify & optimize

GaiAma · Dec 15, 2019 · 1d97c18 · 1d97c18
1 parent 4023aeb
commit 1d97c18
Showing 1 changed file with 127 additions and 77 deletions.
diff --git a/src/components/Link.js b/src/components/Link.js
@@ -1,8 +1,10 @@
 /* global window */
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
+import * as React from 'react'
 import PropTypes from 'prop-types'
-import * as QS from '@gaiama/query-string'
+import { Box, Link as UiLink } from '@theme-ui/components'
+// import * as QS from '@gaiama/query-string'
 import { Link as GatsbyLink } from 'gatsby'
 
 /**
@@ -14,90 +16,138 @@ if (typeof window !== `undefined`) {
   window.__navigatingToLink = false
 }
 
-const Cta = props => (
-  <div
-    {...props}
-    sx={{
-      display: `inline-block`,
-      textAlign: `center`,
-      a: {
-        fontWeight: `400`,
-        borderRadius: `sm`,
-        fontSize: `1.2rem`,
-        backgroundColor: `cta`,
-        color: `#042f37`,
-        border: `none`,
-        padding: `0.5rem 1rem`,
-        ':hover': {
-          color: `white`,
-          backgroundColor: `primary`,
-        },
-      },
-    }}
-  />
-)
+const isFqdn = x => !/^\/(?!\/)/.test(x)
+const isAnchor = x => /^#/.test(x)
 
-const Link = ({
-  children,
-  to,
-  sort,
-  filter,
-  ext,
-  blank,
-  persistQuery,
-  cta,
-  ...props
-}) => {
-  if (persistQuery) {
-    const qs = QS.parse()
-    if (sort !== undefined) {
-      qs.sort = sort
+export const Link = React.forwardRef(
+  ({ to, href, as, ext, variant = `default`, children, ...props }, ref) => {
+    const url = to || href
+    const isExt = ext || isFqdn(url)
+    const Tag = as ? as : isExt ? `a` : GatsbyLink
+    const linkProps = {
+      as: Tag,
+      variant,
+      ...(!isExt
+        ? { to: url }
+        : {
+            href: url,
+          }),
+      ...(isExt &&
+        !isAnchor(url) && {
+          target: `_blank`,
+          rel: `nofollow noopener noreferrer`,
+        }),
     }
-    to = QS.stringify(qs, to)
+    return (
+      <Box as="span" {...props} __themeKey="links">
+        <UiLink ref={ref} {...linkProps}>
+          {children}
+        </UiLink>
+      </Box>
+    )
   }
+)
+Link.propTypes = {
+  to: PropTypes.string,
+  href: PropTypes.string,
+  variant: PropTypes.string,
+  as: PropTypes.string,
+  ext: PropTypes.bool,
+}
+Link.defaultProps = {
+  variant: `default`,
+}
 
-  const isExt = ext || !/^\/(?!\/)/.test(to)
+// const Cta = props => (
+//   <div
+//     {...props}
+//     sx={{
+//       display: `inline-block`,
+//       textAlign: `center`,
+//       a: {
+//         fontWeight: `400`,
+//         borderRadius: `sm`,
+//         fontSize: `1.2rem`,
+//         backgroundColor: `cta`,
+//         color: `#042f37`,
+//         border: `none`,
+//         padding: `0.5rem 1rem`,
+//         ':hover': {
+//           color: `white`,
+//           backgroundColor: `primary`,
+//         },
+//       },
+//     }}
+//   />
+// )
 
-  const externalLink = (
-    <a
-      {...props}
-      href={to}
-      target={blank ? `_blank` : ``}
-      rel="noopener noreferrer"
-    >
-      {children}
-    </a>
-  )
+// const Link = ({
+//   children,
+//   to,
+//   sort,
+//   filter,
+//   ext,
+//   blank,
+//   persistQuery,
+//   cta,
+//   variant,
+//   ...props
+// }) => {
+//   if (persistQuery) {
+//     const qs = QS.parse()
+//     if (sort !== undefined) {
+//       qs.sort = sort
+//     }
+//     to = QS.stringify(qs, to)
+//   }
 
-  const internalLink = (
-    <GatsbyLink
-      {...props}
-      to={to}
-      onClick={() => {
-        window.__navigatingToLink = true
-      }}
-    >
-      {children}
-    </GatsbyLink>
-  )
+//   const isExt = ext || !/^\/(?!\/)/.test(to)
 
-  const link = isExt ? externalLink : internalLink
+//   const externalLink = (
+//     <Box
+//       {...props}
+//       as="a"
+//       href={to}
+//       target={blank ? `_blank` : ``}
+//       rel="noopener noreferrer"
+//       variant={variant}
+//     >
+//       {children}
+//     </Box>
+//   )
 
-  return !cta ? link : <Cta>{link}</Cta>
-}
+//   const internalLink = (
+//     <Box
+//       {...props}
+//       as={GatsbyLink}
+//       to={to}
+//       variant={variant}
+//       onClick={() => {
+//         window.__navigatingToLink = true
+//       }}
+//     >
+//       {children}
+//     </Box>
+//   )
 
-Link.propTypes = {
-  to: PropTypes.string,
-  sort: PropTypes.string,
-  filter: PropTypes.string,
-  ext: PropTypes.bool,
-  blank: PropTypes.bool,
-  persistQuery: PropTypes.bool,
-  cta: PropTypes.bool,
-}
+//   const link = isExt ? externalLink : internalLink
 
-Link.defaultProps = {
-  blank: true,
-}
+//   return !cta ? link : <Cta>{link}</Cta>
+// }
+
+// Link.propTypes = {
+//   to: PropTypes.string,
+//   sort: PropTypes.string,
+//   filter: PropTypes.string,
+//   variant: PropTypes.string,
+//   ext: PropTypes.bool,
+//   blank: PropTypes.bool,
+//   persistQuery: PropTypes.bool,
+//   cta: PropTypes.bool,
+// }
+
+// Link.defaultProps = {
+//   blank: true,
+// }
 
-export default Link
+// export default Link