office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
197 lines • 12.1 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, createRef } from '../../Utilities';
import { SELECTION_CHANGE } from '../../utilities/selection/index';
import { GroupHeader } from './GroupHeader';
import { GroupShowAll } from './GroupShowAll';
import { GroupFooter } from './GroupFooter';
import { List } from '../../List';
import { assign, css } from '../../Utilities';
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var GroupedListSection = /** @class */ (function (_super) {
tslib_1.__extends(GroupedListSection, _super);
function GroupedListSection(props) {
var _this = _super.call(this, props) || this;
_this._root = createRef();
_this._list = createRef();
_this._onRenderGroupHeader = function (props) {
return React.createElement(GroupHeader, tslib_1.__assign({}, props));
};
_this._onRenderGroupShowAll = function (props) {
return React.createElement(GroupShowAll, tslib_1.__assign({}, props));
};
_this._onRenderGroupFooter = function (props) {
return React.createElement(GroupFooter, tslib_1.__assign({}, props));
};
_this._renderSubGroup = function (subGroup, subGroupIndex) {
var _a = _this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, groupProps = _a.groupProps, items = _a.items, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupShowAll = _a.onRenderGroupShowAll, onRenderGroupFooter = _a.onRenderGroupFooter, onShouldVirtualize = _a.onShouldVirtualize;
return !subGroup || subGroup.count > 0 || (groupProps && groupProps.showEmptyGroups) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: _this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, groupProps: groupProps, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, showAllProps: showAllProps, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupShowAll: onRenderGroupShowAll, onRenderGroupFooter: onRenderGroupFooter, onShouldVirtualize: onShouldVirtualize })) : null;
};
/**
* collect all the data we need to enable drag/drop for a group
*/
_this._getGroupDragDropOptions = function () {
var _a = _this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: -1,
context: { data: group, index: groupIndex, isGroup: true },
canDrag: function () { return false; },
canDrop: dragDropEvents.canDrop,
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)
*/
_this._updateDroppingState = function (newIsDropping, event) {
var isDropping = _this.state.isDropping;
var dragDropEvents = _this.props.dragDropEvents;
if (!isDropping) {
if (dragDropEvents && dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(event, undefined);
}
}
else {
if (dragDropEvents && dragDropEvents.onDragEnter) {
dragDropEvents.onDragEnter(event, undefined);
}
}
if (isDropping !== newIsDropping) {
_this.setState({ isDropping: newIsDropping });
}
};
var selection = props.selection, group = props.group;
_this.state = {
isDropping: false,
isSelected: selection && group ? selection.isRangeSelected(group.startIndex, group.count) : false
};
return _this;
}
GroupedListSection.prototype.componentDidMount = function () {
var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;
if (dragDropHelper && this._root.current) {
this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
}
if (selection) {
this._events.on(selection, SELECTION_CHANGE, this._onSelectionChange);
}
};
GroupedListSection.prototype.componentWillUnmount = function () {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
}
};
GroupedListSection.prototype.componentDidUpdate = function (previousProps) {
if (this.props.group !== previousProps.group ||
this.props.groupIndex !== previousProps.groupIndex ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper && this._root.current) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
}
}
};
GroupedListSection.prototype.render = function () {
var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupShowAll, onRenderGroupShowAll = _c === void 0 ? this._onRenderGroupShowAll : _c, _d = _a.onRenderGroupFooter, onRenderGroupFooter = _d === void 0 ? this._onRenderGroupFooter : _d, onShouldVirtualize = _a.onShouldVirtualize, groupedListClassNames = _a.groupedListClassNames;
var isSelected = this.state.isSelected;
var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
var isShowAllVisible = group &&
!group.children &&
!group.isCollapsed &&
!group.isShowingAll &&
(group.count > renderCount || group.hasMoreData);
var hasNestedGroups = group && group.children && group.children.length > 0;
var dividerProps = {
group: group,
groupIndex: groupIndex,
groupLevel: group ? group.level : 0,
isSelected: isSelected,
viewport: viewport,
selectionMode: selectionMode
};
var groupHeaderProps = assign({}, headerProps, dividerProps);
var groupShowAllProps = assign({}, showAllProps, dividerProps);
var groupFooterProps = assign({}, footerProps, dividerProps);
return (React.createElement("div", { ref: this._root, className: css(groupedListClassNames && groupedListClassNames.group, this._getDroppingClassName()), role: "presentation" },
onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),
group && group.isCollapsed ? null : hasNestedGroups ? (React.createElement(List, { ref: this._list, items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: this._returnOne, onShouldVirtualize: onShouldVirtualize })) : (this._onRenderGroup(renderCount)),
group && group.isCollapsed
? null
: isShowAllVisible && onRenderGroupShowAll(groupShowAllProps, this._onRenderGroupShowAll),
onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));
};
GroupedListSection.prototype.forceUpdate = function () {
_super.prototype.forceUpdate.call(this);
this.forceListUpdate();
};
GroupedListSection.prototype.forceListUpdate = function () {
var group = this.props.group;
if (this._list.current) {
this._list.current.forceUpdate();
if (group && group.children && group.children.length > 0) {
var subGroupCount = group.children.length;
for (var i = 0; i < subGroupCount; i++) {
var subGroup = this._list.current.refs['subGroup_' + String(i)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
}
}
else {
var subGroup = this.refs['subGroup_' + String(0)];
if (subGroup) {
subGroup.forceListUpdate();
}
}
};
GroupedListSection.prototype._onSelectionChange = function () {
var _a = this.props, group = _a.group, selection = _a.selection;
var isSelected = selection.isRangeSelected(group.startIndex, group.count);
if (isSelected !== this.state.isSelected) {
this.setState({ isSelected: isSelected });
}
};
GroupedListSection.prototype._onRenderGroupCell = function (onRenderCell, groupNestingDepth) {
return function (item, itemIndex) {
return onRenderCell(groupNestingDepth, item, itemIndex);
};
};
GroupedListSection.prototype._onRenderGroup = function (renderCount) {
var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth, onShouldVirtualize = _a.onShouldVirtualize;
var count = group ? group.count : items.length;
var startIndex = group ? group.startIndex : 0;
return (React.createElement(List, tslib_1.__assign({ items: items, onRenderCell: this._onRenderGroupCell(onRenderCell, groupNestingDepth), ref: this._list, renderCount: Math.min(count, renderCount), startIndex: startIndex, onShouldVirtualize: onShouldVirtualize }, listProps)));
};
GroupedListSection.prototype._returnOne = function () {
return 1;
};
GroupedListSection.prototype._getGroupKey = function (group, index) {
return 'group-' + (group && group.key ? group.key : String(group.level) + String(index));
};
/**
* 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 '';
*
*/
GroupedListSection.prototype._getDroppingClassName = function () {
var isDropping = this.state.isDropping;
var _a = this.props, group = _a.group, groupedListClassNames = _a.groupedListClassNames;
isDropping = !!(group && isDropping);
return css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && groupedListClassNames && groupedListClassNames.groupIsDropping);
};
return GroupedListSection;
}(BaseComponent));
export { GroupedListSection };
//# sourceMappingURL=GroupedListSection.js.map