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;