UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Microsoft 365.

225 lines • 14.1 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var tslib_1 = require("tslib"); var React = require("react"); var Utilities_1 = require("../../Utilities"); var index_1 = require("../../utilities/selection/index"); var GroupHeader_1 = require("./GroupHeader"); var GroupShowAll_1 = require("./GroupShowAll"); var GroupFooter_1 = require("./GroupFooter"); var List_1 = require("../../List"); 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 = React.createRef(); _this._list = React.createRef(); _this._subGroupRefs = {}; _this._droppingClassName = ''; _this._onRenderGroupHeader = function (props) { return React.createElement(GroupHeader_1.GroupHeader, tslib_1.__assign({}, props)); }; _this._onRenderGroupShowAll = function (props) { return React.createElement(GroupShowAll_1.GroupShowAll, tslib_1.__assign({}, props)); }; _this._onRenderGroupFooter = function (props) { return React.createElement(GroupFooter_1.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, group = _a.group, compact = _a.compact; var nestingDepth = subGroup.level ? subGroup.level + 1 : groupNestingDepth; return !subGroup || subGroup.count > 0 || (groupProps && groupProps.showEmptyGroups) ? (React.createElement(GroupedListSection, { ref: function (ref) { return (_this._subGroupRefs['subGroup_' + subGroupIndex] = ref); }, key: _this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: nestingDepth, 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, groups: group ? group.children : [], compact: compact })) : 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 }, updateDropState: _this._updateDroppingState, canDrag: dragDropEvents.canDrag, canDrop: dragDropEvents.canDrop, onDrop: dragDropEvents.onDrop, onDragStart: dragDropEvents.onDragStart, onDragEnter: dragDropEvents.onDragEnter, onDragLeave: dragDropEvents.onDragLeave, onDragEnd: dragDropEvents.onDragEnd, onDragOver: dragDropEvents.onDragOver, }; return options; }; /** * update groupIsDropping state based on the input value, which is used to change style during drag and drop * * @param newValue - new isDropping state value * @param event - the event trigger dropping state change which can be dragenter, dragleave etc */ _this._updateDroppingState = function (newIsDropping, event) { var isDropping = _this.state.isDropping; var _a = _this.props, dragDropEvents = _a.dragDropEvents, group = _a.group; if (isDropping !== newIsDropping) { if (isDropping) { if (dragDropEvents && dragDropEvents.onDragLeave) { dragDropEvents.onDragLeave(group, event); } } else { if (dragDropEvents && dragDropEvents.onDragEnter) { _this._droppingClassName = dragDropEvents.onDragEnter(group, event); } } _this.setState({ isDropping: newIsDropping }); } }; var selection = props.selection, group = props.group; Utilities_1.initializeComponentRef(_this); _this._id = Utilities_1.getId('GroupedListSection'); _this.state = { isDropping: false, isSelected: selection && group ? selection.isRangeSelected(group.startIndex, group.count) : false, }; _this._events = new Utilities_1.EventGroup(_this); 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, index_1.SELECTION_CHANGE, this._onSelectionChange); } }; GroupedListSection.prototype.componentWillUnmount = function () { this._events.dispose(); 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, groups = _a.groups, compact = _a.compact, _e = _a.listProps, listProps = _e === void 0 ? {} : _e; 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 version = listProps.version; var dividerProps = { group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, isSelected: isSelected, selected: isSelected, viewport: viewport, selectionMode: selectionMode, groups: groups, compact: compact, }; var ariaControlsProps = { groupedListId: this._id, ariaSetSize: groups ? groups.length : undefined, ariaPosInSet: groupIndex !== undefined ? groupIndex + 1 : undefined, }; var groupHeaderProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, headerProps), dividerProps), ariaControlsProps); var groupShowAllProps = tslib_1.__assign(tslib_1.__assign({}, showAllProps), dividerProps); var groupFooterProps = tslib_1.__assign(tslib_1.__assign({}, footerProps), dividerProps); var isDraggable = !!this.props.dragDropHelper && this._getGroupDragDropOptions().canDrag(group) && !!this.props.dragDropEvents.canDragGroups; return (React.createElement("div", tslib_1.__assign({ ref: this._root }, (isDraggable && { draggable: true }), { className: Utilities_1.css(groupedListClassNames && groupedListClassNames.group, this._getDroppingClassName()), role: "presentation" }), onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader), group && group.isCollapsed ? null : hasNestedGroups ? (React.createElement(List_1.List, { role: "presentation", ref: this._list, items: group ? group.children : [], onRenderCell: this._renderSubGroup, getItemCountForPage: this._returnOne, onShouldVirtualize: onShouldVirtualize, version: version, id: this._id })) : (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.pageRefs['subGroup_' + String(i)]; if (subGroup) { subGroup.forceListUpdate(); } } } } else { var subGroup = this._subGroupRefs['subGroup_' + String(0)]; if (subGroup) { subGroup.forceListUpdate(); } } }; GroupedListSection.prototype._onSelectionChange = function () { var _a = this.props, group = _a.group, selection = _a.selection; if (selection && group) { var isSelected = selection.isRangeSelected(group.startIndex, group.count); if (isSelected !== this.state.isSelected) { this.setState({ isSelected: isSelected }); } } }; GroupedListSection.prototype._onRenderGroupCell = function (onRenderCell, groupNestingDepth, group) { return function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex, group); }; }; GroupedListSection.prototype._onRenderGroup = function (renderCount) { var _a; var _b = this.props, group = _b.group, items = _b.items, onRenderCell = _b.onRenderCell, listProps = _b.listProps, groupNestingDepth = _b.groupNestingDepth, onShouldVirtualize = _b.onShouldVirtualize, groupProps = _b.groupProps; var count = group && !group.isShowingAll ? group.count : items.length; var startIndex = group ? group.startIndex : 0; return (React.createElement(List_1.List, tslib_1.__assign({ role: groupProps && groupProps.role ? groupProps.role : 'rowgroup', "aria-label": (_a = group) === null || _a === void 0 ? void 0 : _a.name, items: items, onRenderCell: this._onRenderGroupCell(onRenderCell, groupNestingDepth, group), ref: this._list, renderCount: Math.min(count, renderCount), startIndex: startIndex, onShouldVirtualize: onShouldVirtualize, id: this._id }, 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 Utilities_1.css(isDropping && this._droppingClassName, isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && groupedListClassNames && groupedListClassNames.groupIsDropping); }; return GroupedListSection; }(React.Component)); exports.GroupedListSection = GroupedListSection; //# sourceMappingURL=GroupedListSection.js.map