@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
101 lines • 5.35 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react", "@uifabric/experiments/lib/CollapsibleSection", "@uifabric/example-app-base"], function (require, exports, tslib_1, React, office_ui_fabric_react_1, CollapsibleSection_1, example_app_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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(office_ui_fabric_react_1.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_1.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 = example_app_base_1.lorem(2).replace(/\W/g, '');
randomFolderName = randomFolderName.charAt(0).toUpperCase() + randomFolderName.slice(1);
_folderItems.push(randomFolderName);
var randomFileType = _this._randomFileIcon();
var randomFileName = example_app_base_1.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(office_ui_fabric_react_1.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));
exports.CollapsibleSectionRecursiveExample = CollapsibleSectionRecursiveExample;
});
//# sourceMappingURL=CollapsibleSection.Recursive.Example.js.map