Merge pull request #274 from unix/image

feat(image): pass through all props of anchor element

components/image/__tests__/browser.test.tsx

@@ -59,4 +59,15 @@ describe('Image Browser', () => {
     const wrapper = mount(<Image.Browser />)
     expect(() => wrapper.unmount()).not.toThrow()
   })
+
+  it('anchor props should be passed through', () => {
+    const anchorRel = 'noreferrer'
+    const wrapper = mount(
+      <Image.Browser url={link} anchorProps={{ rel: anchorRel }}>
+        <Image src={url} />
+      </Image.Browser>,
+    )
+    const rel = wrapper.find('a').getDOMNode().getAttribute('rel')
+    expect(anchorRel).toEqual(anchorRel)
+  })
 })

components/image/image-browser.tsx

@@ -1,21 +1,26 @@
 import React, { useMemo } from 'react'
 import Link from '../link'
+import { Props as LinkProps } from '../link/link'
 import useTheme from '../styles/use-theme'
 import withDefaults from '../utils/with-defaults'
 import ImageBrowserHttpsIcon from './image-browser-https-icon'
 import { getBrowserColors, BrowserColors } from './styles'
 
+type AnchorProps = Omit<React.AnchorHTMLAttributes<any>, keyof LinkProps>
+
 interface Props {
   title?: string
   url?: string
   showFullLink?: boolean
   invert?: boolean
+  anchorProps?: AnchorProps
   className?: string
 }
 
 const defaultProps = {
   className: '',
   showFullLink: false,
+  anchorProps: {} as AnchorProps,
   invert: false,
 }
 
@@ -42,12 +47,17 @@ const getTitle = (title: string, colors: BrowserColors) => (
   </div>
 )
 
-const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColors) => (
+const getAddressInput = (
+  url: string,
+  showFullLink: boolean,
+  colors: BrowserColors,
+  anchorProps: AnchorProps,
+) => (
   <div className="address-input">
     <span className="https">
       <ImageBrowserHttpsIcon />
     </span>
-    <Link href={url} title={url} target="_blank">
+    <Link href={url} title={url} target="_blank" {...anchorProps}>
       {showFullLink ? url : getHostFromUrl(url)}
     </Link>
     <style jsx>{`
@@ -94,16 +104,16 @@ const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColo
 
 const ImageBrowser = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ImageBrowserProps>>(
   (
-    { url, title, children, showFullLink, invert, className, ...props },
+    { url, title, children, showFullLink, invert, anchorProps, className, ...props },
     ref: React.Ref<HTMLDivElement>,
   ) => {
     const theme = useTheme()
     const colors = useMemo(() => getBrowserColors(invert, theme.palette), [invert, theme.palette])
     const input = useMemo(() => {
-      if (url) return getAddressInput(url, showFullLink, colors)
+      if (url) return getAddressInput(url, showFullLink, colors, anchorProps)
       if (title) return getTitle(title, colors)
       return null
-    }, [url, showFullLink, title, colors])
+    }, [url, showFullLink, title, colors, anchorProps])
 
     return (
       <div className={`bowser ${className}`} ref={ref} {...props}>

pages/en-us/components/image.mdx

@@ -31,7 +31,7 @@ Display image content.
   desc="Add a browser style wrapper to the image."
   scope={{ Image, Display, Code }}
   code={`
-<Image.Browser url="https://react.zeit-ui.co/en-us/guide/introduction" >
+<Image.Browser url="https://react.zeit-ui.co/en-us/guide/introduction" anchorProps={{ rel: 'nofollow' }}>
   <Image width="540" height="246" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
 </Image.Browser>
 `} />
@@ -77,6 +77,7 @@ Display image content.
 | **url** | show url on browser address input | `string` | - | - |
 | **showFullLink** | show full url | `boolean` | - | `false` |
 | **invert** | invert colors | `boolean` | - | `false` |
+| **anchorProps** | props of element `a` | `AnchorHTMLAttributes` | - | `{}` |
 | ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
 
 </Attributes>

pages/zh-cn/components/image.mdx

@@ -76,6 +76,7 @@ export const meta = {
 | **url** | 在浏览器地址栏显示链接 | `string` | - | - |
 | **showFullLink** | 显示完整的链接而非域名 | `boolean` | - | `false` |
 | **invert** | 反转所有颜色 | `boolean` | - | `false` |
+| **anchorProps** |  设置 `a` 的其他属性 | `AnchorHTMLAttributes` | - | `{}` |
 | ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
 
 </Attributes>