PreviewGroup.js 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
  12. import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
  13. import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
  14. import RotateLeftOutlined from "@ant-design/icons/es/icons/RotateLeftOutlined";
  15. import RotateRightOutlined from "@ant-design/icons/es/icons/RotateRightOutlined";
  16. import SwapOutlined from "@ant-design/icons/es/icons/SwapOutlined";
  17. import ZoomInOutlined from "@ant-design/icons/es/icons/ZoomInOutlined";
  18. import ZoomOutOutlined from "@ant-design/icons/es/icons/ZoomOutOutlined";
  19. import classNames from 'classnames';
  20. import RcImage from 'rc-image';
  21. import { useZIndex } from '../_util/hooks/useZIndex';
  22. import { getTransitionName } from '../_util/motion';
  23. import { ConfigContext } from '../config-provider';
  24. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  25. import useStyle from './style';
  26. export const icons = {
  27. rotateLeft: /*#__PURE__*/React.createElement(RotateLeftOutlined, null),
  28. rotateRight: /*#__PURE__*/React.createElement(RotateRightOutlined, null),
  29. zoomIn: /*#__PURE__*/React.createElement(ZoomInOutlined, null),
  30. zoomOut: /*#__PURE__*/React.createElement(ZoomOutOutlined, null),
  31. close: /*#__PURE__*/React.createElement(CloseOutlined, null),
  32. left: /*#__PURE__*/React.createElement(LeftOutlined, null),
  33. right: /*#__PURE__*/React.createElement(RightOutlined, null),
  34. flipX: /*#__PURE__*/React.createElement(SwapOutlined, null),
  35. flipY: /*#__PURE__*/React.createElement(SwapOutlined, {
  36. rotate: 90
  37. })
  38. };
  39. const InternalPreviewGroup = _a => {
  40. var {
  41. previewPrefixCls: customizePrefixCls,
  42. preview
  43. } = _a,
  44. otherProps = __rest(_a, ["previewPrefixCls", "preview"]);
  45. const {
  46. getPrefixCls,
  47. direction
  48. } = React.useContext(ConfigContext);
  49. const prefixCls = getPrefixCls('image', customizePrefixCls);
  50. const previewPrefixCls = `${prefixCls}-preview`;
  51. const rootPrefixCls = getPrefixCls();
  52. const rootCls = useCSSVarCls(prefixCls);
  53. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  54. const [zIndex] = useZIndex('ImagePreview', typeof preview === 'object' ? preview.zIndex : undefined);
  55. const memoizedIcons = React.useMemo(() => Object.assign(Object.assign({}, icons), {
  56. left: direction === 'rtl' ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null),
  57. right: direction === 'rtl' ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null)
  58. }), [direction]);
  59. const mergedPreview = React.useMemo(() => {
  60. var _a;
  61. if (preview === false) {
  62. return preview;
  63. }
  64. const _preview = typeof preview === 'object' ? preview : {};
  65. const mergedRootClassName = classNames(hashId, cssVarCls, rootCls, (_a = _preview.rootClassName) !== null && _a !== void 0 ? _a : '');
  66. return Object.assign(Object.assign({}, _preview), {
  67. transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
  68. maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
  69. rootClassName: mergedRootClassName,
  70. zIndex
  71. });
  72. }, [preview]);
  73. return wrapCSSVar(/*#__PURE__*/React.createElement(RcImage.PreviewGroup, Object.assign({
  74. preview: mergedPreview,
  75. previewPrefixCls: previewPrefixCls,
  76. icons: memoizedIcons
  77. }, otherProps)));
  78. };
  79. export default InternalPreviewGroup;