mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-10 19:19:20 +08:00
Code Issues Actions 42 Packages Projects Releases Wiki Activity

feat: cssinjs for image (#34630)

Browse Source 
* feat: cssinjs for image

* feat: update for CI
This commit is contained in:
黑雨 2022-03-22 14:11:30 +08:00 committed by GitHub
parent 18c4fe5fd9
commit 950095971b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 541 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/image/PreviewGroup.tsx
View File

@ -11,6 +11,9 @@ import { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
// CSSINJS
import useStyle from './style';
export const icons = { export const icons = {
rotateLeft: <RotateLeftOutlined />, rotateLeft: <RotateLeftOutlined />,
rotateRight: <RotateRightOutlined />, rotateRight: <RotateRightOutlined />,
@ -26,10 +29,12 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
preview, preview,
...props ...props
}) => { }) => {
const { getPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('image-preview', customizePrefixCls); const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
const rootPrefixCls = getPrefixCls(); const rootPrefixCls = getPrefixCls();
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
const mergedPreview = React.useMemo(() => { const mergedPreview = React.useMemo(() => {
if (preview === false) { if (preview === false) {
return preview; return preview;
@ -40,16 +45,17 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
..._preview, ..._preview,
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
rootClassName: hashId,
}; };
}, [preview]); }, [preview]);
return ( return wrapSSR(
<RcImage.PreviewGroup <RcImage.PreviewGroup
preview={mergedPreview} preview={mergedPreview}
previewPrefixCls={prefixCls} previewPrefixCls={prefixCls}
icons={icons} icons={icons}
{...props} {...props}
/> />,
); );
}; };

18
components/image/index.tsx
View File

@ -2,10 +2,13 @@ import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import EyeOutlined from '@ant-design/icons/EyeOutlined'; import EyeOutlined from '@ant-design/icons/EyeOutlined';
import RcImage, { ImageProps } from 'rc-image'; import RcImage, { ImageProps } from 'rc-image';
import classNames from 'classnames';
import defaultLocale from '../locale/en_US'; import defaultLocale from '../locale/en_US';
import PreviewGroup, { icons } from './PreviewGroup'; import PreviewGroup, { icons } from './PreviewGroup';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
// CSSINJS
import useStyle from './style';
export interface CompositionImage<P> extends React.FC<P> { export interface CompositionImage<P> extends React.FC<P> {
PreviewGroup: typeof PreviewGroup; PreviewGroup: typeof PreviewGroup;
@ -14,15 +17,19 @@ export interface CompositionImage<P> extends React.FC<P> {
const Image: CompositionImage<ImageProps> = ({ const Image: CompositionImage<ImageProps> = ({
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
preview, preview,
rootClassName,
...otherProps ...otherProps
}) => { }) => {
const { getPrefixCls } = useContext(ConfigContext); const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
const prefixCls = getPrefixCls('image', customizePrefixCls); const prefixCls = getPrefixCls('image', customizePrefixCls);
const rootPrefixCls = getPrefixCls(); const rootPrefixCls = getPrefixCls();
const { locale: contextLocale = defaultLocale } = useContext(ConfigContext); const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
const imageLocale = contextLocale.Image || defaultLocale.Image; const imageLocale = contextLocale.Image || defaultLocale.Image;
// Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
const mergedRootClassName = classNames(rootClassName, hashId);
const mergedPreview = React.useMemo(() => { const mergedPreview = React.useMemo(() => {
if (preview === false) { if (preview === false) {
return preview; return preview;
@ -43,7 +50,14 @@ const Image: CompositionImage<ImageProps> = ({
}; };
}, [preview, imageLocale]); }, [preview, imageLocale]);
return <RcImage prefixCls={prefixCls} preview={mergedPreview} {...otherProps} />; return wrapSSR(
<RcImage
prefixCls={`${prefixCls}`}
preview={mergedPreview}
rootClassName={mergedRootClassName}
{...otherProps}
/>,
);
}; };
export { ImageProps }; export { ImageProps };

362
components/image/style/index.less
View File

@ -1,181 +1,181 @@
@import '../../style/themes/index'; //@import '../../style/themes/index';
@import '../../style/mixins/index'; //@import '../../style/mixins/index';
//
@image-prefix-cls: ~'@{ant-prefix}-image'; //@image-prefix-cls: ~'@{ant-prefix}-image';
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview'; //@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
//
.@{image-prefix-cls} { //.@{image-prefix-cls} {
position: relative; // position: relative;
display: inline-block; // display: inline-block;
//
&-img { // &-img {
width: 100%; // width: 100%;
height: auto; // height: auto;
vertical-align: middle; // vertical-align: middle;
//
&-placeholder { // &-placeholder {
background-color: @image-bg; // background-color: @image-bg;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4='); // background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
background-repeat: no-repeat; // background-repeat: no-repeat;
background-position: center center; // background-position: center center;
background-size: 30%; // background-size: 30%;
} // }
} // }
//
&-mask { // &-mask {
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
color: @text-color-inverse; // color: @text-color-inverse;
background: fade(@black, 50%); // background: fade(@black, 50%);
cursor: pointer; // cursor: pointer;
opacity: 0; // opacity: 0;
transition: opacity @animation-duration-slow; // transition: opacity @animation-duration-slow;
//
&-info { // &-info {
padding: 0 @padding-xss; // padding: 0 @padding-xss;
overflow: hidden; // overflow: hidden;
white-space: nowrap; // white-space: nowrap;
text-overflow: ellipsis; // text-overflow: ellipsis;
.@{iconfont-css-prefix} { // .@{iconfont-css-prefix} {
margin-inline-end: @margin-xss; // margin-inline-end: @margin-xss;
} // }
} // }
//
&:hover { // &:hover {
opacity: 1; // opacity: 1;
} // }
} // }
//
&-placeholder { // &-placeholder {
.box(); // .box();
} // }
//
&-preview { // &-preview {
.modal-mask(); // .modal-mask();
//
height: 100%; // height: 100%;
text-align: center; // text-align: center;
//
&-body { // &-body {
.box(); // .box();
overflow: hidden; // overflow: hidden;
} // }
//
&-img { // &-img {
max-width: 100%; // max-width: 100%;
max-height: 100%; // max-height: 100%;
vertical-align: middle; // vertical-align: middle;
transform: scale3d(1, 1, 1); // transform: scale3d(1, 1, 1);
cursor: grab; // cursor: grab;
transition: transform 0.3s @ease-out 0s; // transition: transform 0.3s @ease-out 0s;
user-select: none; // user-select: none;
pointer-events: auto; // pointer-events: auto;
//
&-wrapper { // &-wrapper {
.box(); // .box();
transition: transform 0.3s @ease-out 0s; // transition: transform 0.3s @ease-out 0s;
//
&::before { // &::before {
display: inline-block; // display: inline-block;
width: 1px; // width: 1px;
height: 50%; // height: 50%;
margin-right: -1px; // margin-right: -1px;
content: ''; // content: '';
} // }
} // }
} // }
//
&-moving { // &-moving {
.@{image-prefix-cls}-preview-img { // .@{image-prefix-cls}-preview-img {
cursor: grabbing; // cursor: grabbing;
//
&-wrapper { // &-wrapper {
transition-duration: 0s; // transition-duration: 0s;
} // }
} // }
} // }
//
&-wrap { // &-wrap {
z-index: @zindex-image; // z-index: @zindex-image;
} // }
//
&-operations { // &-operations {
.reset-component(); // .reset-component();
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
z-index: 1; // z-index: 1;
display: flex; // display: flex;
flex-direction: row-reverse; // flex-direction: row-reverse;
align-items: center; // align-items: center;
width: 100%; // width: 100%;
color: @image-preview-operation-color; // color: @image-preview-operation-color;
list-style: none; // list-style: none;
background: fade(@modal-mask-bg, 10%); // background: fade(@modal-mask-bg, 10%);
pointer-events: auto; // pointer-events: auto;
//
&-operation { // &-operation {
margin-left: @control-padding-horizontal; // margin-left: @control-padding-horizontal;
padding: @control-padding-horizontal; // padding: @control-padding-horizontal;
cursor: pointer; // cursor: pointer;
//
&-disabled { // &-disabled {
color: @image-preview-operation-disabled-color; // color: @image-preview-operation-disabled-color;
pointer-events: none; // pointer-events: none;
} // }
//
&:last-of-type { // &:last-of-type {
margin-left: 0; // margin-left: 0;
} // }
} // }
//
&-icon { // &-icon {
font-size: @image-preview-operation-size; // font-size: @image-preview-operation-size;
} // }
} // }
//
&-switch-left, // &-switch-left,
&-switch-right { // &-switch-right {
position: absolute; // position: absolute;
top: 50%; // top: 50%;
right: 10px; // right: 10px;
z-index: 1; // z-index: 1;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
width: 44px; // width: 44px;
height: 44px; // height: 44px;
margin-top: -22px; // margin-top: -22px;
color: @image-preview-operation-color; // color: @image-preview-operation-color;
background: fade(@modal-mask-bg, 10%); // background: fade(@modal-mask-bg, 10%);
border-radius: 50%; // border-radius: 50%;
cursor: pointer; // cursor: pointer;
pointer-events: auto; // pointer-events: auto;
//
&-disabled { // &-disabled {
color: @image-preview-operation-disabled-color; // color: @image-preview-operation-disabled-color;
cursor: not-allowed; // cursor: not-allowed;
> .@{iconfont-css-prefix} { // > .@{iconfont-css-prefix} {
cursor: not-allowed; // cursor: not-allowed;
} // }
} // }
> .@{iconfont-css-prefix} { // > .@{iconfont-css-prefix} {
font-size: 18px; // font-size: 18px;
} // }
} // }
//
&-switch-left { // &-switch-left {
left: 10px; // left: 10px;
} // }
//
&-switch-right { // &-switch-right {
right: 10px; // right: 10px;
} // }
} // }
} //}

337
components/image/style/index.tsx
View File

@ -1,2 +1,335 @@
import '../../style/index.less'; // deps-lint-skip-all
import './index.less'; 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,
];
}