fastlion-amis
Version:
一种MIS页面生成工具
71 lines (70 loc) • 5.28 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, lineColor = props.lineColor, direction = props.direction, color = props.color, icon = props.icon, cx = props.classnames, __ = props.translate, key = props.key, TimelineUniqueKey = props.TimelineUniqueKey, allDataHasNoLabel = props.allDataHasNoLabel;
var _a = (0, react_1.useState)(false), detailVisible = _a[0], setDetailVisible = _a[1];
var detailVisibleRef = (0, react_1.useRef)(false);
var _b = (0, react_1.useState)(true), showDetailBtn = _b[0], setShowDetailBtn = _b[1];
var timelineItemRef = (0, react_1.useRef)(null);
var detailTextRef = (0, react_1.useRef)(null);
// const isVertical = useMemo(() => direction === 'vertical', [direction]);
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 () { setDetailVisible(!detailVisible); detailVisibleRef.current = !detailVisibleRef.current; } },
detailVisible ? detailExpandedText : detailCollapsedText,
react_1.default.createElement("div", { className: cx('TimelineItem-detail-arrow', "".concat(detailVisible && 'TimelineItem-detail-arrow-top')) },
react_1.default.createElement(icons_1.Icon, { icon: "tree-down" })))));
};
// 判断是否为颜色值
var isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
// 时间线线颜色
var isLineColorVal = lineColor && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(lineColor);
// 取level级颜色
var levelColor = !isColorVal && color;
// 时间线层级颜色
var lineLevelColor = !isLineColorVal && lineColor;
var genStyle = function (color) {
var directionStyle = (direction === null || direction === void 0 ? void 0 : direction.trim()) === 'horizontal' ? 'to right,' : '';
return color ? {
backgroundImage: "linear-gradient(".concat(directionStyle).concat(color, " 50%, rgba(255, 255, 255, 0) 0%)")
} : {};
};
var handleResizeWidth = function () {
if (detailTextRef.current) {
if (!detailVisibleRef.current) {
var _a = detailTextRef.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
setShowDetailBtn(clientHeight > 34 && scrollHeight > clientHeight);
}
}
};
(0, react_1.useEffect)(function () {
if (timelineItemRef.current && detail) {
document.body.addEventListener(TimelineUniqueKey, handleResizeWidth);
requestAnimationFrame(handleResizeWidth);
}
return function () {
document.body.removeEventListener(TimelineUniqueKey, handleResizeWidth);
};
}, []);
return (react_1.default.createElement("div", { ref: timelineItemRef, className: cx('TimelineItem'), key: key },
react_1.default.createElement("div", { className: cx('TimelineItem-axle') },
react_1.default.createElement("div", { className: cx('TimelineItem-line', lineLevelColor && "TimelineItem-line--".concat(lineLevelColor)), style: genStyle(isLineColorVal ? lineColor : undefined) }),
icon ? (react_1.default.createElement("div", { className: cx('TimelineItem-icon') },
react_1.default.createElement(icons_1.Icon, { icon: icon, style: { color: isColorVal ? color : undefined } }))) : (react_1.default.createElement("div", { className: cx('TimelineItem-round', levelColor && "TimelineItem-round--".concat(levelColor)), style: isColorVal ? { backgroundColor: color } : undefined }))),
react_1.default.createElement("div", { className: cx('TimelineItem-content') },
react_1.default.createElement("div", { className: cx('TimelineItem-title'), style: allDataHasNoLabel ? { height: 0 } : {} }, title),
react_1.default.createElement("div", { className: cx('TimelineItem-time') }, time),
react_1.default.createElement("div", { className: cx('TimelineItem-detail-text', detailVisible ? 'visible' : ''), ref: detailTextRef }, detail),
detail && showDetailBtn && (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