@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
76 lines • 4.82 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/TilesList", "../../../Tile", "office-ui-fabric-react/lib/Toggle", "office-ui-fabric-react/lib/Selection", "office-ui-fabric-react/lib/MarqueeSelection", "office-ui-fabric-react/lib/Styling", "./ExampleHelpers", "./TilesList.Example.scss"], function (require, exports, tslib_1, React, TilesList_1, Tile_1, Toggle_1, Selection_1, MarqueeSelection_1, Styling_1, ExampleHelpers_1, TilesListExampleStylesModule) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable-next-line:no-any
var TilesListExampleStyles = TilesListExampleStylesModule;
function createGroups() {
var offset = 0;
var groups = [];
for (var i = 0; i < 20; i++) {
var items = ExampleHelpers_1.createMediaItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
offset += items.length;
groups.push(ExampleHelpers_1.createGroup(items, 'media', i));
}
return groups;
}
var GROUPS = createGroups();
var ITEMS = (_a = []).concat.apply(_a, GROUPS.map(function (group) { return group.items; }));
var TilesListType = TilesList_1.TilesList;
var TilesListMediaExample = /** @class */ (function (_super) {
tslib_1.__extends(TilesListMediaExample, _super);
function TilesListMediaExample(props) {
var _this = _super.call(this, props) || this;
_this._onToggleIsModalSelection = function (event, checked) {
_this._selection.setModal(checked);
};
_this._onSelectionChange = function () {
_this.setState({
isModalSelection: _this._selection.isModal()
});
};
_this._onItemInvoked = function (item, index, event) {
event.stopPropagation();
event.preventDefault();
alert("Invoked item '" + item.name + "'");
};
_this._onRenderMediaCell = function (item, finalSize) {
var tile = (React.createElement(Tile_1.Tile, { role: "listitem", "aria-setsize": ITEMS.length, "aria-posinset": item.index, contentSize: finalSize, className: Styling_1.AnimationClassNames.fadeIn400, selection: _this._selection, selectionIndex: item.index, invokeSelection: true, background: React.createElement("span", null) // Placeholder
, showBackgroundFrame: true, itemName: item.name, itemActivity: item.key }));
var _a = Tile_1.getTileLayout(tile).backgroundSize, backgroundSize = _a === void 0 ? { width: 0, height: 0 } : _a;
return Tile_1.renderTileWithLayout(tile, {
background: (React.createElement("img", { className: TilesListExampleStyles.tileImage, src: "//placehold.it/" + Math.round(backgroundSize.width) + "x" + Math.round(backgroundSize.height) }))
});
};
_this._onRenderHeader = function (item) {
return (React.createElement("div", { role: "presentation" },
React.createElement("h3", null, item.name)));
};
_this._selection = new Selection_1.Selection({
getKey: function (item) { return item.key; },
onSelectionChanged: _this._onSelectionChange
});
_this._selection.setItems(ITEMS);
_this.state = {
isModalSelection: _this._selection.isModal(),
cells: ExampleHelpers_1.getTileCells(GROUPS, {
onRenderCell: _this._onRenderMediaCell,
onRenderHeader: _this._onRenderHeader
})
};
return _this;
}
TilesListMediaExample.prototype.render = function () {
return (
// tslint:disable-next-line:jsx-ban-props
React.createElement("div", { style: { padding: '4px' } },
React.createElement(Toggle_1.Toggle, { label: "Enable Modal Selection", checked: this.state.isModalSelection, onChange: this._onToggleIsModalSelection, onText: "Modal", offText: "Normal" }),
React.createElement(MarqueeSelection_1.MarqueeSelection, { selection: this._selection },
React.createElement(Selection_1.SelectionZone, { selection: this._selection, onItemInvoked: this._onItemInvoked, enterModalOnTouch: true },
React.createElement(TilesListType, { role: "list", items: this.state.cells })))));
};
return TilesListMediaExample;
}(React.Component));
exports.TilesListMediaExample = TilesListMediaExample;
var _a;
});
//# sourceMappingURL=TilesList.Media.Example.js.map