@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
411 lines • 18.2 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var interact = require("interact.js");
var moment = require("moment");
var utils_1 = require("../utils");
var Item = (function (_super) {
__extends(Item, _super);
function Item(props) {
var _this = _super.call(this, props) || this;
_this.onMouseDown = function (e) {
if (!_this.state.interactMounted) {
e.preventDefault();
_this.startedClicking = true;
}
};
_this.onMouseUp = function (e) {
if (!_this.state.interactMounted && _this.startedClicking) {
_this.startedClicking = false;
_this.actualClick(e, 'click');
}
};
_this.onTouchStart = function (e) {
if (!_this.state.interactMounted) {
e.preventDefault();
_this.startedTouching = true;
}
};
_this.onTouchEnd = function (e) {
if (!_this.state.interactMounted && _this.startedTouching) {
_this.startedTouching = false;
_this.actualClick(e, 'touch');
}
};
_this.handleDoubleClick = function (e) {
e.preventDefault();
e.stopPropagation();
if (_this.props.onItemDoubleClick) {
_this.props.onItemDoubleClick(_this.itemId, e);
}
};
_this.handleContextMenu = function (e) {
if (_this.props.onContextMenu) {
e.preventDefault();
e.stopPropagation();
_this.props.onContextMenu(_this.itemId, e);
}
};
_this.cacheDataFromProps(props);
_this.state = {
interactMounted: false,
dragging: null,
dragStart: null,
preDragPosition: null,
dragTime: null,
dragGroupDelta: null,
resizing: null,
resizeEdge: null,
resizeStart: null,
resizeTime: null
};
return _this;
}
Item.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var shouldUpdate = nextState.dragging !== this.state.dragging ||
nextState.dragTime !== this.state.dragTime ||
nextState.dragGroupDelta !== this.state.dragGroupDelta ||
nextState.resizing !== this.state.resizing ||
nextState.resizeTime !== this.state.resizeTime ||
nextProps.keys !== this.props.keys ||
!utils_1.deepObjectCompare(nextProps.itemProps, this.props.itemProps) ||
nextProps.selected !== this.props.selected ||
nextProps.item !== this.props.item ||
nextProps.canvasTimeStart !== this.props.canvasTimeStart ||
nextProps.canvasTimeEnd !== this.props.canvasTimeEnd ||
nextProps.canvasWidth !== this.props.canvasWidth ||
nextProps.lineHeight !== this.props.lineHeight ||
nextProps.order !== this.props.order ||
nextProps.dragSnap !== this.props.dragSnap ||
nextProps.minResizeWidth !== this.props.minResizeWidth ||
nextProps.selected !== this.props.selected ||
nextProps.canChangeGroup !== this.props.canChangeGroup ||
nextProps.canSelect !== this.props.canSelect ||
nextProps.topOffset !== this.props.topOffset ||
nextProps.canMove !== this.props.canMove ||
nextProps.canResizeLeft !== this.props.canResizeLeft ||
nextProps.canResizeRight !== this.props.canResizeRight ||
nextProps.dimensions !== this.props.dimensions;
return shouldUpdate;
};
Item.prototype.cacheDataFromProps = function (props) {
this.itemId = utils_1._get(props.item, props.keys.itemIdKey);
this.itemTitle = utils_1._get(props.item, props.keys.itemTitleKey);
this.itemDivTitle = props.keys.itemDivTitleKey ? utils_1._get(props.item, props.keys.itemDivTitleKey) : this.itemTitle;
this.itemTimeStart = utils_1._get(props.item, props.keys.itemTimeStartKey);
this.itemTimeEnd = utils_1._get(props.item, props.keys.itemTimeEndKey);
};
Item.prototype.coordinateToTimeRatio = function (props) {
if (props === void 0) { props = this.props; }
return (props.canvasTimeEnd - props.canvasTimeStart) / props.canvasWidth;
};
Item.prototype.dragTimeSnap = function (dragTime, considerOffset) {
var dragSnap = this.props.dragSnap;
if (dragSnap) {
var offset = considerOffset ? moment().utcOffset() * 60 * 1000 : 0;
return Math.round(dragTime / dragSnap) * dragSnap - offset % dragSnap;
}
else {
return dragTime;
}
};
Item.prototype.resizeTimeSnap = function (dragTime) {
var dragSnap = this.props.dragSnap;
if (dragSnap) {
var endTime = this.itemTimeEnd % dragSnap;
return Math.round((dragTime - endTime) / dragSnap) * dragSnap + endTime;
}
else {
return dragTime;
}
};
Item.prototype.dragTime = function (e) {
var startTime = this.itemTimeStart;
if (this.state.dragging) {
var deltaX = e.pageX - this.state.dragStart.x;
var timeDelta = deltaX * this.coordinateToTimeRatio();
return this.dragTimeSnap(startTime + timeDelta, true);
}
else {
return startTime;
}
};
Item.prototype.dragGroupDelta = function (e) {
var _a = this.props, groupTops = _a.groupTops, order = _a.order, topOffset = _a.topOffset;
if (this.state.dragging) {
if (!this.props.canChangeGroup) {
return 0;
}
var groupDelta = 0;
for (var _i = 0, _b = Object.keys(groupTops); _i < _b.length; _i++) {
var key = _b[_i];
var item = groupTops[key];
if (e.pageY - topOffset > item) {
groupDelta = parseInt(key, 10) - order;
}
else {
break;
}
}
if (this.props.order + groupDelta < 0) {
return 0 - this.props.order;
}
else {
return groupDelta;
}
}
else {
return 0;
}
};
Item.prototype.resizeTimeDelta = function (e, resizeEdge) {
var length = this.itemTimeEnd - this.itemTimeStart;
var timeDelta = this.dragTimeSnap((e.pageX - this.state.resizeStart) * this.coordinateToTimeRatio());
if (length + (resizeEdge === 'left' ? -timeDelta : timeDelta) < (this.props.dragSnap || 1000)) {
if (resizeEdge === 'left') {
return length - (this.props.dragSnap || 1000);
}
else {
return (this.props.dragSnap || 1000) - length;
}
}
else {
return timeDelta;
}
};
Item.prototype.componentDidMount = function () {
};
Item.prototype.mountInteract = function () {
var _this = this;
var leftResize = this.props.useResizeHandle ? this.refs.dragLeft : true;
var rightResize = this.props.useResizeHandle ? this.refs.dragRight : true;
interact(this.refs.item)
.resizable({
edges: {
left: this.canResizeLeft() && leftResize,
right: this.canResizeRight() && rightResize,
top: false,
bottom: false
},
enabled: this.props.selected && (this.canResizeLeft() || this.canResizeRight())
})
.draggable({
enabled: this.props.selected
})
.on('dragstart', function (e) {
if (_this.props.selected) {
_this.setState({
dragging: true,
dragStart: { x: e.pageX, y: e.pageY },
preDragPosition: { x: e.target.offsetLeft, y: e.target.offsetTop },
dragTime: _this.itemTimeStart,
dragGroupDelta: 0
});
}
else {
return false;
}
})
.on('dragmove', function (e) {
if (_this.state.dragging) {
var dragTime = _this.dragTime(e);
var dragGroupDelta = _this.dragGroupDelta(e);
if (_this.props.moveResizeValidator) {
dragTime = _this.props.moveResizeValidator('move', _this.props.item, dragTime);
}
if (_this.props.onDrag) {
_this.props.onDrag(_this.itemId, dragTime, _this.props.order + dragGroupDelta);
}
_this.setState({
dragTime: dragTime,
dragGroupDelta: dragGroupDelta
});
}
})
.on('dragend', function (e) {
if (_this.state.dragging) {
if (_this.props.onDrop) {
var dragTime = _this.dragTime(e);
if (_this.props.moveResizeValidator) {
dragTime = _this.props.moveResizeValidator('move', _this.props.item, dragTime);
}
_this.props.onDrop(_this.itemId, dragTime, _this.props.order + _this.dragGroupDelta(e));
}
_this.setState({
dragging: false,
dragStart: null,
preDragPosition: null,
dragTime: null,
dragGroupDelta: null
});
}
})
.on('resizestart', function (e) {
if (_this.props.selected) {
_this.setState({
resizing: true,
resizeEdge: null,
resizeStart: e.pageX,
resizeTime: 0
});
}
else {
return false;
}
})
.on('resizemove', function (e) {
if (_this.state.resizing) {
var resizeEdge = _this.state.resizeEdge;
if (!resizeEdge) {
resizeEdge = e.deltaRect.left !== 0 ? 'left' : 'right';
_this.setState({ resizeEdge: resizeEdge });
}
var time = resizeEdge === 'left' ? _this.itemTimeStart : _this.itemTimeEnd;
var resizeTime = _this.resizeTimeSnap(time + _this.resizeTimeDelta(e, resizeEdge));
if (_this.props.moveResizeValidator) {
resizeTime = _this.props.moveResizeValidator('resize', _this.props.item, resizeTime, resizeEdge);
}
if (_this.props.onResizing) {
_this.props.onResizing(_this.itemId, resizeTime, resizeEdge);
}
_this.setState({
resizeTime: resizeTime
});
}
})
.on('resizeend', function (e) {
if (_this.state.resizing) {
var resizeEdge = _this.state.resizeEdge;
var time = resizeEdge === 'left' ? _this.itemTimeStart : _this.itemTimeEnd;
var resizeTime = _this.resizeTimeSnap(time + _this.resizeTimeDelta(e, resizeEdge));
if (_this.props.moveResizeValidator) {
resizeTime = _this.props.moveResizeValidator('resize', _this.props.item, resizeTime, resizeEdge);
}
if (_this.props.onResized && _this.resizeTimeDelta(e, resizeEdge) !== 0) {
_this.props.onResized(_this.itemId, resizeTime, resizeEdge);
}
_this.setState({
resizing: null,
resizeStart: null,
resizeEdge: null,
resizeTime: null
});
}
})
.on('tap', function (e) {
_this.actualClick(e, e.pointerType === 'mouse' ? 'click' : 'touch');
});
this.setState({
interactMounted: true
});
};
Item.prototype.canResizeLeft = function (props) {
if (props === void 0) { props = this.props; }
if (!props.canResizeLeft || props.dimensions.clippedLeft) {
return false;
}
var width = parseInt(props.dimensions.width, 10);
return width >= props.minResizeWidth;
};
Item.prototype.canResizeRight = function (props) {
if (props === void 0) { props = this.props; }
if (!props.canResizeRight || props.dimensions.clippedRight) {
return false;
}
var width = parseInt(props.dimensions.width, 10);
return width >= props.minResizeWidth;
};
Item.prototype.canMove = function (props) {
if (props === void 0) { props = this.props; }
return !!props.canMove;
};
Item.prototype.componentWillReceiveProps = function (nextProps) {
this.cacheDataFromProps(nextProps);
var interactMounted = this.state.interactMounted;
var couldDrag = this.props.selected && this.canMove(this.props);
var couldResizeLeft = this.props.selected && this.canResizeLeft(this.props);
var couldResizeRight = this.props.selected && this.canResizeRight(this.props);
var willBeAbleToDrag = nextProps.selected && this.canMove(nextProps);
var willBeAbleToResizeLeft = nextProps.selected && this.canResizeLeft(nextProps);
var willBeAbleToResizeRight = nextProps.selected && this.canResizeRight(nextProps);
if (nextProps.selected && !interactMounted) {
this.mountInteract();
interactMounted = true;
}
if (interactMounted && (couldResizeLeft !== willBeAbleToResizeLeft || couldResizeRight !== willBeAbleToResizeRight)) {
var leftResize = this.props.useResizeHandle ? this.refs.dragLeft : true;
var rightResize = this.props.useResizeHandle ? this.refs.dragRight : true;
interact(this.refs.item)
.resizable({
enabled: willBeAbleToResizeLeft || willBeAbleToResizeRight,
edges: {
top: false,
bottom: false,
left: willBeAbleToResizeLeft && leftResize,
right: willBeAbleToResizeRight && rightResize
}
});
}
if (interactMounted && couldDrag !== willBeAbleToDrag) {
interact(this.refs.item)
.draggable({ enabled: willBeAbleToDrag });
}
};
Item.prototype.actualClick = function (e, clickType) {
if (this.props.canSelect && this.props.onSelect) {
this.props.onSelect(this.itemId, clickType, e);
}
};
Item.prototype.render = function () {
var dimensions = this.props.dimensions;
if (typeof this.props.order === 'undefined' || this.props.order === null) {
return null;
}
var classNames = 'rct-item' +
(this.props.selected ? ' selected' : '') +
(this.canMove(this.props) ? ' can-move' : '') +
(this.canResizeLeft(this.props) || this.canResizeRight(this.props) ? ' can-resize' : '') +
(this.canResizeLeft(this.props) ? ' can-resize-left' : '') +
(this.canResizeRight(this.props) ? ' can-resize-right' : '') +
(this.props.item.className ? " " + this.props.item.className : '') +
(dimensions.clippedLeft ? ' clipped-left' : '') +
(dimensions.clippedRight ? ' clipped-right' : '');
var style = {
left: dimensions.left + "px",
top: dimensions.top + "px",
width: dimensions.width + "px",
height: dimensions.height + "px",
lineHeight: dimensions.height + "px"
};
return (React.createElement("div", __assign({}, this.props.item.itemProps, { key: this.itemId, ref: 'item', className: classNames, title: this.itemDivTitle, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, onTouchStart: this.onTouchStart, onTouchEnd: this.onTouchEnd, onDoubleClick: this.handleDoubleClick, onContextMenu: this.handleContextMenu, style: style }),
this.props.useResizeHandle ? React.createElement("div", { ref: 'dragLeft', className: 'rct-drag-left' }) : '',
React.createElement("div", { className: 'rct-item-overflow' },
React.createElement("div", { className: 'rct-item-content' }, this.itemTitle)),
this.props.useResizeHandle ? React.createElement("div", { ref: 'dragRight', className: 'rct-drag-right' }) : ''));
};
Item.propTypes = {};
Item.defaultProps = {
selected: false
};
return Item;
}(React.Component));
exports.default = Item;
//# sourceMappingURL=Item.js.map