@redocly/theme
Version:
Shared UI components lib
98 lines (97 loc) • 5.28 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogTableView = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableHeaderCell");
const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
const core_1 = require("../../../core");
const baseColumns = [
{
key: 'entity',
title: 'Entity',
render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
width: '3fr',
minWidth: '250px',
sortable: true,
sortKey: 'title',
},
{
key: 'type',
title: 'Type',
render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
width: '2fr',
minWidth: '120px',
sortable: true,
sortKey: 'type',
},
{
key: 'domains',
title: 'Domains',
render: (entity) => {
var _a;
return (react_1.default.createElement(CatalogDomainsCell_1.CatalogDomainsCell, { domains: ((_a = entity.domains) === null || _a === void 0 ? void 0 : _a.map((domain) => domain.title)) || [] }));
},
width: '2fr',
minWidth: '150px',
},
{
key: 'owners',
title: 'Owners',
render: (entity) => {
var _a;
return (react_1.default.createElement(CatalogOwnersCell_1.CatalogOwnersCell, { owners: ((_a = entity.owners) === null || _a === void 0 ? void 0 : _a.map((owner) => owner.title)) || [] }));
},
width: '2fr',
minWidth: '150px',
},
{
key: 'tags',
title: 'Tags',
render: (entity) => react_1.default.createElement(CatalogTagsCell_1.CatalogTagsCell, { entity: entity }),
width: '2fr',
minWidth: '120px',
},
];
const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
const tableContent = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
react_1.default.createElement(CatalogTableBody, null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style }, contentMinWidth != null ? (react_1.default.createElement(CatalogTableContentInner, { "$contentMinWidth": contentMinWidth }, tableContent)) : (react_1.default.createElement(CatalogTableScrollContent, null, tableContent))));
};
exports.CatalogTableView = CatalogTableView;
const CatalogTableWrapper = styled_components_1.default.div `
width: 100%;
border-bottom: 1px solid var(--catalog-table-border-color);
overflow-x: auto;
@media screen and (max-width: ${core_1.breakpoints.medium}) {
margin-top: 0;
}
`;
const CatalogTableScrollContent = styled_components_1.default.div `
min-width: min-content;
`;
const CatalogTableContentInner = styled_components_1.default.div `
min-width: ${({ $contentMinWidth }) => $contentMinWidth}px;
`;
const CatalogTableHeader = styled_components_1.default.div `
display: grid;
grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
.map((width, index) => columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width)
.join(' ')};
background: var(--catalog-table-header-bg-color);
font-weight: var(--catalog-table-header-font-weight);
border-radius: var(--border-radius) var(--border-radius) 0 0;
`;
const CatalogTableBody = styled_components_1.default.div `
min-width: min-content;
`;
//# sourceMappingURL=CatalogTableView.js.map