ImageViewer preview component supports self-defined preview content #6825
Conversation
|
|
| @@ -67,7 +67,7 @@ const ViewWithFooter = () => { | |||
| console.log('Loading...') | |||
| }} | |||
| > | |||
| 查看原图{index + 1} | |||
| {`查看${typeof image === 'string' ? '原图' : '自定义内容'}${index + 1}`} | |||
There was a problem hiding this comment.
直接改名叫 查看图片 吧，这里去做分支会把 Demo 变得复杂
| export const demoImages = [ | ||
| 'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80', | ||
| 'https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80', | ||
| 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3113&q=80', | ||
| 'https://images.unsplash.com/photo-1624993590528-4ee743c9896e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&h=1000&q=80', | ||
| <div key={Math.random()} className={styles['render-content']}> |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #6825 +/- ##
==========================================
- Coverage 92.70% 92.69% -0.02%
==========================================
Files 335 335
Lines 7199 7202 +3
Branches 1793 1771 -22
==========================================
+ Hits 6674 6676 +2
- Misses 490 518 +28
+ Partials 35 8 -27 ☔ View full report in Codecov by Sentry. |
| @@ -82,10 +80,13 @@ export type MultiImageViewerProps = Omit< | |||
| ImageViewerProps, | |||
| 'image' | 'renderFooter' | |||
| > & { | |||
| images?: string[] | |||
| images?: (string | ReactNode)[] | |||
There was a problem hiding this comment.
#6801 里不是这个意思，是渲染内容可以改，不是数据层给的就是 ReactNode。否则在组件载入的时候就需要把节点都生成一遍。参考一下 antd pc 侧的：
https://ant-design.antgroup.com/components/image-cn#image-demo-imagerender
There was a problem hiding this comment.
我一开改的确实是不动image类型，参考antd的直接在单张图片渲染模式下加一个自定义渲染方法。很简单，但是感觉我现在这种方式更加灵活，应用场景更多。 可以支持图片与其他类型的混合渲染。
There was a problem hiding this comment.
#6801 里不是这个意思，是渲染内容可以改，不是数据层给的就是 ReactNode。否则在组件载入的时候就需要把节点都生成一遍。参考一下 antd pc 侧的： https://ant-design.antgroup.com/components/image-cn#image-demo-imagerender
已修改
This reverts commit 7bc1a00.
| @@ -27,6 +27,8 @@ export type ImageViewerProps = { | |||
| onClose?: () => void | |||
| afterClose?: () => void | |||
| renderFooter?: (image: string) => ReactNode | |||
| imageRender?: () => ReactNode | |||
There was a problem hiding this comment.
接受一下当前 image 的 url ，否则不知道是哪一个~
done
ImageViewer支持自定义预览 #6801