office-ui-fabric-react/lib/components/DetailsList/examples/DetailsList.Shimmer.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';
import { lorem } from 'office-ui-fabric-react/lib/utilities/exampleData';
import './DetailsListExample.scss';
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 DetailsListShimmerExample = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListShimmerExample, _super);
    function DetailsListShimmerExample(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 = lorem(2).replace(/\W/g, '');
                var userName = 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
                });
            }
        }
        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,
                data: 'string',
                isPadded: true
            },
            {
                key: 'column3',
                name: 'Date Modified',
                fieldName: 'dateModifiedValue',
                minWidth: 70,
                maxWidth: 90,
                isResizable: true,
                data: 'number',
                onRender: function (item) {
                    return React.createElement("span", null, item.dateModified);
                },
                isPadded: true
            },
            {
                key: 'column4',
                name: 'Modified By',
                fieldName: 'modifiedBy',
                minWidth: 70,
                maxWidth: 90,
                isResizable: true,
                isCollapsable: true,
                data: 'string',
                onRender: function (item) {
                    return React.createElement("span", null, item.modifiedBy);
                },
                isPadded: true
            },
            {
                key: 'column5',
                name: 'File Size',
                fieldName: 'fileSizeRaw',
                minWidth: 70,
                maxWidth: 90,
                isResizable: true,
                isCollapsable: true,
                data: 'number',
                onRender: function (item) {
                    return React.createElement("span", null, item.fileSize);
                }
            }
        ];
        _this.state = {
            items: _items,
            columns: _columns
        };
        return _this;
    }
    DetailsListShimmerExample.prototype.render = function () {
        var _a = this.state, columns = _a.columns, items = _a.items;
        return (React.createElement(ShimmeredDetailsList, { shimmerLines: 15, enableShimmer: true, items: items, columns: columns, setKey: "set", layoutMode: DetailsListLayoutMode.justified, isHeaderVisible: true }));
    };
    DetailsListShimmerExample.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;
    };
    DetailsListShimmerExample.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"
        };
    };
    DetailsListShimmerExample.prototype._randomFileSize = function () {
        var fileSize = Math.floor(Math.random() * 100) + 30;
        return {
            value: fileSize + " KB",
            rawSize: fileSize
        };
    };
    return DetailsListShimmerExample;
}(React.Component));
export { DetailsListShimmerExample };
//# sourceMappingURL=DetailsList.Shimmer.Example.js.map