"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var factory_1 = require("../factory");
var tpl_1 = require("../utils/tpl");
var theme_1 = require("../theme");
var Image = /** @class */ (function (_super) {
    tslib_1.__extends(Image, _super);
    function Image() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Image.prototype.render = function () {
        var _a = this.props, cx = _a.classnames, className = _a.className, imageClassName = _a.imageClassName, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, src = _a.src, alt = _a.alt, title = _a.title, description = _a.description, onLoad = _a.onLoad;
        return (react_1.default.createElement("div", { className: cx('Image', className) },
            react_1.default.createElement("div", { className: cx('Image-thumb', thumbMode ? "Image-thumb--" + thumbMode : '', thumbRatio ? "Image-thumb--" + thumbRatio : '') },
                react_1.default.createElement("img", { onLoad: onLoad, className: cx(imageClassName), src: src, alt: alt })),
            title || description ? (react_1.default.createElement("div", { key: "caption", className: cx('Image-caption') },
                title ? react_1.default.createElement("div", { className: cx('Image-title') }, title) : null,
                description ? (react_1.default.createElement("div", { className: cx('Image-description') }, description)) : null)) : null));
    };
    return Image;
}(react_1.default.Component));
exports.Image = Image;
var ThemedImage = theme_1.themeable(Image);
exports.default = ThemedImage;
var ImageField = /** @class */ (function (_super) {
    tslib_1.__extends(ImageField, _super);
    function ImageField() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ImageField.prototype.render = function () {
        var _a = this.props, className = _a.className, defaultImage = _a.defaultImage, description = _a.description, title = _a.title, data = _a.data, imageClassName = _a.imageClassName, cx = _a.classnames, src = _a.src, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, placeholder = _a.placeholder;
        var finnalSrc = src ? tpl_1.filter(src, data, '| raw') : '';
        var value = finnalSrc || this.props.value || defaultImage;
        return (react_1.default.createElement("div", { className: cx('ImageField', className) }, value ? (react_1.default.createElement(ThemedImage, { imageClassName: imageClassName, src: value, title: tpl_1.filter(title, data), description: tpl_1.filter(description, data), thumbMode: thumbMode, thumbRatio: thumbRatio })) : (react_1.default.createElement("span", { className: "text-muted" }, placeholder))));
    };
    ImageField.defaultProps = {
        defaultImage: 'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png',
        thumbMode: 'contain',
        thumbRatio: '1-1',
        placeholder: '-'
    };
    return ImageField;
}(react_1.default.Component));
exports.ImageField = ImageField;
var ImageFieldRenderer = /** @class */ (function (_super) {
    tslib_1.__extends(ImageFieldRenderer, _super);
    function ImageFieldRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ImageFieldRenderer = tslib_1.__decorate([
        factory_1.Renderer({
            test: /(^|\/)image$/,
            name: 'image'
        })
    ], ImageFieldRenderer);
    return ImageFieldRenderer;
}(ImageField));
exports.ImageFieldRenderer = ImageFieldRenderer;
//# sourceMappingURL=./renderers/Image.js.map
