synapse-react-client/dist/assets/skeletons/SkeletonTable.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonTable = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var Skeleton_1 = (0, tslib_1.__importDefault)(require("@material-ui/lab/Skeleton"));
var lodash_es_1 = require("lodash-es");
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
/**
 * Skeleton component designed to mimic a table with an arbitrary number of rows and columns.
 *
 * Implemented using CSS grid.
 */
var SkeletonTable = function (_a) {
    var _b = _a.numRows, numRows = _b === void 0 ? 5 : _b, _c = _a.numCols, numCols = _c === void 0 ? 2 : _c, rowHeight = _a.rowHeight, className = _a.className;
    var _d = (0, react_1.useState)([]), skeletons = _d[0], setSkeletons = _d[1];
    (0, react_1.useEffect)(function () {
        var elements = [];
        (0, lodash_es_1.times)(numRows * numCols, function (i) {
            elements.push(react_1.default.createElement(react_1.default.Fragment, { key: i },
                react_1.default.createElement(Skeleton_1.default, { height: rowHeight, width: getRandomInt(35, 75) + "%" })));
        });
        setSkeletons(elements);
    }, [numRows, numCols, rowHeight]);
    return (react_1.default.createElement("div", { className: className, style: { display: 'grid', gridTemplateColumns: "auto ".repeat(numCols) } }, skeletons));
};
exports.SkeletonTable = SkeletonTable;
//# sourceMappingURL=SkeletonTable.js.map