@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
126 lines • 4.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var example_app_base_1 = require("@uifabric/example-app-base");
var PROBABILITIES = {
'0.95': 3,
'0.90': 1 / 3,
'0.80': 16 / 9,
'0.70': 9 / 16,
'0.40': 4 / 3,
'0.10': 3 / 4,
'0.00': 1
};
var ENTRIES = Object.keys(PROBABILITIES).map(function (key) { return ({
probability: Number(key),
aspectRatio: PROBABILITIES[key]
}); });
function createMediaItems(count, indexOffset) {
var items = [];
var _loop_1 = function (i) {
var seed = Math.random();
items.push({
key: "item-" + (indexOffset + i),
name: example_app_base_1.lorem(4),
index: indexOffset + i,
aspectRatio: ENTRIES.filter(function (entry) { return seed >= entry.probability; })[0].aspectRatio
});
};
for (var i = 0; i < count; i++) {
_loop_1(i);
}
return items;
}
exports.createMediaItems = createMediaItems;
function createDocumentItems(count, indexOffset) {
var items = [];
for (var i = 0; i < count; i++) {
items.push({
key: "item-" + (indexOffset + i),
name: example_app_base_1.lorem(4),
index: indexOffset + i,
aspectRatio: 1
});
}
return items;
}
exports.createDocumentItems = createDocumentItems;
function createGroup(items, type, index) {
return {
items: items,
index: index,
name: example_app_base_1.lorem(4),
type: type,
key: "group-" + index
};
}
exports.createGroup = createGroup;
function getTileCells(groups, _a) {
var onRenderCell = _a.onRenderCell, onRenderHeader = _a.onRenderHeader, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.shimmerMode, shimmerMode = _c === void 0 ? false : _c;
var items = [];
var isLargeSize = size === 'large' ? true : false;
var _loop_2 = function (group) {
var header = {
key: "header-" + group.key,
content: {
key: group.key,
aspectRatio: 1,
name: group.name,
index: group.index
},
onRender: onRenderHeader,
isPlaceholder: shimmerMode
};
items.push(header);
items.push({
items: group.items.map(function (item) {
return {
key: item.key,
content: item,
desiredSize: group.type === 'document'
? {
width: isLargeSize ? 176 : 138,
height: isLargeSize ? 171 : 135
}
: {
width: isLargeSize ? 171 * item.aspectRatio : 135 * item.aspectRatio,
height: isLargeSize ? 171 : 135
},
onRender: onRenderCell,
isPlaceholder: shimmerMode
};
}),
spacing: isLargeSize ? 8 : 12,
marginBottom: shimmerMode ? 0 : 40,
minRowHeight: isLargeSize ? 171 : 135,
mode: group.type === 'document' ? (size === 'small' ? 3 /* fillHorizontal */ : 1 /* stack */) : 2 /* fill */,
key: group.key,
isPlaceholder: shimmerMode
});
};
for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
var group = groups_1[_i];
_loop_2(group);
}
return items;
}
exports.getTileCells = getTileCells;
function createShimmerGroups(type, index) {
return [
{
items: [
{
key: "shimmerItem-" + index,
name: example_app_base_1.lorem(4),
index: index,
aspectRatio: 1
}
],
index: index,
name: example_app_base_1.lorem(4),
key: "shimmerGroup-" + index,
type: type
}
];
}
exports.createShimmerGroups = createShimmerGroups;
//# sourceMappingURL=ExampleHelpers.js.map