office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
243 lines (241 loc) • 11.4 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/MarqueeSelection", "@uifabric/example-app-base", "./DetailsListExample.scss"], function (require, exports, tslib_1, React, TextField_1, Toggle_1, DetailsList_1, Utilities_1, MarqueeSelection_1, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _items = [];
var fileIcons = [
{ 'name': 'accdb' },
{ 'name': 'csv' },
{ 'name': 'docx' },
{ 'name': 'dotx' },
{ 'name': 'mpp' },
{ 'name': 'mpt' },
{ 'name': 'odp' },
{ 'name': 'ods' },
{ 'name': 'odt' },
{ 'name': 'one' },
{ 'name': 'onepkg' },
{ 'name': 'onetoc' },
{ 'name': 'potx' },
{ 'name': 'ppsx' },
{ 'name': 'pptx' },
{ 'name': 'pub' },
{ 'name': 'vsdx' },
{ 'name': 'vssx' },
{ 'name': 'vstx' },
{ 'name': 'xls' },
{ 'name': 'xlsx' },
{ 'name': 'xltx' },
{ 'name': 'xsn' }
];
var DetailsListDocumentsExample = (function (_super) {
tslib_1.__extends(DetailsListDocumentsExample, _super);
function DetailsListDocumentsExample(props) {
var _this = _super.call(this, props) || this;
// Populate with items for demos.
if (_items.length === 0) {
for (var i = 0; i < 500; i++) {
var randomDate = _this._randomDate(new Date(2012, 0, 1), new Date());
var randomFileSize = _this._randomFileSize();
var randomFileType = _this._randomFileIcon();
var fileName = example_app_base_1.lorem(2).replace(/\W/g, '');
var userName = example_app_base_1.lorem(2).replace(/[^a-zA-Z ]/g, '');
fileName = fileName.charAt(0).toUpperCase() + fileName.slice(1).concat("." + randomFileType.docType);
userName = userName.split(' ').map(function (name) { return name.charAt(0).toUpperCase() + name.slice(1); }).join(' ');
_items.push({
name: fileName,
value: fileName,
iconName: randomFileType.url,
modifiedBy: userName,
dateModified: randomDate.dateFormatted,
dateModifiedValue: randomDate.value,
fileSize: randomFileSize.value,
fileSizeRaw: randomFileSize.rawSize
});
}
_items = _this._sortItems(_items, 'name');
}
var _columns = [
{
key: 'column1',
name: 'File Type',
headerClassName: 'DetailsListExample-header--FileIcon',
className: 'DetailsListExample-cell--FileIcon',
iconClassName: 'DetailsListExample-Header-FileTypeIcon',
iconName: 'Page',
isIconOnly: true,
fieldName: 'name',
minWidth: 16,
maxWidth: 16,
onRender: function (item) {
return (React.createElement("img", { src: item.iconName, className: 'DetailsListExample-documentIconImage' }));
}
},
{
key: 'column2',
name: 'Name',
fieldName: 'name',
minWidth: 210,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
onColumnClick: _this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column3',
name: 'Date Modified',
fieldName: 'dateModifiedValue',
minWidth: 70,
maxWidth: 90,
isResizable: true,
onColumnClick: _this._onColumnClick,
data: 'number',
onRender: function (item) {
return (React.createElement("span", { "data-is-focusable": true }, item.dateModified));
},
isPadded: true
},
{
key: 'column4',
name: 'Modified By',
fieldName: 'modifiedBy',
minWidth: 70,
maxWidth: 90,
isResizable: true,
data: 'string',
onColumnClick: _this._onColumnClick,
onRender: function (item) {
return (React.createElement("span", { "data-is-focusable": true }, item.modifiedBy));
},
isPadded: true
},
{
key: 'column5',
name: 'File Size',
fieldName: 'fileSizeRaw',
minWidth: 70,
maxWidth: 90,
isResizable: true,
data: 'number',
onColumnClick: _this._onColumnClick,
onRender: function (item) {
return (React.createElement("span", { "data-is-focusable": true }, item.fileSize));
}
},
];
_this._selection = new DetailsList_1.Selection({
onSelectionChanged: function () { return _this.setState({ selectionDetails: _this._getSelectionDetails() }); }
});
_this.state = {
items: _items,
columns: _columns,
selectionDetails: _this._getSelectionDetails(),
isCompactMode: false
};
return _this;
}
DetailsListDocumentsExample.prototype.render = function () {
var _this = this;
var _a = this.state, columns = _a.columns, isCompactMode = _a.isCompactMode, items = _a.items, selectionDetails = _a.selectionDetails;
return (React.createElement("div", null,
React.createElement(Toggle_1.Toggle, { label: 'Enable Compact Mode', checked: isCompactMode, onChanged: function (checked) { return _this.setState({ isCompactMode: checked }); }, onText: 'Compact', offText: 'Normal' }),
React.createElement("div", null, selectionDetails),
React.createElement(TextField_1.TextField, { label: 'Filter by name:', onChanged: function (text) { return _this.setState({ items: text ? _items.filter(function (i) { return i.name.toLowerCase().indexOf(text) > -1; }) : _items }); } }),
React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
React.createElement(DetailsList_1.DetailsList, { items: items, compact: isCompactMode, columns: columns, setKey: 'set', layoutMode: DetailsList_1.DetailsListLayoutMode.justified, isHeaderVisible: true, selection: this._selection, selectionPreservedOnEmptyClick: true, onItemInvoked: function (item) { return alert("Item invoked: " + item.name); } }))));
};
DetailsListDocumentsExample.prototype._randomDate = function (start, end) {
var date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
var dateData = {
value: date.valueOf(),
dateFormatted: date.toLocaleDateString()
};
return dateData;
};
DetailsListDocumentsExample.prototype._randomFileIcon = function () {
var docType = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name;
return {
docType: docType,
url: "https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/svg/" + docType + "_16x1.svg"
};
};
DetailsListDocumentsExample.prototype._randomFileSize = function () {
var fileSize = Math.floor(Math.random() * 100) + 30;
return {
value: fileSize + " KB",
rawSize: fileSize
};
};
DetailsListDocumentsExample.prototype._getSelectionDetails = function () {
var selectionCount = this._selection.getSelectedCount();
switch (selectionCount) {
case 0:
return 'No items selected';
case 1:
return '1 item selected: ' + this._selection.getSelection()[0].name;
default:
return selectionCount + " items selected";
}
};
DetailsListDocumentsExample.prototype._onColumnClick = function (ev, column) {
var _a = this.state, columns = _a.columns, items = _a.items;
var newItems = items.slice();
var newColumns = columns.slice();
var currColumn = newColumns.filter(function (currCol, idx) {
return column.key === currCol.key;
})[0];
newColumns.forEach(function (newCol) {
if (newCol === currColumn) {
currColumn.isSortedDescending = !currColumn.isSortedDescending;
currColumn.isSorted = true;
}
else {
newCol.isSorted = false;
newCol.isSortedDescending = true;
}
});
newItems = this._sortItems(newItems, currColumn.fieldName, currColumn.isSortedDescending);
this.setState({
columns: newColumns,
items: newItems
});
};
DetailsListDocumentsExample.prototype._sortItems = function (items, sortBy, descending) {
if (descending === void 0) { descending = false; }
if (descending) {
return items.sort(function (a, b) {
if (a[sortBy] < b[sortBy]) {
return 1;
}
if (a[sortBy] > b[sortBy]) {
return -1;
}
return 0;
});
}
else {
return items.sort(function (a, b) {
if (a[sortBy] < b[sortBy]) {
return -1;
}
if (a[sortBy] > b[sortBy]) {
return 1;
}
return 0;
});
}
};
return DetailsListDocumentsExample;
}(React.Component));
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListDocumentsExample.prototype, "_onColumnClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], DetailsListDocumentsExample.prototype, "_sortItems", null);
exports.DetailsListDocumentsExample = DetailsListDocumentsExample;
});
//# sourceMappingURL=DetailsList.Documents.Example.js.map