@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
82 lines • 4.46 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { TilesList } from '@uifabric/experiments/lib/TilesList';
import { Tile, getTileLayout, renderTileWithLayout } from '../../../Tile';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
import { createGroup, createMediaItems, getTileCells } from './ExampleHelpers';
import * as TilesListExampleStylesModule from './TilesList.Example.scss';
// 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 = createMediaItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
offset += items.length;
groups.push(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;
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, { role: "listitem", "aria-setsize": ITEMS.length, "aria-posinset": item.index, contentSize: finalSize, className: 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 = getTileLayout(tile).backgroundSize, backgroundSize = _a === void 0 ? { width: 0, height: 0 } : _a;
return 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({
getKey: function (item) { return item.key; },
onSelectionChanged: _this._onSelectionChange
});
_this._selection.setItems(ITEMS);
_this.state = {
isModalSelection: _this._selection.isModal(),
cells: 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, { label: "Enable Modal Selection", checked: this.state.isModalSelection, onChange: this._onToggleIsModalSelection, onText: "Modal", offText: "Normal" }),
React.createElement(MarqueeSelection, { selection: this._selection },
React.createElement(SelectionZone, { selection: this._selection, onItemInvoked: this._onItemInvoked, enterModalOnTouch: true },
React.createElement(TilesListType, { role: "list", items: this.state.cells })))));
};
return TilesListMediaExample;
}(React.Component));
export { TilesListMediaExample };
var _a;
//# sourceMappingURL=TilesList.Media.Example.js.map