mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
c8b74859ca
* fix: fix master CI fail * fix: fix master CI fail * test: fix test case
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import EyeOutlined from '@ant-design/icons/EyeOutlined';
|
|
import classNames from 'classnames';
|
|
import RcImage, { type ImageProps } from 'rc-image';
|
|
import * as React from 'react';
|
|
import { getTransitionName } from '../_util/motion';
|
|
import { ConfigContext } from '../config-provider';
|
|
import defaultLocale from '../locale/en_US';
|
|
// CSSINJS
|
|
import PreviewGroup, { icons } from './PreviewGroup';
|
|
import useStyle from './style';
|
|
|
|
export interface CompositionImage<P> extends React.FC<P> {
|
|
PreviewGroup: typeof PreviewGroup;
|
|
}
|
|
|
|
const Image: CompositionImage<ImageProps> = (props) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
preview,
|
|
className,
|
|
rootClassName,
|
|
style,
|
|
...otherProps
|
|
} = props;
|
|
const {
|
|
getPrefixCls,
|
|
locale: contextLocale = defaultLocale,
|
|
getPopupContainer: getContextPopupContainer,
|
|
image,
|
|
} = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('image', customizePrefixCls);
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
const imageLocale = contextLocale.Image || defaultLocale.Image;
|
|
// Style
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const mergedRootClassName = classNames(rootClassName, hashId);
|
|
|
|
const mergedClassName = classNames(className, hashId, image?.className);
|
|
|
|
const mergedPreview = React.useMemo(() => {
|
|
if (preview === false) {
|
|
return preview;
|
|
}
|
|
const _preview = typeof preview === 'object' ? preview : {};
|
|
const { getContainer, ...restPreviewProps } = _preview;
|
|
return {
|
|
mask: (
|
|
<div className={`${prefixCls}-mask-info`}>
|
|
<EyeOutlined />
|
|
{imageLocale?.preview}
|
|
</div>
|
|
),
|
|
icons,
|
|
...restPreviewProps,
|
|
getContainer: getContainer || getContextPopupContainer,
|
|
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
|
|
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
|
|
};
|
|
}, [preview, imageLocale]);
|
|
|
|
const mergedStyle: React.CSSProperties = { ...image?.style, ...style };
|
|
|
|
return wrapSSR(
|
|
<RcImage
|
|
prefixCls={prefixCls}
|
|
preview={mergedPreview}
|
|
rootClassName={mergedRootClassName}
|
|
className={mergedClassName}
|
|
style={mergedStyle}
|
|
{...otherProps}
|
|
/>,
|
|
);
|
|
};
|
|
|
|
export { ImageProps };
|
|
|
|
Image.PreviewGroup = PreviewGroup;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Image.displayName = 'Image';
|
|
}
|
|
|
|
export default Image;
|