import * as React from 'react';
import EyeOutlined from '@ant-design/icons/EyeOutlined';
import classNames from 'classnames';
import RcImage from 'rc-image';
import type { ImageProps } from 'rc-image';
import { useZIndex } from '../_util/hooks/useZIndex';
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';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export interface CompositionImage
extends React.FC
{
PreviewGroup: typeof PreviewGroup;
}
const Image: CompositionImage = (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 [, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const mergedRootClassName = classNames(rootClassName, hashId, rootCls);
const mergedClassName = classNames(className, hashId, image?.className);
const [zIndex] = useZIndex(
'ImagePreview',
typeof preview === 'object' ? preview.zIndex : undefined,
);
const mergedPreview = React.useMemo(() => {
if (preview === false) {
return preview;
}
const _preview = typeof preview === 'object' ? preview : {};
const { getContainer, ...restPreviewProps } = _preview;
return {
mask: (
{imageLocale?.preview}
),
icons,
...restPreviewProps,
getContainer: getContainer || getContextPopupContainer,
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
zIndex,
};
}, [preview, imageLocale]);
const mergedStyle: React.CSSProperties = { ...image?.style, ...style };
return wrapCSSVar(
,
);
};
export type { ImageProps };
Image.PreviewGroup = PreviewGroup;
if (process.env.NODE_ENV !== 'production') {
Image.displayName = 'Image';
}
export default Image;