office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
102 lines • 6.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var interfaces_1 = require("../../utilities/selection/interfaces");
var DetailsList_1 = require("./DetailsList");
var Shimmer_1 = require("../../Shimmer");
var DetailsList_types_1 = require("./DetailsList.types");
var DetailsRow_styles_1 = require("./DetailsRow.styles");
var getRowClassNames = Utilities_1.classNamesFunction();
var getClassNames = Utilities_1.classNamesFunction();
var SHIMMER_INITIAL_ITEMS = 10;
var DEFAULT_SHIMMER_HEIGHT = 7;
var SHIMMER_LINE_VS_CELL_WIDTH_RATIO = 0.95;
// This values are matching values from ./DetailsRow.css
var DEFAULT_ROW_HEIGHT = 42;
var COMPACT_ROW_HEIGHT = 32;
var ShimmeredDetailsListBase = /** @class */ (function (_super) {
tslib_1.__extends(ShimmeredDetailsListBase, _super);
function ShimmeredDetailsListBase(props) {
var _this = _super.call(this, props) || this;
_this._onRenderShimmerPlaceholder = function (index, rowProps) {
var _a = _this.props, onRenderCustomPlaceholder = _a.onRenderCustomPlaceholder, compact = _a.compact;
var selectionMode = rowProps.selectionMode, checkboxVisibility = rowProps.checkboxVisibility;
var theme = _this.props.theme;
var showCheckbox = selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_types_1.CheckboxVisibility.hidden;
var rowStyleProps = tslib_1.__assign({}, rowProps, { theme: theme });
var rowClassNames = getRowClassNames(DetailsRow_styles_1.getStyles(rowStyleProps), {
theme: theme
});
var placeholderElements = onRenderCustomPlaceholder
? onRenderCustomPlaceholder()
: _this._renderDefaultShimmerPlaceholder(rowProps);
return (React.createElement("div", { className: Utilities_1.css(showCheckbox && rowClassNames.shimmerLeftBorder, !compact && rowClassNames.shimmerBottomBorder) },
React.createElement(Shimmer_1.Shimmer, { customElementsGroup: placeholderElements })));
};
_this._renderDefaultShimmerPlaceholder = function (rowProps) {
var columns = rowProps.columns, compact = rowProps.compact, _a = rowProps.cellStyleProps, cellStyleProps = _a === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _a;
var shimmerElementsRow = [];
var gapHeight = compact ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
columns.map(function (column, columnIdx) {
var shimmerElements = [];
var groupWidth = cellStyleProps.cellLeftPadding +
cellStyleProps.cellRightPadding +
column.calculatedWidth +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);
shimmerElements.push({
type: Shimmer_1.ShimmerElementType.gap,
width: cellStyleProps.cellLeftPadding,
height: gapHeight
});
if (column.isIconOnly) {
shimmerElements.push({
type: Shimmer_1.ShimmerElementType.line,
width: column.calculatedWidth,
height: column.calculatedWidth
});
shimmerElements.push({
type: Shimmer_1.ShimmerElementType.gap,
width: cellStyleProps.cellRightPadding,
height: gapHeight
});
}
else {
shimmerElements.push({
type: Shimmer_1.ShimmerElementType.line,
width: column.calculatedWidth * SHIMMER_LINE_VS_CELL_WIDTH_RATIO,
height: DEFAULT_SHIMMER_HEIGHT
});
shimmerElements.push({
type: Shimmer_1.ShimmerElementType.gap,
width: cellStyleProps.cellRightPadding +
(column.calculatedWidth - column.calculatedWidth * SHIMMER_LINE_VS_CELL_WIDTH_RATIO) +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),
height: gapHeight
});
}
shimmerElementsRow.push(React.createElement(Shimmer_1.ShimmerElementsGroup, { key: columnIdx, width: groupWidth + "px", shimmerElements: shimmerElements }));
});
// When resizing the window from narrow to wider, we need to cover the exposed Shimmer wave until the column resizing logic is done.
shimmerElementsRow.push(React.createElement(Shimmer_1.ShimmerElementsGroup, { key: 'endGap', width: '100%', shimmerElements: [{ type: Shimmer_1.ShimmerElementType.gap, width: '100%', height: gapHeight }] }));
return React.createElement("div", { style: { display: 'flex' } }, shimmerElementsRow);
};
_this._shimmerItems = props.shimmerLines ? new Array(props.shimmerLines) : new Array(SHIMMER_INITIAL_ITEMS);
return _this;
}
ShimmeredDetailsListBase.prototype.render = function () {
var _a = this.props, items = _a.items, listProps = _a.listProps, styles = _a.styles, theme = _a.theme, shimmerLines = _a.shimmerLines, onRenderCustomPlaceholder = _a.onRenderCustomPlaceholder, enableShimmer = _a.enableShimmer, detailsListProps = tslib_1.__rest(_a, ["items", "listProps", "styles", "theme", "shimmerLines", "onRenderCustomPlaceholder", "enableShimmer"]);
// Adds to the optional listProp classname a fading out overlay classname only when shimmer enabled.
var classNames = getClassNames(styles, {
theme: theme,
className: listProps && listProps.className,
enableShimmer: enableShimmer
});
var newListProps = tslib_1.__assign({}, listProps, { className: classNames.root });
return (React.createElement(DetailsList_1.DetailsList, tslib_1.__assign({}, detailsListProps, { enableShimmer: enableShimmer, items: enableShimmer ? this._shimmerItems : items, onRenderMissingItem: this._onRenderShimmerPlaceholder, listProps: newListProps })));
};
return ShimmeredDetailsListBase;
}(Utilities_1.BaseComponent));
exports.ShimmeredDetailsListBase = ShimmeredDetailsListBase;
//# sourceMappingURL=ShimmeredDetailsList.base.js.map