zent
Version:
一套前端设计语言和基于React的实现
69 lines (68 loc) • 3.81 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import Popover from '../popover';
import { TimelineDot } from './Dot';
var TimelineItemOptionalPop = function (_a) {
var children = _a.children, tip = _a.tip, position = _a.position, popoverRef = _a.popoverRef;
if (tip) {
return (_jsxs(Popover, __assign({ ref: popoverRef, className: "zent-timeline-tip", position: position, cushion: 20 }, { children: [_jsx(Popover.Trigger.Hover, { children: children }, void 0), _jsx(Popover.Content, { children: tip }, void 0)] }), void 0));
}
return children;
};
var TimelineItem = (function (_super) {
__extends(TimelineItem, _super);
function TimelineItem() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.popover = null;
_this.mousePosition = {
x: 0,
y: 0,
};
_this.onMouseMove = function (e) {
_this.mousePosition.x = e.clientX;
_this.mousePosition.y = e.clientY;
_this.popover && _this.popover.adjustPosition();
};
_this.position = function (_a) {
var anchorRect = _a.anchorRect, contentRect = _a.contentRect, containerRect = _a.containerRect;
var type = _this.props.type;
var x = anchorRect.left;
var middle = (anchorRect.top + anchorRect.bottom) / 2;
var y = middle - contentRect.height / 2;
return {
style: type === 'horizontal'
? {
position: 'absolute',
left: Math.round(_this.mousePosition.x - containerRect.left) + "px",
top: Math.round(y - 40) + "px",
}
: {
position: 'absolute',
left: Math.round(x + 20) + "px",
top: Math.round(_this.mousePosition.y - containerRect.top) + "px",
},
};
};
_this.popoverRef = function (el) { return (_this.popover = el); };
return _this;
}
TimelineItem.prototype.render = function () {
var _a;
var _b = this.props, size = _b.size, _c = _b.showLabel, showLabel = _c === void 0 ? true : _c, _d = _b.showDot, showDot = _d === void 0 ? true : _d, color = _b.color, label = _b.label, tip = _b.tip, className = _b.className, style = _b.style, type = _b.type, lineColor = _b.lineColor, dotColor = _b.dotColor;
var key = type === 'vertical' ? 'height' : 'width';
return (_jsxs("li", __assign({ className: cx('zent-timeline-item', className), style: style, onMouseMove: this.onMouseMove, "data-zv": '10.0.18' }, { children: [_jsx(TimelineItemOptionalPop, __assign({ tip: tip, position: this.position, popoverRef: this.popoverRef }, { children: _jsx("div", __assign({ className: "zent-timeline-item-hover", "data-zv": '10.0.18' }, { children: _jsx("div", __assign({ className: "zent-timeline-item-line", style: (_a = {},
_a[key] = size,
_a.backgroundColor = color || lineColor,
_a), "data-zv": '10.0.18' }, { children: showDot && _jsx(TimelineDot, { color: color || dotColor }, void 0) }), void 0) }), void 0) }), void 0), showLabel && (_jsx("label", __assign({ className: "zent-timeline-item-label", "data-zv": '10.0.18' }, { children: label }), void 0))] }), void 0));
};
TimelineItem.defaultProps = {
showLabel: true,
showDot: true,
lineColor: '#f2f3f5',
dotColor: '#155BD4',
};
return TimelineItem;
}(PureComponent));
export { TimelineItem };