@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
143 lines • 6.63 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { createListItems } from '@uifabric/example-app-base';
import { DetailsList, buildColumns, SelectionMode, Toggle, DetailsRow } from 'office-ui-fabric-react';
import { Shimmer } from '@uifabric/experiments/lib/Shimmer';
import './Shimmer.Example.scss';
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 ITEMS_COUNT = 500;
var ITEMS_BATCH_SIZE = 10;
var PAGING_DELAY = 2500;
// tslint:disable-next-line:no-any
var _items;
var ShimmerApplicationExample = /** @class */ (function (_super) {
tslib_1.__extends(ShimmerApplicationExample, _super);
function ShimmerApplicationExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderMissingItem = function (index, rowProps) {
var isDataLoaded = _this.state.isDataLoaded;
isDataLoaded && _this._onDataMiss(index);
var shimmerRow = React.createElement(DetailsRow, tslib_1.__assign({}, rowProps, { shimmer: true }));
return React.createElement(Shimmer, { customElementsGroup: shimmerRow });
};
// Simulating asynchronus data loading each 2.5 sec
_this._onDataMiss = function (index) {
index = Math.floor(index / ITEMS_BATCH_SIZE) * ITEMS_BATCH_SIZE;
if (!_this._isFetchingItems) {
_this._isFetchingItems = true;
_this._lastTimeoutId = _this._async.setTimeout(function () {
_this._isFetchingItems = false;
// tslint:disable-next-line:no-any
var itemsCopy = [].concat(_this.state.items);
itemsCopy.splice.apply(itemsCopy, [index, ITEMS_BATCH_SIZE].concat(_items.slice(index, index + ITEMS_BATCH_SIZE)));
_this.setState({
items: itemsCopy
});
}, PAGING_DELAY);
}
};
_this._onLoadData = function (event, checked) {
if (!_items) {
_items = createListItems(ITEMS_COUNT);
_items.map(function (item) {
var randomFileType = _this._randomFileIcon();
item.thumbnail = randomFileType.url;
});
}
var items;
if (checked) {
items = _items.slice(0, ITEMS_BATCH_SIZE).concat(new Array(ITEMS_COUNT - ITEMS_BATCH_SIZE));
}
else {
items = new Array();
_this._async.clearTimeout(_this._lastTimeoutId);
}
_this.setState({
isDataLoaded: checked,
items: items
});
};
_this._onChangeModalSelection = function (event, checked) {
_this.setState({ isModalSelection: checked });
};
_this._onChangeCompactMode = function (event, checked) {
_this.setState({ isCompactMode: checked });
};
_this._onRenderItemColumn = function (item, index, column) {
if (column.key === 'thumbnail') {
return React.createElement("img", { src: item.thumbnail });
}
return item[column.key];
};
_this.state = {
items: new Array(),
columns: _buildColumns(),
isDataLoaded: false,
isModalSelection: false,
isCompactMode: false
};
return _this;
}
ShimmerApplicationExample.prototype.render = function () {
var _a = this.state, items = _a.items, columns = _a.columns, isDataLoaded = _a.isDataLoaded, isModalSelection = _a.isModalSelection, isCompactMode = _a.isCompactMode;
return (React.createElement("div", null,
React.createElement("div", { className: "shimmerExample-toggleButtons" },
React.createElement("div", { className: "shimmerExample-flexGroup" },
React.createElement(Toggle, { label: "Enable Modal Selection", checked: isModalSelection, onChange: this._onChangeModalSelection, onText: "Modal", offText: "Normal" }),
React.createElement(Toggle, { label: "Enable Compact Mode", checked: isCompactMode, onChange: this._onChangeCompactMode, onText: "Compact", offText: "Normal" }),
React.createElement(Toggle, { label: "Enable content loading", checked: isDataLoaded, onChange: this._onLoadData, onText: "Content", offText: "Shimmer" }))),
React.createElement("div", { className: "shimmerExample-application" },
React.createElement(DetailsList, { setKey: "items", items: items, columns: columns, compact: isCompactMode, selectionMode: this.state.isModalSelection ? SelectionMode.multiple : SelectionMode.none, onRenderItemColumn: this._onRenderItemColumn, onRenderMissingItem: this._onRenderMissingItem, enableShimmer: true, listProps: { renderedWindowsAhead: 0, renderedWindowsBehind: 0 } }))));
};
ShimmerApplicationExample.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"
};
};
return ShimmerApplicationExample;
}(BaseComponent));
export { ShimmerApplicationExample };
function _buildColumns() {
var _item = createListItems(1);
var columns = buildColumns(_item);
columns.forEach(function (column) {
if (column.key === 'thumbnail') {
column.name = 'FileType';
column.minWidth = 16;
column.maxWidth = 16;
column.isIconOnly = true;
column.iconName = 'Page';
}
});
return columns;
}
//# sourceMappingURL=Shimmer.Application.Example.js.map