2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-03-22 14:11:30 +08:00
|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
2022-06-21 00:34:51 +08:00
|
|
|
import { genModalMaskStyle } from '../../modal/style';
|
2022-11-07 23:32:46 +08:00
|
|
|
import { initZoomMotion, initFadeMotion } from '../../style/motion';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-10-28 16:44:19 +08:00
|
|
|
import { resetComponent, textEllipsis } from '../../style';
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-05-10 10:16:46 +08:00
|
|
|
export interface ComponentToken {
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: number;
|
2022-05-10 10:16:46 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface ImageToken extends FullToken<'Image'> {
|
|
|
|
previewCls: string;
|
|
|
|
modalMaskBg: string;
|
|
|
|
imagePreviewOperationDisabledColor: string;
|
2022-05-10 17:30:01 +08:00
|
|
|
imagePreviewOperationSize: number;
|
|
|
|
imagePreviewSwitchSize: number;
|
|
|
|
imagePreviewOperationColor: string;
|
2022-03-22 14:11:30 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
|
|
|
|
|
|
|
|
export const genBoxStyle = (position?: PositionType): CSSObject => ({
|
|
|
|
position: position || 'absolute',
|
|
|
|
inset: 0,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const genImageMaskStyle = (token: ImageToken): CSSObject => {
|
2022-05-10 10:16:46 +08:00
|
|
|
const { iconCls, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = token;
|
2022-03-22 14:11:30 +08:00
|
|
|
return {
|
|
|
|
position: 'absolute',
|
|
|
|
inset: 0,
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
2022-05-10 10:16:46 +08:00
|
|
|
color: '#fff',
|
|
|
|
background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
|
2022-03-22 14:11:30 +08:00
|
|
|
cursor: 'pointer',
|
|
|
|
opacity: 0,
|
2022-03-22 20:02:04 +08:00
|
|
|
transition: `opacity ${motionDurationSlow}`,
|
2022-03-22 14:11:30 +08:00
|
|
|
|
|
|
|
[`.${prefixCls}-mask-info`]: {
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-03-29 13:56:19 +08:00
|
|
|
padding: `0 ${paddingXXS}px`,
|
2022-04-08 18:05:50 +08:00
|
|
|
[iconCls]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
marginInlineEnd: marginXXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
|
2022-11-07 23:32:46 +08:00
|
|
|
const {
|
|
|
|
previewCls,
|
|
|
|
modalMaskBg,
|
|
|
|
paddingSM,
|
|
|
|
imagePreviewOperationDisabledColor,
|
|
|
|
motionDurationSlow,
|
|
|
|
} = token;
|
|
|
|
|
|
|
|
const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
|
|
|
|
const operationBgHover = operationBg.clone().setAlpha(0.2);
|
2022-05-10 10:16:46 +08:00
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
return {
|
2022-11-07 23:32:46 +08:00
|
|
|
[`${previewCls}-operations`]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row-reverse',
|
|
|
|
alignItems: 'center',
|
|
|
|
color: token.imagePreviewOperationColor,
|
|
|
|
listStyle: 'none',
|
|
|
|
background: operationBg.toRgbString(),
|
|
|
|
pointerEvents: 'auto',
|
|
|
|
|
|
|
|
'&-operation': {
|
|
|
|
marginInlineStart: paddingSM,
|
|
|
|
padding: paddingSM,
|
|
|
|
cursor: 'pointer',
|
|
|
|
transition: `all ${motionDurationSlow}`,
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
background: operationBgHover.toRgbString(),
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
'&-disabled': {
|
|
|
|
color: imagePreviewOperationDisabledColor,
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
'&:last-of-type': {
|
|
|
|
marginInlineStart: 0,
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
'&-progress': {
|
|
|
|
position: 'absolute',
|
|
|
|
left: { _skip_check_: true, value: '50%' },
|
|
|
|
transform: 'translateX(-50%)',
|
|
|
|
},
|
2022-04-20 11:30:55 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
'&-icon': {
|
|
|
|
fontSize: token.imagePreviewOperationSize,
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2022-05-10 10:16:46 +08:00
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
|
2022-11-07 23:32:46 +08:00
|
|
|
const {
|
|
|
|
modalMaskBg,
|
|
|
|
iconCls,
|
|
|
|
imagePreviewOperationDisabledColor,
|
|
|
|
previewCls,
|
|
|
|
zIndexPopup,
|
|
|
|
motionDurationSlow,
|
|
|
|
} = token;
|
|
|
|
|
|
|
|
const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
|
|
|
|
const operationBgHover = operationBg.clone().setAlpha(0.2);
|
2022-05-10 10:16:46 +08:00
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
return {
|
2022-11-07 23:32:46 +08:00
|
|
|
[`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
|
|
|
|
position: 'fixed',
|
|
|
|
insetBlockStart: '50%',
|
|
|
|
zIndex: zIndexPopup + 1,
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
width: token.imagePreviewSwitchSize,
|
|
|
|
height: token.imagePreviewSwitchSize,
|
|
|
|
marginTop: -token.imagePreviewSwitchSize / 2,
|
|
|
|
color: token.imagePreviewOperationColor,
|
|
|
|
background: operationBg.toRgbString(),
|
|
|
|
borderRadius: '50%',
|
|
|
|
transform: `translateY(-50%)`,
|
|
|
|
cursor: 'pointer',
|
|
|
|
transition: `all ${motionDurationSlow}`,
|
|
|
|
pointerEvents: 'auto',
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-11-07 23:32:46 +08:00
|
|
|
'&:hover': {
|
|
|
|
background: operationBgHover.toRgbString(),
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&-disabled`]: {
|
|
|
|
'&, &:hover': {
|
|
|
|
color: imagePreviewOperationDisabledColor,
|
|
|
|
background: 'transparent',
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
[`> ${iconCls}`]: {
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-04-08 18:05:50 +08:00
|
|
|
[`> ${iconCls}`]: {
|
2022-11-07 23:32:46 +08:00
|
|
|
fontSize: token.imagePreviewOperationSize,
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
},
|
2022-11-07 23:32:46 +08:00
|
|
|
|
|
|
|
[`${previewCls}-switch-left`]: {
|
|
|
|
insetInlineStart: token.marginSM,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${previewCls}-switch-right`]: {
|
|
|
|
insetInlineEnd: token.marginSM,
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
|
|
|
const { motionEaseOut, previewCls, motionDurationSlow, componentCls } = token;
|
2022-05-10 10:16:46 +08:00
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
[`${componentCls}-preview-root`]: {
|
|
|
|
[previewCls]: {
|
|
|
|
height: '100%',
|
|
|
|
textAlign: 'center',
|
|
|
|
pointerEvents: 'none',
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${previewCls}-body`]: {
|
|
|
|
...genBoxStyle(),
|
|
|
|
overflow: 'hidden',
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${previewCls}-img`]: {
|
|
|
|
maxWidth: '100%',
|
|
|
|
maxHeight: '100%',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
transform: 'scale3d(1, 1, 1)',
|
|
|
|
cursor: 'grab',
|
|
|
|
transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
|
|
|
|
userSelect: 'none',
|
|
|
|
pointerEvents: 'auto',
|
|
|
|
|
|
|
|
'&-wrapper': {
|
|
|
|
...genBoxStyle(),
|
|
|
|
transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
|
|
|
|
|
2022-12-30 11:52:56 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/39913
|
|
|
|
// TailwindCSS will reset img default style.
|
|
|
|
// Let's set back.
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
'&::before': {
|
|
|
|
display: 'inline-block',
|
|
|
|
width: 1,
|
|
|
|
height: '50%',
|
|
|
|
marginInlineEnd: -1,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${previewCls}-moving`]: {
|
|
|
|
[`${previewCls}-preview-img`]: {
|
|
|
|
cursor: 'grabbing',
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2022-05-10 17:30:01 +08:00
|
|
|
'&-wrapper': {
|
|
|
|
transitionDuration: '0s',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-03-22 14:11:30 +08:00
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
// Override
|
|
|
|
{
|
|
|
|
[`${componentCls}-preview-root`]: {
|
|
|
|
[`${previewCls}-wrap`]: {
|
|
|
|
zIndex: token.zIndexPopup,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-11-07 23:32:46 +08:00
|
|
|
|
|
|
|
// Preview operations & switch
|
|
|
|
{
|
2022-12-25 18:39:19 +08:00
|
|
|
[`${componentCls}-preview-operations-wrapper`]: {
|
|
|
|
position: 'fixed',
|
|
|
|
insetBlockStart: 0,
|
|
|
|
insetInlineEnd: 0,
|
|
|
|
zIndex: token.zIndexPopup + 1,
|
|
|
|
width: '100%',
|
|
|
|
},
|
2022-11-07 23:32:46 +08:00
|
|
|
'&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)],
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
];
|
2022-03-22 14:11:30 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
2022-05-10 17:30:01 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-22 14:11:30 +08:00
|
|
|
return {
|
|
|
|
// ============================== image ==============================
|
2022-05-10 17:30:01 +08:00
|
|
|
[componentCls]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${componentCls}-img`]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
width: '100%',
|
|
|
|
height: 'auto',
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${componentCls}-img-placeholder`]: {
|
2022-06-28 20:33:01 +08:00
|
|
|
backgroundColor: token.colorBgContainerDisabled,
|
2022-03-22 14:11:30 +08:00
|
|
|
backgroundImage:
|
|
|
|
"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
|
|
|
|
backgroundRepeat: 'no-repeat',
|
|
|
|
backgroundPosition: 'center center',
|
|
|
|
backgroundSize: '30%',
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${componentCls}-mask`]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
...genImageMaskStyle(token),
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${componentCls}-mask:hover`]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
opacity: 1,
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
[`${componentCls}-placeholder`]: {
|
2022-03-22 14:11:30 +08:00
|
|
|
...genBoxStyle(),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
|
2022-06-21 00:34:51 +08:00
|
|
|
const { previewCls } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
|
2022-11-10 21:27:37 +08:00
|
|
|
[`&`]: initFadeMotion(token, true),
|
2022-06-21 00:34:51 +08:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
// ============================== Export ==============================
|
2022-05-10 10:16:46 +08:00
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Image',
|
2022-11-19 13:47:33 +08:00
|
|
|
(token) => {
|
2022-05-10 17:30:01 +08:00
|
|
|
const imagePreviewOperationColor = new TinyColor(token.colorTextLightSolid);
|
2022-11-02 13:59:23 +08:00
|
|
|
const previewCls = `${token.componentCls}-preview`;
|
2022-05-10 10:16:46 +08:00
|
|
|
|
|
|
|
const imageToken = mergeToken<ImageToken>(token, {
|
2022-11-02 13:59:23 +08:00
|
|
|
previewCls,
|
2022-05-10 17:30:01 +08:00
|
|
|
imagePreviewOperationColor: imagePreviewOperationColor.toRgbString(),
|
2022-05-10 10:16:46 +08:00
|
|
|
imagePreviewOperationDisabledColor: new TinyColor(imagePreviewOperationColor)
|
|
|
|
.setAlpha(0.25)
|
|
|
|
.toRgbString(),
|
|
|
|
modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
|
2022-05-10 17:30:01 +08:00
|
|
|
imagePreviewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
|
|
|
|
imagePreviewSwitchSize: token.controlHeightLG,
|
2022-05-10 10:16:46 +08:00
|
|
|
});
|
|
|
|
|
2022-06-21 00:34:51 +08:00
|
|
|
return [
|
|
|
|
genImageStyle(imageToken),
|
|
|
|
genImagePreviewStyle(imageToken),
|
2022-11-02 13:59:23 +08:00
|
|
|
genModalMaskStyle(mergeToken<ImageToken>(imageToken, { componentCls: previewCls })),
|
2022-06-21 00:34:51 +08:00
|
|
|
genPreviewMotion(imageToken),
|
|
|
|
];
|
2022-05-10 10:16:46 +08:00
|
|
|
},
|
2022-11-19 13:47:33 +08:00
|
|
|
(token) => ({
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: token.zIndexPopupBase + 80,
|
|
|
|
}),
|
2022-05-10 10:16:46 +08:00
|
|
|
);
|