2022-06-22 14:57:09 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
|
|
import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
|
|
|
import RightOutlined from '@ant-design/icons/RightOutlined';
|
2021-01-06 22:23:49 +08:00
|
|
|
import RotateLeftOutlined from '@ant-design/icons/RotateLeftOutlined';
|
|
|
|
import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined';
|
2023-02-10 00:12:18 +08:00
|
|
|
import SwapOutlined from '@ant-design/icons/SwapOutlined';
|
2021-01-06 22:23:49 +08:00
|
|
|
import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
|
|
|
|
import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import RcImage from 'rc-image';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
|
2023-05-05 20:52:44 +08:00
|
|
|
import React from 'react';
|
2023-03-16 09:53:57 +08:00
|
|
|
import classNames from 'classnames';
|
2020-11-30 15:54:54 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2021-02-20 22:24:44 +08:00
|
|
|
import { getTransitionName } from '../_util/motion';
|
2020-11-30 15:54:54 +08:00
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
// CSSINJS
|
|
|
|
import useStyle from './style';
|
|
|
|
|
2021-01-06 22:23:49 +08:00
|
|
|
export const icons = {
|
|
|
|
rotateLeft: <RotateLeftOutlined />,
|
|
|
|
rotateRight: <RotateRightOutlined />,
|
|
|
|
zoomIn: <ZoomInOutlined />,
|
|
|
|
zoomOut: <ZoomOutOutlined />,
|
|
|
|
close: <CloseOutlined />,
|
|
|
|
left: <LeftOutlined />,
|
|
|
|
right: <RightOutlined />,
|
2023-02-10 00:12:18 +08:00
|
|
|
flipX: <SwapOutlined />,
|
|
|
|
flipY: <SwapOutlined rotate={90} />,
|
2021-01-06 22:23:49 +08:00
|
|
|
};
|
|
|
|
|
2020-12-10 08:17:29 +08:00
|
|
|
const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
|
2020-11-30 15:54:54 +08:00
|
|
|
previewPrefixCls: customizePrefixCls,
|
2021-02-20 22:24:44 +08:00
|
|
|
preview,
|
2020-11-30 15:54:54 +08:00
|
|
|
...props
|
|
|
|
}) => {
|
2022-04-08 18:05:50 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
2022-11-02 13:59:23 +08:00
|
|
|
const prefixCls = getPrefixCls('image', customizePrefixCls);
|
|
|
|
const previewPrefixCls = `${prefixCls}-preview`;
|
2021-02-20 22:24:44 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
|
2022-04-08 18:05:50 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2022-03-22 14:11:30 +08:00
|
|
|
|
2021-02-20 22:24:44 +08:00
|
|
|
const mergedPreview = React.useMemo(() => {
|
|
|
|
if (preview === false) {
|
|
|
|
return preview;
|
|
|
|
}
|
|
|
|
const _preview = typeof preview === 'object' ? preview : {};
|
2023-03-16 09:53:57 +08:00
|
|
|
const mergedRootClassName = classNames(hashId, _preview.rootClassName ?? '');
|
2021-02-20 22:24:44 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
..._preview,
|
|
|
|
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
|
|
|
|
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
|
2023-03-16 09:53:57 +08:00
|
|
|
rootClassName: mergedRootClassName,
|
2021-02-20 22:24:44 +08:00
|
|
|
};
|
|
|
|
}, [preview]);
|
|
|
|
|
2022-03-22 14:11:30 +08:00
|
|
|
return wrapSSR(
|
2021-02-20 22:24:44 +08:00
|
|
|
<RcImage.PreviewGroup
|
|
|
|
preview={mergedPreview}
|
2022-11-02 13:59:23 +08:00
|
|
|
previewPrefixCls={previewPrefixCls}
|
2021-02-20 22:24:44 +08:00
|
|
|
icons={icons}
|
|
|
|
{...props}
|
2022-03-22 14:11:30 +08:00
|
|
|
/>,
|
2021-02-20 22:24:44 +08:00
|
|
|
);
|
2020-11-30 15:54:54 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default InternalPreviewGroup;
|