fix(Image): ImagePreviewGroup style optimize (#42675)

pull/42680/head
kiner-tang(文辉) 2 years ago committed by GitHub
parent 42ff0ea3de
commit 4aa3a4e664
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -47,17 +47,17 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
```typescript ```typescript
{ {
visible?: boolean; visible?: boolean;
onVisibleChange?: (visible, prevVisible, current: number) => void; // current 参数v5.3.0后支持 onVisibleChange?: (visible, prevVisible, current: number) => void; // current 参数 v5.3.0 后支持
getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0
src?: string; // v4.10.0 src?: string; // v4.10.0
mask?: ReactNode; // v4.9.0 mask?: ReactNode; // v4.9.0
maskClassName?: string; // v4.11.0 maskClassName?: string; // v4.11.0
rootClassName?: string; // v5.4.0后支持 rootClassName?: string; // v5.4.0 后支持
current?: number; // v4.12.0 仅支持 PreviewGroup current?: number; // v4.12.0 仅支持 PreviewGroup
countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup countRender?: (current: number, total: number) => string // v4.20.0 仅支持 PreviewGroup
scaleStep?: number; scaleStep?: number;
forceRender?: boolean; forceRender?: boolean;
onChange?: (current: number, prevCurrent: number) => void; // v5.3.0后支持 onChange?: (current: number, prevCurrent: number) => void; // v5.3.0 后支持
} }
``` ```

@ -1,10 +1,10 @@
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor'; import { TinyColor } from '@ctrl/tinycolor';
import { genModalMaskStyle } from '../../modal/style'; import { genModalMaskStyle } from '../../modal/style';
import { initZoomMotion, initFadeMotion } from '../../style/motion'; import { resetComponent, textEllipsis } from '../../style';
import { initFadeMotion, initZoomMotion } from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal'; import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
export interface ComponentToken { export interface ComponentToken {
zIndexPopup: number; zIndexPopup: number;
@ -81,6 +81,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
padding: paddingSM, padding: paddingSM,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
userSelect: 'none',
'&:hover': { '&:hover': {
background: operationBgHover.toRgbString(), background: operationBgHover.toRgbString(),
@ -140,6 +141,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
cursor: 'pointer', cursor: 'pointer',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
pointerEvents: 'auto', pointerEvents: 'auto',
userSelect: 'none',
'&:hover': { '&:hover': {
background: operationBgHover.toRgbString(), background: operationBgHover.toRgbString(),

Loading…
Cancel
Save