@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
153 lines • 7.83 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { TilesList } from '@uifabric/experiments/lib/TilesList';
import { Tile, ShimmerTile } from '@uifabric/experiments/lib/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, createDocumentItems, getTileCells, createShimmerGroups } from './ExampleHelpers';
import { ShimmerElementType as ElemType, ShimmerElementsGroup } from '@uifabric/experiments/lib/Shimmer';
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 = createDocumentItems(50 + Math.ceil(Math.random() * 6) * 50, offset);
offset += items.length;
groups.push(createGroup(items, 'document', i));
}
return groups;
}
var GROUPS = createGroups();
var SHIMMER_GROUPS = createShimmerGroups('document', 0);
var ITEMS = (_a = []).concat.apply(_a, GROUPS.map(function (group) { return group.items; }));
var TilesListType = 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 = getTileCells(SHIMMER_GROUPS, {
onRenderCell: _this._onRenderShimmerCell,
onRenderHeader: _this._onRenderShimmerHeader,
shimmerMode: true,
size: tileSize
});
}
else {
cells = 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, { role: "listitem", "aria-setsize": ITEMS.length, "aria-posinset": item.index, className: 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(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(ShimmerElementsGroup, { shimmerElements: [
{ type: ElemType.line, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
{ type: ElemType.gap, height: HEADER_VERTICAL_PADDING * 2 + HEADER_FONT_SIZE, widthInPixel: 0 }
] }));
};
_this._selection = new Selection({
getKey: function (item) { return item.key; },
onSelectionChanged: _this._onSelectionChange
});
_this._selection.setItems(ITEMS);
_this.state = {
isModalSelection: _this._selection.isModal(),
isDataLoaded: false,
cells: 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: getTileCells(SHIMMER_GROUPS, {
onRenderCell: this._onRenderShimmerCell,
onRenderHeader: this._onRenderShimmerHeader,
size: this.props.tileSize,
shimmerMode: true
})
});
}
else {
this.setState({
cells: 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, { label: "Enable Modal Selection", checked: this.state.isModalSelection, onChange: this._onToggleIsModalSelection, onText: "Modal", offText: "Normal" }),
React.createElement(Toggle, { label: "Load Data Switch", checked: this.state.isDataLoaded, onChange: this._onToggleIsDataLoaded, onText: "Loaded", offText: "Loading..." }),
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 TilesListDocumentExample;
}(React.Component));
export { TilesListDocumentExample };
var _a;
//# sourceMappingURL=TilesList.Document.Example.js.map