@bytedance/mona-client-web
Version:
web for mona
71 lines • 3.68 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useState, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { Masking } from '../Masking';
import { hide } from '../util';
import './index.module.less';
var MONA_WEB_PREVIEW_IMAGE = 'mona-web-preview-image';
export var PreviewImage = function (_a) {
var urls = _a.urls, current = _a.current, success = _a.success, complete = _a.complete;
var _b = useState(0), pos = _b[0], setPos = _b[1];
var _c = useState(urls === null || urls === void 0 ? void 0 : urls[0]), src = _c[0], setSrc = _c[1];
useEffect(function () {
if (current) {
var idx = urls.indexOf(current);
setPos(idx === -1 ? 0 : idx);
setSrc(current);
}
}, [current]);
var changeImage = useCallback(function (offset) {
var currentPos = pos + offset;
if (currentPos >= urls.length) {
currentPos = 0;
}
if (currentPos < 0) {
currentPos = urls.length - 1;
}
setPos(currentPos);
setSrc(urls[currentPos]);
success === null || success === void 0 ? void 0 : success({ errMsg: 'previewImage:ok' });
complete === null || complete === void 0 ? void 0 : complete({ errMsg: 'previewImage:ok' });
}, [src, pos]);
return (React.createElement(React.Fragment, null,
React.createElement("img", { className: "mona-web-preview-image-close", src: 'https://p3-ecom-fe.byteimg.com/tos-cn-i-w59vco1lho/fb4f01d26afde666b1f0e18611c1322e.png~tplv-w59vco1lho-png.png', onClick: function () { return hide(MONA_WEB_PREVIEW_IMAGE); } }),
src && (React.createElement(React.Fragment, null,
React.createElement("img", { className: "mona-web-preview-image-arrow-left", onClick: function () { return changeImage(-1); }, src: "https://p3-ecom-fe.byteimg.com/tos-cn-i-w59vco1lho/25eabf0482d9f65bfa3e0382b48ec262.png~tplv-w59vco1lho-png.png" }),
React.createElement("img", { className: "mona-web-preview-image-arrow-right", onClick: function () { return changeImage(1); }, src: "https://p3-ecom-fe.byteimg.com/tos-cn-i-w59vco1lho/25eabf0482d9f65bfa3e0382b48ec262.png~tplv-w59vco1lho-png.png" }),
React.createElement("img", { className: "mona-web-preview-image", src: src }))),
React.createElement(Masking, { onHandle: function () { }, className: "mona-web-preview-image-mask" })));
};
function confirm(props) {
var container = document.createElement('div');
container.id = MONA_WEB_PREVIEW_IMAGE;
document.body.append(container);
setTimeout(function () {
ReactDOM.render(React.createElement(PreviewImage, __assign({}, props)), container);
});
}
export function showPreviewImage(props) {
var _a, _b, _c, _d;
var errMsg = { errMsg: 'previewImage:fail' };
try {
confirm(props);
(_a = props.success) === null || _a === void 0 ? void 0 : _a.call(props, { errMsg: 'previewImage:ok' });
(_b = props.complete) === null || _b === void 0 ? void 0 : _b.call(props, { errMsg: 'previewImage:ok' });
}
catch (e) {
(_c = props.fail) === null || _c === void 0 ? void 0 : _c.call(props, errMsg);
(_d = props.complete) === null || _d === void 0 ? void 0 : _d.call(props, errMsg);
}
}
//# sourceMappingURL=index.js.map