office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
108 lines • 5.19 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { classNamesFunction } from '../../../Utilities';
import { ShimmerElementType, ShimmerElementsDefaultHeights } from '../Shimmer.types';
import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
import { ShimmerCircle } from '../ShimmerCircle/ShimmerCircle';
var getClassNames = classNamesFunction();
/**
* {@docCategory Shimmer}
*/
export var ShimmerElementsGroupBase = function (props) {
var styles = props.styles, _a = props.width, width = _a === void 0 ? 'auto' : _a, shimmerElements = props.shimmerElements, _b = props.rowHeight, rowHeight = _b === void 0 ? findMaxElementHeight(shimmerElements || []) : _b, _c = props.flexWrap, flexWrap = _c === void 0 ? false : _c, theme = props.theme, backgroundColor = props.backgroundColor;
var classNames = getClassNames(styles, {
theme: theme,
flexWrap: flexWrap
});
return (React.createElement("div", { style: { width: width }, className: classNames.root }, getRenderedElements(shimmerElements, backgroundColor, rowHeight)));
};
function getRenderedElements(shimmerElements, backgroundColor, rowHeight) {
var renderedElements = shimmerElements ? (shimmerElements.map(function (element, index) {
var type = element.type, filteredElem = tslib_1.__rest(element, ["type"]);
switch (element.type) {
case ShimmerElementType.circle:
return React.createElement(ShimmerCircle, tslib_1.__assign({ key: index }, filteredElem, { styles: getElementStyles(element, backgroundColor, rowHeight) }));
case ShimmerElementType.gap:
return React.createElement(ShimmerGap, tslib_1.__assign({ key: index }, filteredElem, { styles: getElementStyles(element, backgroundColor, rowHeight) }));
case ShimmerElementType.line:
return React.createElement(ShimmerLine, tslib_1.__assign({ key: index }, filteredElem, { styles: getElementStyles(element, backgroundColor, rowHeight) }));
}
})) : (React.createElement(ShimmerLine, { height: ShimmerElementsDefaultHeights.line }));
return renderedElements;
}
function getElementStyles(element, backgroundColor, rowHeight) {
var verticalAlign = element.verticalAlign, type = element.type, elementHeight = element.height;
var dif = rowHeight && elementHeight ? rowHeight - elementHeight : 0;
var borderStyle;
if (!verticalAlign || verticalAlign === 'center') {
borderStyle = {
borderBottomWidth: (dif ? Math.floor(dif / 2) : 0) + "px",
borderTopWidth: (dif ? Math.ceil(dif / 2) : 0) + "px"
};
}
else if (verticalAlign && verticalAlign === 'top') {
borderStyle = {
borderBottomWidth: dif + "px",
borderTopWidth: "0px"
};
}
else if (verticalAlign && verticalAlign === 'bottom') {
borderStyle = {
borderBottomWidth: "0px",
borderTopWidth: dif + "px"
};
}
if (backgroundColor) {
switch (type) {
case ShimmerElementType.circle:
return {
root: tslib_1.__assign({}, borderStyle, { borderColor: backgroundColor }),
svg: { fill: backgroundColor }
};
case ShimmerElementType.gap:
return {
root: tslib_1.__assign({}, borderStyle, { borderColor: backgroundColor, backgroundColor: backgroundColor })
};
case ShimmerElementType.line:
return {
root: tslib_1.__assign({}, borderStyle, { borderColor: backgroundColor }),
topLeftCorner: { fill: backgroundColor },
topRightCorner: { fill: backgroundColor },
bottomLeftCorner: { fill: backgroundColor },
bottomRightCorner: { fill: backgroundColor }
};
}
}
return {
root: borderStyle
};
}
/**
* User should not worry to provide which of the elements is the highest so we do the calculation for him.
* Plus if user forgot to specify the height we assign their defaults.
*/
function findMaxElementHeight(shimmerElements) {
var shimmerElementsDefaulted = shimmerElements.map(function (element) {
switch (element.type) {
case ShimmerElementType.circle:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.circle;
}
case ShimmerElementType.line:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.line;
}
case ShimmerElementType.gap:
if (!element.height) {
element.height = ShimmerElementsDefaultHeights.gap;
}
}
return element;
});
var rowHeight = shimmerElementsDefaulted.reduce(function (acc, next) {
return next.height ? (next.height > acc ? next.height : acc) : acc;
}, 0);
return rowHeight;
}
//# sourceMappingURL=ShimmerElementsGroup.base.js.map