1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 | var _typeof3 = require("@babel/runtime/helpers/typeof");
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
11 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
12 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
14 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15 | var _classnames = _interopRequireDefault(require("classnames"));
|
16 | var _css = require("rc-util/lib/Dom/css");
|
17 | var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
|
18 | var React = _interopRequireWildcard(require("react"));
|
19 | var _common = require("./common");
|
20 | var _context = require("./context");
|
21 | var _useRegisterImage = _interopRequireDefault(require("./hooks/useRegisterImage"));
|
22 | var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
|
23 | var _Preview = _interopRequireDefault(require("./Preview"));
|
24 | var _PreviewGroup = _interopRequireDefault(require("./PreviewGroup"));
|
25 | var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName"],
|
26 | _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "movable", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
|
27 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
28 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
29 | var ImageInternal = function ImageInternal(props) {
|
30 | var imgSrc = props.src,
|
31 | alt = props.alt,
|
32 | onInitialPreviewClose = props.onPreviewClose,
|
33 | _props$prefixCls = props.prefixCls,
|
34 | prefixCls = _props$prefixCls === void 0 ? 'rc-image' : _props$prefixCls,
|
35 | _props$previewPrefixC = props.previewPrefixCls,
|
36 | previewPrefixCls = _props$previewPrefixC === void 0 ? "".concat(prefixCls, "-preview") : _props$previewPrefixC,
|
37 | placeholder = props.placeholder,
|
38 | fallback = props.fallback,
|
39 | width = props.width,
|
40 | height = props.height,
|
41 | style = props.style,
|
42 | _props$preview = props.preview,
|
43 | preview = _props$preview === void 0 ? true : _props$preview,
|
44 | className = props.className,
|
45 | onClick = props.onClick,
|
46 | onError = props.onError,
|
47 | wrapperClassName = props.wrapperClassName,
|
48 | wrapperStyle = props.wrapperStyle,
|
49 | rootClassName = props.rootClassName,
|
50 | otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
51 | var isCustomPlaceholder = placeholder && placeholder !== true;
|
52 | var _ref = (0, _typeof2.default)(preview) === 'object' ? preview : {},
|
53 | previewSrc = _ref.src,
|
54 | _ref$visible = _ref.visible,
|
55 | previewVisible = _ref$visible === void 0 ? undefined : _ref$visible,
|
56 | _ref$onVisibleChange = _ref.onVisibleChange,
|
57 | onPreviewVisibleChange = _ref$onVisibleChange === void 0 ? onInitialPreviewClose : _ref$onVisibleChange,
|
58 | _ref$getContainer = _ref.getContainer,
|
59 | getPreviewContainer = _ref$getContainer === void 0 ? undefined : _ref$getContainer,
|
60 | previewMask = _ref.mask,
|
61 | maskClassName = _ref.maskClassName,
|
62 | movable = _ref.movable,
|
63 | icons = _ref.icons,
|
64 | scaleStep = _ref.scaleStep,
|
65 | minScale = _ref.minScale,
|
66 | maxScale = _ref.maxScale,
|
67 | imageRender = _ref.imageRender,
|
68 | toolbarRender = _ref.toolbarRender,
|
69 | dialogProps = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
|
70 | var src = previewSrc !== null && previewSrc !== void 0 ? previewSrc : imgSrc;
|
71 | var _useMergedState = (0, _useMergedState3.default)(!!previewVisible, {
|
72 | value: previewVisible,
|
73 | onChange: onPreviewVisibleChange
|
74 | }),
|
75 | _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
|
76 | isShowPreview = _useMergedState2[0],
|
77 | setShowPreview = _useMergedState2[1];
|
78 | var _useStatus = (0, _useStatus3.default)({
|
79 | src: imgSrc,
|
80 | isCustomPlaceholder: isCustomPlaceholder,
|
81 | fallback: fallback
|
82 | }),
|
83 | _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 3),
|
84 | getImgRef = _useStatus2[0],
|
85 | srcAndOnload = _useStatus2[1],
|
86 | status = _useStatus2[2];
|
87 | var _useState = (0, React.useState)(null),
|
88 | _useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
89 | mousePosition = _useState2[0],
|
90 | setMousePosition = _useState2[1];
|
91 | var groupContext = (0, React.useContext)(_context.PreviewGroupContext);
|
92 | var canPreview = !!preview;
|
93 | var onPreviewClose = function onPreviewClose() {
|
94 | setShowPreview(false);
|
95 | setMousePosition(null);
|
96 | };
|
97 | var wrapperClass = (0, _classnames.default)(prefixCls, wrapperClassName, rootClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), status === 'error'));
|
98 |
|
99 |
|
100 | var imgCommonProps = (0, React.useMemo)(function () {
|
101 | var obj = {};
|
102 | _common.COMMON_PROPS.forEach(function (prop) {
|
103 | if (props[prop] !== undefined) {
|
104 | obj[prop] = props[prop];
|
105 | }
|
106 | });
|
107 | return obj;
|
108 | }, _common.COMMON_PROPS.map(function (prop) {
|
109 | return props[prop];
|
110 | }));
|
111 |
|
112 |
|
113 | var registerData = (0, React.useMemo)(function () {
|
114 | return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imgCommonProps), {}, {
|
115 | src: src
|
116 | });
|
117 | }, [src, imgCommonProps]);
|
118 | var imageId = (0, _useRegisterImage.default)(canPreview, registerData);
|
119 |
|
120 |
|
121 | var onPreview = function onPreview(e) {
|
122 | var _getOffset = (0, _css.getOffset)(e.target),
|
123 | left = _getOffset.left,
|
124 | top = _getOffset.top;
|
125 | if (groupContext) {
|
126 | groupContext.onPreview(imageId, left, top);
|
127 | } else {
|
128 | setMousePosition({
|
129 | x: left,
|
130 | y: top
|
131 | });
|
132 | setShowPreview(true);
|
133 | }
|
134 | onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
135 | };
|
136 |
|
137 |
|
138 | return React.createElement(React.Fragment, null, React.createElement("div", (0, _extends2.default)({}, otherProps, {
|
139 | className: wrapperClass,
|
140 | onClick: canPreview ? onPreview : onClick,
|
141 | style: (0, _objectSpread2.default)({
|
142 | width: width,
|
143 | height: height
|
144 | }, wrapperStyle)
|
145 | }), React.createElement("img", (0, _extends2.default)({}, imgCommonProps, {
|
146 | className: (0, _classnames.default)("".concat(prefixCls, "-img"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
|
147 | style: (0, _objectSpread2.default)({
|
148 | height: height
|
149 | }, style),
|
150 | ref: getImgRef
|
151 | }, srcAndOnload, {
|
152 | width: width,
|
153 | height: height,
|
154 | onError: onError
|
155 | })), status === 'loading' && React.createElement("div", {
|
156 | "aria-hidden": "true",
|
157 | className: "".concat(prefixCls, "-placeholder")
|
158 | }, placeholder), previewMask && canPreview && React.createElement("div", {
|
159 | className: (0, _classnames.default)("".concat(prefixCls, "-mask"), maskClassName),
|
160 | style: {
|
161 | display: (style === null || style === void 0 ? void 0 : style.display) === 'none' ? 'none' : undefined
|
162 | }
|
163 | }, previewMask)), !groupContext && canPreview && React.createElement(_Preview.default, (0, _extends2.default)({
|
164 | "aria-hidden": !isShowPreview,
|
165 | visible: isShowPreview,
|
166 | prefixCls: previewPrefixCls,
|
167 | onClose: onPreviewClose,
|
168 | mousePosition: mousePosition,
|
169 | src: src,
|
170 | alt: alt,
|
171 | fallback: fallback,
|
172 | getContainer: getPreviewContainer,
|
173 | icons: icons,
|
174 | movable: movable,
|
175 | scaleStep: scaleStep,
|
176 | minScale: minScale,
|
177 | maxScale: maxScale,
|
178 | rootClassName: rootClassName,
|
179 | imageRender: imageRender,
|
180 | imgCommonProps: imgCommonProps,
|
181 | toolbarRender: toolbarRender
|
182 | }, dialogProps)));
|
183 | };
|
184 | ImageInternal.PreviewGroup = _PreviewGroup.default;
|
185 | ImageInternal.displayName = 'Image';
|
186 | var _default = ImageInternal;
|
187 | exports.default = _default; |
\ | No newline at end of file |