@up-group-ui/react-controls
Version:
Up shared react controls
618 lines • 34.8 kB
JavaScript
"use strict";
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 css = (0, tslib_1.__importStar)(require("./Timeline.css"));
var Items_1 = (0, tslib_1.__importDefault)(require("./items/Items"));
var InfoLabel_1 = (0, tslib_1.__importDefault)(require("./layout/InfoLabel"));
var Sidebar_1 = (0, tslib_1.__importDefault)(require("./layout/Sidebar"));
var Header_1 = (0, tslib_1.__importDefault)(require("./layout/Header"));
var VerticalLines_1 = (0, tslib_1.__importDefault)(require("./lines/VerticalLines"));
var HorizontalLines_1 = (0, tslib_1.__importDefault)(require("./lines/HorizontalLines"));
var TodayLine_1 = (0, tslib_1.__importDefault)(require("./lines/TodayLine"));
var utils_1 = require("./utils");
var defaultKeys = {
groupIdKey: 'id',
groupTitleKey: 'title',
itemIdKey: 'id',
itemTitleKey: 'title',
itemDivTitleKey: 'title',
itemGroupKey: 'group',
itemTimeStartKey: 'start_time',
itemTimeEndKey: 'end_time',
};
var defaultTimeSteps = {
second: 1,
minute: 1,
hour: 1,
day: 1,
month: 1,
year: 1,
};
var style = css;
var UpCalendarTimeline = (function (_super) {
(0, tslib_1.__extends)(UpCalendarTimeline, _super);
function UpCalendarTimeline(props) {
var _this = _super.call(this, props) || this;
_this.touchStart = function (e) {
if (e.touches.length === 2) {
e.preventDefault();
_this.lastTouchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX);
_this.singleTouchStart = null;
_this.lastSingleTouch = null;
}
else if (e.touches.length === 1 && _this.props.fixedHeader === 'fixed') {
e.preventDefault();
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
_this.lastTouchDistance = null;
_this.singleTouchStart = {
x: x,
y: y,
screenY: window.pageYOffset,
};
_this.lastSingleTouch = {
x: x,
y: y,
screenY: window.pageYOffset,
};
}
};
_this.touchMove = function (e) {
if (_this.state.dragTime || _this.state.resizeTime) {
e.preventDefault();
return;
}
if (_this.lastTouchDistance && e.touches.length === 2) {
e.preventDefault();
var touchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX);
var parentPosition = (0, utils_1.getParentPosition)(e.currentTarget);
var xPosition = (e.touches[0].screenX + e.touches[1].screenX) / 2 - parentPosition.x;
if (touchDistance !== 0 && _this.lastTouchDistance !== 0) {
_this.changeZoom(_this.lastTouchDistance / touchDistance, xPosition / _this.state.width);
_this.lastTouchDistance = touchDistance;
}
}
else if (_this.lastSingleTouch && e.touches.length === 1 && _this.props.fixedHeader === 'fixed') {
e.preventDefault();
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
var deltaX = x - _this.lastSingleTouch.x;
var deltaX0 = x - _this.singleTouchStart.x;
var deltaY0 = y - _this.singleTouchStart.y;
_this.lastSingleTouch = { x: x, y: y };
var moveX = Math.abs(deltaX0) * 3 > Math.abs(deltaY0);
var moveY = Math.abs(deltaY0) * 3 > Math.abs(deltaX0);
if (deltaX !== 0 && moveX) {
_this.refs.scrollComponent.scrollLeft -= deltaX;
}
if (moveY) {
window.scrollTo(window.pageXOffset, _this.singleTouchStart.screenY - deltaY0);
}
}
};
_this.touchEnd = function (e) {
if (_this.lastTouchDistance) {
e.preventDefault();
_this.lastTouchDistance = null;
}
if (_this.lastSingleTouch) {
e.preventDefault();
_this.lastSingleTouch = null;
_this.singleTouchStart = null;
}
};
_this.onScroll = function () {
var scrollComponent = _this.refs.scrollComponent;
var canvasTimeStart = _this.state.canvasTimeStart;
var scrollX = scrollComponent.scrollLeft;
var zoom = _this.state.visibleTimeEnd - _this.state.visibleTimeStart;
var width = _this.state.width;
var visibleTimeStart = canvasTimeStart + (zoom * scrollX) / width;
if (scrollX < _this.state.width * 0.5) {
_this.setState({
canvasTimeStart: _this.state.canvasTimeStart - zoom,
});
scrollComponent.scrollLeft += _this.state.width;
}
if (scrollX > _this.state.width * 1.5) {
_this.setState({
canvasTimeStart: _this.state.canvasTimeStart + zoom,
});
scrollComponent.scrollLeft -= _this.state.width;
}
if (_this.state.visibleTimeStart !== visibleTimeStart || _this.state.visibleTimeEnd !== visibleTimeStart + zoom) {
_this.props.onTimeChange.bind(_this)(visibleTimeStart, visibleTimeStart + zoom, _this.updateScrollCanvas);
}
};
_this.updateScrollCanvas = function (visibleTimeStart, visibleTimeEnd, forceUpdateDimensions, updatedItems, updatedGroups) {
var oldCanvasTimeStart = _this.state.canvasTimeStart;
var oldZoom = _this.state.visibleTimeEnd - _this.state.visibleTimeStart;
var newZoom = visibleTimeEnd - visibleTimeStart;
var items = updatedItems || _this.props.items;
var groups = updatedGroups || _this.props.groups;
var fullUpdate = _this.props.fullUpdate;
var newState = {
visibleTimeStart: visibleTimeStart,
visibleTimeEnd: visibleTimeEnd,
};
var resetCanvas = false;
var canKeepCanvas = visibleTimeStart >= oldCanvasTimeStart + oldZoom * 0.5 &&
visibleTimeStart <= oldCanvasTimeStart + oldZoom * 1.5 &&
visibleTimeEnd >= oldCanvasTimeStart + oldZoom * 1.5 &&
visibleTimeEnd <= oldCanvasTimeStart + oldZoom * 2.5;
if (canKeepCanvas) {
var newScrollLeft = Math.round((_this.state.width * (visibleTimeStart - oldCanvasTimeStart)) / newZoom);
if (_this.refs.scrollComponent.scrollLeft !== newScrollLeft) {
resetCanvas = true;
}
}
else {
resetCanvas = true;
}
if (resetCanvas) {
newState.canvasTimeStart = visibleTimeStart - newZoom;
_this.refs.scrollComponent.scrollLeft = _this.state.width;
if (_this.props.onBoundsChange) {
_this.props.onBoundsChange(newState.canvasTimeStart, newState.canvasTimeStart + newZoom * 3);
}
}
if (resetCanvas || forceUpdateDimensions || fullUpdate) {
var canvasTimeStart = newState.canvasTimeStart ? newState.canvasTimeStart : oldCanvasTimeStart;
var _a = _this.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, _this.state.width, fullUpdate), dimensionItems = _a.dimensionItems, height = _a.height, groupHeights = _a.groupHeights, groupTops = _a.groupTops;
newState.dimensionItems = dimensionItems;
newState.height = height;
newState.groupHeights = groupHeights;
newState.groupTops = groupTops;
}
_this.setState(newState);
};
_this.onWheel = function (e) {
var traditionalZoom = _this.props.traditionalZoom;
if (e.ctrlKey) {
e.preventDefault();
var parentPosition = (0, utils_1.getParentPosition)(e.currentTarget);
var xPosition = e.clientX - parentPosition.x;
_this.changeZoom(1.0 + e.deltaY / 50, xPosition / _this.state.width);
}
else if (e.shiftKey) {
e.preventDefault();
var scrollComponent = _this.refs.scrollComponent;
scrollComponent.scrollLeft += e.deltaY;
}
else if (e.altKey) {
var parentPosition = (0, utils_1.getParentPosition)(e.currentTarget);
var xPosition = e.clientX - parentPosition.x;
_this.changeZoom(1.0 + e.deltaY / 500, xPosition / _this.state.width);
}
else {
if (_this.props.fixedHeader === 'fixed') {
e.preventDefault();
if (e.deltaX !== 0) {
if (!traditionalZoom) {
_this.refs.scrollComponent.scrollLeft += e.deltaX;
}
}
if (e.deltaY !== 0) {
window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY);
if (traditionalZoom) {
var parentPosition = (0, utils_1.getParentPosition)(e.currentTarget);
var xPosition = e.clientX - parentPosition.x;
_this.changeZoom(1.0 + e.deltaY / 50, xPosition / _this.state.width);
}
}
}
}
};
_this.showPeriod = function (from, unit) {
var visibleTimeStart = from.valueOf();
var visibleTimeEnd = (0, moment_1.default)(from).add(1, unit).valueOf();
var zoom = visibleTimeEnd - visibleTimeStart;
if (zoom < 360000) {
return;
}
if (unit !== 'year' &&
_this.state.visibleTimeStart === visibleTimeStart &&
_this.state.visibleTimeEnd === visibleTimeEnd) {
var nextUnit = (0, utils_1.getNextUnit)(unit);
visibleTimeStart = from.startOf(nextUnit).valueOf();
visibleTimeEnd = (0, moment_1.default)(visibleTimeStart).add(1, nextUnit);
zoom = visibleTimeEnd - visibleTimeStart;
}
_this.props.onTimeChange.bind(_this)(visibleTimeStart, visibleTimeStart + zoom, _this.updateScrollCanvas);
};
_this.selectItem = function (item, clickType, e) {
if (_this.state.selectedItem === item || (_this.props.itemTouchSendsClick && clickType === 'touch')) {
if (item && _this.props.onItemClick) {
_this.props.onItemClick(item, e);
}
}
else {
_this.setState({ selectedItem: item });
if (item && _this.props.onItemSelect) {
_this.props.onItemSelect(item, e);
}
}
};
_this.scrollAreaClick = function (e) {
if (!(0, utils_1.hasSomeParentTheClass)(e.target, 'rct-item')) {
if (_this.state.selectedItem) {
_this.selectItem(null);
}
else if (_this.props.onCanvasClick) {
var _a = _this.rowAndTimeFromEvent(e), row = _a[0], time = _a[1];
if (row >= 0 && row < _this.props.groups.length) {
var groupId = (0, utils_1._get)(_this.props.groups[row], _this.props.keys.groupIdKey);
_this.props.onCanvasClick(groupId, time, e);
}
}
}
};
_this.dragItem = function (item, dragTime, newGroupOrder) {
var newGroup = _this.props.groups[newGroupOrder];
var keys = _this.props.keys;
_this.setState({
draggingItem: item,
dragTime: dragTime,
newGroupOrder: newGroupOrder,
dragGroupTitle: newGroup ? (0, utils_1._get)(newGroup, keys.groupTitleKey) : '',
});
};
_this.dropItem = function (item, dragTime, newGroupOrder) {
_this.setState({
draggingItem: null,
dragTime: null,
dragGroupTitle: null,
});
if (_this.props.onItemMove) {
_this.props.onItemMove(item, dragTime, newGroupOrder);
}
};
_this.resizingItem = function (item, resizeTime, edge) {
_this.setState({
resizingItem: item,
resizingEdge: edge,
resizeTime: resizeTime,
});
};
_this.resizedItem = function (item, resizeTime, edge) {
_this.setState({
resizingItem: null,
resizingEdge: null,
resizeTime: null,
});
if (_this.props.onItemResize) {
_this.props.onItemResize(item, resizeTime, edge);
}
};
_this.handleMouseDown = function (e) {
var topOffset = _this.state.topOffset;
var pageY = e.pageY;
var _a = _this.props, headerLabelGroupHeight = _a.headerLabelGroupHeight, headerLabelHeight = _a.headerLabelHeight;
var headerHeight = headerLabelGroupHeight + headerLabelHeight;
if (pageY - topOffset > headerHeight) {
_this.setState({
isDragging: true,
dragStartPosition: e.pageX,
dragLastPosition: e.pageX,
});
}
};
_this.handleMouseMove = function (e) {
if (_this.state.isDragging && !_this.state.draggingItem && !_this.state.resizingItem) {
_this.refs.scrollComponent.scrollLeft += _this.state.dragLastPosition - e.pageX;
_this.setState({ dragLastPosition: e.pageX });
}
};
_this.handleMouseUp = function (e) {
var dragStartPosition = _this.state.dragStartPosition;
if (Math.abs(dragStartPosition - e.pageX) <= _this.props.clickTolerance) {
_this.scrollAreaClick(e);
}
_this.setState({
isDragging: false,
dragStartPosition: null,
dragLastPosition: null,
});
};
_this.handleDoubleClick = function (e) {
var _a = _this.state, canvasTimeStart = _a.canvasTimeStart, width = _a.width, visibleTimeStart = _a.visibleTimeStart, visibleTimeEnd = _a.visibleTimeEnd, groupTops = _a.groupTops, topOffset = _a.topOffset;
var zoom = visibleTimeEnd - visibleTimeStart;
var canvasTimeEnd = canvasTimeStart + zoom * 3;
var canvasWidth = width * 3;
var pageX = e.pageX, pageY = e.pageY;
var ratio = (canvasTimeEnd - canvasTimeStart) / canvasWidth;
var boundingRect = _this.refs.scrollComponent.getBoundingClientRect();
var timePosition = visibleTimeStart + ratio * (pageX - boundingRect.left);
if (_this.props.dragSnap) {
timePosition = Math.round(timePosition / _this.props.dragSnap) * _this.props.dragSnap;
}
var groupIndex = 0;
for (var _i = 0, _b = Object.keys(groupTops); _i < _b.length; _i++) {
var key = _b[_i];
var item = groupTops[key];
if (pageY - topOffset > item) {
groupIndex = parseInt(key, 10);
}
else {
break;
}
}
if (_this.props.onCanvasDoubleClick) {
_this.props.onCanvasDoubleClick(_this.props.groups[groupIndex], timePosition, e);
}
};
var visibleTimeStart = null;
var visibleTimeEnd = null;
if (_this.props.defaultTimeStart && _this.props.defaultTimeEnd) {
visibleTimeStart = _this.props.defaultTimeStart.valueOf();
visibleTimeEnd = _this.props.defaultTimeEnd.valueOf();
}
else if (_this.props.visibleTimeStart && _this.props.visibleTimeEnd) {
visibleTimeStart = _this.props.visibleTimeStart;
visibleTimeEnd = _this.props.visibleTimeEnd;
}
else {
visibleTimeStart = Math.min.apply(Math, _this.props.items.map(function (item) { return (0, utils_1._get)(item, 'start').getTime(); }));
visibleTimeEnd = Math.max.apply(Math, _this.props.items.map(function (item) { return (0, utils_1._get)(item, 'end').getTime(); }));
if (!visibleTimeStart || !visibleTimeEnd) {
visibleTimeStart = new Date().getTime() - 86400 * 7 * 1000;
visibleTimeEnd = new Date().getTime() + 86400 * 7 * 1000;
}
if (_this.props.onTimeInit) {
_this.props.onTimeInit(visibleTimeStart, visibleTimeEnd);
}
}
_this.state = {
width: 1000,
visibleTimeStart: visibleTimeStart,
visibleTimeEnd: visibleTimeEnd,
canvasTimeStart: visibleTimeStart - (visibleTimeEnd - visibleTimeStart),
selectedItem: null,
dragTime: null,
dragGroupTitle: null,
resizeTime: null,
isDragging: false,
topOffset: 0,
resizingItem: null,
resizingEdge: null,
};
var _a = _this.stackItems(props.items, props.groups, _this.state.canvasTimeStart, _this.state.visibleTimeStart, _this.state.visibleTimeEnd, _this.state.width), dimensionItems = _a.dimensionItems, height = _a.height, groupHeights = _a.groupHeights, groupTops = _a.groupTops;
return _this;
}
UpCalendarTimeline.prototype.componentDidMount = function () {
var _this = this;
this.resize();
this.resizeEventListener = {
handleEvent: function (event) {
_this.resize();
},
};
window.addEventListener('resize', this.resizeEventListener);
this.lastTouchDistance = null;
this.refs.scrollComponent.addEventListener('touchstart', this.touchStart);
this.refs.scrollComponent.addEventListener('touchmove', this.touchMove);
this.refs.scrollComponent.addEventListener('touchend', this.touchEnd);
};
UpCalendarTimeline.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.resizeEventListener);
this.refs.scrollComponent.removeEventListener('touchstart', this.touchStart);
this.refs.scrollComponent.removeEventListener('touchmove', this.touchMove);
this.refs.scrollComponent.removeEventListener('touchend', this.touchEnd);
};
UpCalendarTimeline.prototype.resize = function () {
var _a = this.refs.container.getBoundingClientRect(), containerWidth = _a.width, containerTop = _a.top;
var width = containerWidth - this.props.sidebarWidth;
var _b = this.stackItems(this.props.items, this.props.groups, this.state.canvasTimeStart, this.state.visibleTimeStart, this.state.visibleTimeEnd, width), dimensionItems = _b.dimensionItems, height = _b.height, groupHeights = _b.groupHeights, groupTops = _b.groupTops;
this.setState({
width: width,
topOffset: containerTop + window.pageYOffset,
dimensionItems: dimensionItems,
height: height,
groupHeights: groupHeights,
groupTops: groupTops,
});
this.refs.scrollComponent.scrollLeft = width;
};
UpCalendarTimeline.prototype.componentWillReceiveProps = function (nextProps) {
var visibleTimeStart = nextProps.visibleTimeStart, visibleTimeEnd = nextProps.visibleTimeEnd, items = nextProps.items, groups = nextProps.groups;
if (visibleTimeStart && visibleTimeEnd) {
this.updateScrollCanvas(visibleTimeStart, visibleTimeEnd, items !== this.props.items || groups !== this.props.groups, items, groups);
}
if (items !== this.props.items || groups !== this.props.groups) {
this.updateDimensions(items, groups);
}
};
UpCalendarTimeline.prototype.updateDimensions = function (items, groups) {
var _a = this.state, canvasTimeStart = _a.canvasTimeStart, visibleTimeStart = _a.visibleTimeStart, visibleTimeEnd = _a.visibleTimeEnd, width = _a.width;
var _b = this.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, width), dimensionItems = _b.dimensionItems, height = _b.height, groupHeights = _b.groupHeights, groupTops = _b.groupTops;
this.setState({
dimensionItems: dimensionItems,
height: height,
groupHeights: groupHeights,
groupTops: groupTops,
});
};
UpCalendarTimeline.prototype.zoomIn = function (e) {
e.preventDefault();
this.changeZoom(0.75);
};
UpCalendarTimeline.prototype.zoomOut = function (e) {
e.preventDefault();
this.changeZoom(1.25);
};
UpCalendarTimeline.prototype.changeZoom = function (scale, offset) {
if (offset === void 0) { offset = 0.5; }
var _a = this.props, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
var oldZoom = this.state.visibleTimeEnd - this.state.visibleTimeStart;
var newZoom = Math.min(Math.max(Math.round(oldZoom * scale), minZoom), maxZoom);
var newVisibleTimeStart = Math.round(this.state.visibleTimeStart + (oldZoom - newZoom) * offset);
this.props.onTimeChange.bind(this)(newVisibleTimeStart, newVisibleTimeStart + newZoom, this.updateScrollCanvas);
};
UpCalendarTimeline.prototype.rowAndTimeFromEvent = function (e) {
var _a = this.props, lineHeight = _a.lineHeight, dragSnap = _a.dragSnap;
var _b = this.state, width = _b.width, visibleTimeStart = _b.visibleTimeStart, visibleTimeEnd = _b.visibleTimeEnd;
var parentPosition = (0, utils_1.getParentPosition)(e.currentTarget);
var x = e.clientX - parentPosition.x;
var y = e.clientY - parentPosition.y;
var row = Math.floor((y - lineHeight * 2) / lineHeight);
var time = Math.round(visibleTimeStart + (x / width) * (visibleTimeEnd - visibleTimeStart));
time = Math.floor(time / dragSnap) * dragSnap;
return [row, time];
};
UpCalendarTimeline.prototype.todayLine = function (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight) {
return ((0, jsx_runtime_1.jsx)(TodayLine_1.default, { canvasTimeStart: canvasTimeStart, canvasTimeEnd: canvasTimeEnd, canvasWidth: canvasWidth, lineHeight: this.props.lineHeight, lineCount: (0, utils_1._length)(this.props.groups), height: height, headerHeight: headerHeight }, void 0));
};
UpCalendarTimeline.prototype.verticalLines = function (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight) {
return ((0, jsx_runtime_1.jsx)(VerticalLines_1.default, { canvasTimeStart: canvasTimeStart, canvasTimeEnd: canvasTimeEnd, canvasWidth: canvasWidth, lineHeight: this.props.lineHeight, lineCount: (0, utils_1._length)(this.props.groups), minUnit: minUnit, timeSteps: timeSteps, fixedHeader: this.props.fixedHeader, height: height, headerHeight: headerHeight }, void 0));
};
UpCalendarTimeline.prototype.horizontalLines = function (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, groupHeights, headerHeight) {
return ((0, jsx_runtime_1.jsx)(HorizontalLines_1.default, { canvasWidth: canvasWidth, lineHeight: this.props.lineHeight, lineCount: (0, utils_1._length)(this.props.groups), groups: this.props.groups, groupHeights: groupHeights, headerHeight: headerHeight }, void 0));
};
UpCalendarTimeline.prototype.items = function (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops) {
return ((0, jsx_runtime_1.jsx)(Items_1.default, { canvasTimeStart: canvasTimeStart, canvasTimeEnd: canvasTimeEnd, canvasWidth: canvasWidth, lineHeight: this.props.lineHeight, lineCount: (0, utils_1._length)(this.props.groups), dimensionItems: dimensionItems, minUnit: minUnit, groupHeights: groupHeights, groupTops: groupTops, items: this.props.items, groups: this.props.groups, keys: this.props.keys, selectedItem: this.state.selectedItem, dragSnap: this.props.dragSnap, minResizeWidth: this.props.minResizeWidth, canChangeGroup: this.props.canChangeGroup, canMove: this.props.canMove, canResize: this.props.canResize, useResizeHandle: this.props.useResizeHandle, canSelect: this.props.canSelect, moveResizeValidator: this.props.moveResizeValidator, topOffset: this.state.topOffset, itemSelect: this.selectItem, itemDrag: this.dragItem, itemDrop: this.dropItem, onItemDoubleClick: this.props.onItemDoubleClick, onItemContextMenu: this.props.onItemContextMenu, itemResizing: this.resizingItem, itemResized: this.resizedItem }, void 0));
};
UpCalendarTimeline.prototype.infoLabel = function () {
var label = null;
if (this.state.dragTime) {
label = (0, moment_1.default)(this.state.dragTime).format('LLL') + ", " + this.state.dragGroupTitle;
}
else if (this.state.resizeTime) {
label = (0, moment_1.default)(this.state.resizeTime).format('LLL');
}
return label ? (0, jsx_runtime_1.jsx)(InfoLabel_1.default, { label: label }, void 0) : '';
};
UpCalendarTimeline.prototype.header = function (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight) {
return ((0, jsx_runtime_1.jsx)(Header_1.default, { canvasTimeStart: canvasTimeStart, canvasTimeEnd: canvasTimeEnd, canvasWidth: canvasWidth, lineHeight: this.props.lineHeight, minUnit: minUnit, timeSteps: timeSteps, headerLabelGroupHeight: headerLabelGroupHeight, headerLabelHeight: headerLabelHeight, width: this.state.width, zoom: zoom, visibleTimeStart: this.state.visibleTimeStart, visibleTimeEnd: this.state.visibleTimeEnd, fixedHeader: this.props.fixedHeader, zIndex: this.props.zIndexStart + 1, showPeriod: this.showPeriod }, void 0));
};
UpCalendarTimeline.prototype.sidebar = function (height, groupHeights, headerHeight) {
return ((0, jsx_runtime_1.jsx)(Sidebar_1.default, (0, tslib_1.__assign)({ groups: this.props.groups, keys: this.props.keys, width: this.props.sidebarWidth, lineHeight: this.props.lineHeight, groupHeights: groupHeights, height: height, headerHeight: headerHeight, fixedHeader: this.props.fixedHeader, zIndex: this.props.zIndexStart + 2 }, { children: this.props.children }), void 0));
};
UpCalendarTimeline.prototype.stackItems = function (items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, width, full) {
var _a = this.props, keys = _a.keys, dragSnap = _a.dragSnap, lineHeight = _a.lineHeight, headerLabelGroupHeight = _a.headerLabelGroupHeight, headerLabelHeight = _a.headerLabelHeight, stackItems = _a.stackItems, fullUpdate = _a.fullUpdate, itemHeightRatio = _a.itemHeightRatio;
var _b = this.state, draggingItem = _b.draggingItem, dragTime = _b.dragTime, resizingItem = _b.resizingItem, resizingEdge = _b.resizingEdge, resizeTime = _b.resizeTime, newGroupOrder = _b.newGroupOrder;
var zoom = visibleTimeEnd - visibleTimeStart;
var canvasTimeEnd = canvasTimeStart + zoom * 3;
var canvasWidth = width * 3;
var headerHeight = headerLabelGroupHeight + headerLabelHeight;
var visibleItems = (0, utils_1.getVisibleItems)(items, canvasTimeStart, canvasTimeEnd, keys);
var groupOrders = (0, utils_1.getGroupOrders)(groups, keys);
var dimensionItems = visibleItems
.map(function (item) {
return {
id: (0, utils_1._get)(item, keys.itemIdKey),
dimensions: (0, utils_1.calculateDimensions)({
item: item,
order: groupOrders[(0, utils_1._get)(item, keys.itemGroupKey)],
keys: keys,
canvasTimeStart: canvasTimeStart,
canvasTimeEnd: canvasTimeEnd,
canvasWidth: canvasWidth,
dragSnap: dragSnap,
lineHeight: lineHeight,
draggingItem: draggingItem,
dragTime: dragTime,
resizingItem: resizingItem,
resizingEdge: resizingEdge,
resizeTime: resizeTime,
newGroupOrder: newGroupOrder,
itemHeightRatio: itemHeightRatio,
fullUpdate: fullUpdate,
visibleTimeStart: visibleTimeStart,
visibleTimeEnd: visibleTimeEnd,
}),
};
})
.filter(function (i) { return i.dimensions; });
var stackingMethod = stackItems ? utils_1.stack : utils_1.nostack;
var _c = stackingMethod(dimensionItems, groupOrders, lineHeight, headerHeight), height = _c.height, groupHeights = _c.groupHeights, groupTops = _c.groupTops;
return { dimensionItems: dimensionItems, height: height, groupHeights: groupHeights, groupTops: groupTops };
};
UpCalendarTimeline.prototype.render = function () {
var _a = this.props, items = _a.items, groups = _a.groups, headerLabelGroupHeight = _a.headerLabelGroupHeight, headerLabelHeight = _a.headerLabelHeight, sidebarWidth = _a.sidebarWidth, timeSteps = _a.timeSteps;
var _b = this.state, draggingItem = _b.draggingItem, resizingItem = _b.resizingItem, isDragging = _b.isDragging, width = _b.width, visibleTimeStart = _b.visibleTimeStart, visibleTimeEnd = _b.visibleTimeEnd, canvasTimeStart = _b.canvasTimeStart;
var _c = this.state, dimensionItems = _c.dimensionItems, height = _c.height, groupHeights = _c.groupHeights, groupTops = _c.groupTops;
var zoom = visibleTimeEnd - visibleTimeStart;
var canvasTimeEnd = canvasTimeStart + zoom * 3;
var canvasWidth = width * 3;
var minUnit = (0, utils_1.getMinUnit)(zoom, width, timeSteps);
var headerHeight = headerLabelGroupHeight + headerLabelHeight;
if (draggingItem || resizingItem) {
var stackResults = this.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, width);
dimensionItems = stackResults.dimensionItems;
height = stackResults.height;
groupHeights = stackResults.groupHeights;
groupTops = stackResults.groupTops;
}
var outerComponentStyle = {
height: height + "px",
display: 'block',
overflow: 'hidden',
};
var scrollComponentStyle = {
width: width + "px",
height: height + 20 + "px",
cursor: isDragging ? 'move' : 'default',
display: 'inline-block',
verticalAlign: 'top',
overflowX: 'scroll',
overflowY: 'hidden',
};
var canvasComponentStyle = {
width: canvasWidth + "px",
height: height + "px",
position: 'relative',
};
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: this.props.style, ref: "container", className: "react-calendar-timeline" }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: outerComponentStyle, className: "rct-outer" }, { children: [sidebarWidth > 0 ? this.sidebar(height, groupHeights, headerHeight) : null, (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: "scrollComponent", className: "rct-scroll", style: scrollComponentStyle, onScroll: this.onScroll, onWheel: this.onWheel, onMouseDown: this.handleMouseDown, onMouseMove: this.handleMouseMove, onMouseUp: this.handleMouseUp }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ ref: "canvasComponent", className: "rct-canvas", style: canvasComponentStyle, onDoubleClick: this.handleDoubleClick }, { children: [this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops), this.verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight), this.horizontalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, groupHeights, headerHeight), this.todayLine(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight), this.infoLabel(), this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight)] }), void 0) }), void 0)] }), void 0) }), void 0));
};
UpCalendarTimeline.defaultProps = {
sidebarWidth: 150,
dragSnap: 1000 * 60 * 15,
minResizeWidth: 20,
fixedHeader: 'none',
fullUpdate: true,
zIndexStart: 10,
lineHeight: 30,
headerLabelGroupHeight: 30,
headerLabelHeight: 30,
itemHeightRatio: 0.65,
minZoom: 60 * 60 * 1000,
maxZoom: 5 * 365.24 * 86400 * 1000,
clickTolerance: 3,
canChangeGroup: true,
canMove: true,
canResize: 'right',
useResizeHandle: false,
canSelect: true,
stackItems: false,
traditionalZoom: false,
onItemMove: null,
onItemResize: null,
onItemClick: null,
onItemSelect: null,
onCanvasClick: null,
onItemDoubleClick: null,
onItemContextMenu: null,
moveResizeValidator: null,
dayBackground: null,
defaultTimeStart: null,
defaultTimeEnd: null,
itemTouchSendsClick: false,
style: {},
keys: defaultKeys,
timeSteps: defaultTimeSteps,
visibleTimeStart: null,
visibleTimeEnd: null,
onTimeChange: function (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) {
updateScrollCanvas(visibleTimeStart, visibleTimeEnd);
},
onTimeInit: null,
onBoundsChange: null,
children: null,
};
return UpCalendarTimeline;
}(React.Component));
exports.default = UpCalendarTimeline;
//# sourceMappingURL=Timeline.js.map