import * as React from 'react'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; import RightOutlined from '@ant-design/icons/RightOutlined'; import RotateLeftOutlined from '@ant-design/icons/RotateLeftOutlined'; import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined'; import SwapOutlined from '@ant-design/icons/SwapOutlined'; import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined'; import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined'; import classNames from 'classnames'; import RcImage from 'rc-image'; import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup'; import { useZIndex } from '../_util/hooks/useZIndex'; import { getTransitionName } from '../_util/motion'; import { ConfigContext } from '../config-provider'; import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import useStyle from './style'; export const icons = { rotateLeft: <RotateLeftOutlined />, rotateRight: <RotateRightOutlined />, zoomIn: <ZoomInOutlined />, zoomOut: <ZoomOutOutlined />, close: <CloseOutlined />, left: <LeftOutlined />, right: <RightOutlined />, flipX: <SwapOutlined />, flipY: <SwapOutlined rotate={90} />, }; const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({ previewPrefixCls: customizePrefixCls, preview, ...otherProps }) => { const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('image', customizePrefixCls); const previewPrefixCls = `${prefixCls}-preview`; const rootPrefixCls = getPrefixCls(); const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); const [zIndex] = useZIndex( 'ImagePreview', typeof preview === 'object' ? preview.zIndex : undefined, ); const mergedPreview = React.useMemo<GroupConsumerProps['preview']>(() => { if (preview === false) { return preview; } const _preview = typeof preview === 'object' ? preview : {}; const mergedRootClassName = classNames( hashId, cssVarCls, rootCls, _preview.rootClassName ?? '', ); return { ..._preview, transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), rootClassName: mergedRootClassName, zIndex, }; }, [preview]); return wrapCSSVar( <RcImage.PreviewGroup preview={mergedPreview} previewPrefixCls={previewPrefixCls} icons={icons} {...otherProps} />, ); }; export default InternalPreviewGroup;