@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
127 lines • 6.35 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import { initializeComponentRef, classNamesFunction } from '../../../Utilities';
import { TileLayoutSizes } from '../Tile';
import { ShimmerGap, ShimmerElementsGroup, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
var ShimmerTileLayoutValues = {
largeSquareWidth: 96,
largeSquareHeight: 96,
largeNameWidth: 144,
largeNameHeight: 7,
largeActivityWidth: 96,
largeActivityHeight: 7,
smallSquareWidth: 62,
smallSquareHeight: 61,
smallNameWidth: 106,
smallNameHeight: 5,
smallActivityWidth: 62,
smallActivityHeight: 5,
};
var PLACEHOLDER_SIZES = {
small: {
squareWidth: ShimmerTileLayoutValues.smallSquareWidth,
squareHeight: ShimmerTileLayoutValues.smallSquareHeight,
nameWidth: ShimmerTileLayoutValues.smallNameWidth,
nameHeight: ShimmerTileLayoutValues.smallNameHeight,
activityWidth: ShimmerTileLayoutValues.smallActivityWidth,
activityHeight: ShimmerTileLayoutValues.smallActivityHeight,
},
large: {
squareWidth: ShimmerTileLayoutValues.largeSquareWidth,
squareHeight: ShimmerTileLayoutValues.largeSquareHeight,
nameWidth: ShimmerTileLayoutValues.largeNameWidth,
nameHeight: ShimmerTileLayoutValues.largeNameHeight,
activityWidth: ShimmerTileLayoutValues.largeActivityWidth,
activityHeight: ShimmerTileLayoutValues.largeActivityHeight,
},
};
var getClassNames = classNamesFunction();
var ShimmerTileBase = /** @class */ (function (_super) {
__extends(ShimmerTileBase, _super);
function ShimmerTileBase(props) {
var _this = _super.call(this, props) || this;
initializeComponentRef(_this);
return _this;
}
ShimmerTileBase.prototype.render = function () {
var _a = this.props, styles = _a.styles, _b = _a.contentSize, contentSize = _b === void 0 ? { width: 176, height: 171 } : _b, _c = _a.itemActivity, itemActivity = _c === void 0 ? true : _c, _d = _a.itemName, itemName = _d === void 0 ? true : _d, _e = _a.itemThumbnail, itemThumbnail = _e === void 0 ? true : _e, _f = _a.tileSize, tileSize = _f === void 0 ? 'large' : _f;
var _g = TileLayoutSizes[tileSize], nameplatePadding = _g.nameplatePadding, nameplateMargin = _g.nameplateMargin, nameplateActivityHeight = _g.nameplateActivityHeight, nameplateNameHeight = _g.nameplateNameHeight;
var _h = PLACEHOLDER_SIZES[tileSize], squareWidth = _h.squareWidth, squareHeight = _h.squareHeight, nameWidth = _h.nameWidth, nameHeight = _h.nameHeight, activityWidth = _h.activityWidth, activityHeight = _h.activityHeight;
var nameplateHeight = 0;
if (itemName || itemActivity) {
nameplateHeight += nameplatePadding * 2;
if (itemName) {
nameplateHeight += nameplateNameHeight;
}
if (itemActivity) {
nameplateHeight += nameplateActivityHeight + nameplateMargin;
}
}
this._classNames = getClassNames(styles, {});
return (React.createElement("div", { className: this._classNames.root },
React.createElement(ShimmerGap, { width: contentSize.width, height: contentSize.height - squareHeight - nameplateHeight }),
React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ShimmerElementType.gap,
width: (contentSize.width - squareWidth) / 2,
height: squareHeight,
},
itemThumbnail
? {
type: ShimmerElementType.line,
width: squareWidth,
height: squareHeight,
}
: {
type: ShimmerElementType.gap,
width: squareWidth,
height: squareHeight,
},
{
type: ShimmerElementType.gap,
width: (contentSize.width - squareWidth) / 2,
height: squareHeight,
},
] }),
itemActivity || itemName ? (React.createElement("div", null,
React.createElement(ShimmerGap, { width: contentSize.width, height: nameplatePadding }),
itemName ? (React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ShimmerElementType.gap,
width: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight,
},
{
type: ShimmerElementType.line,
width: nameWidth,
height: nameHeight,
},
{
type: ShimmerElementType.gap,
width: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight,
},
] })) : null,
itemActivity ? (React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ShimmerElementType.gap,
width: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight,
},
{
type: ShimmerElementType.line,
width: activityWidth,
height: activityHeight,
},
{
type: ShimmerElementType.gap,
width: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight,
},
] })) : null,
React.createElement(ShimmerGap, { width: contentSize.width, height: nameplatePadding }))) : null));
};
return ShimmerTileBase;
}(React.Component));
export { ShimmerTileBase };
//# sourceMappingURL=ShimmerTile.base.js.map