office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
523 lines • 28.8 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/CommandBar", "office-ui-fabric-react/lib/ContextualMenu", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/DetailsList", "@uifabric/example-app-base", "./DetailsList.Advanced.Example.scss"], function (require, exports, tslib_1, React, Link_1, TextField_1, CommandBar_1, ContextualMenu_1, Utilities_1, DetailsList_1, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DEFAULT_ITEM_LIMIT = 5;
var PAGING_SIZE = 10;
var PAGING_DELAY = 5000;
var ITEMS_COUNT = 5000;
var _items;
var DetailsListAdvancedExample = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListAdvancedExample, _super);
function DetailsListAdvancedExample(props) {
var _this = _super.call(this, props) || this;
if (!_items) {
_items = example_app_base_1.createListItems(ITEMS_COUNT);
}
_this._selection = new DetailsList_1.Selection();
_this._selection.setItems(_items, false);
_this.state = {
items: _items,
groups: undefined,
groupItemLimit: DEFAULT_ITEM_LIMIT,
layoutMode: DetailsList_1.DetailsListLayoutMode.justified,
constrainMode: DetailsList_1.ConstrainMode.horizontalConstrained,
selectionMode: DetailsList_1.SelectionMode.multiple,
canResizeColumns: true,
checkboxVisibility: DetailsList_1.CheckboxVisibility.onHover,
columns: _this._buildColumns(_items, true, _this._onColumnClick, '', undefined, undefined, _this._onColumnContextMenu),
contextualMenuProps: undefined,
sortedColumnKey: 'name',
isSortedDescending: false,
isLazyLoaded: false,
isHeaderVisible: true
};
return _this;
}
DetailsListAdvancedExample.prototype.render = function () {
var _a = this.state, checkboxVisibility = _a.checkboxVisibility, columns = _a.columns, constrainMode = _a.constrainMode, contextualMenuProps = _a.contextualMenuProps, groupItemLimit = _a.groupItemLimit, groups = _a.groups, isHeaderVisible = _a.isHeaderVisible, items = _a.items, layoutMode = _a.layoutMode, selectionMode = _a.selectionMode;
var isGrouped = groups && groups.length > 0;
var groupProps = {
getGroupItemLimit: function (group) {
if (group) {
return group.isShowingAll ? group.count : Math.min(group.count, groupItemLimit);
}
else {
return items.length;
}
},
footerProps: {
showAllLinkText: 'Show all'
}
};
return (React.createElement("div", { className: 'ms-DetailsListAdvancedExample' },
React.createElement(CommandBar_1.CommandBar, { items: this._getCommandItems() }),
(isGrouped) ?
React.createElement(TextField_1.TextField, { label: 'Group Item Limit', onChanged: this._onItemLimitChanged }) :
(null),
React.createElement(DetailsList_1.DetailsList, { ref: 'list', setKey: 'items', items: items, groups: groups, columns: columns, checkboxVisibility: checkboxVisibility, layoutMode: layoutMode, isHeaderVisible: isHeaderVisible, selectionMode: selectionMode, constrainMode: constrainMode, groupProps: groupProps, onItemInvoked: this._onItemInvoked, onItemContextMenu: this._onItemContextMenu, ariaLabelForListHeader: 'Column headers. Use menus to perform column operations like sort and filter', ariaLabelForSelectAllCheckbox: 'Toggle selection for all items', ariaLabelForSelectionColumn: 'Toggle selection', onRenderMissingItem: this._onRenderMissingItem }),
contextualMenuProps && (React.createElement(ContextualMenu_1.ContextualMenu, tslib_1.__assign({}, contextualMenuProps)))));
};
DetailsListAdvancedExample.prototype._onDataMiss = function (index) {
var _this = this;
index = Math.floor(index / PAGING_SIZE) * PAGING_SIZE;
if (!this._isFetchingItems) {
this._isFetchingItems = true;
setTimeout(function () {
_this._isFetchingItems = false;
var itemsCopy = [].concat(_this.state.items);
itemsCopy.splice.apply(itemsCopy, [index, PAGING_SIZE].concat(_items.slice(index, index + PAGING_SIZE)));
_this.setState({
items: itemsCopy
});
}, PAGING_DELAY);
}
};
DetailsListAdvancedExample.prototype._onRenderMissingItem = function (index) {
this._onDataMiss(index);
return null;
};
DetailsListAdvancedExample.prototype._onToggleLazyLoad = function () {
var isLazyLoaded = this.state.isLazyLoaded;
isLazyLoaded = !isLazyLoaded;
this.setState({
isLazyLoaded: isLazyLoaded,
items: isLazyLoaded ? _items.slice(0, PAGING_SIZE).concat(new Array(ITEMS_COUNT - PAGING_SIZE)) : _items
});
};
DetailsListAdvancedExample.prototype._onToggleResizing = function () {
var _a = this.state, items = _a.items, canResizeColumns = _a.canResizeColumns, sortedColumnKey = _a.sortedColumnKey, isSortedDescending = _a.isSortedDescending;
canResizeColumns = !canResizeColumns;
this.setState({
canResizeColumns: canResizeColumns,
columns: this._buildColumns(items, canResizeColumns, this._onColumnClick, sortedColumnKey, isSortedDescending)
});
};
DetailsListAdvancedExample.prototype._onLayoutChanged = function (ev, menuItem) {
this.setState({
layoutMode: menuItem.data
});
};
DetailsListAdvancedExample.prototype._onConstrainModeChanged = function (ev, menuItem) {
this.setState({
constrainMode: menuItem.data
});
};
DetailsListAdvancedExample.prototype._onSelectionChanged = function (ev, menuItem) {
this.setState({
selectionMode: menuItem.data
});
};
DetailsListAdvancedExample.prototype._onItemLimitChanged = function (value) {
var newValue = parseInt(value, 10);
if (isNaN(newValue)) {
newValue = DEFAULT_ITEM_LIMIT;
}
this.setState({
groupItemLimit: newValue
});
};
DetailsListAdvancedExample.prototype._getCommandItems = function () {
var _this = this;
var _a = this.state, canResizeColumns = _a.canResizeColumns, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, isHeaderVisible = _a.isHeaderVisible, isLazyLoaded = _a.isLazyLoaded, layoutMode = _a.layoutMode, selectionMode = _a.selectionMode;
return [
{
key: 'addRow',
name: 'Insert row',
icon: 'Add',
onClick: this._onAddRow
},
{
key: 'deleteRow',
name: 'Delete row',
icon: 'Delete',
onClick: this._onDeleteRow
},
{
key: 'configure',
name: 'Configure',
icon: 'Settings',
subMenuProps: {
items: [
{
key: 'resizing',
name: 'Allow column resizing',
canCheck: true,
checked: canResizeColumns,
onClick: this._onToggleResizing
},
{
key: 'headerVisible',
name: 'Is header visible',
canCheck: true,
checked: isHeaderVisible,
onClick: function () { return _this.setState({ isHeaderVisible: !isHeaderVisible }); }
},
{
key: 'lazyload',
name: 'Simulate async loading',
canCheck: true,
checked: isLazyLoaded,
onClick: this._onToggleLazyLoad
},
{
key: 'dash',
name: '-'
},
{
key: 'checkboxVisibility',
name: 'Checkbox visibility',
subMenuProps: {
items: [
{
key: 'checkboxVisibility.always',
name: 'Always',
canCheck: true,
isChecked: checkboxVisibility === DetailsList_1.CheckboxVisibility.always,
onClick: function () { return _this.setState({ checkboxVisibility: DetailsList_1.CheckboxVisibility.always }); }
},
{
key: 'checkboxVisibility.onHover',
name: 'On hover',
canCheck: true,
isChecked: checkboxVisibility === DetailsList_1.CheckboxVisibility.onHover,
onClick: function () { return _this.setState({ checkboxVisibility: DetailsList_1.CheckboxVisibility.onHover }); }
},
{
key: 'checkboxVisibility.hidden',
name: 'Hidden',
canCheck: true,
isChecked: checkboxVisibility === DetailsList_1.CheckboxVisibility.hidden,
onClick: function () { return _this.setState({ checkboxVisibility: DetailsList_1.CheckboxVisibility.hidden }); }
},
]
}
},
{
key: 'layoutMode',
name: 'Layout mode',
subMenuProps: {
items: [
{
key: DetailsList_1.DetailsListLayoutMode[DetailsList_1.DetailsListLayoutMode.fixedColumns],
name: 'Fixed columns',
canCheck: true,
checked: layoutMode === DetailsList_1.DetailsListLayoutMode.fixedColumns,
onClick: this._onLayoutChanged,
data: DetailsList_1.DetailsListLayoutMode.fixedColumns
},
{
key: DetailsList_1.DetailsListLayoutMode[DetailsList_1.DetailsListLayoutMode.justified],
name: 'Justified columns',
canCheck: true,
checked: layoutMode === DetailsList_1.DetailsListLayoutMode.justified,
onClick: this._onLayoutChanged,
data: DetailsList_1.DetailsListLayoutMode.justified
}
]
}
},
{
key: 'selectionMode',
name: 'Selection mode',
subMenuProps: {
items: [
{
key: DetailsList_1.SelectionMode[DetailsList_1.SelectionMode.none],
name: 'None',
canCheck: true,
checked: selectionMode === DetailsList_1.SelectionMode.none,
onClick: this._onSelectionChanged,
data: DetailsList_1.SelectionMode.none
},
{
key: DetailsList_1.SelectionMode[DetailsList_1.SelectionMode.single],
name: 'Single select',
canCheck: true,
checked: selectionMode === DetailsList_1.SelectionMode.single,
onClick: this._onSelectionChanged,
data: DetailsList_1.SelectionMode.single
},
{
key: DetailsList_1.SelectionMode[DetailsList_1.SelectionMode.multiple],
name: 'Multi select',
canCheck: true,
checked: selectionMode === DetailsList_1.SelectionMode.multiple,
onClick: this._onSelectionChanged,
data: DetailsList_1.SelectionMode.multiple
},
]
}
},
{
key: 'constrainMode',
name: 'Constrain mode',
subMenuProps: {
items: [
{
key: DetailsList_1.ConstrainMode[DetailsList_1.ConstrainMode.unconstrained],
name: 'Unconstrained',
canCheck: true,
checked: constrainMode === DetailsList_1.ConstrainMode.unconstrained,
onClick: this._onConstrainModeChanged,
data: DetailsList_1.ConstrainMode.unconstrained
},
{
key: DetailsList_1.ConstrainMode[DetailsList_1.ConstrainMode.horizontalConstrained],
name: 'Horizontal constrained',
canCheck: true,
checked: constrainMode === DetailsList_1.ConstrainMode.horizontalConstrained,
onClick: this._onConstrainModeChanged,
data: DetailsList_1.ConstrainMode.horizontalConstrained
}
]
}
}
]
}
}
];
};
DetailsListAdvancedExample.prototype._getContextualMenuProps = function (ev, column) {
var _this = this;
var items = [
{
key: 'aToZ',
name: 'A to Z',
icon: 'SortUp',
canCheck: true,
checked: column.isSorted && !column.isSortedDescending,
onClick: function () { return _this._onSortColumn(column.key, false); }
},
{
key: 'zToA',
name: 'Z to A',
icon: 'SortDown',
canCheck: true,
checked: column.isSorted && column.isSortedDescending,
onClick: function () { return _this._onSortColumn(column.key, true); }
}
];
if (example_app_base_1.isGroupable(column.key)) {
items.push({
key: 'groupBy',
name: 'Group By ' + column.name,
icon: 'GroupedDescending',
canCheck: true,
checked: column.isGrouped,
onClick: function () { return _this._onGroupByColumn(column); }
});
}
return {
items: items,
target: ev.currentTarget,
directionalHint: 4 /* bottomLeftEdge */,
gapSpace: 10,
isBeakVisible: true,
onDismiss: this._onContextualMenuDismissed
};
};
DetailsListAdvancedExample.prototype._onItemInvoked = function (item, index) {
console.log('Item invoked', item, index);
};
DetailsListAdvancedExample.prototype._onItemContextMenu = function (item, index, ev) {
if (ev.target.nodeName === 'A') {
return true;
}
console.log('Item context menu invoked', item, index);
};
DetailsListAdvancedExample.prototype._onColumnClick = function (ev, column) {
if (column.columnActionsMode !== DetailsList_1.ColumnActionsMode.disabled) {
this.setState({
contextualMenuProps: this._getContextualMenuProps(ev, column)
});
}
};
DetailsListAdvancedExample.prototype._onColumnContextMenu = function (column, ev) {
if (column.columnActionsMode !== DetailsList_1.ColumnActionsMode.disabled) {
this.setState({
contextualMenuProps: this._getContextualMenuProps(ev, column)
});
}
};
DetailsListAdvancedExample.prototype._onContextualMenuDismissed = function () {
this.setState({
contextualMenuProps: undefined
});
};
DetailsListAdvancedExample.prototype._onSortColumn = function (key, isSortedDescending) {
var sortedItems = _items.slice(0).sort(function (a, b) { return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1; });
this.setState({
items: sortedItems,
groups: undefined,
columns: this._buildColumns(sortedItems, true, this._onColumnClick, key, isSortedDescending, undefined, this._onColumnContextMenu),
isSortedDescending: isSortedDescending,
sortedColumnKey: key
});
};
DetailsListAdvancedExample.prototype._onGroupByColumn = function (column) {
var key = column.key, isGrouped = column.isGrouped;
var _a = this.state, sortedColumnKey = _a.sortedColumnKey, isSortedDescending = _a.isSortedDescending, groups = _a.groups, items = _a.items, columns = _a.columns;
if (isGrouped) {
this._onSortColumn(sortedColumnKey, !!isSortedDescending);
}
else {
var groupedItems = [];
var newGroups = null;
if (groups) {
newGroups = groups.concat([]);
groupedItems = this._groupByKey(newGroups, items, key);
}
else {
groupedItems = this._groupItems(items, key);
newGroups = this._getGroups(groupedItems, key);
}
var newColumns = columns;
newColumns.filter(function (matchColumn) { return matchColumn.key === key; }).forEach(function (groupedColumn) {
groupedColumn.isGrouped = true;
});
this.setState({
items: groupedItems,
columns: newColumns,
groups: newGroups
});
}
};
DetailsListAdvancedExample.prototype._groupByKey = function (groups, items, key) {
var _this = this;
var groupedItems = [];
if (groups) {
groups.forEach(function (group) {
if (group.children && group.children.length > 0) {
var childGroupedItems = _this._groupByKey(group.children, items, key);
groupedItems = groupedItems.concat(childGroupedItems);
}
else {
var itemsInGroup = items.slice(group.startIndex, group.startIndex + group.count);
var nextLevelGroupedItems = _this._groupItems(itemsInGroup, key);
groupedItems = groupedItems.concat(nextLevelGroupedItems);
group.children = _this._getGroups(nextLevelGroupedItems, key, group);
}
});
}
return groupedItems;
};
DetailsListAdvancedExample.prototype._groupItems = function (items, columnKey) {
return items.slice(0).sort(function (a, b) { return ((a[columnKey] < b[columnKey]) ? -1 : 1); });
};
DetailsListAdvancedExample.prototype._getGroups = function (groupedItems, key, parentGroup) {
var _this = this;
var separator = '-';
var groups = groupedItems.reduce(function (current, item, index) {
var currentGroup = current[current.length - 1];
if (!currentGroup || (_this._getLeafGroupKey(currentGroup.key, separator) !== item[key])) {
current.push({
key: (parentGroup ? parentGroup.key + separator : '') + item[key],
name: key + ': ' + item[key],
startIndex: parentGroup ? parentGroup.startIndex + index : index,
count: 1,
level: parentGroup ? parentGroup.level + 1 : 0
});
}
else {
currentGroup.count++;
}
return current;
}, []);
return groups;
};
DetailsListAdvancedExample.prototype._getLeafGroupKey = function (key, separator) {
var leafKey = key;
if (key.indexOf(separator) !== -1) {
var arrKeys = key.split(separator);
leafKey = arrKeys[arrKeys.length - 1];
}
return leafKey;
};
DetailsListAdvancedExample.prototype._onAddRow = function () {
this.setState({
items: example_app_base_1.createListItems(1).concat(this.state.items)
});
};
DetailsListAdvancedExample.prototype._onDeleteRow = function () {
this.setState({
items: this.state.items.slice(1)
});
};
DetailsListAdvancedExample.prototype._buildColumns = function (items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, onColumnContextMenu) {
var columns = DetailsList_1.buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey);
columns.forEach(function (column) {
column.onColumnContextMenu = onColumnContextMenu;
column.ariaLabel = "Operations for " + column.name;
if (column.key === 'thumbnail') {
column.iconName = 'Picture';
column.isIconOnly = true;
}
else if (column.key === 'description') {
column.isMultiline = true;
column.minWidth = 200;
}
else if (column.key === 'name') {
column.onRender = function (item) { return (React.createElement(Link_1.Link, { "data-selection-invoke": true }, item.name)); };
}
else if (column.key === 'key') {
column.columnActionsMode = DetailsList_1.ColumnActionsMode.disabled;
column.onRender = function (item) { return (React.createElement(Link_1.Link, { href: '#' }, item.key)); };
column.minWidth = 90;
column.maxWidth = 90;
}
});
return columns;
};
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onRenderMissingItem", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onToggleLazyLoad", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onToggleResizing", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onLayoutChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onConstrainModeChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onSelectionChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onItemLimitChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onItemInvoked", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onItemContextMenu", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onColumnClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onColumnContextMenu", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onContextualMenuDismissed", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onSortColumn", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onGroupByColumn", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onAddRow", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListAdvancedExample.prototype, "_onDeleteRow", null);
return DetailsListAdvancedExample;
}(React.Component));
exports.DetailsListAdvancedExample = DetailsListAdvancedExample;
});
//# sourceMappingURL=DetailsList.Advanced.Example.js.map