@up-group-ui/react-controls
Version:
Up shared react controls
188 lines • 9.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var utils_1 = require("../utils");
var Header = (function (_super) {
(0, tslib_1.__extends)(Header, _super);
function Header(props) {
var _this = _super.call(this, props) || this;
_this.periodClick = function (e) {
var _a = e.target.dataset, time = _a.time, unit = _a.unit;
if (time && unit) {
_this.props.showPeriod((0, moment_1.default)(time - 0), unit);
}
};
_this.touchStart = function (e) {
if (e.touches.length === 1) {
_this.setState({
touchTarget: e.target || e.touchTarget,
touchActive: true,
});
}
};
_this.touchEnd = function (e) {
if (!_this.state.touchActive) {
return _this.resetTouchState();
}
var changedTouches = e.changedTouches[0];
if (changedTouches) {
var elem = document.elementFromPoint(changedTouches.pageX, changedTouches.pageY);
if (elem !== _this.state.touchTarget) {
return _this.resetTouchState();
}
}
_this.resetTouchState();
_this.periodClick(e);
};
_this.state = {
scrollTop: 0,
componentTop: 0,
touchTarget: null,
touchActive: false,
};
return _this;
}
Header.prototype.scroll = function (e) {
if (this.props.fixedHeader === 'absolute' && window && window.document) {
var scroll_1 = window.document.body.scrollTop;
this.setState({
scrollTop: scroll_1,
});
}
};
Header.prototype.setComponentTop = function () {
var viewportOffset = this.refs.header.getBoundingClientRect();
this.setState({
componentTop: viewportOffset.top,
});
};
Header.prototype.componentDidMount = function () {
var _this = this;
this.setComponentTop();
this.scroll();
this.scrollEventListener = {
handleEvent: function (event) {
_this.scroll();
},
};
window.addEventListener('scroll', this.scrollEventListener);
};
Header.prototype.componentWillUnmount = function () {
window.removeEventListener('scroll', this.scrollEventListener);
};
Header.prototype.componentWillReceiveProps = function () {
this.setComponentTop();
};
Header.prototype.headerLabel = function (time, unit, width) {
if (unit === 'year') {
return time.format(width < 46 ? 'YY' : 'YYYY');
}
else if (unit === 'month') {
return time.format(width < 65 ? 'MM/YY' : width < 75 ? 'MM/YYYY' : width < 120 ? 'MMM YYYY' : 'MMMM YYYY');
}
else if (unit === 'day') {
return time.format(width < 150 ? 'L' : 'dddd, LL');
}
else if (unit === 'hour') {
return time.format(width < 50 ? 'HH' : width < 130 ? 'HH:00' : width < 150 ? 'L, HH:00' : 'dddd, LL, HH:00');
}
else {
return time.format('LLL');
}
};
Header.prototype.subHeaderLabel = function (time, unit, width) {
if (unit === 'year') {
return time.format(width < 46 ? 'YY' : 'YYYY');
}
else if (unit === 'month') {
return time.format(width < 37 ? 'MM' : width < 85 ? 'MMM' : 'MMMM');
}
else if (unit === 'day') {
return time.format(width < 47 ? 'D' : width < 80 ? 'dd D' : width < 120 ? 'ddd, Do' : 'dddd, Do');
}
else if (unit === 'hour') {
return time.format(width < 50 ? 'HH' : 'HH:00');
}
else if (unit === 'minute') {
return time.format(width < 60 ? 'mm' : 'HH:mm');
}
else {
return time.get(unit);
}
};
Header.prototype.resetTouchState = function () {
this.setState({
touchTarget: null,
touchActive: false,
});
};
Header.prototype.render = function () {
var _this = this;
var timeLabels = [];
var _a = this.props, canvasTimeStart = _a.canvasTimeStart, canvasTimeEnd = _a.canvasTimeEnd, canvasWidth = _a.canvasWidth, lineHeight = _a.lineHeight, visibleTimeStart = _a.visibleTimeStart, visibleTimeEnd = _a.visibleTimeEnd, minUnit = _a.minUnit, timeSteps = _a.timeSteps, fixedHeader = _a.fixedHeader, headerLabelGroupHeight = _a.headerLabelGroupHeight, headerLabelHeight = _a.headerLabelHeight;
var scrollTop = this.state.scrollTop;
var ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart);
var twoHeaders = minUnit !== 'year';
if (twoHeaders) {
var nextUnit_1 = (0, utils_1.getNextUnit)(minUnit);
(0, utils_1.iterateTimes)(visibleTimeStart, visibleTimeEnd, nextUnit_1, timeSteps, function (time, nextTime) {
var startTime = Math.max(visibleTimeStart, time.valueOf());
var endTime = Math.min(visibleTimeEnd, nextTime.valueOf());
var left = Math.round((startTime.valueOf() - canvasTimeStart) * ratio);
var right = Math.round((endTime.valueOf() - canvasTimeStart) * ratio);
var labelWidth = right - left;
var leftCorrect = fixedHeader === 'fixed' ? Math.round((canvasTimeStart - visibleTimeStart) * ratio) - 1 : 0;
timeLabels.push((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "rct-label-group", "data-time": time, "data-unit": nextUnit_1, style: {
left: left + leftCorrect + "px",
width: labelWidth + "px",
height: headerLabelGroupHeight + "px",
lineHeight: headerLabelGroupHeight + "px",
cursor: 'pointer',
} }, { children: _this.headerLabel(time, nextUnit_1, labelWidth) }), "top-label-" + time.valueOf()));
});
}
(0, utils_1.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
var left = Math.round((time.valueOf() - canvasTimeStart) * ratio);
var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
var firstOfType = minUnitValue === (minUnit === 'day' ? 1 : 0);
var labelWidth = Math.round((nextTime.valueOf() - time.valueOf()) * ratio);
var borderWidth = firstOfType ? 2 : 1;
var leftCorrect = fixedHeader === 'fixed' ? Math.round((canvasTimeStart - visibleTimeStart) * ratio) - borderWidth + 1 : 0;
timeLabels.push((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "rct-label " + (twoHeaders ? '' : 'rct-label-only') + " " + (firstOfType ? 'rct-first-of-type' : '') + " ", "data-time": time, "data-unit": minUnit, style: {
top: (minUnit === 'year' ? 0 : headerLabelGroupHeight) + "px",
left: left + leftCorrect + "px",
width: labelWidth + "px",
height: (minUnit === 'year' ? headerLabelGroupHeight + headerLabelHeight : headerLabelHeight) + "px",
lineHeight: (minUnit === 'year' ? headerLabelGroupHeight + headerLabelHeight : headerLabelHeight) + "px",
fontSize: (labelWidth > 30 ? '14' : labelWidth > 20 ? '12' : '10') + "px",
cursor: 'pointer',
} }, { children: _this.subHeaderLabel(time, minUnit, labelWidth) }), "label-" + time.valueOf()));
});
var zIndex = this.props.zIndex;
var headerStyle = {
height: headerLabelGroupHeight + headerLabelHeight + "px",
lineHeight: lineHeight + "px",
};
if (fixedHeader === 'fixed') {
headerStyle.position = 'fixed';
headerStyle.width = '100%';
headerStyle.zIndex = zIndex;
}
else if (fixedHeader === 'absolute') {
var componentTop = this.state.componentTop;
if (scrollTop >= componentTop) {
headerStyle.position = 'absolute';
headerStyle.top = scrollTop - componentTop + "px";
headerStyle.width = canvasWidth + "px";
headerStyle.left = '0';
}
}
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: "header", className: "rct-header", onTouchStart: this.touchStart, onTouchEnd: this.touchEnd, onClick: this.periodClick, style: headerStyle }, { children: timeLabels }), "header"));
};
return Header;
}(React.Component));
exports.default = Header;
//# sourceMappingURL=Header.js.map