From ab402c19765c050ec072300925ad2a71d9f2e14f Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 8 Apr 2022 18:05:50 +0800 Subject: [PATCH] refactor: Image migrate to genComponentStyleHook (#34933) --- components/_util/theme/interface.ts | 1 + components/image/PreviewGroup.tsx | 4 +- components/image/index.tsx | 4 +- components/image/style/index.tsx | 88 +++++++++++------------------ 4 files changed, 38 insertions(+), 59 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index f0485937a7..9c16561cd7 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -53,6 +53,7 @@ export interface OverrideToken { Empty?: EmptyComponentToken; Form?: {}; Grid?: {}; + Image?: {}; Input?: {}; InputNumber?: InputNumberComponentToken; List?: {}; diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index 7e3c0ef371..a43c845694 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -29,11 +29,11 @@ const InternalPreviewGroup: React.FC = ({ preview, ...props }) => { - const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('image-preview', customizePrefixCls); const rootPrefixCls = getPrefixCls(); - const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); const mergedPreview = React.useMemo(() => { if (preview === false) { diff --git a/components/image/index.tsx b/components/image/index.tsx index 30f7b66e00..3597c15143 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -20,14 +20,14 @@ const Image: CompositionImage = ({ rootClassName, ...otherProps }) => { - const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); + const { getPrefixCls } = 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 [wrapSSR, hashId] = useStyle(prefixCls); const mergedRootClassName = classNames(rootClassName, hashId); const mergedPreview = React.useMemo(() => { diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx index 7cf60d3179..eb58ade193 100644 --- a/components/image/style/index.tsx +++ b/components/image/style/index.tsx @@ -1,19 +1,10 @@ // 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'; +import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme'; -export interface ImageToken extends DerivativeToken { - prefixCls: string; +export interface ImageToken extends FullToken<'Image'> { previewPrefixCls: string; - iconPrefixCls: string; imageSizeBase: number; marginXXS: number; imageBg: string; @@ -45,8 +36,7 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({ }); export const genImageMaskStyle = (token: ImageToken): CSSObject => { - const { iconPrefixCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = - token; + const { iconCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = token; return { position: 'absolute', inset: 0, @@ -64,7 +54,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', - [`.${iconPrefixCls}`]: { + [iconCls]: { marginInlineEnd: marginXXS, }, }, @@ -95,7 +85,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => { background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(), // FIXME: hard code pointerEvents: 'auto', - [`.${previewPrefixCls}-operations-operation`]: { + [`${previewPrefixCls}-operations-operation`]: { marginInlineStart: paddingSM, padding: paddingSM, cursor: 'pointer', @@ -110,7 +100,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => { }, }, - [`.${previewPrefixCls}-icon`]: { + [`${previewPrefixCls}-icon`]: { fontSize: imagePreviewOperationSize, }, }; @@ -119,7 +109,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => { const { black, modalMaskBg, - iconPrefixCls, + iconCls, imagePreviewOperationDisabledColor, previewPrefixCls, switchWidth, @@ -145,14 +135,14 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => { cursor: 'pointer', pointerEvents: 'auto', - [`.${previewPrefixCls}-disabled`]: { + [`${previewPrefixCls}-disabled`]: { color: imagePreviewOperationDisabledColor, cursor: 'not-allowed', - [`> .${iconPrefixCls}`]: { + [`> ${iconCls}`]: { cursor: 'not-allowed', }, }, - [`> .${iconPrefixCls}`]: { + [`> ${iconCls}`]: { fontSize: iconPrefixClsFontSize, }, }; @@ -164,12 +154,12 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => { return { height: '100%', textAlign: 'center', - [`.${previewPrefixCls}-body`]: { + [`${previewPrefixCls}-body`]: { ...genBoxStyle(), overflow: 'hidden', }, - [`.${previewPrefixCls}-img`]: { + [`${previewPrefixCls}-img`]: { maxWidth: '100%', maxHeight: '100%', verticalAlign: 'middle', @@ -193,8 +183,8 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => { }, }, - [`.${previewPrefixCls}-moving`]: { - [`.${previewPrefixCls}-preview-img`]: { + [`${previewPrefixCls}-moving`]: { + [`${previewPrefixCls}-preview-img`]: { cursor: 'grabbing', '&-wrapper': { @@ -203,19 +193,19 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => { }, }, - [`.${previewPrefixCls}-operations`]: { + [`${previewPrefixCls}-operations`]: { ...genPreviewOperationsStyle(token), }, - [`.${previewPrefixCls}-switch-left, .${previewPrefixCls}-switch-right`]: { + [`${previewPrefixCls}-switch-left, ${previewPrefixCls}-switch-right`]: { ...genPreviewSwitchStyle(token), }, - [`.${previewPrefixCls}-switch-left`]: { + [`${previewPrefixCls}-switch-left`]: { insetInlineStart: switchLeft, }, - [`.${previewPrefixCls}-switch-right`]: { + [`${previewPrefixCls}-switch-right`]: { insetInlineEnd: switchRight, }, }; @@ -262,15 +252,14 @@ const genImageStyle: GenerateStyle = (token: ImageToken) => { }, // ============================== preview ============================== pointerEvents: 'none', - [`.${previewPrefixCls}.${prefixCls}-zoom-enter, .${previewPrefixCls}.${prefixCls}zoom-appear`]: - { - transform: 'none', - opacity: 0, - animationDuration: motionDurationSlow, - userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777 - }, - [`.${previewPrefixCls}-root`]: { - [`.${previewPrefixCls}-mask`]: { + [`${previewPrefixCls}.${prefixCls}-zoom-enter, ${previewPrefixCls}.${prefixCls}zoom-appear`]: { + transform: 'none', + opacity: 0, + animationDuration: motionDurationSlow, + userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777 + }, + [`${previewPrefixCls}-root`]: { + [`${previewPrefixCls}-mask`]: { ...genBoxStyle('fixed'), zIndex: zIndexModalMask, height: '100%', @@ -280,13 +269,13 @@ const genImageStyle: GenerateStyle = (token: ImageToken) => { display: 'none', }, }, - [`.${previewPrefixCls}-wrap`]: { + [`${previewPrefixCls}-wrap`]: { ...genBoxStyle('fixed'), overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', zIndex: zIndexImage, - [`.${previewPrefixCls}`]: { + [`${previewPrefixCls}`]: { ...genImagePreviewStyle(token), }, }, @@ -295,16 +284,10 @@ const genImageStyle: GenerateStyle = (token: ImageToken) => { }; // ============================== Export ============================== -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - const inputToken: ImageToken = { +export default genComponentStyleHook('Image', (token, { hashId }) => { + const imageToken: ImageToken = { ...token, - prefixCls, - iconPrefixCls, - previewPrefixCls: `${prefixCls}-preview`, + previewPrefixCls: `${token.componentCls}-preview`, white: '#fff', // FIXME: hard code black: '#000', // FIXME: hard code @@ -328,10 +311,5 @@ export default function useStyle( 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, - ]; -} + return [genImageStyle(imageToken, hashId)]; +});