mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

feat(Image): modify layout and support closeIcon、PreviewGroup fallback (#43167)

Browse Source 
* feat(Image): modify layout and support closeIcon、PreviewGroup fallback

* docs: modify text

* style: add skip right

* chore: update snapshot

* fix: disabled hover

* fix: lint error

* style: close icon transition

* docs: # link

* demo: update demo

* demo: add comment

* demo: remove comment
This commit is contained in:
daisy 2023-07-07 09:54:19 +08:00 committed by GitHub
parent 86d334baee
commit 1ef07e97ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 316 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/drawer/index.tsx
View File

@ -15,7 +15,7 @@ import { NoCompactStyle } from '../space/Compact';
import useStyle from './style';
const SizeTypes = ['default', 'large'] as const;
type sizeType = typeof SizeTypes[number];
type sizeType = (typeof SizeTypes)[number];
export interface PushState {
distance: string | number;

338
components/image/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -43,189 +43,193 @@ exports[`Image Default Group preview props 1`] = `
<div
class="ant-image-preview-operations-wrapper ant-fade-appear ant-fade-appear-start ant-fade"
>
<ul
class="ant-image-preview-operations"
<button
class="ant-image-preview-close"
>
<li
class="ant-image-preview-operations-progress"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</button>
<div
class="ant-image-preview-footer"
>
<div
class="ant-image-preview-progress"
>
1 / 1
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
</div>
<div
class="ant-image-preview-operations"
>
<span
aria-label="swap"
class="anticon anticon-swap ant-image-preview-operations-icon"
role="img"
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
>
<svg
aria-hidden="true"
data-icon="swap"
fill="currentColor"
focusable="false"
height="1em"
style="transform: rotate(90deg);"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="swap"
class="anticon anticon-swap"
role="img"
>
<path
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
>
<span
aria-label="swap"
class="anticon anticon-swap ant-image-preview-operations-icon"
role="img"
<svg
aria-hidden="true"
data-icon="swap"
fill="currentColor"
focusable="false"
height="1em"
style="transform: rotate(90deg);"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</div>
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
>
<svg
aria-hidden="true"
data-icon="swap"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="swap"
class="anticon anticon-swap"
role="img"
>
<path
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft"
>
<span
aria-label="rotate-left"
class="anticon anticon-rotate-left ant-image-preview-operations-icon"
role="img"
<svg
aria-hidden="true"
data-icon="swap"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</div>
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft"
>
<svg
aria-hidden="true"
data-icon="rotate-left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="rotate-left"
class="anticon anticon-rotate-left"
role="img"
>
<defs>
<style />
</defs>
<path
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
/>
<path
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
>
<span
aria-label="rotate-right"
class="anticon anticon-rotate-right ant-image-preview-operations-icon"
role="img"
<svg
aria-hidden="true"
data-icon="rotate-left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs>
<style />
</defs>
<path
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
/>
<path
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
/>
</svg>
</span>
</div>
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
>
<svg
aria-hidden="true"
data-icon="rotate-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="rotate-right"
class="anticon anticon-rotate-right"
role="img"
>
<defs>
<style />
</defs>
<path
d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
/>
<path
d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
>
<span
aria-label="zoom-out"
class="anticon anticon-zoom-out ant-image-preview-operations-icon"
role="img"
<svg
aria-hidden="true"
data-icon="rotate-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs>
<style />
</defs>
<path
d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
/>
<path
d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
/>
</svg>
</span>
</div>
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
>
<svg
aria-hidden="true"
data-icon="zoom-out"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="zoom-out"
class="anticon anticon-zoom-out"
role="img"
>
<path
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
>
<span
aria-label="zoom-in"
class="anticon anticon-zoom-in ant-image-preview-operations-icon"
role="img"
<svg
aria-hidden="true"
data-icon="zoom-out"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
/>
</svg>
</span>
</div>
<div
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
>
<svg
aria-hidden="true"
data-icon="zoom-in"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="zoom-in"
class="anticon anticon-zoom-in"
role="img"
>
<path
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
/>
</svg>
</span>
</li>
<li
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-close"
>
<span
aria-label="close"
class="anticon anticon-close ant-image-preview-operations-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</li>
</ul>
<svg
aria-hidden="true"
data-icon="zoom-in"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div>
<div

3
components/image/demo/imageRender.tsx
View File

@ -13,9 +13,6 @@ const App: React.FC = () => (
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
/>
),
toolbarRender: (_, { icons: { closeIcon } }) => (
<ul className="ant-image-preview-operations">{closeIcon}</ul>
),
}}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>

32
components/image/demo/toolbarRender.md
View File

@ -1,7 +1,35 @@
## zh-CN
可以自定义工具栏。
可以自定义工具栏并添加下载图片按钮。
## en-US
You can customize the toolbar.
You can customize the toolbar and add a button for downloading the image.
```css
.toolbar-wrapper {
position: fixed;
bottom: 32px;
left: 50%;
padding: 0px 24px;
color: #fff;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 100px;
transform: translateX(-50%);
}
.toolbar-wrapper .anticon {
padding: 12px;
cursor: pointer;
}
.toolbar-wrapper .anticon[disabled] {
cursor: not-allowed;
opacity: 0.3;
}
.toolbar-wrapper .anticon:hover {
opacity: 0.3;
}
```

47
components/image/demo/toolbarRender.tsx
View File

@ -1,5 +1,12 @@
import { DownloadOutlined } from '@ant-design/icons';
import { Image } from 'antd';
import {
DownloadOutlined,
RotateLeftOutlined,
RotateRightOutlined,
SwapOutlined,
ZoomInOutlined,
ZoomOutOutlined,
} from '@ant-design/icons';
import { Image, Space } from 'antd';
import React from 'react';
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
@ -12,7 +19,7 @@ const App: React.FC = () => {
const url = URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.download = 'image.jpg';
link.download = 'image.png';
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(url);
@ -23,36 +30,26 @@ const App: React.FC = () => {
return (
<Image
width={200}
src={src}
preview={{
toolbarRender: (
_,
{
icons: {
flipYIcon,
flipXIcon,
rotateLeftIcon,
rotateRightIcon,
zoomOutIcon,
zoomInIcon,
closeIcon,
},
transform: { scale },
actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
},
) => (
<ul className="ant-image-preview-operations">
<li className="ant-image-preview-operations-operation" onClick={onDownload}>
<DownloadOutlined className="ant-image-preview-operations-icon" />
</li>
{flipYIcon}
{flipXIcon}
{rotateLeftIcon}
{rotateRightIcon}
{zoomOutIcon}
{zoomInIcon}
{closeIcon}
</ul>
<Space size={12} className="toolbar-wrapper">
<DownloadOutlined onClick={onDownload} />
<SwapOutlined rotate={90} onClick={onFlipY} />
<SwapOutlined onClick={onFlipX} />
<RotateLeftOutlined onClick={onRotateLeft} />
<RotateRightOutlined onClick={onRotateRight} />
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
</Space>
),
}}
src={src}
/>
);
};

23
components/image/index.en-US.md
View File

@ -40,7 +40,7 @@ Previewable image.
| fallback | Load failure fault-tolerant src | string | - | 4.6.0 |
| height | Image height | string \| number | - | 4.6.0 |
| placeholder | Load placeholder, use default placeholder when set `true` | ReactNode | - | 4.6.0 |
| preview | preview config, disabled when `false` | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
| preview | preview config, disabled when `false` | boolean \| [PreviewType](#previewtype) | true | 4.6.0 [PreviewType](#previewtype):4.7.0 |
| src | Image path | string | - | 4.6.0 |
| width | Image width | string \| number | - | 4.6.0 |
| onError | Load failed callback | (event: Event) => void | - | 4.12.0 |
@ -61,18 +61,20 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
| minScale | Min scale | number | 1 | 5.7.0 |
| maxScale | Max scale | number | 50 | 5.7.0 |
| closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 |
| forceRender | Force render preview dialog | boolean | - | - |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 |
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - |
## PreviewGroup
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
| preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#previewgrouptype) | true | 4.6.0 [PreviewGroupType](#previewgrouptype):4.7.0 |
| items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
| fallback | Load failure fault-tolerant src | string | - | 5.7.0 |
### PreviewGroupType
@ -87,11 +89,12 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
| scaleStep | `1 + scaleStep` is the step to increase or decrease the scale | number | 0.5 | - |
| minScale | Min scale | number | 1 | 5.7.0 |
| maxScale | Max scale | number | 50 | 5.7.0 |
| closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 |
| forceRender | Force render preview dialog | boolean | - | - |
| countRender | Custom preview count content | (current: number, total: number) => string | - | 4.20.0 |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
| countRender | Custom preview count content | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 |
| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
| onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
| onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
@ -140,7 +143,6 @@ type TransformAction =
rotateRightIcon: React.ReactNode;
zoomOutIcon: React.ReactNode;
zoomInIcon: React.ReactNode;
closeIcon: React.ReactNode;
};
actions: {
onFlipY: () => void;
@ -149,7 +151,6 @@ type TransformAction =
onRotateRight: () => void;
onZoomOut: () => void;
onZoomIn: () => void;
onClose: () => void;
};
transform: TransformType,
current: number;

23
components/image/index.zh-CN.md
View File

@ -41,7 +41,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
| height | 图像高度 | string \| number | - | 4.6.0 |
| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#PreviewType) | true | 4.6.0 [PreviewType](#PreviewType):4.7.0 |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#previewtype) | true | 4.6.0 [PreviewType](#previewyype):4.7.0 |
| src | 图片地址 | string | - | 4.6.0 |
| width | 图像宽度 | string \| number | - | 4.6.0 |
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
@ -62,18 +62,20 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
| forceRender | 强制渲染预览图 | boolean | - | - |
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | 5.7.0 |
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 |
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 |
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - |
## PreviewGroup
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewGroupType](#PreviewGroupType) | true | 4.6.0 [PreviewGroupType](#PreviewGroupType):4.7.0 |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewGroupType](#previewgrouptype) | true | 4.6.0 [PreviewGroupType](#previewgrouptype):4.7.0 |
| items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
| fallback | 加载失败容错地址 | string | - | 5.7.0 |
### PreviewGroupType
@ -88,11 +90,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
| scaleStep | `1 + scaleStep` 为缩放放大的每步倍数 | number | 0.5 | - |
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
| forceRender | 强制渲染预览图 | boolean | - | - |
| countRender | 自定义预览计数内容 | (current: number, total: number) => string | - | 4.20.0 |
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | 5.7.0 |
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | 5.7.0 |
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | 5.7.0 |
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 |
| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
| onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
| onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
@ -141,7 +144,6 @@ type TransformAction =
rotateRightIcon: React.ReactNode;
zoomOutIcon: React.ReactNode;
zoomInIcon: React.ReactNode;
closeIcon: React.ReactNode;
};
actions: {
onFlipY: () => void;
@ -150,7 +152,6 @@ type TransformAction =
onRotateRight: () => void;
onZoomOut: () => void;
onZoomIn: () => void;
onClose: () => void;
};
transform: TransformType,
current: number;

95
components/image/style/index.ts
View File

@ -1,7 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import { genModalMaskStyle } from '../../modal/style';
import { resetComponent, textEllipsis } from '../../style';
import { textEllipsis } from '../../style';
import { initFadeMotion, initZoomMotion } from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@ -43,14 +43,15 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
});
export const genImageMaskStyle = (token: ImageToken): CSSObject => {
const { iconCls, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = token;
const { iconCls, motionDurationSlow, paddingXXS, marginXXS, prefixCls, colorTextLightSolid } =
token;
return {
position: 'absolute',
inset: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
color: colorTextLightSolid,
background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
cursor: 'pointer',
opacity: 0,
@ -70,22 +71,70 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
};
export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
const { previewCls, modalMaskBg, paddingSM, previewOperationColorDisabled, motionDurationSlow } =
token;
const {
previewCls,
modalMaskBg,
paddingSM,
marginXL,
margin,
paddingLG,
previewOperationColorDisabled,
motionDurationSlow,
iconCls,
colorTextLightSolid,
} = token;
const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
const operationBgHover = operationBg.clone().setAlpha(0.2);
return {
[`${previewCls}-operations`]: {
...resetComponent(token),
[`${previewCls}-footer`]: {
position: 'fixed',
bottom: marginXL,
left: {
_skip_check_: true,
value: 0,
},
width: '100%',
display: 'flex',
justifyContent: 'flex-end',
flexDirection: 'column',
alignItems: 'center',
color: token.previewOperationColor,
listStyle: 'none',
background: operationBg.toRgbString(),
pointerEvents: 'auto',
},
[`${previewCls}-progress`]: {
marginBottom: margin,
},
[`${previewCls}-close`]: {
position: 'fixed',
top: marginXL,
right: {
_skip_check_: true,
value: marginXL,
},
display: 'flex',
color: colorTextLightSolid,
backgroundColor: operationBg.toRgbString(),
borderRadius: '50%',
padding: paddingSM,
outline: 0,
border: 0,
cursor: 'pointer',
transition: `all ${motionDurationSlow}`,
'&:hover': {
backgroundColor: operationBgHover.toRgbString(),
},
[`& > ${iconCls}`]: {
fontSize: token.previewOperationSize,
},
},
[`${previewCls}-operations`]: {
display: 'flex',
alignItems: 'center',
padding: `0 ${paddingLG}px`,
backgroundColor: operationBg.toRgbString(),
borderRadius: 100,
'&-operation': {
marginInlineStart: paddingSM,
@ -94,28 +143,22 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
transition: `all ${motionDurationSlow}`,
userSelect: 'none',
'&:hover': {
background: operationBgHover.toRgbString(),
[`&:not(${previewCls}-operations-operation-disabled):hover > ${iconCls}`]: {
opacity: 0.3,
},
'&-disabled': {
color: previewOperationColorDisabled,
pointerEvents: 'none',
cursor: 'not-allowed',
},
'&:first-of-type': {
marginInlineStart: 0,
},
},
'&-progress': {
position: 'absolute',
left: { _skip_check_: true, value: '50%' },
transform: 'translateX(-50%)',
},
'&-icon': {
fontSize: token.previewOperationSize,
[`& > ${iconCls}`]: {
fontSize: token.previewOperationSize,
},
},
},
};
@ -151,7 +194,6 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
transform: `translateY(-50%)`,
cursor: 'pointer',
transition: `all ${motionDurationSlow}`,
pointerEvents: 'auto',
userSelect: 'none',
'&:hover': {
@ -202,7 +244,7 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
[`${previewCls}-img`]: {
maxWidth: '100%',
maxHeight: '100%',
maxHeight: '70%',
verticalAlign: 'middle',
transform: 'scale3d(1, 1, 1)',
cursor: 'grab',
@ -258,10 +300,7 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
{
[`${componentCls}-preview-operations-wrapper`]: {
position: 'fixed',
insetBlockStart: 0,
insetInlineEnd: 0,
zIndex: token.zIndexPopup + 1,
width: '100%',
},
'&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)],
},

2
package.json
View File

@ -129,7 +129,7 @@
"rc-drawer": "~6.2.0",
"rc-dropdown": "~4.1.0",
"rc-field-form": "~1.34.0",
"rc-image": "~6.1.0",
"rc-image": "~7.0.0-2",
"rc-input": "~1.1.0",
"rc-input-number": "~8.0.0",
"rc-mentions": "~2.5.0",