fastlion-amis
Version:
一种MIS页面生成工具
41 lines (40 loc) • 3.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineItem = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var locale_1 = require("../locale");
var theme_1 = require("../theme");
var icons_1 = require("./icons");
function TimelineItem(props) {
var time = props.time, title = props.title, detail = props.detail, detailCollapsedText = props.detailCollapsedText, detailExpandedText = props.detailExpandedText, color = props.color, icon = props.icon, cx = props.classnames, __ = props.translate, key = props.key;
var _a = (0, react_1.useState)(false), detailVisible = _a[0], setDetailVisible = _a[1];
var renderDetail = function (detail, detailCollapsedText, detailExpandedText) {
if (detailCollapsedText === void 0) { detailCollapsedText = __('Timeline.collapseText'); }
if (detailExpandedText === void 0) { detailExpandedText = __('Timeline.expandText'); }
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx('TimelineItem-detail-button'), onClick: function () { return setDetailVisible(!detailVisible); } },
detailVisible ? detailExpandedText : detailCollapsedText,
react_1.default.createElement("div", { className: cx('TimelineItem-detail-arrow', "" + (detailVisible && 'TimelineItem-detail-arrow-top')) },
react_1.default.createElement(icons_1.Icon, { icon: "tree-down" }))),
react_1.default.createElement("div", { className: cx("" + (detailVisible
? 'TimelineItem-detail-visible'
: 'TimelineItem-detail-invisible')) }, detail)));
};
// 判断是否为颜色值
var isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
// 取level级颜色
var levelColor = !isColorVal && color;
return (react_1.default.createElement("div", { className: cx('TimelineItem'), key: key },
react_1.default.createElement("div", { className: cx('TimelineItem-axle') },
react_1.default.createElement("div", { className: cx('TimelineItem-line') }),
icon ? (react_1.default.createElement("div", { className: cx('TimelineItem-icon') },
react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon" }))) : (react_1.default.createElement("div", { className: cx('TimelineItem-round', levelColor && "TimelineItem-round--" + levelColor), style: isColorVal ? { backgroundColor: color } : undefined }))),
react_1.default.createElement("div", { className: cx('TimelineItem-content') },
react_1.default.createElement("div", { className: cx('TimelineItem-time') }, time),
react_1.default.createElement("div", { className: cx('TimelineItem-title') }, title),
detail && (react_1.default.createElement("div", { className: cx('TimelineItem-detail') }, renderDetail(detail, detailCollapsedText, detailExpandedText))))));
}
exports.TimelineItem = TimelineItem;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(TimelineItem));
//# sourceMappingURL=./components/TimelineItem.js.map