ant-design/components/image/PreviewGroup.tsx
MadCcc 2e0942ab26
refactor: separate cssVarCls from hashId (#46424)
* refactor: cssVarCls

* refactor: update

* chore: update

* fix: cascader & tree-select

* fix: ribbon
2023-12-14 14:58:53 +08:00

82 lines
2.6 KiB
TypeScript

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,
...props
}) => {
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}
{...props}
/>,
);
};
export default InternalPreviewGroup;