office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
525 lines • 26.5 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { ContextualMenu } from 'office-ui-fabric-react/lib/ContextualMenu';
import { CheckboxVisibility, ColumnActionsMode, ConstrainMode, DetailsList, DetailsListLayoutMode as LayoutMode, Selection, SelectionMode, buildColumns } from 'office-ui-fabric-react/lib/DetailsList';
import { createListItems, isGroupable } from 'office-ui-fabric-react/lib/utilities/exampleData';
import './DetailsList.Advanced.Example.scss';
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;
_this._onRenderMissingItem = function (index) {
_this._onDataMiss(index);
return null;
};
_this._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
});
};
_this._onToggleResizing = function () {
var _a = _this.state, items = _a.items, sortedColumnKey = _a.sortedColumnKey, isSortedDescending = _a.isSortedDescending;
var canResizeColumns = _this.state.canResizeColumns;
canResizeColumns = !canResizeColumns;
_this.setState({
canResizeColumns: canResizeColumns,
columns: _this._buildColumns(items, canResizeColumns, _this._onColumnClick, sortedColumnKey, isSortedDescending)
});
};
_this._onLayoutChanged = function (ev, menuItem) {
_this.setState({
layoutMode: menuItem.data
});
};
_this._onConstrainModeChanged = function (ev, menuItem) {
_this.setState({
constrainMode: menuItem.data
});
};
_this._onSelectionChanged = function (ev, menuItem) {
_this.setState({
selectionMode: menuItem.data
});
};
_this._onItemLimitChanged = function (ev, value) {
var newValue = parseInt(value, 10);
if (isNaN(newValue)) {
newValue = DEFAULT_ITEM_LIMIT;
}
_this.setState({
groupItemLimit: newValue
});
};
_this._getCommandItems = function () {
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',
text: 'Insert row',
iconProps: { iconName: 'Add' },
onClick: _this._onAddRow
},
{
key: 'deleteRow',
text: 'Delete row',
iconProps: { iconName: 'Delete' },
onClick: _this._onDeleteRow
},
{
key: 'configure',
text: 'Configure',
iconProps: { iconName: 'Settings' },
subMenuProps: {
items: [
{
key: 'resizing',
text: 'Allow column resizing',
canCheck: true,
checked: canResizeColumns,
onClick: _this._onToggleResizing
},
{
key: 'headerVisible',
text: 'Is header visible',
canCheck: true,
checked: isHeaderVisible,
onClick: function () { return _this.setState({ isHeaderVisible: !isHeaderVisible }); }
},
{
key: 'lazyload',
text: 'Simulate async loading',
canCheck: true,
checked: isLazyLoaded,
onClick: _this._onToggleLazyLoad
},
{
key: 'dash',
text: '-'
},
{
key: 'checkboxVisibility',
text: 'Checkbox visibility',
subMenuProps: {
items: [
{
key: 'checkboxVisibility.always',
text: 'Always',
canCheck: true,
isChecked: checkboxVisibility === CheckboxVisibility.always,
onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.always }); }
},
{
key: 'checkboxVisibility.onHover',
text: 'On hover',
canCheck: true,
isChecked: checkboxVisibility === CheckboxVisibility.onHover,
onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.onHover }); }
},
{
key: 'checkboxVisibility.hidden',
text: 'Hidden',
canCheck: true,
isChecked: checkboxVisibility === CheckboxVisibility.hidden,
onClick: function () { return _this.setState({ checkboxVisibility: CheckboxVisibility.hidden }); }
}
]
}
},
{
key: 'layoutMode',
text: 'Layout mode',
subMenuProps: {
items: [
{
key: LayoutMode[LayoutMode.fixedColumns],
text: 'Fixed columns',
canCheck: true,
checked: layoutMode === LayoutMode.fixedColumns,
onClick: _this._onLayoutChanged,
data: LayoutMode.fixedColumns
},
{
key: LayoutMode[LayoutMode.justified],
text: 'Justified columns',
canCheck: true,
checked: layoutMode === LayoutMode.justified,
onClick: _this._onLayoutChanged,
data: LayoutMode.justified
}
]
}
},
{
key: 'selectionMode',
text: 'Selection mode',
subMenuProps: {
items: [
{
key: SelectionMode[SelectionMode.none],
text: 'None',
canCheck: true,
checked: selectionMode === SelectionMode.none,
onClick: _this._onSelectionChanged,
data: SelectionMode.none
},
{
key: SelectionMode[SelectionMode.single],
text: 'Single select',
canCheck: true,
checked: selectionMode === SelectionMode.single,
onClick: _this._onSelectionChanged,
data: SelectionMode.single
},
{
key: SelectionMode[SelectionMode.multiple],
text: 'Multi select',
canCheck: true,
checked: selectionMode === SelectionMode.multiple,
onClick: _this._onSelectionChanged,
data: SelectionMode.multiple
}
]
}
},
{
key: 'constrainMode',
text: 'Constrain mode',
subMenuProps: {
items: [
{
key: ConstrainMode[ConstrainMode.unconstrained],
text: 'Unconstrained',
canCheck: true,
checked: constrainMode === ConstrainMode.unconstrained,
onClick: _this._onConstrainModeChanged,
data: ConstrainMode.unconstrained
},
{
key: ConstrainMode[ConstrainMode.horizontalConstrained],
text: 'Horizontal constrained',
canCheck: true,
checked: constrainMode === ConstrainMode.horizontalConstrained,
onClick: _this._onConstrainModeChanged,
data: ConstrainMode.horizontalConstrained
}
]
}
}
]
}
}
];
};
_this._onItemInvoked = function (item, index) {
console.log('Item invoked', item, index);
};
_this._onItemContextMenu = function (item, index, ev) {
var contextualMenuProps = {
target: ev.target,
items: [
{
key: 'text',
name: _this._selection.getSelectedCount() + " selected"
}
],
onDismiss: function () {
_this.setState({
contextualMenuProps: undefined
});
}
};
if (index > -1) {
_this.setState({
contextualMenuProps: contextualMenuProps
});
}
return false;
};
_this._onColumnClick = function (ev, column) {
if (column.columnActionsMode !== ColumnActionsMode.disabled) {
_this.setState({
contextualMenuProps: _this._getContextualMenuProps(ev, column)
});
}
};
_this._onColumnContextMenu = function (column, ev) {
if (column.columnActionsMode !== ColumnActionsMode.disabled) {
_this.setState({
contextualMenuProps: _this._getContextualMenuProps(ev, column)
});
}
};
_this._onContextualMenuDismissed = function () {
_this.setState({
contextualMenuProps: undefined
});
};
_this._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
});
};
_this._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) {
// ungroup
_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
});
}
};
_this._onAddRow = function () {
_this.setState({
items: createListItems(1).concat(_this.state.items)
});
};
_this._onDeleteRow = function () {
if (_this._selection.getSelectedCount() > 0) {
_this.setState(function (previousState) {
var items = [];
var previousItems = previousState.items;
for (var i = 0; i < previousItems.length; i++) {
if (!_this._selection.isIndexSelected(i)) {
items.push(previousItems[i]);
}
}
return {
items: items
};
});
}
else {
_this.setState({
items: _this.state.items.slice(1)
});
}
};
_this._onItemsSelectionChanged = function () {
_this.setState({
selectionCount: _this._selection.getSelectedCount()
});
};
if (!_items) {
_items = createListItems(ITEMS_COUNT);
}
_this._selection = new Selection({
onSelectionChanged: _this._onItemsSelectionChanged
});
_this._selection.setItems(_items, false);
_this.state = {
items: _items,
selectionCount: 0,
groups: undefined,
groupItemLimit: DEFAULT_ITEM_LIMIT,
layoutMode: LayoutMode.justified,
constrainMode: ConstrainMode.horizontalConstrained,
selectionMode: SelectionMode.multiple,
canResizeColumns: true,
checkboxVisibility: 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, { items: this._getCommandItems(), farItems: [{ key: 'count', text: this.state.selectionCount + " selected" }] }),
isGrouped ? React.createElement(TextField, { label: "Group Item Limit", onChange: this._onItemLimitChanged }) : null,
React.createElement(DetailsList, { setKey: "items", items: items, selection: this._selection, groups: groups, columns: columns, checkboxVisibility: checkboxVisibility, layoutMode: layoutMode, isHeaderVisible: isHeaderVisible, selectionMode: selectionMode, constrainMode: constrainMode, groupProps: groupProps, enterModalSelectionOnTouch: true, onItemInvoked: this._onItemInvoked, onItemContextMenu: this._onItemContextMenu, selectionZoneProps: {
selection: this._selection,
disableAutoSelectOnInputElements: true,
selectionMode: selectionMode
}, 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, 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._getContextualMenuProps = function (ev, column) {
var _this = this;
var items = [
{
key: 'aToZ',
name: 'A to Z',
iconProps: { iconName: 'SortUp' },
canCheck: true,
checked: column.isSorted && !column.isSortedDescending,
onClick: function () { return _this._onSortColumn(column.key, false); }
},
{
key: 'zToA',
name: 'Z to A',
iconProps: { iconName: 'SortDown' },
canCheck: true,
checked: column.isSorted && column.isSortedDescending,
onClick: function () { return _this._onSortColumn(column.key, true); }
}
];
if (isGroupable(column.key)) {
items.push({
key: 'groupBy',
name: 'Group By ' + column.name,
iconProps: { iconName: '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._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._buildColumns = function (items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, onColumnContextMenu) {
var columns = 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, { "data-selection-invoke": true }, item.name); };
}
else if (column.key === 'key') {
column.columnActionsMode = ColumnActionsMode.disabled;
column.onRender = function (item) { return (React.createElement(Link, { href: "https://microsoft.com", target: "_blank", rel: "noopener" }, item.key)); };
column.minWidth = 90;
column.maxWidth = 90;
}
});
return columns;
};
return DetailsListAdvancedExample;
}(React.Component));
export { DetailsListAdvancedExample };
//# sourceMappingURL=DetailsList.Advanced.Example.js.map