mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

refactor: Image support css var (#45783)

Browse Source 
* refactor: Image support css var

* Update components/image/style/index.ts

Signed-off-by: MadCcc <1075746765@qq.com>

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
JarvisArt 2023-11-13 10:16:35 +08:00 committed by GitHub
parent 55bb516e9e
commit df169cc4c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/image/PreviewGroup.tsx
View File

@ -15,6 +15,8 @@ import { getTransitionName } from '../_util/motion';
// CSSINJS
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export const icons = {
rotateLeft: <RotateLeftOutlined />,
@ -38,14 +40,16 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
const previewPrefixCls = `${prefixCls}-preview`;
const rootPrefixCls = getPrefixCls();
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const mergedPreview = React.useMemo(() => {
if (preview === false) {
return preview;
}
const _preview = typeof preview === 'object' ? preview : {};
const mergedRootClassName = classNames(hashId, _preview.rootClassName ?? '');
const mergedRootClassName = classNames(hashId, rootCls, _preview.rootClassName ?? '');
return {
..._preview,
@ -55,7 +59,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
};
}, [preview]);
return wrapSSR(
return wrapCSSVar(
<RcImage.PreviewGroup
preview={mergedPreview}
previewPrefixCls={previewPrefixCls}

10
components/image/index.tsx
View File

@ -10,6 +10,8 @@ import defaultLocale from '../locale/en_US';
// CSSINJS
import PreviewGroup, { icons } from './PreviewGroup';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export interface CompositionImage<P> extends React.FC<P> {
PreviewGroup: typeof PreviewGroup;
@ -36,9 +38,11 @@ const Image: CompositionImage<ImageProps> = (props) => {
const imageLocale = contextLocale.Image || defaultLocale.Image;
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const mergedRootClassName = classNames(rootClassName, hashId);
const mergedRootClassName = classNames(rootClassName, hashId, rootCls);
const mergedClassName = classNames(className, hashId, image?.className);
@ -65,7 +69,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
const mergedStyle: React.CSSProperties = { ...image?.style, ...style };
return wrapSSR(
return wrapCSSVar(
<RcImage
prefixCls={prefixCls}
preview={mergedPreview}

4
components/image/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Image', prepareComponentToken);

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

@ -3,8 +3,9 @@ import { TinyColor } from '@ctrl/tinycolor';
import { genModalMaskStyle } from '../../modal/style';
import { textEllipsis } from '../../style';
import { initFadeMotion, initZoomMotion } from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';
export interface ComponentToken {
/**
@ -64,7 +65,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
[`.${prefixCls}-mask-info`]: {
...textEllipsis,
padding: `0 ${paddingXXS}px`,
padding: `0 ${unit(paddingXXS)}`,
[iconCls]: {
marginInlineEnd: marginXXS,
svg: {
@ -138,7 +139,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
[`${previewCls}-operations`]: {
display: 'flex',
alignItems: 'center',
padding: `0 ${paddingLG}px`,
padding: `0 ${unit(paddingLG)}`,
backgroundColor: operationBg.toRgbString(),
borderRadius: 100,
@ -187,13 +188,13 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
[`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
position: 'fixed',
insetBlockStart: '50%',
zIndex: zIndexPopup + 1,
zIndex: token.calc(zIndexPopup).add(1).equal({ unit: false }),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: token.imagePreviewSwitchSize,
height: token.imagePreviewSwitchSize,
marginTop: -token.imagePreviewSwitchSize / 2,
marginTop: token.calc(token.imagePreviewSwitchSize).mul(-1).div(2).equal(),
color: token.previewOperationColor,
background: operationBg.toRgbString(),
borderRadius: '50%',
@ -306,7 +307,7 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
{
[`${componentCls}-preview-operations-wrapper`]: {
position: 'fixed',
zIndex: token.zIndexPopup + 1,
zIndex: token.calc(token.zIndexPopup).add(1).equal({ unit: false }),
},
'&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)],
},
@ -356,6 +357,16 @@ const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
};
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Image'> = (token) => ({
zIndexPopup: token.zIndexPopupBase + 80,
previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.85).toRgbString(),
previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
.setAlpha(0.25)
.toRgbString(),
previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
});
export default genComponentStyleHook(
'Image',
(token) => {
@ -374,15 +385,5 @@ export default genComponentStyleHook(
genPreviewMotion(imageToken),
];
},
(token) => ({
zIndexPopup: token.zIndexPopupBase + 80,
previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
previewOperationHoverColor: new TinyColor(token.colorTextLightSolid)
.setAlpha(0.85)
.toRgbString(),
previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
.setAlpha(0.25)
.toRgbString(),
previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
}),
prepareComponentToken,
);