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 migrate to genComponentStyleHook (#34933)

Browse Source
This commit is contained in:
MadCcc 2022-04-08 18:05:50 +08:00 committed by GitHub
parent 5d6bf9d2df
commit ab402c1976
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/_util/theme/interface.ts
View File

@ -53,6 +53,7 @@ export interface OverrideToken {
Empty?: EmptyComponentToken;
Form?: {};
Grid?: {};
Image?: {};
Input?: {};
InputNumber?: InputNumberComponentToken;
List?: {};

4
components/image/PreviewGroup.tsx
View File

@ -29,11 +29,11 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
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) {

4
components/image/index.tsx
View File

@ -20,14 +20,14 @@ const Image: CompositionImage<ImageProps> = ({
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(() => {

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

@ -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<ImageToken> = (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<ImageToken> = (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<ImageToken> = (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)];
});