feat: add previewer

[shaodahong]

fixes ant-design/ant-design#28321

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-component/image/fjs0x9hs4
✅ Preview: https://image-git-previewer.react-component.vercel.app

[codecov]

Codecov Report

Merging #55 (8157f63) into master (9383a49) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master       #55   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         6    +1     
  Lines          220       239   +19     
  Branches        57        61    +4     
=========================================
+ Hits           220       239   +19     

Impacted Files	Coverage Δ
src/Image.tsx	100.00% <100.00%> (ø)
src/Preview.tsx	100.00% <100.00%> (ø)
src/previewer.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9383a49...8157f63. Read the comment docs.

[afc163]

方法调用不是好的范式，要解决的问题是 需要预览的内容和预览前的内容是不同的。

[GitKou]

有些场景去要通过点击“预览”按钮触发预览

[afc163]

方法调用不是好的范式，要解决的问题是 需要预览的内容和预览前的内容是不同的，而不是需要主动触发预览功能。

[shaodahong]

方法调用不是好的范式，要解决的问题是 需要预览的内容和预览前的内容是不同的，而不是需要主动触发预览功能。

嗯，这个 PR 解决的核心的问题不是 需要预览的内容和预览前的内容是不同的，主动预览在不需要 img 占位的情况下，介质会变多，比如可以通过 a 标签触发，button 触发

[afc163]

  <Image.PreviewGroup trigger={<Button>open preview</Button>}>
    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
    <Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
  </Image.PreviewGroup>

这样如何，有 trigger 就隐藏 image。

[shaodahong]

  <Image.PreviewGroup trigger={<Button>open preview</Button>}>
    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
    <Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
  </Image.PreviewGroup>

这样如何，有 trigger 就隐藏 image。

一般般，举个例子，比如 Upload 组件

现在默认是新标签打开，如果我想在 onPreview 里面用一个预览模式打开最方便的应该是

onPreview = file => Image.previewer(file.url)

如果用 Modal 打开就是

onPreview = file => Modal.Confirm({ content: <img src={file.url} />, footer: null })

[afc163]

  <Image.PreviewGroup previewVisible={this.state.previewVisible} showChildren={false} onPreviewVisibleChange={}>
    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
    <Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
  </Image.PreviewGroup>

那最好是做成受控模式，静态方法调用的语法糖对于 Context 场景（redux/国际化/prefixCls）都有很多问题，不建议再开新的了。

[zombieJ]

我也不赞成做成静态方法，看起来的确是 Group 的受控场景。

[zombieJ]

showChildren 感觉也没有必要。这个 issue 里的场景看，其实应该受控后自己样式隐藏掉 div 即可。

[afc163]

应该和 ant-design/ant-design#27273 这个需求更类似。