office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
295 lines • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var stylesImport = require("./MarqueeSelection.scss");
var Utilities_1 = require("../../Utilities");
var styles = stylesImport;
// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start
// the drag even if they just click an item without moving.
var MIN_DRAG_DISTANCE = 5;
/**
* MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
* Elements which have data-selectable-index attributes are queried and measured once to determine if they
* fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
* so if the items change sizes while dragging, that could cause incorrect results.
*/
var MarqueeSelection = /** @class */ (function (_super) {
tslib_1.__extends(MarqueeSelection, _super);
function MarqueeSelection(props) {
var _this = _super.call(this, props) || this;
_this.state = {
dragRect: undefined
};
return _this;
}
MarqueeSelection.prototype.componentDidMount = function () {
this._scrollableParent = Utilities_1.findScrollableParent(this.refs.root);
this._scrollableSurface = (this._scrollableParent === window) ? document.body : this._scrollableParent;
// When scroll events come from window, we need to read scrollTop values from the body.
var hitTarget = this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface;
this._events.on(hitTarget, 'mousedown', this._onMouseDown);
this._events.on(hitTarget, 'touchstart', this._onTouchStart, true);
this._events.on(hitTarget, 'pointerdown', this._onPointerDown, true);
};
MarqueeSelection.prototype.componentWillUnmount = function () {
if (this._autoScroll) {
this._autoScroll.dispose();
}
};
MarqueeSelection.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, children = _a.children;
var dragRect = this.state.dragRect;
return (React.createElement("div", tslib_1.__assign({}, rootProps, { className: Utilities_1.css('ms-MarqueeSelection', styles.root, rootProps && rootProps.className), ref: 'root' }),
children,
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-dragMask', styles.dragMask) })),
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-box', styles.box), style: dragRect },
React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-boxFill', styles.boxFill) })))));
};
/** Determine if the mouse event occured on a scrollbar of the target element. */
MarqueeSelection.prototype._isMouseEventOnScrollbar = function (ev) {
var targetElement = ev.target;
var targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
if (targetScrollbarWidth) {
var targetRect = targetElement.getBoundingClientRect();
// Check vertical scroll
if (Utilities_1.getRTL()) {
if (ev.clientX < (targetRect.left + targetScrollbarWidth)) {
return true;
}
}
else {
if (ev.clientX > (targetRect.left + targetElement.clientWidth)) {
return true;
}
}
// Check horizontal scroll
if (ev.clientY > (targetRect.top + targetElement.clientHeight)) {
return true;
}
}
return false;
};
MarqueeSelection.prototype._onMouseDown = function (ev) {
var _a = this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;
// Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
if (this._isMouseEventOnScrollbar(ev)) {
return;
}
if (this._isInSelectionToggle(ev)) {
return;
}
if (!this._isTouch && isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) {
if (this._scrollableSurface && ev.button === 0) {
this._selectedIndicies = {};
this._preservedIndicies = undefined;
this._events.on(window, 'mousemove', this._onAsyncMouseMove);
this._events.on(this._scrollableParent, 'scroll', this._onAsyncMouseMove);
this._events.on(window, 'click', this._onMouseUp, true);
this._autoScroll = new Utilities_1.AutoScroll(this.refs.root);
this._scrollTop = this._scrollableSurface.scrollTop;
this._rootRect = this.refs.root.getBoundingClientRect();
this._onMouseMove(ev);
}
}
};
MarqueeSelection.prototype._onTouchStart = function (ev) {
var _this = this;
this._isTouch = true;
this._async.setTimeout(function () {
_this._isTouch = false;
}, 0);
};
MarqueeSelection.prototype._onPointerDown = function (ev) {
var _this = this;
if (ev.pointerType === 'touch') {
this._isTouch = true;
this._async.setTimeout(function () {
_this._isTouch = false;
}, 0);
}
};
MarqueeSelection.prototype._getRootRect = function () {
return {
left: this._rootRect.left,
top: this._rootRect.top + (this._scrollTop - this._scrollableSurface.scrollTop),
width: this._rootRect.width,
height: this._rootRect.height
};
};
MarqueeSelection.prototype._onAsyncMouseMove = function (ev) {
var _this = this;
this._async.requestAnimationFrame(function () {
_this._onMouseMove(ev);
});
ev.stopPropagation();
ev.preventDefault();
};
MarqueeSelection.prototype._onMouseMove = function (ev) {
if (!this._autoScroll) {
return;
}
if (ev.clientX !== undefined) {
this._lastMouseEvent = ev;
}
var rootRect = this._getRootRect();
var currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
if (!this._dragOrigin) {
this._dragOrigin = currentPoint;
}
if (ev.buttons !== undefined && ev.buttons === 0) {
this._onMouseUp(ev);
}
else {
if (this.state.dragRect || Utilities_1.getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {
if (!this.state.dragRect) {
var selection = this.props.selection;
this._preservedIndicies = selection && selection.getSelectedIndices && selection.getSelectedIndices();
}
// We need to constrain the current point to the rootRect boundaries.
var constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),
y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top))
} : {
x: this._lastMouseEvent.clientX - rootRect.left,
y: this._lastMouseEvent.clientY - rootRect.top
};
var dragRect = {
left: Math.min(this._dragOrigin.x, constrainedPoint.x),
top: Math.min(this._dragOrigin.y, constrainedPoint.y),
width: Math.abs(constrainedPoint.x - this._dragOrigin.x),
height: Math.abs(constrainedPoint.y - this._dragOrigin.y)
};
this._evaluateSelection(dragRect, rootRect);
this.setState({ dragRect: dragRect });
}
}
return false;
};
MarqueeSelection.prototype._onMouseUp = function (ev) {
this._events.off(window);
this._events.off(this._scrollableParent, 'scroll');
if (this._autoScroll) {
this._autoScroll.dispose();
}
this._autoScroll = this._dragOrigin = this._lastMouseEvent = this._selectedIndicies = this._itemRectCache = undefined;
if (this.state.dragRect) {
this.setState({
dragRect: undefined
});
ev.preventDefault();
ev.stopPropagation();
}
};
MarqueeSelection.prototype._isPointInRectangle = function (rectangle, point) {
return rectangle.top < point.y &&
rectangle.bottom > point.y &&
rectangle.left < point.x &&
rectangle.right > point.x;
};
/**
* We do not want to start the marquee if we're trying to marquee
* from within an existing marquee selection.
*/
MarqueeSelection.prototype._isDragStartInSelection = function (ev) {
var selection = this.props.selection;
if (selection && selection.getSelectedCount() === 0) {
return false;
}
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = Number(element.getAttribute('data-selection-index'));
if (selection.isIndexSelected(index)) {
var itemRect = element.getBoundingClientRect();
if (this._isPointInRectangle(itemRect, { x: ev.x, y: ev.y })) {
return true;
}
}
}
return false;
};
MarqueeSelection.prototype._isInSelectionToggle = function (ev) {
var element = ev.target;
while (element && element !== this.refs.root) {
if (element.getAttribute('data-selection-toggle') === 'true') {
return true;
}
element = element.parentElement;
}
return false;
};
MarqueeSelection.prototype._evaluateSelection = function (dragRect, rootRect) {
// Break early if we don't need to evaluate.
if (!dragRect) {
return;
}
var selection = this.props.selection;
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
if (!this._itemRectCache) {
this._itemRectCache = {};
}
// Stop change events, clear selection to re-populate.
selection.setChangeEvents(false);
selection.setAllSelected(false);
for (var i = 0; i < allElements.length; i++) {
var element = allElements[i];
var index = element.getAttribute('data-selection-index');
// Pull the memoized rectangle for the item, or the get the rect and memoize.
var itemRect = this._itemRectCache[index];
if (!itemRect) {
itemRect = element.getBoundingClientRect();
// Normalize the item rect to the dragRect coordinates.
itemRect = {
left: itemRect.left - rootRect.left,
top: itemRect.top - rootRect.top,
width: itemRect.width,
height: itemRect.height,
right: (itemRect.left - rootRect.left) + itemRect.width,
bottom: (itemRect.top - rootRect.top) + itemRect.height
};
if (itemRect.width > 0 && itemRect.height > 0) {
this._itemRectCache[index] = itemRect;
}
}
if (itemRect.top < (dragRect.top + dragRect.height) &&
itemRect.bottom > dragRect.top &&
itemRect.left < (dragRect.left + dragRect.width) &&
itemRect.right > dragRect.left) {
this._selectedIndicies[index] = true;
}
else {
delete this._selectedIndicies[index];
}
}
for (var index in this._selectedIndicies) {
if (this._selectedIndicies.hasOwnProperty(index)) {
selection.setIndexSelected(Number(index), true, false);
}
}
if (this._preservedIndicies) {
for (var _i = 0, _a = this._preservedIndicies; _i < _a.length; _i++) {
var index = _a[_i];
selection.setIndexSelected(index, true, false);
}
}
selection.setChangeEvents(true);
};
MarqueeSelection.defaultProps = {
rootTagName: 'div',
rootProps: {},
isEnabled: true
};
tslib_1.__decorate([
Utilities_1.autobind
], MarqueeSelection.prototype, "_onMouseDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], MarqueeSelection.prototype, "_onTouchStart", null);
tslib_1.__decorate([
Utilities_1.autobind
], MarqueeSelection.prototype, "_onPointerDown", null);
return MarqueeSelection;
}(Utilities_1.BaseComponent));
exports.MarqueeSelection = MarqueeSelection;
//# sourceMappingURL=MarqueeSelection.js.map