fastlion-amis
Version:
一种MIS页面生成工具
182 lines (181 loc) • 13.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var helper_1 = require("../utils/helper");
var theme_1 = require("../theme");
var icons_1 = require("./icons");
var utils_1 = require("../utils/utils");
var Image_1 = (0, tslib_1.__importDefault)(require("../renderers/Image"));
var Card = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Card, _super);
function Card(props) {
var _this = _super.call(this, props) || this;
_this.avatarRef = react_1.default.createRef();
// 触摸开始
_this.touchStart = function (e) {
_this.stopCounter = true;
_this.pressTimer = setTimeout(function () {
_this.stopCounter = false;
// this.props?.handleModleClick?.(true);
}, 500); // 设置长按时间阈值，单位为毫秒
};
// 触摸移动
_this.touchMove = function () {
clearTimeout(_this.pressTimer);
_this.stopCounter = false;
};
_this.touchEnd = function (e) {
clearTimeout(_this.pressTimer);
// 短按事件处理
if (_this.stopCounter) {
_this.props.onClick && _this.props.onClick(e);
}
};
_this.handleClick = _this.handleClick.bind(_this);
return _this;
}
Card.prototype.componentDidMount = function () {
var _a = this.props, thumbRatio = _a.thumbRatio, classPrefix = _a.classPrefix;
if (this.avatarRef.current && thumbRatio) {
var basicWidth = this.avatarRef.current.clientWidth;
var _b = thumbRatio.split(':').map(function (item) { return Number(item); }), wl = _b[0], hl = _b[1];
var calcHeight = basicWidth * (hl / wl);
var emptyPic = this.avatarRef.current.querySelector('.card-empty-pic');
if (emptyPic) {
emptyPic.style.height = calcHeight + 8 + 'px';
}
}
};
Card.prototype.handleClick = function (e) {
if ((0, helper_1.isClickOnInput)(e)) {
return;
}
this.props.onClick && this.props.onClick(e);
};
Card.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var _o = this.props, cx = _o.classnames, className = _o.className, headerClassName = _o.headerClassName, bodyClassName = _o.bodyClassName, titleClassName = _o.titleClassName, subTitleClassName = _o.subTitleClassName, descriptionClassName = _o.descriptionClassName, avatarClassName = _o.avatarClassName, avatarTextStyle = _o.avatarTextStyle, imageClassName = _o.imageClassName, avatarTextClassName = _o.avatarTextClassName, secondaryClassName = _o.secondaryClassName, footerClassName = _o.footerClassName, media = _o.media, mediaPosition = _o.mediaPosition, actions = _o.actions, children = _o.children, onClick = _o.onClick, toolbar = _o.toolbar, title = _o.title, subTitle = _o.subTitle, subTitlePlaceholder = _o.subTitlePlaceholder, description = _o.description, descriptionPlaceholder = _o.descriptionPlaceholder, secondary = _o.secondary, avatar = _o.avatar, avatarText = _o.avatarText, icon = _o.icon, env = _o.env, onImageEnlarge = _o.onImageEnlarge, titleField = _o.titleField, subTitleField = _o.subTitleField, data = _o.data, dataColumns = _o.dataColumns, classPrefix = _o.classPrefix, thumbRatio = _o.thumbRatio;
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) || '';
var heading = null;
var isShowHeading = avatar ||
avatarText ||
title ||
subTitle ||
subTitlePlaceholder ||
description ||
descriptionPlaceholder ||
icon ||
toolbar;
var imgUrl = ((_f = (_e = (_d = (_c = avatar === null || avatar === void 0 ? void 0 : avatar.info) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.addr) === null || _e === void 0 ? void 0 : _e.startsWith) === null || _f === void 0 ? void 0 : _f.call(_e, "http")) ? (_h = (_g = avatar === null || avatar === void 0 ? void 0 : avatar.info) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.addr : ((baseUrl ? baseUrl : '') + ((_k = (_j = avatar === null || avatar === void 0 ? void 0 : avatar.info) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.addr));
if (isShowHeading) {
heading = (react_1.default.createElement("div", { className: cx('Card-heading', headerClassName), ref: this.avatarRef },
media ? null : (avatar && react_1.default.createElement("div", { className: cx('Card-avtarimg') }, ((_m = (_l = avatar === null || avatar === void 0 ? void 0 : avatar.info) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.addr) ?
react_1.default.createElement("div", { className: cx('Card-img-container'), onClick: function (e) {
var _a;
e.stopPropagation();
(0, utils_1.openImageEnlarge)([(_a = avatar === null || avatar === void 0 ? void 0 : avatar.info) === null || _a === void 0 ? void 0 : _a[0]], baseUrl, onImageEnlarge, env);
} },
react_1.default.createElement(Image_1.default, { autoCalc: true, className: 'Auto-calc-size', src: imgUrl, thumbMode: 'cover', thumbRatio: thumbRatio, classPrefix: classPrefix })) : react_1.default.createElement("div", { onClick: function (e) { return e.stopPropagation(); }, className: 'card-empty-pic' },
react_1.default.createElement(icons_1.Icon, { icon: 'no-resources' }),
"No image"))),
react_1.default.createElement("div", { className: cx('Card-body-content') },
icon,
react_1.default.createElement("div", { className: cx('Card-meta') },
react_1.default.createElement("div", { className: cx('Card-meta-content') },
react_1.default.createElement("div", { className: cx('Card-title-body') },
title ? (react_1.default.createElement("div", { onClick: function (e) {
var _a, _b;
//解析是否有跳转
var linkParam = {};
var canJump = false;
if (titleField === null || titleField === void 0 ? void 0 : titleField.includes('${')) {
var colName_1 = (_b = (_a = titleField.split('{')) === null || _a === void 0 ? void 0 : _a[1].split('}')) === null || _b === void 0 ? void 0 : _b[0];
var targetCol = dataColumns === null || dataColumns === void 0 ? void 0 : dataColumns.find(function (item) { return item.name === colName_1; });
if (targetCol === null || targetCol === void 0 ? void 0 : targetCol.linkId) {
linkParam = targetCol;
canJump = (0, utils_1.linkJump)(targetCol.linkId, data, targetCol.jumpDisabledOn);
}
}
if (canJump) {
e.stopPropagation();
(0, utils_1.ModleHandleClick)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props), linkParam), { value: data === null || data === void 0 ? void 0 : data[linkParam.name] }), e.target);
}
}, className: cx('Card-title', titleClassName) }, title)) : null,
avatarText ? (react_1.default.createElement("div", { className: cx('Card-title-text') }, avatarText)) : null),
subTitle || subTitlePlaceholder ? (react_1.default.createElement("div", { className: cx('Card-subTitle', subTitleClassName), onClick: function (e) {
var _a, _b;
//解析是否有跳转
var linkParam = {};
var canJump = false;
if (subTitleField === null || subTitleField === void 0 ? void 0 : subTitleField.includes('${')) {
var colName_2 = (_b = (_a = subTitleField.split('{')) === null || _a === void 0 ? void 0 : _a[1].split('}')) === null || _b === void 0 ? void 0 : _b[0];
var targetCol = dataColumns === null || dataColumns === void 0 ? void 0 : dataColumns.find(function (item) { return item.name === colName_2; });
if (targetCol === null || targetCol === void 0 ? void 0 : targetCol.linkId) {
linkParam = targetCol;
canJump = (0, utils_1.linkJump)(targetCol.linkId, data, targetCol.jumpDisabledOn);
}
}
if (canJump) {
e.stopPropagation();
(0, utils_1.ModleHandleClick)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props), linkParam), { value: data === null || data === void 0 ? void 0 : data[linkParam.name] }), e.target);
}
} }, subTitle
? subTitle
: subTitlePlaceholder
? subTitlePlaceholder
: null)) : null)),
toolbar)));
}
var body = children;
return (react_1.default.createElement("div", { onClick: function (e) { !(0, helper_1.isMobile)() && _this.handleClick(e); }, className: cx('Card', className, {
'Card--link': onClick,
'Card--NoAvatar': !avatar
}) }, media ? (react_1.default.createElement("div", { className: cx("Card-multiMedia--" + mediaPosition) },
media,
react_1.default.createElement("div", { className: cx('Card-multiMedia-flex') },
heading,
body ? (react_1.default.createElement("div", { className: cx('Card-body', bodyClassName), onTouchStart: this.touchStart, onTouchMove: this.touchMove, onTouchEnd: this.touchEnd },
body,
description || descriptionPlaceholder ? (react_1.default.createElement("div", { className: cx('Card-desc', descriptionClassName) }, description
? description
: descriptionPlaceholder
? descriptionPlaceholder
: null)) : null)) : null,
secondary || actions ? (react_1.default.createElement("div", { className: cx('Card-footer-wrapper', footerClassName) },
secondary ? (react_1.default.createElement("div", { className: cx('Card-secondary', secondaryClassName) }, secondary)) : null,
actions && !(0, helper_1.isMobile)() ? (react_1.default.createElement("div", { className: cx('Card-actions-wrapper') }, actions)) : null)) : null))) : (react_1.default.createElement(react_1.default.Fragment, null,
heading,
body ? (react_1.default.createElement("div", { className: cx('Card-body', bodyClassName), onTouchStart: this.touchStart, onTouchMove: this.touchMove, onTouchEnd: this.touchEnd },
body,
description || descriptionPlaceholder ? (react_1.default.createElement("div", { className: cx('Card-desc', descriptionClassName) }, description
? description
: descriptionPlaceholder
? descriptionPlaceholder
: null)) : null)) : null,
secondary || actions ? (react_1.default.createElement("div", { className: cx('Card-footer-wrapper', footerClassName) },
secondary ? (react_1.default.createElement("div", { className: cx('Card-secondary', secondaryClassName) }, secondary)) : null,
actions && !(0, helper_1.isMobile)() ? (react_1.default.createElement("div", { className: cx('Card-actions-wrapper') }, actions)) : null)) : null))));
};
Card.defaultProps = {
className: '',
avatarClassName: '',
headerClassName: '',
footerClassName: '',
secondaryClassName: '',
avatarTextClassName: '',
bodyClassName: '',
titleClassName: '',
subTitleClassName: '',
descriptionClassName: '',
imageClassName: '',
mediaPosition: 'left',
thumbRatio: '16:9'
};
return Card;
}(react_1.default.Component));
exports.Card = Card;
exports.default = (0, theme_1.themeable)(Card);
//# sourceMappingURL=./components/Card.js.map