fastlion-amis
Version:
一种MIS页面生成工具
33 lines (32 loc) • 1.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Skeleton_1 = (0, tslib_1.__importDefault)(require("antd/lib/Skeleton"));
require("./TableSkeleton.scss");
var TableSkeleton = function () {
var wrapper = (0, react_1.useRef)(null);
var _a = (0, react_1.useState)(0), rows = _a[0], setRows = _a[1];
var skeletonList = new Array(3).fill(1).map(function (item, index) {
return react_1.default.createElement("div", { className: "table-skeleton-item", key: index },
react_1.default.createElement(Skeleton_1.default, { active: true, paragraph: { rows: rows, width: '100%' } }));
});
(0, react_1.useEffect)(function () {
var _a;
var wrapperHeight = (_a = wrapper.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
if (wrapperHeight) {
// 50:table-skeleton-wrapper的padding-top
// 40:.ant-skeleton-title的高度+margin
// 40:.ant-skeleton-paragraph的margin
var restHeight = wrapperHeight - 30 - 40 - 40;
// 31:每个灰色条+自己的margin
if (restHeight > 40) {
var rows_1 = Math.floor(restHeight / 41);
setRows(rows_1);
}
}
}, []);
return (react_1.default.createElement("div", { className: "table-skeleton-wrapper", ref: wrapper }, skeletonList));
};
exports.default = TableSkeleton;
//# sourceMappingURL=./renderers/Lion/common/TableSkeleton.js.map