@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
147 lines • 8.57 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/TilesList", "@uifabric/experiments/lib/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", "@uifabric/experiments/lib/Shimmer"], function (require, exports, tslib_1, React, TilesList_1, Tile_1, Toggle_1, Selection_1, MarqueeSelection_1, Styling_1, ExampleHelpers_1, Shimmer_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var HEADER_VERTICAL_PADDING = 13;
var HEADER_FONT_SIZE = 18;
function createGroups() {
var offset = 0;
var groups = [];
for (var i = 0; i < 20; i++) {
var items = ExampleHelpers_1.createDocumentItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
offset += items.length;
groups.push(ExampleHelpers_1.createGroup(items, 'document', i));
}
return groups;
}
var GROUPS = createGroups();
var SHIMMER_GROUPS = ExampleHelpers_1.createShimmerGroups('document', 0);
var ITEMS = (_a = []).concat.apply(_a, GROUPS.map(function (group) { return group.items; }));
var TilesListType = TilesList_1.TilesList;
var TilesListDocumentExample = /** @class */ (function (_super) {
tslib_1.__extends(TilesListDocumentExample, _super);
function TilesListDocumentExample(props) {
var _this = _super.call(this, props) || this;
_this._onToggleIsModalSelection = function (event, checked) {
_this._selection.setModal(checked);
};
_this._onToggleIsDataLoaded = function (event, checked) {
var tileSize = _this.props.tileSize;
var isDataLoaded = _this.state.isDataLoaded;
var cells = _this.state.cells;
if (cells.length && !cells[0].isPlaceholder) {
cells = ExampleHelpers_1.getTileCells(SHIMMER_GROUPS, {
onRenderCell: _this._onRenderShimmerCell,
onRenderHeader: _this._onRenderShimmerHeader,
shimmerMode: true,
size: tileSize
});
}
else {
cells = ExampleHelpers_1.getTileCells(GROUPS, {
onRenderCell: _this._onRenderDocumentCell,
onRenderHeader: _this._onRenderHeader,
size: tileSize
});
}
_this.setState({
isDataLoaded: !isDataLoaded,
cells: cells
});
};
_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._onRenderDocumentCell = function (item) {
var tileSize = _this.props.tileSize;
var imgSize = tileSize === 'large' ? 64 : 48;
return (React.createElement(Tile_1.Tile, { role: "listitem", "aria-setsize": ITEMS.length, "aria-posinset": item.index, className: Styling_1.AnimationClassNames.fadeIn400, selection: _this._selection, selectionIndex: item.index, invokeSelection: true, foreground: React.createElement("img", { src: "https://spoprod-a.akamaihd.net/files/odsp-next-prod_2018-04-06_20180406.004/odsp-media/images/itemtypes/" + imgSize + "/docx.png", style: {
display: 'block',
width: imgSize + "px",
height: imgSize + "px",
margin: tileSize === 'large' ? '16px' : '7px'
} }), showForegroundFrame: true, itemName: item.name, itemActivity: item.key, tileSize: tileSize }));
};
_this._onRenderShimmerCell = function (item, finalSize) {
var tileSize = _this.props.tileSize;
return React.createElement(Tile_1.ShimmerTile, { contentSize: finalSize, itemName: true, itemActivity: true, itemThumbnail: true, tileSize: tileSize });
};
_this._onRenderHeader = function (item) {
return (React.createElement("div", { role: "presentation",
// tslint:disable-next-line:jsx-ban-props
style: {
padding: HEADER_VERTICAL_PADDING + "px 0",
fontSize: HEADER_FONT_SIZE + "px",
fontWeight: 700,
lineHeight: HEADER_FONT_SIZE + "px"
} }, item.name));
};
_this._onRenderShimmerHeader = function (item) {
return (React.createElement(Shimmer_1.ShimmerElementsGroup, { shimmerElements: [
{ type: Shimmer_1.ShimmerElementType.line, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
{ type: Shimmer_1.ShimmerElementType.gap, height: HEADER_VERTICAL_PADDING * 2 + HEADER_FONT_SIZE, widthInPixel: 0 }
] }));
};
_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(),
isDataLoaded: false,
cells: ExampleHelpers_1.getTileCells(SHIMMER_GROUPS, {
onRenderCell: _this._onRenderShimmerCell,
onRenderHeader: _this._onRenderShimmerHeader,
size: props.tileSize,
shimmerMode: true
})
};
return _this;
}
TilesListDocumentExample.prototype.componentDidUpdate = function (previousProps) {
var isDataLoaded = this.state.isDataLoaded;
if (this.props.tileSize !== previousProps.tileSize) {
if (!isDataLoaded) {
this.setState({
cells: ExampleHelpers_1.getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
size: this.props.tileSize,
shimmerMode: true
})
});
}
else {
this.setState({
cells: ExampleHelpers_1.getTileCells(GROUPS, {
onRenderCell: this._onRenderDocumentCell,
onRenderHeader: this._onRenderHeader,
size: this.props.tileSize
})
});
}
}
};
TilesListDocumentExample.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(Toggle_1.Toggle, { label: "Load Data Switch", checked: this.state.isDataLoaded, onChange: this._onToggleIsDataLoaded, onText: "Loaded", offText: "Loading..." }),
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 TilesListDocumentExample;
}(React.Component));
exports.TilesListDocumentExample = TilesListDocumentExample;
var _a;
});
//# sourceMappingURL=TilesList.Document.Example.js.map