mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
feat: cssinjs for image (#34630)
* feat: cssinjs for image * feat: update for CI
This commit is contained in:
黑雨
GitHub
parent
18c4fe5fd9
commit
950095971b
@ -11,6 +11,9 @@ import { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
||||
export const icons = {
|
||||
rotateLeft: <RotateLeftOutlined />,
|
||||
rotateRight: <RotateRightOutlined />,
|
||||
@ -26,10 +29,12 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
|
||||
preview,
|
||||
...props
|
||||
}) => {
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
|
||||
const mergedPreview = React.useMemo(() => {
|
||||
if (preview === false) {
|
||||
return preview;
|
||||
@ -40,16 +45,17 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
|
||||
..._preview,
|
||||
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
|
||||
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
|
||||
rootClassName: hashId,
|
||||
};
|
||||
}, [preview]);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<RcImage.PreviewGroup
|
||||
preview={mergedPreview}
|
||||
previewPrefixCls={prefixCls}
|
||||
icons={icons}
|
||||
{...props}
|
||||
/>
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -2,10 +2,13 @@ import * as React from 'react';
|
||||
import { useContext } from 'react';
|
||||
import EyeOutlined from '@ant-design/icons/EyeOutlined';
|
||||
import RcImage, { ImageProps } from 'rc-image';
|
||||
import classNames from 'classnames';
|
||||
import defaultLocale from '../locale/en_US';
|
||||
import PreviewGroup, { icons } from './PreviewGroup';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
||||
export interface CompositionImage<P> extends React.FC<P> {
|
||||
PreviewGroup: typeof PreviewGroup;
|
||||
@ -14,15 +17,19 @@ export interface CompositionImage<P> extends React.FC<P> {
|
||||
const Image: CompositionImage<ImageProps> = ({
|
||||
prefixCls: customizePrefixCls,
|
||||
preview,
|
||||
rootClassName,
|
||||
...otherProps
|
||||
}) => {
|
||||
const { getPrefixCls } = useContext(ConfigContext);
|
||||
const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('image', customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
|
||||
const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
|
||||
const imageLocale = contextLocale.Image || defaultLocale.Image;
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
|
||||
const mergedRootClassName = classNames(rootClassName, hashId);
|
||||
const mergedPreview = React.useMemo(() => {
|
||||
if (preview === false) {
|
||||
return preview;
|
||||
@ -43,7 +50,14 @@ const Image: CompositionImage<ImageProps> = ({
|
||||
};
|
||||
}, [preview, imageLocale]);
|
||||
|
||||
return <RcImage prefixCls={prefixCls} preview={mergedPreview} {...otherProps} />;
|
||||
return wrapSSR(
|
||||
<RcImage
|
||||
prefixCls={`${prefixCls}`}
|
||||
preview={mergedPreview}
|
||||
rootClassName={mergedRootClassName}
|
||||
{...otherProps}
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
export { ImageProps };
|
||||
|
||||
@ -1,181 +1,181 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@image-prefix-cls: ~'@{ant-prefix}-image';
|
||||
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
|
||||
|
||||
.@{image-prefix-cls} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
|
||||
&-placeholder {
|
||||
background-color: @image-bg;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
&-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @text-color-inverse;
|
||||
background: fade(@black, 50%);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity @animation-duration-slow;
|
||||
|
||||
&-info {
|
||||
padding: 0 @padding-xss;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-inline-end: @margin-xss;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
.box();
|
||||
}
|
||||
|
||||
&-preview {
|
||||
.modal-mask();
|
||||
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
&-body {
|
||||
.box();
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
transform: scale3d(1, 1, 1);
|
||||
cursor: grab;
|
||||
transition: transform 0.3s @ease-out 0s;
|
||||
user-select: none;
|
||||
pointer-events: auto;
|
||||
|
||||
&-wrapper {
|
||||
.box();
|
||||
transition: transform 0.3s @ease-out 0s;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 50%;
|
||||
margin-right: -1px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-moving {
|
||||
.@{image-prefix-cls}-preview-img {
|
||||
cursor: grabbing;
|
||||
|
||||
&-wrapper {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
z-index: @zindex-image;
|
||||
}
|
||||
|
||||
&-operations {
|
||||
.reset-component();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: @image-preview-operation-color;
|
||||
list-style: none;
|
||||
background: fade(@modal-mask-bg, 10%);
|
||||
pointer-events: auto;
|
||||
|
||||
&-operation {
|
||||
margin-left: @control-padding-horizontal;
|
||||
padding: @control-padding-horizontal;
|
||||
cursor: pointer;
|
||||
|
||||
&-disabled {
|
||||
color: @image-preview-operation-disabled-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: @image-preview-operation-size;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch-left,
|
||||
&-switch-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
color: @image-preview-operation-color;
|
||||
background: fade(@modal-mask-bg, 10%);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
&-disabled {
|
||||
color: @image-preview-operation-disabled-color;
|
||||
cursor: not-allowed;
|
||||
> .@{iconfont-css-prefix} {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&-switch-right {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//@import '../../style/themes/index';
|
||||
//@import '../../style/mixins/index';
|
||||
//
|
||||
//@image-prefix-cls: ~'@{ant-prefix}-image';
|
||||
//@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
|
||||
//
|
||||
//.@{image-prefix-cls} {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
//
|
||||
// &-img {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// vertical-align: middle;
|
||||
//
|
||||
// &-placeholder {
|
||||
// background-color: @image-bg;
|
||||
// background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center center;
|
||||
// background-size: 30%;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-mask {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// color: @text-color-inverse;
|
||||
// background: fade(@black, 50%);
|
||||
// cursor: pointer;
|
||||
// opacity: 0;
|
||||
// transition: opacity @animation-duration-slow;
|
||||
//
|
||||
// &-info {
|
||||
// padding: 0 @padding-xss;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// .@{iconfont-css-prefix} {
|
||||
// margin-inline-end: @margin-xss;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-placeholder {
|
||||
// .box();
|
||||
// }
|
||||
//
|
||||
// &-preview {
|
||||
// .modal-mask();
|
||||
//
|
||||
// height: 100%;
|
||||
// text-align: center;
|
||||
//
|
||||
// &-body {
|
||||
// .box();
|
||||
// overflow: hidden;
|
||||
// }
|
||||
//
|
||||
// &-img {
|
||||
// max-width: 100%;
|
||||
// max-height: 100%;
|
||||
// vertical-align: middle;
|
||||
// transform: scale3d(1, 1, 1);
|
||||
// cursor: grab;
|
||||
// transition: transform 0.3s @ease-out 0s;
|
||||
// user-select: none;
|
||||
// pointer-events: auto;
|
||||
//
|
||||
// &-wrapper {
|
||||
// .box();
|
||||
// transition: transform 0.3s @ease-out 0s;
|
||||
//
|
||||
// &::before {
|
||||
// display: inline-block;
|
||||
// width: 1px;
|
||||
// height: 50%;
|
||||
// margin-right: -1px;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-moving {
|
||||
// .@{image-prefix-cls}-preview-img {
|
||||
// cursor: grabbing;
|
||||
//
|
||||
// &-wrapper {
|
||||
// transition-duration: 0s;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-wrap {
|
||||
// z-index: @zindex-image;
|
||||
// }
|
||||
//
|
||||
// &-operations {
|
||||
// .reset-component();
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// z-index: 1;
|
||||
// display: flex;
|
||||
// flex-direction: row-reverse;
|
||||
// align-items: center;
|
||||
// width: 100%;
|
||||
// color: @image-preview-operation-color;
|
||||
// list-style: none;
|
||||
// background: fade(@modal-mask-bg, 10%);
|
||||
// pointer-events: auto;
|
||||
//
|
||||
// &-operation {
|
||||
// margin-left: @control-padding-horizontal;
|
||||
// padding: @control-padding-horizontal;
|
||||
// cursor: pointer;
|
||||
//
|
||||
// &-disabled {
|
||||
// color: @image-preview-operation-disabled-color;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
//
|
||||
// &:last-of-type {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-icon {
|
||||
// font-size: @image-preview-operation-size;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-switch-left,
|
||||
// &-switch-right {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: 10px;
|
||||
// z-index: 1;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// width: 44px;
|
||||
// height: 44px;
|
||||
// margin-top: -22px;
|
||||
// color: @image-preview-operation-color;
|
||||
// background: fade(@modal-mask-bg, 10%);
|
||||
// border-radius: 50%;
|
||||
// cursor: pointer;
|
||||
// pointer-events: auto;
|
||||
//
|
||||
// &-disabled {
|
||||
// color: @image-preview-operation-disabled-color;
|
||||
// cursor: not-allowed;
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// font-size: 18px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-switch-left {
|
||||
// left: 10px;
|
||||
// }
|
||||
//
|
||||
// &-switch-right {
|
||||
// right: 10px;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
@ -1,2 +1,335 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import {
|
||||
DerivativeToken,
|
||||
GenerateStyle,
|
||||
resetComponent,
|
||||
UseComponentStyleResult,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
} from '../../_util/theme';
|
||||
|
||||
export interface ImageToken extends DerivativeToken {
|
||||
prefixCls: string;
|
||||
previewPrefixCls: string;
|
||||
iconPrefixCls: string;
|
||||
imageSizeBase: number;
|
||||
marginXXS: number;
|
||||
imageBg: string;
|
||||
imageColor: string;
|
||||
imagePreviewOperationDisabledColor: string;
|
||||
imageMaskFontSize: number;
|
||||
iconPrefixClsFontSize: number;
|
||||
imagePreviewOperationSize: number;
|
||||
imageFontSizeBase: number;
|
||||
switchLeft: number;
|
||||
switchRight: number;
|
||||
switchWidth: number;
|
||||
switchHeight: number;
|
||||
switchMarginTop: number;
|
||||
width1px: number;
|
||||
modalMaskBg: string;
|
||||
zIndexImage: number;
|
||||
zIndexModalMask: number;
|
||||
motionEaseOut: string;
|
||||
white: string;
|
||||
black: string;
|
||||
}
|
||||
|
||||
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 => {
|
||||
const { iconPrefixCls, white, black, duration, paddingXXS, marginXXS, prefixCls } = token;
|
||||
return {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: white,
|
||||
background: new TinyColor(black).setAlpha(0.5).toRgbString(), // FIXME: hard code in v4
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `opacity ${duration}`,
|
||||
|
||||
[`.${prefixCls}-mask-info`]: {
|
||||
padding: `0 ${paddingXXS}`,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
[`.${iconPrefixCls}`]: {
|
||||
marginInlineEnd: marginXXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
|
||||
const {
|
||||
black,
|
||||
modalMaskBg,
|
||||
paddingSM,
|
||||
imagePreviewOperationDisabledColor,
|
||||
imagePreviewOperationSize,
|
||||
previewPrefixCls,
|
||||
} = token;
|
||||
return {
|
||||
...resetComponent(token),
|
||||
position: 'absolute',
|
||||
insetBlockStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
zIndex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
color: black,
|
||||
listStyle: 'none',
|
||||
background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(), // FIXME: hard code
|
||||
pointerEvents: 'auto',
|
||||
|
||||
[`.${previewPrefixCls}-operations-operation`]: {
|
||||
marginInlineStart: paddingSM,
|
||||
padding: paddingSM,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&-disabled': {
|
||||
color: imagePreviewOperationDisabledColor,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'&:last-of-type': {
|
||||
marginInlineStart: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-icon`]: {
|
||||
fontSize: imagePreviewOperationSize,
|
||||
},
|
||||
};
|
||||
};
|
||||
export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
|
||||
const {
|
||||
black,
|
||||
modalMaskBg,
|
||||
iconPrefixCls,
|
||||
imagePreviewOperationDisabledColor,
|
||||
previewPrefixCls,
|
||||
switchWidth,
|
||||
switchRight,
|
||||
switchHeight,
|
||||
switchMarginTop,
|
||||
iconPrefixClsFontSize,
|
||||
} = token;
|
||||
return {
|
||||
position: 'absolute',
|
||||
insetBlockStart: '50%',
|
||||
insetInlineEnd: switchRight,
|
||||
zIndex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: switchWidth,
|
||||
height: switchHeight,
|
||||
marginTop: switchMarginTop,
|
||||
color: black,
|
||||
background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(), // FIXME: hard code in v4
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
pointerEvents: 'auto',
|
||||
|
||||
[`.${previewPrefixCls}-disabled`]: {
|
||||
color: imagePreviewOperationDisabledColor,
|
||||
cursor: 'not-allowed',
|
||||
[`> .${iconPrefixCls}`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
[`> .${iconPrefixCls}`]: {
|
||||
fontSize: iconPrefixClsFontSize,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
|
||||
const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, duration } = token;
|
||||
return {
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
[`.${previewPrefixCls}-body`]: {
|
||||
...genBoxStyle(),
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-img`]: {
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
verticalAlign: 'middle',
|
||||
transform: 'scale3d(1, 1, 1)',
|
||||
cursor: 'grab',
|
||||
transition: `transform ${duration} ${motionEaseOut} 0s`,
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'auto',
|
||||
|
||||
'&-wrapper': {
|
||||
...genBoxStyle(),
|
||||
transition: `transform ${duration} ${motionEaseOut} 0s`,
|
||||
|
||||
'&::before': {
|
||||
display: 'inline-block',
|
||||
width: width1px,
|
||||
height: '50%',
|
||||
marginInlineEnd: -width1px,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-moving`]: {
|
||||
[`.${previewPrefixCls}-preview-img`]: {
|
||||
cursor: 'grabbing',
|
||||
|
||||
'&-wrapper': {
|
||||
transitionDuration: '0s',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-operations`]: {
|
||||
...genPreviewOperationsStyle(token),
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-switch-left, .${previewPrefixCls}-switch-right`]: {
|
||||
...genPreviewSwitchStyle(token),
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-switch-left`]: {
|
||||
insetInlineStart: switchLeft,
|
||||
},
|
||||
|
||||
[`.${previewPrefixCls}-switch-right`]: {
|
||||
insetInlineEnd: switchRight,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
||||
const {
|
||||
prefixCls,
|
||||
zIndexModalMask,
|
||||
modalMaskBg,
|
||||
previewPrefixCls,
|
||||
imageBg,
|
||||
zIndexImage,
|
||||
duration,
|
||||
} = token;
|
||||
return {
|
||||
// ============================== image ==============================
|
||||
[`.${prefixCls}`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
[`.${prefixCls}-img`]: {
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
[`.${prefixCls}-img-placeholder`]: {
|
||||
backgroundColor: imageBg,
|
||||
backgroundImage:
|
||||
"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center center',
|
||||
backgroundSize: '30%',
|
||||
},
|
||||
|
||||
[`.${prefixCls}-mask`]: {
|
||||
...genImageMaskStyle(token),
|
||||
},
|
||||
[`.${prefixCls}-mask:hover`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
[`.${prefixCls}-placeholder`]: {
|
||||
...genBoxStyle(),
|
||||
},
|
||||
},
|
||||
// ============================== preview ==============================
|
||||
pointerEvents: 'none',
|
||||
[`.${previewPrefixCls}.${prefixCls}-zoom-enter, .${previewPrefixCls}.${prefixCls}zoom-appear`]:
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 0,
|
||||
animationDuration: duration,
|
||||
userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
|
||||
},
|
||||
[`.${previewPrefixCls}-root`]: {
|
||||
[`.${previewPrefixCls}-mask`]: {
|
||||
...genBoxStyle('fixed'),
|
||||
zIndex: zIndexModalMask,
|
||||
height: '100%',
|
||||
backgroundColor: modalMaskBg,
|
||||
|
||||
'&-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
[`.${previewPrefixCls}-wrap`]: {
|
||||
...genBoxStyle('fixed'),
|
||||
overflow: 'auto',
|
||||
outline: 0,
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
zIndex: zIndexImage,
|
||||
[`.${previewPrefixCls}`]: {
|
||||
...genImagePreviewStyle(token),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
const inputToken: ImageToken = {
|
||||
...token,
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
previewPrefixCls: `${prefixCls}-preview`,
|
||||
|
||||
white: '#fff', // FIXME: hard code
|
||||
black: '#000', // FIXME: hard code
|
||||
imageSizeBase: 48, // FIXME: hard code in v4
|
||||
imageFontSizeBase: 24, // FIXME: hard code in v4
|
||||
imageBg: '#f5f5f5', // FIXME: hard code in v4
|
||||
imageColor: '#fff', // FIXME: hard code in v4
|
||||
imageMaskFontSize: 16, // FIXME: hard code in v4
|
||||
imagePreviewOperationSize: 18, // FIXME: hard code in v4
|
||||
iconPrefixClsFontSize: 18, // FIXME: hard code in v4
|
||||
switchWidth: 44, // FIXME: hard code in v4
|
||||
switchHeight: 44, // FIXME: hard code in v4
|
||||
switchRight: 10, // FIXME: hard code in v4
|
||||
switchLeft: 10, // FIXME: hard code in v4
|
||||
switchMarginTop: -22, // FIXME: hard code in v4
|
||||
width1px: 1, // FIXME: hard code in v4
|
||||
imagePreviewOperationDisabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // FIXME: hard code in v4
|
||||
modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: hard code in v4
|
||||
zIndexImage: 1080, // FIXME: hard code in v4
|
||||
zIndexModalMask: 1000, // FIXME: hard code in v4
|
||||
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genImageStyle(inputToken, hashId),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user