@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
96 lines • 5.17 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction } from '../../../Utilities';
import { ShimmerElementType, ShimmerElementVerticalAlign, ShimmerElementsDefaultHeights } from '../Shimmer.types';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';
var getClassNames = classNamesFunction();
var ShimmerElementsGroupBase = /** @class */ (function (_super) {
tslib_1.__extends(ShimmerElementsGroupBase, _super);
function ShimmerElementsGroupBase(props) {
var _this = _super.call(this, props) || this;
_this._getRenderedElements = function (shimmerElements, rowHeight) {
var renderedElements = shimmerElements ? (shimmerElements.map(function (elem, index) {
var type = elem.type, filteredElem = tslib_1.__rest(elem, ["type"]);
switch (elem.type) {
case ShimmerElementType.circle:
return React.createElement(ShimmerCircle, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) }));
case ShimmerElementType.gap:
return React.createElement(ShimmerGap, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) }));
case ShimmerElementType.line:
return React.createElement(ShimmerLine, tslib_1.__assign({ key: index }, filteredElem, { borderStyle: _this._getBorderStyles(elem, rowHeight) }));
}
})) : (React.createElement(ShimmerLine, { height: ShimmerElementsDefaultHeights.line }));
return renderedElements;
};
_this._getBorderStyles = function (elem, rowHeight) {
var elemHeight = elem.height;
var dif = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
var borderStyle;
if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) {
borderStyle = {
borderBottomWidth: (dif ? Math.floor(dif / 2) : 0) + "px",
borderTopWidth: (dif ? Math.ceil(dif / 2) : 0) + "px"
};
}
else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.top) {
borderStyle = {
borderBottomWidth: (dif ? dif : 0) + "px",
borderTopWidth: "0px"
};
}
else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.bottom) {
borderStyle = {
borderBottomWidth: "0px",
borderTopWidth: (dif ? dif : 0) + "px"
};
}
return borderStyle;
};
/**
* User should not worry to provide which of the elements is the highest, we do the calculation for him.
* Plus if user forgot to specify the height we assign their defaults.
*/
_this._findMaxElementHeight = function (elements) {
var itemsDefaulted = elements.map(function (elem) {
switch (elem.type) {
case ShimmerElementType.circle:
if (!elem.height) {
elem.height = ShimmerElementsDefaultHeights.circle;
}
case ShimmerElementType.line:
if (!elem.height) {
elem.height = ShimmerElementsDefaultHeights.line;
}
case ShimmerElementType.gap:
if (!elem.height) {
elem.height = ShimmerElementsDefaultHeights.gap;
}
}
return elem;
});
var rowHeight = itemsDefaulted.reduce(function (acc, next) {
return next.height ? (next.height > acc ? next.height : acc) : acc;
}, 0);
return rowHeight;
};
return _this;
}
ShimmerElementsGroupBase.prototype.render = function () {
var _a = this.props, styles = _a.styles, width = _a.width, shimmerElements = _a.shimmerElements, rowHeight = _a.rowHeight, flexWrap = _a.flexWrap, theme = _a.theme;
this._classNames = getClassNames(styles, {
theme: theme,
flexWrap: flexWrap,
width: width
});
var height = rowHeight ? rowHeight : this._findMaxElementHeight(shimmerElements ? shimmerElements : []);
return React.createElement("div", { className: this._classNames.root }, this._getRenderedElements(shimmerElements, height));
};
ShimmerElementsGroupBase.defaultProps = {
flexWrap: false
};
return ShimmerElementsGroupBase;
}(BaseComponent));
export { ShimmerElementsGroupBase };
//# sourceMappingURL=ShimmerElementsGroup.base.js.map