office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
157 lines (156 loc) • 9.11 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
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;
};
define(["require", "exports", 'react', './GroupFooter', './GroupHeader', '../../List', '../../utilities/eventGroup/EventGroup', '../../utilities/css'], function (require, exports, React, GroupFooter_1, GroupHeader_1, List_1, EventGroup_1, css_1) {
"use strict";
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var Group = (function (_super) {
__extends(Group, _super);
function Group(props) {
_super.call(this, props);
this.state = {
isDropping: false
};
this._getGroupDragDropOptions = this._getGroupDragDropOptions.bind(this);
this._updateDroppingState = this._updateDroppingState.bind(this);
this._renderSubGroup = this._renderSubGroup.bind(this);
this._events = new EventGroup_1.EventGroup(this);
}
Group.prototype.componentDidMount = function () {
var dragDropHelper = this.props.dragDropHelper;
if (dragDropHelper) {
dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
}
};
Group.prototype.componentWillUnmount = function () {
this._events.dispose();
var dragDropHelper = this.props.dragDropHelper;
if (dragDropHelper) {
dragDropHelper.unsubscribe(this.refs.root, this._dragDropKey);
}
};
Group.prototype.render = function () {
var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode;
var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll && group.count > renderCount;
var hasNestedGroups = group && group.children && group.children.length > 0;
return (React.createElement("div", {ref: 'root', className: css_1.css('ms-GroupedList-group', this._getDroppingClassName())}, group && group.onRenderHeader ?
group.onRenderHeader(group) :
React.createElement(GroupHeader_1.GroupHeader, {group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, headerProps: headerProps, viewport: viewport, selectionMode: selectionMode, ref: 'header'}), group && group.isCollapsed ?
null :
(hasNestedGroups ?
(React.createElement(List_1.List, {ref: 'list', items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: function () { return 1; }})) :
this._onRenderGroup(renderCount)), group && group.onRenderFooter ?
group.onRenderFooter(group) :
(isFooterVisible &&
React.createElement(GroupFooter_1.GroupFooter, {group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, footerProps: footerProps, ref: 'footer'}))));
};
Group.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this.forceListUpdate();
};
Group.prototype.forceListUpdate = function () {
var group = this.props.group;
if (this.refs.list) {
this.refs.list.forceUpdate();
if (group && group.children && group.children.length > 0) {
var subGroupCount = group.children.length;
for (var i = 0; i < subGroupCount; i++) {
var subGroup = this.refs.list.refs['subGroup_' + String(i)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
}
}
else {
var subGroup = this.refs['subGroup_' + String(0)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
};
Group.prototype._onRenderGroup = function (renderCount) {
var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth;
var count = group ? group.count : items.length;
var startIndex = group ? group.startIndex : 0;
return (React.createElement(List_1.List, __assign({items: items, onRenderCell: function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex); }, ref: 'list', renderCount: Math.min(count, renderCount), startIndex: startIndex}, listProps)));
};
Group.prototype._renderSubGroup = function (subGroup, subGroupIndex) {
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, items = _a.items, headerProps = _a.headerProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport;
return (!subGroup || subGroup.count > 0) ? (React.createElement(Group, {ref: 'subGroup_' + subGroupIndex, key: this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, viewport: viewport})) : null;
};
Group.prototype._getGroupKey = function (group, groupIndex) {
return 'group-' + (group ?
group.key + '-' + group.count :
'');
};
/**
* collect all the data we need to enable drag/drop for a group
*/
Group.prototype._getGroupDragDropOptions = function () {
var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
this._dragDropKey = 'group-' + (group ? group.key : String(groupIndex));
var options = {
key: this._dragDropKey,
eventMap: eventsToRegister,
selectionIndex: -1,
context: { data: group, index: groupIndex, isGroup: true },
canDrag: function () { return false; },
canDrop: dragDropEvents.canDrop,
onDragStart: null,
updateDropState: this._updateDroppingState
};
return options;
};
/**
* update groupIsDropping state based on the input value, which is used to change style during drag and drop
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
Group.prototype._updateDroppingState = function (newIsDropping, event) {
var isDropping = this.state.isDropping;
var dragDropEvents = this.props.dragDropEvents;
if (!isDropping) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(event, null);
}
}
else {
if (dragDropEvents.onDragEnter) {
dragDropEvents.onDragEnter(event, null);
}
}
if (isDropping !== newIsDropping) {
this.setState({ isDropping: newIsDropping });
}
};
/**
* get the correct css class to reflect the dropping state for a given group
*
* If the group is the current drop target, return the default dropping class name
* Otherwise, return '';
*
*/
Group.prototype._getDroppingClassName = function () {
var isDropping = this.state.isDropping;
var group = this.props.group;
var droppingClass = group && isDropping ? DEFAULT_DROPPING_CSS_CLASS : '';
return droppingClass;
};
return Group;
}(React.Component));
exports.Group = Group;
});