@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
127 lines • 6.52 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction } from '../../../Utilities';
import { TileLayoutSizes } from '../Tile';
import { ShimmerGap } from '../../Shimmer/ShimmerGap/ShimmerGap';
import { ShimmerElementsGroup } from '../../Shimmer/ShimmerElementsGroup/ShimmerElementsGroup';
import { ShimmerElementType as ElemType } from '../../Shimmer/Shimmer.types';
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) {
tslib_1.__extends(ShimmerTileBase, _super);
function ShimmerTileBase(props) {
return _super.call(this, props) || 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, { widthInPixel: contentSize.width, height: contentSize.height - squareHeight - nameplateHeight }),
React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ElemType.gap,
widthInPixel: (contentSize.width - squareWidth) / 2,
height: squareHeight
},
itemThumbnail
? {
type: ElemType.line,
widthInPixel: squareWidth,
height: squareHeight
}
: {
type: ElemType.gap,
widthInPixel: squareWidth,
height: squareHeight
},
{
type: ElemType.gap,
widthInPixel: (contentSize.width - squareWidth) / 2,
height: squareHeight
}
] }),
itemActivity || itemName ? (React.createElement("div", null,
React.createElement(ShimmerGap, { widthInPixel: contentSize.width, height: nameplatePadding }),
itemName ? (React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ElemType.gap,
widthInPixel: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight
},
{
type: ElemType.line,
widthInPixel: nameWidth,
height: nameHeight
},
{
type: ElemType.gap,
widthInPixel: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight
}
] })) : null,
itemActivity ? (React.createElement(ShimmerElementsGroup, { shimmerElements: [
{
type: ElemType.gap,
widthInPixel: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight
},
{
type: ElemType.line,
widthInPixel: activityWidth,
height: activityHeight
},
{
type: ElemType.gap,
widthInPixel: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight
}
] })) : null,
React.createElement(ShimmerGap, { widthInPixel: contentSize.width, height: nameplatePadding }))) : null));
};
return ShimmerTileBase;
}(BaseComponent));
export { ShimmerTileBase };
//# sourceMappingURL=ShimmerTile.base.js.map