feat(Image): imageRender、toolbarRender、onTransform、items、minScale、max…

[linxianxi]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

#42845
#27273
#38418
react-component/image#192
react-component/image#110

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	support imageRender、toolbarRender、onTransform、items、minScale、maxScale. fix img common props are not passed to preview img
🇨🇳 Chinese	支持 imageRender、toolbarRender、onTransform、items、minScale、maxScale。修复 img 的原生属性没有传递给预览图的问题

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

🚀 Summary

🤖 Generated by Copilot at 34cfae4

This pull request enhances the image component with new features, props, and demos, and updates the documentation and dependency accordingly. It adds the ability to customize the preview and toolbar render, to pass an array of preview sources to the preview group, and to render a video instead of an image in the preview. It also fixes some style and functionality issues of the preview feature, and some typos and inconsistencies in the documentation. It modifies the files components/image/*, and package.json.

🔍 Walkthrough

🤖 Generated by Copilot at 34cfae4

• Add two new demos of custom toolbar render and custom preview render in the image component, and update the English and Chinese documentation with the links and descriptions of the new demos (link, link, link, link, link, link)
• Replace the original demo of preview group visible in the image component with a new one that uses the new items prop to pass an array of preview sources to the Image.PreviewGroup component (link)
• Add a heading for the Image component API in the English and Chinese documentation (link, link)
• Update the type of the preview prop in the Image component API from previewType to PreviewType in the English and Chinese documentation, to match the naming convention of the other types (link, link)
• Restructure the previewType section in the English and Chinese documentation, and add the detailed descriptions and versions for each prop in the PreviewType, PreviewGroupType, TransformType, TransformAction, and ToolbarRenderType interfaces (link, link)
• Add the new props imageRender, onTransform, minScale, and maxScale to the PreviewType and PreviewGroupType interfaces, and the new prop current to the imageRender parameter in the PreviewType interface, to support custom preview render and transform events in the image component (link, link)
• Update the style of the preview operations container and icons in the image component, and reverse the order of the icons to align them to the end of the flex container (link, link)
• Add the style of the preview content container in the image component, and center the content in the flex container (link)
• Update the style of the preview content wrapper and content in the image component, and remove the pointerEvents and transition properties from the wrapper, and move the pointerEvents property to the content itself, to avoid blocking the mouse events on the custom preview content (link, link)
• Update the dependency version of the rc-image package from 5.17.1 to 5.18.1, to use the latest features and bug fixes of the image component (link)

[github-actions]

[socket-security]

New and updated dependency changes detected. Learn more about Socket for GitHub ↗︎

Packages		Version	New capabilities	Transitives1	Size	Publisher
rc-image	🆕	6.0.0	None	+0	132 kB	zombiej

Footnotes

1. https://docs.socket.dev ↩

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (4af6a52) 100.00% compared to head (9d5b0b6) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #43075   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          650       650           
  Lines        10956     10979   +23     
  Branches      2971      2976    +5     
=========================================
+ Hits         10956     10979   +23     

Impacted Files	Coverage Δ
components/image/style/index.ts	100.00% <ø> (ø)

... and 10 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.