fastlion-amis
Version:
一种MIS页面生成工具
169 lines (168 loc) • 15.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageFieldRenderer = exports.ImageField = exports.imagePlaceholder = exports.ImageThumb = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var tpl_1 = require("../utils/tpl");
var theme_1 = require("../theme");
var helper_1 = require("../utils/helper");
var icons_1 = require("../components/icons");
var locale_1 = require("../locale");
var handleAction_1 = (0, tslib_1.__importDefault)(require("../utils/handleAction"));
var utils_1 = require("../utils/utils");
var setting_1 = require("../utils/setting");
var errImg = 'data:image/png;base64,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';
var ImageThumb = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ImageThumb, _super);
function ImageThumb() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.imageRef = react_1.default.createRef();
return _this;
}
ImageThumb.prototype.handleEnlarge = function () {
var _a = this.props, onEnlarge = _a.onEnlarge, rest = (0, tslib_1.__rest)(_a, ["onEnlarge"]);
onEnlarge && onEnlarge(rest);
};
ImageThumb.prototype.componentDidMount = function () {
var _a = this.props, autoCalc = _a.autoCalc, thumbRatio = _a.thumbRatio, classPrefix = _a.classPrefix;
if (this.imageRef.current && autoCalc && thumbRatio) {
var basicWidth = this.imageRef.current.clientWidth;
var _b = thumbRatio.split(':').map(function (item) { return Number(item); }), wl = _b[0], hl = _b[1];
var calcHeight = basicWidth * (hl / wl);
var imgThumb = this.imageRef.current.querySelector("." + classPrefix + "Image-thumb");
if (imgThumb) {
imgThumb.style.height = calcHeight + 'px';
}
}
};
ImageThumb.prototype.handleImageError = function (e) {
e.target.src = errImg;
};
ImageThumb.prototype.render = function () {
var _a = this.props, cx = _a.classnames, className = _a.className, imageClassName = _a.imageClassName, thumbClassName = _a.thumbClassName, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, height = _a.height, width = _a.width, src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, href = _a.href, _b = _a.blank, blank = _b === void 0 ? true : _b, htmlTarget = _a.htmlTarget, onLoad = _a.onLoad, enlargeAble = _a.enlargeAble, __ = _a.translate, overlays = _a.overlays, imageMode = _a.imageMode, _c = _a.fillCell, fillCell = _c === void 0 ? false : _c;
var enlarge = enlargeAble || overlays ? (react_1.default.createElement("div", { key: "overlay", className: cx('Image-overlay') },
enlargeAble ? (react_1.default.createElement("a", { "data-tooltip": __('Image.zoomIn'), "data-position": "bottom", target: "_blank", onClick: this.handleEnlarge },
react_1.default.createElement(icons_1.Icon, { icon: "view", className: "icon" }))) : null,
overlays)) : null;
var image = (react_1.default.createElement("div", { className: cx('Image', imageMode === 'original' ? 'Image--original' : 'Image--thumb', className), ref: this.imageRef },
imageMode === 'original' ? (react_1.default.createElement("div", { className: cx('Image-origin', thumbMode ? "Image-origin--" + thumbMode : ''), style: { height: height, width: width } },
react_1.default.createElement("img", { onLoad: onLoad, className: cx('Image-image'), src: src, alt: alt }),
enlarge)) : (react_1.default.createElement("div", { className: cx('Image-thumbWrap') },
react_1.default.createElement("div", { className: cx('Image-thumb', thumbClassName, thumbMode ? "Image-thumb--" + thumbMode : '', thumbRatio
? "Image-thumb--" + thumbRatio.replace(/:/g, '-')
: ''), style: { height: fillCell ? '100%' : height, width: fillCell ? '100%' : width } }, imageClassName === 'icon-fill' ? (react_1.default.createElement(icons_1.Icon, { icon: src === null || src === void 0 ? void 0 : src[0], className: imageClassName, color: src === null || src === void 0 ? void 0 : src[1], symbol: true })) : (react_1.default.createElement("img", { onLoad: onLoad, className: cx('Image-image', imageClassName), src: src, alt: alt, onError: this.handleImageError }))),
enlarge)),
title || caption ? (react_1.default.createElement("div", { key: "caption", className: cx('Image-info') },
title ? (react_1.default.createElement("div", { className: cx('Image-title'), title: title }, title)) : null,
caption ? (react_1.default.createElement("div", { className: cx('Image-caption'), title: caption }, caption)) : null)) : null));
if (href) {
image = (react_1.default.createElement("a", { href: href, target: htmlTarget || (blank ? '_blank' : '_self'), className: cx('Link', className), title: title }, image));
}
return image;
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageThumb.prototype, "handleEnlarge", null);
return ImageThumb;
}(react_1.default.Component));
exports.ImageThumb = ImageThumb;
var ThemedImageThumb = (0, theme_1.themeable)((0, locale_1.localeable)(ImageThumb));
exports.default = ThemedImageThumb;
exports.imagePlaceholder = "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E";
var ImageField = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ImageField, _super);
function ImageField() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
imgSrc: '',
originalimgSrc: '', //原始图片地址
};
_this.getSrc = function (src) {
var _a, _b, _c;
var env = _this.props.env;
var baseUrl = ((_b = (_a = env === null || env === void 0 ? void 0 : env.axiosInstance) === null || _a === void 0 ? void 0 : _a.defaults) === null || _b === void 0 ? void 0 : _b.baseURL) || (env === null || env === void 0 ? void 0 : env.ajaxApi) || '';
return ((_c = src === null || src === void 0 ? void 0 : src.startsWith) === null || _c === void 0 ? void 0 : _c.call(src, "http")) ? src : ((baseUrl ? baseUrl : '') + src);
};
return _this;
}
ImageField.prototype.componentDidMount = function () {
var _a = this.props, env = _a.env, src = _a.src, originalSrc = _a.originalSrc;
// 如果是相对的要用前缀加上去不然渲染不出来
this.state = {
imgSrc: this.getSrc(src),
originalimgSrc: this.getSrc(originalSrc)
};
};
ImageField.prototype.handleEnlarge = function (_a) {
var src = _a.src, originalSrc = _a.originalSrc, title = _a.title, caption = _a.caption, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio;
var _b = this.props, onImageEnlarge = _b.onImageEnlarge, enlargeTitle = _b.enlargeTitle, enlargeCaption = _b.enlargeCaption;
onImageEnlarge &&
onImageEnlarge({
src: src,
originalSrc: originalSrc || src,
title: enlargeTitle || title,
caption: enlargeCaption || caption,
thumbMode: thumbMode,
thumbRatio: thumbRatio
}, this.props);
};
ImageField.prototype.handleClick = function (e) {
var clickAction = this.props.clickAction;
if (clickAction) {
(0, handleAction_1.default)(e, clickAction, this.props);
}
var _a = this.props, linkUrl = _a.linkUrl, classnames = _a.classnames, env = _a.env, linkType = _a.linkType, linkTitle = _a.linkTitle, linkId = _a.linkId, data = _a.data;
if (linkUrl) {
(0, utils_1.ModleHandleClick)({ classnames: classnames, env: env, linkUrl: linkUrl, linkType: linkType !== null && linkType !== void 0 ? linkType : 1, linkTitle: linkTitle, linkId: linkId !== null && linkId !== void 0 ? linkId : (0, utils_1.getHashCode)(linkUrl), data: data, value: true, });
}
};
ImageField.prototype.render = function () {
var _a;
var _b = this.props, className = _b.className, defaultImage = _b.defaultImage, imageCaption = _b.imageCaption, title = _b.title, data = _b.data, imageClassName = _b.imageClassName, thumbClassName = _b.thumbClassName, height = _b.height, width = _b.width, cx = _b.classnames, src = _b.src, href = _b.href, thumbMode = _b.thumbMode, thumbRatio = _b.thumbRatio, placeholder = _b.placeholder, originalSrc = _b.originalSrc, enlargeAble = _b.enlargeAble, imageMode = _b.imageMode, autoCalc = _b.autoCalc;
var finnalSrc = src ? this.getSrc((0, tpl_1.filter)(src, data, '| raw')) : '';
var value = finnalSrc || (0, helper_1.getPropValue)(this.props) || defaultImage || exports.imagePlaceholder;
var finnalHref = href ? (0, tpl_1.filter)(href, data, '| raw') : '';
return (react_1.default.createElement("div", { className: cx('ImageField', imageMode === 'original'
? 'ImageField--original'
: 'ImageField--thumb', className), onClick: this.handleClick }, (value && value.length) ? (react_1.default.createElement(ThemedImageThumb, { imageClassName: imageClassName, thumbClassName: thumbClassName, height: height, width: width, src: value, href: finnalHref, title: (0, tpl_1.filter)(title, data), caption: (0, tpl_1.filter)(imageCaption, data), thumbMode: thumbMode, thumbRatio: thumbRatio, originalSrc: this.getSrc((_a = (0, tpl_1.filter)(originalSrc, data, '| raw')) !== null && _a !== void 0 ? _a : value), enlargeAble: enlargeAble && value !== defaultImage, onEnlarge: this.handleEnlarge, imageMode: imageMode, autoCalc: autoCalc, className: autoCalc ? 'Auto-calc-size' : '' })) : (react_1.default.createElement("span", { className: "text-muted" }, placeholder))));
};
var _a;
ImageField.defaultProps = {
defaultImage: exports.imagePlaceholder,
thumbMode: 'contain',
thumbRatio: '1:1',
placeholder: setting_1.UserSetting.tableEmptyValueSetting
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageField.prototype, "handleEnlarge", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _a : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageField.prototype, "handleClick", null);
return ImageField;
}(react_1.default.Component));
exports.ImageField = ImageField;
var ImageFieldRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ImageFieldRenderer, _super);
function ImageFieldRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
ImageFieldRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'image'
})
], ImageFieldRenderer);
return ImageFieldRenderer;
}(ImageField));
exports.ImageFieldRenderer = ImageFieldRenderer;
//# sourceMappingURL=./renderers/Image.js.map