@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example.js

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { FocusZone, Text } from 'office-ui-fabric-react';
import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
import { lorem } from '@uifabric/example-app-base';
var _folderItems = [];
var _fileItems = [];
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' }
];
/* tslint:disable:jsx-ban-props */
var ExampleFile = function (props) {
    return (React.createElement("div", { "data-is-focusable": "true", style: { display: 'flex', alignItems: 'center', height: 24, paddingLeft: 4 + props.indent * 18 } },
        React.createElement("img", { src: props.iconSource, style: { maxWidth: 16, padding: 6 } }),
        React.createElement(Text, { variant: "small" }, props.filename)));
};
/**
 * Example recursive folder structure with a random number of subfolders and items.
 */
var CollapsibleSectionFolder = /** @class */ (function (_super) {
    tslib_1.__extends(CollapsibleSectionFolder, _super);
    function CollapsibleSectionFolder(props) {
        var _this = _super.call(this, props) || this;
        _this._folders = [];
        _this._files = [];
        // Generate random folders
        // Generate random files
        var randomFileCount = Math.floor(Math.random() * 10) + 1;
        for (var i = 0; i < randomFileCount; i++) {
            var randomFile = Math.floor(Math.random() * _fileItems.length);
            _this._files.push(React.createElement(ExampleFile, { indent: (props.indent || 0) + 1, key: i, iconSource: _fileItems[randomFile].iconName, filename: _fileItems[randomFile].name }));
        }
        var randomFolderCount = Math.floor(Math.random() * 10) + 5;
        for (var i = 0; i < randomFolderCount; i++) {
            var randomFolder = Math.floor(Math.random() * _folderItems.length);
            _this._folders.push(React.createElement(CollapsibleSection, { key: i, defaultCollapsed: true, title: _folderItems[randomFolder], indent: _this.props.indent },
                React.createElement(CollapsibleSectionFolder, { indent: (_this.props.indent || 0) + 1 }),
                _this._files));
        }
        return _this;
    }
    CollapsibleSectionFolder.prototype.render = function () {
        return React.createElement("div", null, this._folders);
    };
    return CollapsibleSectionFolder;
}(React.Component));
var CollapsibleSectionRecursiveExample = /** @class */ (function (_super) {
    tslib_1.__extends(CollapsibleSectionRecursiveExample, _super);
    function CollapsibleSectionRecursiveExample(props) {
        var _this = _super.call(this, props) || this;
        //  Populate with items for demo.
        if (_fileItems.length === 0) {
            for (var i = 0; i < 500; i++) {
                var randomFolderName = lorem(2).replace(/\W/g, '');
                randomFolderName = randomFolderName.charAt(0).toUpperCase() + randomFolderName.slice(1);
                _folderItems.push(randomFolderName);
                var randomFileType = _this._randomFileIcon();
                var randomFileName = lorem(2).replace(/\W/g, '');
                randomFileName = randomFileName.charAt(0).toUpperCase() + randomFileName.slice(1).concat("." + randomFileType.docType);
                _fileItems.push({ name: randomFileName, iconName: randomFileType.url });
            }
        }
        return _this;
    }
    CollapsibleSectionRecursiveExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(FocusZone, null,
                React.createElement(CollapsibleSectionFolder, { indent: 0 }))));
    };
    CollapsibleSectionRecursiveExample.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 CollapsibleSectionRecursiveExample;
}(React.Component));
export { CollapsibleSectionRecursiveExample };
//# sourceMappingURL=CollapsibleSection.Recursive.Example.js.map