decentraland-ui
Version:
Decentraland's UI components and styles
46 lines (45 loc) • 3.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ROWS_PER_PAGE = void 0;
var react_1 = __importDefault(require("react"));
var Media_1 = require("../../../Media");
var Table_1 = require("../../../Table/Table");
var Loader_1 = require("../../../Loader/Loader");
var Pagination_1 = require("../../../Pagination/Pagination");
require("./TableContent.css");
var TABLE_SIBLINGS_RANGE_MOBILE = 0;
var TABLE_SIBLINGS_RANGE_DESKTOP = 1;
exports.ROWS_PER_PAGE = 10;
var TableContent = function (props) {
var empty = props.empty, data = props.data, isLoading = props.isLoading, totalPages = props.totalPages, _a = props.activePage, activePage = _a === void 0 ? 1 : _a, setPage = props.setPage, total = props.total, _b = props.rowsPerPage, rowsPerPage = _b === void 0 ? exports.ROWS_PER_PAGE : _b, _c = props.hasHeaders, hasHeaders = _c === void 0 ? false : _c, _d = props.customHeaders, customHeaders = _d === void 0 ? {} : _d, i18n = props.i18n;
var isMobile = (0, Media_1.useMobileMediaQuery)();
var attributes = data.length > 0 ? Object.keys(data[0]) : null;
var hasPagination = totalPages && totalPages > 1;
return (react_1.default.createElement("div", { className: "dui-table-content ".concat(!hasPagination ? 'dui-table-content--radius-ending' : '', " ").concat(!hasHeaders ? 'dui-table-content__headers--empty' : '') },
isLoading ? (react_1.default.createElement("div", { className: "dui-table-content__table--empty" },
react_1.default.createElement(Loader_1.Loader, { active: true, "data-testid": "loader" }))) : attributes ? (react_1.default.createElement(Table_1.Table, { basic: "very", "data-testid": "table-content" },
react_1.default.createElement(Table_1.Table.Body, { className: isLoading ? 'dui-table-content__table--loading' : '' },
react_1.default.createElement(Table_1.Table.Row, null, attributes.map(function (attr) { return (react_1.default.createElement(Table_1.Table.HeaderCell, { key: attr },
react_1.default.createElement("span", null, customHeaders[attr] ? customHeaders[attr] : attr))); })), data === null || data === void 0 ? void 0 :
data.map(function (data, index) { return (react_1.default.createElement(Table_1.Table.Row, { key: index }, attributes.map(function (attr) { return (react_1.default.createElement(Table_1.Table.Cell, { style: {
width: "".concat(100 / attributes.length, "%")
}, key: attr }, data[attr])); }))); })))) : (empty()),
hasPagination && total && props.activePage !== undefined ? (react_1.default.createElement("div", { className: "dui-table-content__pagination" }, "".concat(i18n.sortBy.showing, " ").concat((activePage - 1) * rowsPerPage + 1, "-").concat(Math.min(activePage * rowsPerPage, total), " ").concat(i18n.sortBy.of, " ").concat(total),
react_1.default.createElement(Pagination_1.Pagination, { siblingRange: isMobile
? TABLE_SIBLINGS_RANGE_MOBILE
: TABLE_SIBLINGS_RANGE_DESKTOP, activePage: activePage, totalPages: totalPages, onPageChange: function (_event, props) {
return setPage && setPage(+props.activePage);
}, firstItem: null, lastItem: null }))) : null));
};
TableContent.defaultProps = {
i18n: {
sortBy: {
showing: 'Showing',
of: 'of'
}
}
};
exports.default = react_1.default.memo(TableContent);